30/09/2024
I en verden hvor smartphones og tablets dominerer internetbrugen, er det afgørende at din hjemmeside er tilgængelig og brugervenlig på mobile enheder. Desværre er mange websites endnu ikke optimeret til mobile brugere, hvilket resulterer i en frustrerende oplevelse med rodede layouts og ulæselig tekst. Dette kan føre til, at potentielle besøgende hurtigt forlader din side til fordel for en konkurrent. Denne artikel guider dig igennem en simpel proces til at give din hjemmeside et hurtigt mobil-makeover ved hjælp af en mobil-stylesheet.
Du tænker måske, at det er en overdrivelse, men virkeligheden er, at millioner af hjemmesider lider under dårlig mobiltilpasning. Dette skyldes ofte uvidenhed eller manglende vilje til at adressere problemet. Som mobilbruger kender du sikkert til kampen med at navigere på sider, der ikke er designet til små skærme. Mens nogle sider er en fornøjelse at besøge, er andre deciderede mareridt. En af de mest effektive og hurtige løsninger er at implementere en grundlæggende stylesheet specifikt til mobile enheder.
Forestil dig at din hjemmeside er en butik. Hvis indgangen er blokeret, vinduerne er beskidte, og varerne er kastet tilfældigt rundt, vil kunderne gå et andet sted hen. Det samme gælder for din hjemmeside på mobilen. Med en simpel CSS-fil kan du gøre en enorm forskel for dine besøgende.
### Behovet for mobiloptimering
Antallet af mobile internetbrugere vokser eksplosivt. Det er simpelthen mere bekvemt at have adgang til al den information, man har brug for, lige ved hånden. Desværre har mange websiteejere endnu ikke taget højde for deres mobile besøgende. Disse besøgende, der ofte er på farten, vil hurtigt forlade en side, der præsenterer et uoverskueligt og dårligt formateret layout. Du kender sikkert situationen: sider, der fungerer godt på mobilen, er en fornøjelse at bruge, mens sider, der ikke er optimeret, er en sand plage. Hvad indebærer denne optimering? For det første, hvis du kun gør én ting for dine mobile besøgende, så brug fem minutter på at implementere en grundlæggende stylesheet, der gør din side læselig på mobile enheder.
### Mobil-stylesheets til undsætning
Selvom du ikke foretager andre ændringer på din hjemmeside, så tilføj en alternativ stylesheet til mobile enheder. Seriøst. Du behøver ikke engang at inkludere specifikke styles – selve tilstedeværelsen af en mobil-specifik stylesheet vil tilsidesætte alle styles fra din skærm-stylesheet, og dermed simplificere din sides præsentation. At inkludere en mobil-specifik stylesheet er lige så nemt som at uploade en tom .css-fil og tilføje følgende kode til <head> sektionen af dine websider:
<link rel="stylesheet" href="http://ditdomæne.dk/mobile.css" type="text/css" media="handheld" />Nøglen her er media="handheld" attributten, som fortæller browsere at anvende den linkede stylesheet på alle mobile enheder. Denne metode er ikke perfekt, især taget i betragtning af vanskeligheden ved at teste på de millioner af forskellige mobile enheder, der findes. For eksempel vil Windows Mobile-browseren ikke anvende media="handheld" stylesheets, hvis en media="screen" stylesheet også er inkluderet. Dette er uheldigt, da stort set alle websites bruger en screen-media stylesheet til at style deres sider. Heldigvis er der en simpel, men effektiv løsning, der vil tvinge Windows Mobile-browsere til at anvende handheld-media stylesheets, når de er tilgængelige.
Tricket til at få Windows Mobile til at genkende handheld stylesheets er at kapitalisere værdien af media-attributten for skærm-stylesheeten:
<link rel="stylesheet" href="http://ditdomæne.dk/screen.css" type="text/css" media="Screen" /> <link rel="stylesheet" href="http://ditdomæne.dk/mobile.css" type="text/css" media="handheld" />Bemærk det store 'S' i "Screen"? Det er alt, der skal til for at få handheld stylesheets til at virke i Windows Mobile-browsere. Dette kaldes også "Capital-S Metoden".
### Beskyttelse mod dinosaurer (ældre browsere)
På dette tidspunkt bør du levere mindst to separate stylesheets, en til skærm-media og en anden til håndholdt-media. Hidtil, så godt, men vi skal tage højde for ældre browsere, der kan ignorere handheld-attributten og anvende mobil-styles på siden. Dette kan have en ødelæggende effekt på udseendet af din side i ældre browsere. For at forhindre dette, ønsker vi at indkapsle alle mobil-specifikke styles inden for en @media selector, som følger:
@media handheld { .selector-01 { padding: 0; margin: 0; } .selector-02 { padding: 0; margin: 0; } .selector-03 { padding: 0; margin: 0; } }Dette er blot en forholdsregel, der sigter mod at forhindre gamle browsere i at anvende dine mobil-styles på dine normale skærm-styles. Alle CSS-styles, der placeres i din handheld stylesheet, bør indkapsles og kvalificeres af @media handheld selectoren.
### Anvendelse af mobile styles
Nu hvor alt er sat op og klar, er det tid til at anvende nogle flotte mobile styles for at få dine sider til at se rigtig godt ud. Mængden af styling er naturligvis helt op til dig – du designer dine mobile sider så udpenslet eller minimalt, som du ønsker. Som nævnt vil du ved blot at inkludere den mobile stylesheet effektivt have neutraliseret alle fuld-skærms styles, du måtte have haft på plads. Så når du starter, vil du se noget lignende dette:
(Her ville normalt være et billede af en mobil enhed med et standardlayout)
Som du kan se, sammenlignet med de afskyelige eksempler vist ovenfor, kan den simple handling at inkludere en blank stylesheet tage din side fra "WTF!!!" til "FTW!!!" på et øjeblik. Men hvorfor stoppe der? Din side vises fint, skarpt og rent på mobile enheder, men der er et par grundlæggende forbedringer, der markant kan forbedre udseendet og følelsen af din mobile side. For eksempel er mobile browsere normalt ret små, så du vil maksimere hver pixel af den tilgængelige skærmplads. En måde at gøre dette på indebærer at eliminere unødvendige marginer og padding omkring <html> og <body> elementerne. Intet for ekstremt, måske en fin 3-pixel padding for at give indholdet lige nok pusterum. Mens vi er i gang, lad os sikre os, at vi har en ren hvid baggrund og en flot kontrasterende tekstfarve:
html, body { background: #fff; padding: 3px; color: #000; margin: 0; }Selvfølgelig er målet her at få dig til at tænke over, hvordan du kan tilpasse præsentationen af din side. Baggrundsfarver, tekstfarver og endda skrifttypestilarter er alle sjove ting at lege med. For at holde det simpelt, kan vi tilføje en simpel, sans-serif skrifttype med en passende skriftstørrelse og linjehøjde:
html, body { font: 12px/15px sans-serif; background: #fff; padding: 3px; color: #000; margin: 0; }### Vær opmærksom på dine floats
En vigtig ting at huske på, når du implementerer en ny handheld stylesheet, er, at alt indhold vil blive vist i lineær rækkefølge i en enkelt kolonne ned ad siden. Elementer med float, såsom sidebars, callouts og andre elementer, vil enten vises over eller under dit hovedindhold, afhængigt af rækkefølgen i kildekoden. Dette er en god ting, især i betragtning af de ekstremt smalle skærmbredder på de fleste mobile enheder. At inkludere en floatet sidebar ville kræve, at brugerne scroller både horisontalt og vertikalt. Som du måske ved, er horisontal scrolling frygteligt, især når man er på farten. Så husk dette, før du om-floater noget i din handheld stylesheet. For at være ekstra forsigtig, kan de virkelig paranoide tilføje denne deklaration:
* { float: none; }### Der er ingen bredde
Lignende tænkning gælder for indholds-bredde. Enhver eksplicit bredde (dem, der er sat i pixels eller ems), som du angiver i din mobile stylesheet, vil sandsynligvis gøre mere skade end gavn, især i betragtning af den ekstreme variation i skærmbredder på tværs af enheder. At specificere en bredde til dit indhold kan resultere i korrekt visning på få enheder, men der vil uundgåeligt være mange flere, der kræver horisontal scrolling for at vise indholdet. En god løsning er enten at specificere dine bredder i procenter eller undlade at specificere bredder, undtagen hvor det er nødvendigt til layoutformål (f.eks. for små grafikker osv.).
### Eliminer rod
At holde tingene simple er et af de primære mål, når man designer til små skærme. På en fuld-skærms webside har du masser af plads til mange knapper, badges, reklamer, fotos og alt andet, der falder dig ind. Spørgsmålet, du skal stille dig selv, er: "hvor meget af dette indhold er nødvendigt for mine mobile besøgende?" Kun du kan træffe den beslutning, men der er et par spørgsmål, der kan hjælpe dig med at tænke igennem processen:
- Hvad leder mobile besøgende efter? Hvilken information ønsker/har de brug for?
- Har mobile besøgende tid/interesse i alt mit tidskrævende sidebar-indhold?
- Med en helt nøgen stylesheet, hvilke elementer er klart overflødige?
- Hvilke navigationselementer er absolut nødvendige? Hvilke er redundante?
- Er der hele sektioner af min side, som det ville være bedre ikke at vise?
Og så videre. Forhåbentlig forstår du pointen: vis kun det, der er absolut nødvendigt eller essentielt. Måske et eksempel kan illustrere pointen. Her på Perishable Press implementerede jeg for nylig en mobilvenlig stylesheet til nogle af mine temaer. Tanke-/designprocessen gik omtrent sådan her:
1. Nulstil alt til standard mobile styles.
2. De fleste mobile besøgende er her for én ting: indhold.
3. Derfor er der ingen grund til en sidebar eller en super-foder.
4. Jeg besluttede at vise et lille logo, lidt header-navigation og en lille foder.
5. Grundlæggende styles blev anvendt på post-indhold og kommentarer.
6. Resultatet er en ren, letanvendelig mobilversion af min side.
Og for at skjule de uønskede elementer, tilføjede jeg følgende CSS:
#sidebar, #footer { display: none; }Forhåbentlig er det klart. Ideen er at anvende display:none; på det yderste element i det område, du ønsker at skjule. Som en nybegynder tilbage i tiden indså jeg ikke dette og anvendte i stedet display:none; på hvert element inden for det skjulte område. Så dumt 😉
### Flere tips til mobil-makeover
Her er et par flere tips til at forbedre udseendet af din side på mobile enheder.
#### Gør dine overskrifter slankere
På mange mobile enheder (i hvert fald dem, jeg har set), ser overskriftstekst ofte tungt overvægtig ud, især tekst inden for <h1> og <h2> elementer. For at afhjælpe dette problem kan vi tilføje følgende CSS til vores handheld stylesheet:
h1, h2, h3, h4, h5, h6 { font-weight: normal; }#### Kontroller dine billeder
Billeder er et andet element, du måske vil overveje. Sandsynligheden er, at mange af dine billeder overskrider bredden på de fleste mobile browsere, som måske eller måske ikke automatisk skalerer dem. Heldigvis kan vi anvende en max-width på vores billeder, hvilket vil hjælpe med at sikre deres korrekte skalering i understøttende browsere. Tricket er at vælge en max-width, der passer til den bredeste vifte af mobile enheder. Som et eksempel, her er hvordan man anvender en max-width på 250px for alle billeder i vores hovedindholds <div>:
#content img { max-width: 250px; }#### Midt på siden
Centrering af overskrifter, foder-credits og anden information er en nyttig måde at skabe en følelse af organisation og balance i din mobile præsentation. Her er en nem måde at gøre det på:
.center { width: 100% !important; text-align: center; }#### Link mig dødeligt
Sidst men ikke mindst er links måske det vigtigste element på mobil-siden. Når links er let identificerbare, hjælper de brugerne med at navigere nemt og effektivt. Når de er dårligt styled eller på anden måde uklare, er links essentielt ubrugelige, hvilket efterlader dine besøgende famlende i mørket efter deres næste træk. Derfor, når du styler dine mobile links, er det god praksis at efterligne konventionel link-udseende med en understregning, en tydelig farve og måske en let kontrasterende baggrundsfarve. Her er et eksempel, der holder links skarpe og rene:
a:link, a:visited { text-decoration: underline; color: #0000CC; } a:hover, a:active { text-decoration: underline; color: #660066; }### Anvend styles på iPhone
Mens du anvender styles til den mobile præsentation af din side, vil du uundgåeligt ønske at målrette den allestedsnærværende iPhone og anvende et par iPhone-specifikke CSS-styles. Heldigvis har iPhone en ret unik skærmbredde, hvilket gør det muligt for os at målrette specifikke selectors med følgende @media selector:
@media only screen and (max-device-width: 480px) { .selector { padding: 0; margin: 0; } }Med denne teknik kan du målrette ethvert element, du ønsker. Indkapsl blot dine iPhone-specifikke CSS med den skøre @media selector og nyd resultaterne. Bemærk, at der er andre (ikke-iPhone) mobile browsere, der også har samme skærmbredde som iPhone, så alle styles, der målretter iPhone, kan også anvendes på et par andre enheder.
En anden nyttig teknik til iPhone involverer at kontrollere den automatiske skalering af tekst. iPhone har en irriterende vane med at justere skriftstørrelsen i henhold til websidens bredde. Selvom det lejlighedsvis er nyttigt, har denne "funktion" en tendens til at få dine websider til at se dårlige ud. Heldigvis kan vi tilsidesætte denne funktion med følgende stykke CSS:
html { -webkit-text-size-adjust: none; }Dette er en proprietær egenskab, der udelukkende er rettet mod Safari. Accepterede værdier er som følger:
none— dette er standardværdien. Ingen tekststørrelsesjusteringer vil blive foretagetauto— lad Safari håndtere eventuelle tekststørrelsesjusteringer%værdi— en eksplicit procentværdi, hvormed tekststørrelsen skal justeres
Har du flere fede iPhone-design tips? Del dem i en kommentar! 🙂
Saml det hele
Lad os samle det hele for at skabe en grundlæggende handheld stylesheet-skabelon. Anvendt på din side via en separat ekstern handheld stylesheet, vil følgende kode give din side et hurtigt 5-minutters mobil-makeover:
/* mobil styles */@media handheld { html, body { font: 12px/15px sans-serif; background: #fff; padding: 3px; color: #000; margin: 0; } #sidebar, #footer { display: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } #content img { max-width: 250px; } .center { width: 100% !important; text-align: center; } a:link, a:visited { text-decoration: underline; color: #0000CC; } a:hover, a:active { text-decoration: underline; color: #660066; } } /* iPhone-specifikke styles / @media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }
Dette er nogle af de CSS-regler, jeg bruger til forskellige temaer her hos Perishable Press. Efter at have tilpasset et grundlæggende sæt af styles med nogle friske linkfarver og et par andre præsentationsmæssige detaljer, har jeg transformeret mine komplekse skærmdesigns til noget skarpt, rent og letlæseligt for mine mobile besøgende:
(Her ville normalt være et billede af Perishable Press' mobilversion)*
### Ingen flere undskyldninger
Med disse simple trin kan du sikre, at dine besøgende kan tilgå dit indhold på en brugervenlig måde. Du behøver ikke at oprette en komplet mobilversion af din side, men at tilføje et par grundlæggende regler vil sikre, at din side er tilgængelig, anvendelig og brugbar for dine mobile besøgende. Så ingen flere undskyldninger! Vi har teknologien og færdighederne til at gøre det mobile web til et bedre sted. Kom med på vognen og pimpet dine sider til det mobile web i dag.
Hvis du vil læse andre artikler, der ligner Mobilvenlighed: Giv din hjemmeside et 5-minutters makeover, kan du besøge kategorien Teknologi.