lördag 18 januari 2014

Använd flexbox för en mobilanpassad responsiv hemsida

Gott folk, det är 2014 och har du inte en mobil sajt som ehandlare är det något du bör överväga illa kvickt. Sitter man på tåget hem från jobbet och kollar runt så är det alltid några stycken som surfar runt på sina favoritshoppingsajter för att fördriva tiden, med mobilen.

Enough said, mobilen tar över som främsta och första apparat att surfa med och det är inte längre ok att börja bygga en sajt för desktop, det är "mobile first" som gäller. Alltså, när du bygger en sajt bör den byggas för att framförallt användas i mobilen.

Vare sig din sajt är mobilvänlig eller inte, så kommer jag nedan dela mina erfarenheter och tips om ämnet.

Tekniken bakom?

Jag satt just och kodade om min egen hemsida till att bli mobilanpassad, men jag började innan dess fanns naturligtvis valet av metodik och teknik för att få den mobilanpassad. Detta kan vara en smula tekniskt, men värt att läsa för den som ska anlita en konsult för att bygga om sin egen sajt också.


Jag tror det började med mobilsajter på subdomäner

När mobilanpassade responsiva sajter började komma för ett gäng år sedan var det många stora företag som hakade på trenden och byggde en helt egen sajt för mobiler, ofta på en subdomän. Tekniken på mobilerna kanske var mer begränsad just då så det var korrekt väg att gå, men betänk att en ny mobilsajt på en subdomän betyder att du får ännu fler sidor att jobba med kvalitet, funktion och innehåll på. Dessutom blir det dubbelt så många sidor är få bra sökmotoroptimering på. Typiskt dåligt upplägg!

Samma hemsida men olika CSS-styling

Som jag har fattat det var det många som byggde hemsidan som använde olika CSS-filer (styling) för mobiler och desktop. Efter subdomänerna, när så kallade "media queries" kom, så var det enklare att bygga en mobilanpassad responsiv hemsida. Man jobbade med samma innehåll och samma URL men olika styling beroende på användarens enhet. Alla som tyckte SEO (sökmotoroptimering) var viktigt kunde andas ut eftersom man inte längre hade olika webbadresser för desktop och mobil, allt var nu samma. Men för de som satt och kodade användargränssnittet (hur hemsidan ser ut) fick istället brottas med att få de olika CSS-filerna att aktiveras korrekt för olika typer av mobila och desktop enheter samt att få samma sida och innehåll att visas vettigt på både mobil och desktop. Inte helt enkelt och krävde som sagt dubbel kodning för användargränssnittet och styling eftersom 2 eller flera CSS-filer behövdes istället för 1. Jobbigt!

Fantastiska Flexible Box Layout Module (aka "flex box") är vinnaren

De flesta nya webläsare har precis blivit eller är på väg att bli kompatibla med den här fantastiska användargränssnittstekniken för websidor som jag precis börjat använda. Det är väl si och så med tillbaka-kompabiliteten men jag väntar mig att de flesta användare inom ett år har migrerat till stöd för denna teknik. Flex box är fantastiskt för att helt plötsligt blir din layout smart och använder exakt samma CSS-fil, innehåll, URL och boxari din layout formar om sig och organiserar om sig beroende på storleken på användares skärm. SMART!!! Inte längre behövs två sajter, inte längre behövs två CSS-filer/-kodning och media queries, nu behövs bara en kod som i framtiden funkar till alla mobile och alla desktops, flex box är framtiden. Det är den enklaste smartaste lösning för mobilanpassade responsiva och desktopvänliga hemsidor vilket också är anledningen till varför de stora browserleverantörerna snabbt har uppdaterat sina senaste versioner av deras browser till desktop och mobile att ha stöd till flex box. 

Om du inte själv sköter programeringen på din sajt tycker jag ändå att du ska säga till den som bygger din hemsida att använda flex box för det är framtidssäkert, flex box är den responsiva mobilanpassade tekniken som har vunnit. Det kanske är svårt att fatta skillnaden om man inte själv har koll på hur CSS och UI exakt fungerar på en sajt, men för den som sitter och kodar är tidsbesparingen och intelligensen bakom detta nya responsiva layout-system helt sjukt bra. Man sparar defintivit kod jämfört med gammal CSS som float, display:inline, position:, top:, left etc etc. Layouten blir smart och anpassar sig så positionering och responsivitet sköter sig själv. Use it! Jag är frälst!! Här är det bästa resurserna jag hittat för den som vill läsa på och lära sig hur responsiva sajter med flex box funkar:
Det som är negativt med flex box är att det inte är en tillbakakompatibel layout-teknik så på säg 60% av alla enheter, speciellt äldre som browsermjukvaran inte har uppdaterats kommer sajten se dålig ut. Men jag väntar mig att flex box kommer har stöd bland säg 70-80% av alla surfare inom ett kvartal eftersom Apple, Google, Mozilla och Microsoft numera gör uppdateringar på din browser automatiskt. För mig var det ett självklart val att bara köra med flex box, för vissa kommer min sajt se skit ut, just nu. Men snart kommer det blir jävligt bra för alla. Men gäller din layout en myndighets sajt eller något stort etablerat företag så kanske du bör jobba lite extra för att få din flex box layout tillbakakompatibel eller helt enkelt fortfarande jobba med media queries och olika CSS-filer beroende på användarens enhet.

Tänk "mobile first"

Jo det är kanske något av en klyscha. Men jag tycker det är sant. Det är faktiskt rätt najs att bygga sin sajt för mobiler först och främst för man behöver inte längre klämma in så jävla mycket "skit" på sidan för det finns så mycket utrymme. Nu handlar det nästan istället om minimalism och förenkla surfarens upplevelse, det tycker jag är en trevlig och bra idé, tanke och paradigm. Tänker man på Aftonbladets layout blir man ju nästan galen av hur mycket grejer det finns på den sajten. 

Det finns bara fördelar med att bygga sin hemsida för mobiler, fler besökare för att du få mer "love" från Google då Google inte visar icke-mobilanpassade sajter i sökresultatet i lika hög grad när man söker i mobilen, fler pages/visit när det som besöker din sajt med mobil får en vettig användarupplevelse, fler köp för det är inte så jobbigt att surfa runt och köpa något och mer pengar i kassan. 

Har du redan en sajt som inte är mobil och inte kan programmera själv så kan det vara värt att under året spara upp en slant så att du i höst kan anlita något som kan konvertera din sajt att bli responsiv och mobilanpassad.

SEO (uppdatering 21st April 2015)

En stor nyhet som har kommit senare är att Google nu har sagt att för alla de som är intresserade av sökmotoroptimering för mobiler är en mobilanpassad sajt viktigt. Det kommer bli en rankingfaktor i sökresultatet den 21a April 2015. Det betyder att om du vill ha gratis mobil trafik till din hemsida genom sökmotoroptimering så är det bäst att du ordnar med att den är responsiv.

Inga kommentarer:

Skicka en kommentar