Skapa en sida för alla enheter, med bibehållet innehåll och utseende! « Social Factory – Webbyrå och social marknadsföring

Skapa en sida för alla enheter, med bibehållet innehåll och utseende!

Blogg / SSWC | Webbdesign / Skapa en sida för alla enheter, med bibehållet innehåll och utseende!

Efter en session på Sweden Social Web Camp av Per-Mattias Nordkvist från Improove om Responsive Web Design väcktes mitt intresse för ämnet. Det är mycket vanligt att företag idag har flera hemsidor online för att kunna tillgodose alla de olika enheterna korrekt format.

En sida som är utformad för en dator passar inte in i en smartphones display. Du har säkert sett webbadresser som börjar med “m”. Om vi till exempel skulle vilja anpassa vår hemsida till mobiltelefoner så hade vi haft den på adressen m.socialfactory.se antar jag.

Är det bra att ha flera olika hemsidor? Kan man ha en och samma hemsida som passar till alla enheter? Låt oss titta på ett begrepp som heter Responsive Web Design.

Responsive Web Design

Responsive betyder mottaglig. Det vill säga en design som är mottaglig för vem/vad som efterfrågar informationen från din sajt. Skärmupplösningen varierar från enhet till enhet, iPad har till exempel 1024 x 768 som max upplösning medan iPhone4 “bara” har 960 x 640 och iPhone 3GS 480 x 320. Sedan har du alla övriga enheter som i sin tur har egna upplösningar.

Det finns med andra ord för många olika enheter för att skapa en unik version av din sajt för varje enhet, du stöter dessutom på problem varje gång du vill göra en uppdatering då du måste i praktiken uppdatera flera individuella sajter. Det är tidsödande och ökar risken för fel. För att minimera arbetsbördan så hade det då varit praktiskt om man hade bara en version som passade till alla enheter.

Bild från handcrafted pixels

Ice, Jelly och Liquid

Som du ser, så är kraven på designen på din hemsida större och flera idag än vad de var för ett antal år sedan. För att uppfylla dessa krav har vissa tekniker utvecklats. En teknik som funnits ett tag och som tillämpats är Jelly Web Design och Liquid Web Design.

Jelly är således flexiblare än den traditionella designen (även kallad Ice Web Design) genom att centrera innehållet på skärmen, oavsett upplösning. Liquid Web Design har däremot ännu mer flexibilitet genom att anpassa storleken på innehållet till den besökande skärmen. Det visar sig dock att Liquid Web Design inte håller måttet gällande utseendet då tekniken tenderar att göra hemsidorna textbaserade och “bleka”.

Media Queries

Tack vare den nya W3C-standarden Media Queries kan du nu anpassa dina stilmallar (CSS) genom att vilkåra dem (med if-satser). På så sätt slipper du använda javascript. Ett bra exempel på en sida designad med Responsive-tekniken är Staffanstorps hemsida.

Sixrevision har skrivit en bra artikel om vad Responsive Web Design är och illustrerar det väl. Per-Mattias Nordkvist har även skrivit bra artiklar om ämnet, i “Några funderingar kring responsive webdesign”  tar han även upp det faktum att RWD är en utmaning för våra grafiska formgivare då tekniken avviker ifrån deras traditionella arbetssätt. I artikeln “Media Queries och Responsive Webdesign, en bra kombination” illustrerar Per-Mattias hur Improoves sida blir med RWD.

Du kan enkelt testa hur din sida ser ut på olika enheter med hjälp av ett smidigt verktyg kallat Screenfly. Alla enheter finns inte med men du kan i alla fall bilda dig en uppfattning om hur det skulle se ut i några av de vanligaste enheterna. Testa gärna Improoves eller Staffanstorps i verktyget.

Om du vill fördjupa dig ytterligare så vill jag rekommendera dig en mycket utförlig artikel (på engelska) skriven av Ethan Marcott.

Inlagd: 2011/08/18   Taggar: , , ,