Adaptiv webbdesign med Less Framework

Det här inlägget beskriver en modifierad version av Less Framework av Joni Korpi, som jag kallar Less+.

Dagens webb ses inte alltid på en datorskärm. Det finns ett stort antal enheter med olika skärmupplösningar som människor använder för att surfa, vilket gör att webbplatser inte alltid visas som tänkt på olika enheter. För webbdesigners är det här ett problem.

Varför adaptiv webbdesign?

Ett bra exempel på ett misslyckat gränssnitt är det lokala kollektivtrafikbolaget Östgötatrafiken. De har en i grunden välgjord webbplats med smart kartintegration och annat bra, men att försöka använda sidan i mobilen är ett totalmisslyckande. I stället har de byggt en app som de vill att användare ska ladda ner. Jag tycker det är ett riktigt dåligt val. Som användare tänker man inte så. Man plockar bara upp mobilen ur fickan och googlar ”östgötatrafiken”. Då hamnar man på deras sajt, men inget fungerar som det ska. Det gör användarna frustrerade.

En annan sak som stör mig rejält är konstant zoomande. Det driver mig till vansinne. Jag vill bara att sajten ska anpassas efter min skärm – utan att jag ska behöva zooma – och att knapparna är stora nog att trycka på med fingret. Gärna utan att behöva nypa, dra eller trixa.

En vanlig lösning är att skapa webbplatser som känner igen användarens enhet (user agent) och skickar dem till en särskild mobilversion av sidan. Det kan fungera, men kräver att man bygger en separat sida. Och det förutsätter att användarens enhet faktiskt identifierar sig som exempelvis en mobil.

Många publiceringssystem har färdiga lösningar för det här, men dessa plugins och moduler är ofta inte designade i samma stil som den vanliga webbplatsen. Dessutom stödjer de oftast bara smarta mobiler – inte surfplattor eller kommande enheter.

A lot of CMS solutions got readymade solutions for this, but these plugins / modules are not really themed as the ”regular” webpage. Also, they (usually) only support Smartphones, and not other devices such as tablets or future devices.

Så, för att sammanfatta – här är några fördelar med adaptiv webbdesign:

• – Webbplatsen fungerar faktiskt bra på andra enheter än datorn
• – Appar schmappar – ingen app behövs!

Olika typer av adaptiv design – flytande bredd vs statisk bredd

Adaptiv webbdesign kan delas upp i två tekniker: flytande bredd och statisk bredd. Enligt min mening är flytande bredd det som har störst potential framåt. Med 960.gs ramverk kan man bygga sajter som håller proportionerna oavsett upplösning, perfekt om du vill ha samma känsla i alla skärmar.

Less Framework av Joni Korpi fungerar på ett lite annat sätt. Det bygger på statiska bredder och använder media queries för att byta mellan olika layouter beroende på vilken upplösning som används.

Less täcker fyra vanliga skärmtyper:

• 3-kolumnsvy: Små skärmar, stående (320 pixlar – iPhone etc)
• 5-kolumnsvy: Små skärmar, liggande (480 pixlar – iPhone etc)
• 8-kolumnsvy: Mellanstora skärmar (768 pixlar – iPad, mindre laptops etc)
• 13-kolumnsvy: Stora skärmar (1280 pixlar och uppåt – stationära datorer, TV etc)

Jag tycker det här är en smartare lösning än att försöka hålla exakt samma proportioner oavsett skärm. Visst, det kan vara kul att sajten ser likadan ut på en laptop och en stor TV, men i mobilen? Nej tack.
En bättre lösning vore att kombinera båda metoderna. En flytande layout tillsammans med två eller tre strategiskt valda media query-anrop skulle funka riktigt bra.

Olika mobilwebbläsare rapporterar olika upplösningar. De inbyggda webbläsarna emulerar ofta 320 pixlar (som iPhone), medan andra – som Firefox och Opera – visar den faktiska skärmupplösningen. På en HTC Desire HD rapporterar till exempel den inbyggda webbläsaren 369×546, Firefox 480×800 och Opera Mini 480×764 (skärmen är egentligen 480×800). Resultatet? Helt olika designer beroende på vilken webbläsare du använder.

Det här problemet kan hanteras genom att använda flytande layout i mobilversionen.

Nackdelen med den här tekniken är att den funkar bäst när UI-elementen inte är pixelbaserade. Med andra ord: sajten ser fantastisk ut och funkar som den ska – men bara om du inte förlitar dig på fasta pixlar i designen. Det är enkelt för hobbyprojekt, men knepigare i kommersiella sammanhang. Särskilt om du jobbar med fina CSS3-detaljer och din kunds målgrupp fortfarande kör IE7.

Det blir ett användargränssnitt som helt enkelt inte syns för en stor del av besökarna. Och då har du inte uppfyllt målen – och kunden är missnöjd. Inget vidare.

MailChimp är ett bra exempel på en sajt som lyckas. De kombinerar pixelbaserade objekt med flexibla UI-element på ett sätt som får mina ögon att le.

(Obs – om du vill testa MailChimp, registrera dig via min länk så får jag lite MonkeyRewards-kärlek. Och om du gillar svenska och nyhetsbrev utan spam, anmäl dig till mitt också!

Att använda statisk bredd är kanske inte framtidens lösning, men det är rätt väg att gå under de kommande åren för kommersiella projekt.

Problemet med Less Framework i sin ursprungliga version, som publicerades av Joni Korpi, är att det i princip ignorerar Internet Explorer version 8 och tidigare. I de webbläsarna fungerar det inte och visar bara standarddesignen med åtta kolumner. Visst, det kan kännas skönt att “straffa” användare av äldre IE-versioner, men det är svårt att förklara för en kund att “användare med IE < 9 får skylla sig själva – webstandarder gäller”. Även om vi tänker så ibland (jag vet att jag gör det), är det inte ett hållbart argument i ett kommersiellt sammanhang.

Så vad måste vi göra?

Övervinna webbläsarproblem (till exempel Internet Explorer)

För att förstå fienden måste du tänka som fienden. När jag försöker tänka som Internet Explorer ser jag något som inte stöder moderna standarder, är bakåtsträvande, fult och krångligt. Problemen handlar främst om tre områden: media queries, CSS3 och HTML5.

Media-queries

Det största problemet med Less Framework i Jonis version är att det alltid faller tillbaka till 8-kolumnsdesignen i IE < 9. Det måste lösas – inte minst eftersom cirka 46 procent av alla användare (februari 2011) använde äldre versioner av IE.

Dessutom blir CSS-filen enorm eftersom Joni använder inlinekod. Vi måste både få det att fungera i IE och göra koden mer hanterbar.

Lösningen? Dela upp CSS-filen i flera delar och använda JavaScript.

Efter uppdelningen använder vi Jquery Media Queries-biblioteket från Protofunc, som ursprungligen föreslogs av Richard Shepherd. Det gör att användare med IE < 9 kan se vår fina design för stora skärmar, så länge JavaScript är aktiverat.

Om JavaScript är avstängt i IE < 9 behöver vi en fallback. Det löser vi genom att ladda 8-kolumnsdesignen först, innan media queries aktiveras. I den här versionen använder jag version 1.19 av Jquery Media Queries, eftersom version 1.20 verkar strula i IE.

Vår <head> ser då ut ungefär så här:

<!-- Global Stylesheets -->
<link rel="stylesheet" href="reset.css" media="screen" />
<link rel="stylesheet" href="fonts.css" media="screen" />
<link rel="stylesheet" href="style.css" media="screen" />
 
<!-- Fallback if browser does not support media queries + javascript (Read: Internet Explorer < 9) -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="8col.css" media="screen" />
<![endif]-->
 
<!-- Media Queries / Less -->
<link rel="stylesheet" href="13col.css" media="only screen and (min-width: 1212px)" />
<link rel="stylesheet" href="8col.css" media="only screen and (max-width: 1211px) and (min-width: 768px)" />
<link rel="stylesheet" href="5col.css" media="only screen and (max-width: 767px) and (min-width: 480px)" />
<link rel="stylesheet" href="3col.css" media="only screen and (max-width: 479px)" />
 
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/jquery.mediaqueries1.19.js"></script>

However: This makes coding somewhat of a nag, since we get a lot of inheritance issues.

CSS3 & The general CSS-approach

CSS3 och arbetssätt

Jag börjar med att bygga 13-kolumnsdesignen, och tillämpar följande på nästan alla element:

• Undvik oönskad ärvning av stilar
• Bestäm vilka gränssnittselement som ska degraderas snyggt
• Bestäm vilka delar som ska se olika ut beroende på upplösning
  • Skapa tydliga knappar och navigering för mobil
  • Separera detaljer som bara är “snyggt” från det som är funktionellt
  • Etc

Jag börjar med att bygga 13-kolumnsdesignen, och tillämpar följande på nästan alla element:

display: block;
word-wrap: break-word;
 
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
 
width: auto;
height: auto;

Detta gör att vi i senare steg kan justera marginaler och dölja eller visa element efter behov. Och word-wrap behövs – ibland använder folk långa ord. De kan bryta layouten om vi inte tvingar dem att radbrytas. Den här regeln kan med fördel ligga i reset.css. Jag kopierar sedan CSS från 13-kolumnsfilerna (allt utom <body>), och justerar för respektive version.

Eftersom IE < 9 inte hanterar CSS3 ordentligt, rekommenderar jag att använda CSS2 för viktiga element som knappar. Mindre viktiga objekt kan få snygga effekter med CSS3 – där det funkar.

HTML5

Jag älskar HTML5. Det gör koden lättläst och tydlig. Taggar som <section> och <article> hjälper till att skapa struktur. <hgroup> får inte så mycket kärlek från SEO-folk, men jag gillar det ändå.

Problemet? IE < 9 gillar inte HTML5. Därför brukar man använda JavaScript som “polyfill” – och Less Framework har det inbyggt. Men vi kan inte lita på att JavaScript alltid är aktiverat, särskilt inte i större organisationer där IT-avdelningar stängt av det av säkerhetsskäl.

Då behöver vi en HTML5 Light-variant. Vi använder HTML5-strukturen i <head>, men byter ut semantiska taggar mot vanliga <div>-taggar. Till exempel: <article class="food"> blir <div class="article food">.

Det ger samma känsla i koden, men fungerar i IE. Om vi någon gång vill gå tillbaka till riktig HTML5 är det bara att söka och ersätta.

Fördelen med detta är att IE < 9 (utan JavaScript) faktiskt accepterar det och visar sidan med CSS. Fallback löst!

Verktyg som underlättar

Ett tips är att använda Less Grid Overlay JS av @RnowM. När du testar sajten klickar du bara på “Show Grid” för att visa rutnätet.

På Less Frameworks webbplats finns också resurser, bland annat mallar för Photoshop och Fireworks av Ari Palo.

Sammanfattning

Genom att modifiera Less Framework och lägga till lite JavaScript-magi får vi ett kraftfullt ramverk för att bygga webbplatser som fungerar på flera olika enheter.