Hvad skal du vælge, og betyder det noget?
Næsten alle moderne websider er lavet ved hjælp af responsive/ adaptive design teknikker.
Responsivt webdesign betyder, at når en anmodning om en webside sendes, vil serveren altid levere den samme version af siden, uanset hvilken enhed der foretog anmodningen. Årsagen til, at en side ser forskellig ud på forskellige enheder, er, at når indholdet er downloadet, vil forskellige style regler (indkapslet i forskellige media queries) træde i kraft afhængigt af enheden.
Responsivt webdesign har to primære, men meget forskellige, tilgange: Mobile First og Destop first. Begge har deres fordele og ulemper, så hvad skal du vælge, og betyder det noget?
Lad os først se på koncepterne bag hver tilgang.
Progressive enhancement og Graceful degradation
Mobile først er en progressive enhancement model. Det betyder, at vores kerneprodukt er designet til at understøtte enheder med de mest begrænsede funktioner (i dette tilfælde skærmstørrelse/ opløsning). Med andre ord vil vores primære CSS regler være designet for de mindst mulige skærme.
Når browseren har analyseret disse primære style regler, bruger vi media queries til gradvist at levere udvidet (enhanced) CSS, såfremt enheden understøtter højere opløsninger (F.eks. kan vi tillade rækker af indhold, at flyde ind i kolonner).
Desktop first er fundamentalt anderledes. Vi strukturerer vores CSS, så kerneformaterne (de primære regler) vil gælde for de størst mulige skærme og lever derefter gradvist "degraderede" fallbacks til mindre skærme. Denne model kaldes Graceful degradation og er det totalt modsatte af progressive enhancement.
Det er værd at bemærke, at mobile first design ikke altid er lig med progressive enhancement. Mange håndholdte enheder har API' for placeringsdetektering, gyroskop eller endda touch -og roterings -events. Da disse ikke almindeligvis findes på stationære computere ville du jo rent faktisk "degradere" funktionaliteten med et fallback til desktop computere.
Nå, til sagen. Hvilken teknik er bedst?
Jeg vil hævde, at mobile first kan øge din websites ydeevne betydeligt på de devices hvor det virkelig betyder noget. Her er nogle af grundene:
Al din primære CSS (defineret uden for eventuelle media queries) vil være den eneste CSS, der behøver at analyseres af enheder med små skærme. Browseren kan derefter straks gå i gang med at rendere siden uden at skulle analysere alle de CSS regler der er indkapslet i media queries. Da håndholdte enheder ofte bruger langsomme forbindelser, kan mobile first-tilgangen virkelig fremskynde tingene.
Overrides til disse primære styles vil blive placeret i min-width media queries og vil derfor kun blive analyseret på laptops/desktops, der ofte er forbundet til nettet med hurtige LAN forbindelser og har mere regnekraft til at behandle de downloadede data.
Dette er ikke tilfældet med desktop first tilgangen. De primære CSS regler vil her være for de størst mulige skærme og enheder med små skærme skal indlæse og analysere alle disse CSS regler, kun for at tilsidesætte dem senere til fordel for styles, defineret i max-width media queries.
Mobile first tilgangen kan også spare båndbredte og http requests for mobil brugere, i forhold til indlæsning af mediefiler. Ofte bruger webdesignere store baggrundsbilleder på desktop layoutet, kun for at få disse billeder udskiftet eller endda helt fjernet på mindre skærme. Hvis baggrundsbilledernes url er kodet ind i den primære CSS (desktop først), vil billedet blive indlæst på alle enheder, uanset om det vises eller ej (lidt afhængigt af browser versionen). Men hvis der ikke er nogen henvisninger til billederne i den primære CSS, og de kun indlejret i media queries til store skærme, vil mobile enheder spares for at indlæse de billeder, der ikke skal vises.
Tag et kig på disse testresultater fra Tim Kadlec. Det bliver virkelig interessant, når vi kommer til at test nr. fem. Test fem viser, at næsten alle browsere ikke downloader ubrugte baggrundsbilleder, når der bruges mobile first.
Media Query & Asset Downloading Results
Her er et andet link til en interessant (men lidt gammel) artikel, der støtter mine argumenter:
What is Mobile First CSS and Why Does It Rock?
Konklusion: Så skal vi nogensinde bruge desktop first?
Analysen ovenfor taler for mobile first. Som nævnt er langsomme mobilforbindelser og den mindre processorkraft på håndholdte enheder gode grunde til omhyggeligt at optimere og minimere ressourcerne til sådanne enheder. Men hvis de fleste af dine brugere er desktop brugere, og du er mest komfortabel med desktop first modellen, er det måske ikke altid umagen værd.