Mobilvenlig eller dø!

Pr. 21. april 2015 ændrer Google på algoritmerne således, at dit website bliver negativt påvirket af ikke at være optimeret til mobile enheder.

Det betyder i praksis, at et uhyggeligt antal virksomheder står med nogle gevaldige udfordringer i forhold til at blive klar til det nye reglement, som vil måle din hjemmesides mobil-venlighed på over 100 parametre.

Netop dét – at være mobilvenlig – er essentielt. Tidligt i 2014 så man for første gang flere søgninger på Google komme fra smartphones sammenlignet med søgninger fra computer. Siden da er der ikke kommet færre smartphone brugere til, og de både søger og køber direkte fra både smartphone og tablet.

Det er derfor nu du, som erhvervsdrivende, skal gribe knoglen og kontakte dit webbureau, såfremt din hjemmeside ikke er responsiv og automatisk tilpasser sig opløsningen på enheden hjemmesiden besøges fra, da konsekvenserne ellers vil være, at dit websites placering på Googles søgemaskine falder drastisk – hvis ikke helt og aldeles – på de søgninger der kommer fra de mobile enheder.

Baggrundsbillede med fuld bredde og højde i browseren

Vi kan med CSS få et billede til at vises med fuld bredde og højde i browseren, bag indholdet af hjemmesiden. Så slipper man for at baggrunden abrupt stopper, eller kopierer sig selv i det uendelige.

Se et eksempel her

Vi indsætter først et billede i toppen af vores kode (det er lige meget hvor, men vi vil gerne have det til at indlæse så tidligt som muligt ved pageload). Billedet får klassen “bg”:

<img src="../images/background.jpg" class="bg" />

Den følgende CSS kode ‘vrider’ billedet til den fulde browserbredde, uden at ændre på dimensionerne:

height: auto; /* Højden må ikke afvige fra billedets dimensioner - vis altid det samme format */
top: 0; /* Positioner billedet i toppen */
left: 0; /* Positioner også billedet helt til venstre*/
min-height: 100%; /* Minimumshøjden er billedets 'naturlige' højde */
min-width: 1024px; /* Minimumsbredde, så billedet ikke tvinges lavere */
position: fixed; /* Billedet forbliver stationært */
width: 100%; /* Bredden skal fylde hele browseren - med mindre denne er mindre end 1024 pixels, som defineret ovenfor  */
z-index: -1; /* Billedet skal være bagved andet indhold. Denne skal ændres hvis der er andre elementer med lavere z-akse indhold. */

God fornøjelse! 😀

Internet Explorer 7-specifik CSS

I stedet for at skulle indsætte kode til at indlæse en ny css-fil til IE7, plejer jeg at bruge dette lille trick:

Ved at sætte en stjerne (*) foran css-linjen, indlæses linjen kun af Internet Explorer 7.

Eksempel:
#wrapper {
width: 900px;
height: 450px;
margin: 10px auto 0px;
*margin: 15px auto 0px;
}

I ovenstående eksempel har vores element “wrapper” i IE7 5px mere luft for oven end i alle andre browsere. Husk at indsætte den nye linje med ‘*’ under linjen uden. Ellers vil browseren give wrapper’en 15px luft i toppen, og så overstyre med linjen under der siger 10px. CSS indlæses oppefra og ned 😉

Få CSS-linje til at bestemme mest med “!important”

Det kan være bøvlet at få et element i HTML til at makke ret med CSS’en. Specielt hvis vi er rigtig langt “inde” med definitionerne. Hvis vi fx vil have et specifikt menupunkt til at have en anden farve end de andre menupunkter, kunne brugen af “!important” være nødvendig (og at foretrække).

Eksempel:
I følgende eksempel har vi en linje CSS der definerer baggrundsfaven på menupunkterne
div.gk-menu > ul.level0 > li > a { color: #ffffff; }
Vi vil dog gerne have et specifikt menupunkt til at have en anden farve. I vores HTML står der at <a>-tagget har ID’et menu340, så vi skriver #menu340 { color: blue; }.
Men ak, der skete intet med menupunktet.

Problemet er at den øverste kode definerer “hårdere” end det vi lige har skrevet. Jo tættere vi definerer på målet, des vigtigere anser browseren koden. Og i øverste kode er vi helt ude i fjerde niveau. Vi skal altså enten skrive div.gk-menu > ul.level0 > li > a#menu340 { color: blue; }

ELLER

Vi indsætter da bare den lækre !important:

#menu340 { color: blue !important; }
Med det lille ord blev vores definition af #menu340 vigtigst!