Webbsidor måste inte se exakt likadana ut i alla webbläsare

Framtidens professionell webbdesign till företag


Direkt till responsive web design.


I många år försökte vi att hemsidor skulle se likadana ut i alla webbläsare och i alla operativsystem.

Men redan i webbens början såg man att det var svårt att uppnå för att olika webbläsare hade olika funktioner och visade hemsidans innehåll på olika sätt.

Det ledde ett tag till återvändsgränden att optimera hemsidan för en speciell webbläsare som t ex Internet Explorer 4.0 med en viss skärmupplösning och därmed uteslöt alla andra.

Strävan att ha kontroll över hur hemsidans innehåll ska visas och framförallt att den ska visas på samma sätt överallt härstammar från tryckerisidan.

Vi har vant oss vid att vi skapar en fil som går till tryckeriet och vår bok, flyers eller vad det än är, ser i stort sätt så ut som vårt tryckunderlag.

Men på webben är det ju så att alla har olika behov beroende på hur man besöker sidan. Kommer man med en s.k. smartphone, som t.ex. iPhone, så måste hemsidan fungera på den lilla skärmen (Läs längre ner på sidan om responsive web design som kan användas för att ännu bättre ta hand om de). Kommer man med en iPad eller en stor dataskärm ska den se bra ut där.

Dessutom har olika webbläsare och olika operativsystem olika konventioner som gör att hemsidan visas på olika sätt.

Framtiden är här

Just nu utvecklas med stormsteg en ny webbstandard som kallas för HTML5 för själva koden och CSS3 för stilmallarna.

Många webbdesigner tycker att det inte går att använda sig av den nya teknologin än och vill vänta tills webbstandarden är officiellt godkänd och frisläppt något som kanske blir någon gång år 2014.

Samtidigt kommer det också år 2014 att finnas en hel del webbläsare hos användarna, som inte stödjer den nya standarden. Följer vi resonemanget med att vänta kommer vi kanske kunna använda HTML5 år 2020 eller kanske aldrig?

Jag vill vända på resonemanget och titta hellre på möjligheterna som redan finns idag för att kunna använda sig av den nya standarden.

Logo HTML5

Alla moderna webbläsare som vi har just nu på många datorer, så som Safari 5, Firefox 6, Chrome 13, Opera 11 och Internet Explorer 9 har stöd till vissa delar av HTML5 och CSS3. För att inte prata om det alt viktigare område av s.k. smartphones och tabletts som t.ex. iPhone och iPad, där vi har ett utbredd stöd för den nya tekniken.

Därför: Låt oss börja med den nya standarden för att driva fram utvecklingen och skapa bättre hemsidor för de som kommer till våra kunders hemsidor.

Låt oss använda framtidens möjligheter idag för en bättre upplevelse

Istället för att använda våra resurser för att kämpa med att få hemsidorna att se likadana ut i alla webbläsare - och på så sätt titta bakåt hela tiden - så låt oss hellre acceptera att exakt

samma utseende inte är möjligt och heller inte nödvändigt. Istället använder vi vår tid och energi för att titta framåt på de besökare som redan idag får ett mervärde av de nya möjligheterna.

Fördelar med den nya standarden HTML5 och CSS3

HTML5 inkluderar tekniker för ljud, video, grafik och webbapplikationer, såväl som text och bild. Det betyder t.ex. att du inte behöver ett insticksprogram som Flash för att kunna visa filmer i en webbläsare. Hela koden i HTML5 har en mycket bra semantik. På så sätt blir den mer tillgänglig för personer med funktionshinder, vi får en bättre struktur i koden (div-taggar som inte är semantiska faller bort) och den blir bättre läsbar för sökmotorer.

Med CSS3 kom t.ex. möjligheten att skapa runda hörn, övertoningar, skuggor m.m. som tidigare bara var möjlig genom att lägga in bilder. Skippar vi bilderna, så blir sidorna snabbare att ladda, effekterna fungerar i alla storlekar och vi blir av med många arbetssteg genom att inte behöva skapa bilderna. Dessutom krävde exempelvis något till syns så enkelt som runda hörn mycket kod som inte var semantiskt.

Och de andra då?

I motsatsen till förr, då man optimerade sin sida för en webbläsare och lämnade alla andra utanför, går vi nu fram på ett helt annat sätt.

Då nya möjligheterna visas bara i en webbläsare som har stöd för dem I en äldre webbläsare visas inte de effekterna (eller inte alla), men självklart kommer man att kunna ta del av själva innehållet.

Jag jobbar med företag, som använder webben för att marknadsföra sina produkter eller tjänster och därför är det självklart för mig att vi inte utesluter några användare från själva budskapet*.

För dem som inte ser effekterna är det däremot ingen nackdel. De vet inte att de hörnen på en knapp eller en box som är spetsiga hos dem i andra fall visas runda.

Kort sagt går idén ut på att vi alltid skapar en hemsida som fungerar för alla besökare men de som har en av de senare webbläsarna, kommer det att se lite snyggar ut.

Låt oss lägga krutet på att skapa bra hemsidor för alla och bättre för dem som kan se effekterna.

Driva fram utvecklingen

Genom att börja använda de nya möjligheterna, driver vi fram utvecklingen. Utvecklarna till webbläsare utan bra stöd av den nya standarden, känner sig tvungna att implementera stödet och de som har bra stöd jobbar på för att bygga in stödet för ännu mer funktioner.

Användarna får snyggare, mer semantiska hemsidor. Du som kund får en modern och framåtriktad teknologi i din hemsida, som gör den mer attraktiv genom hög hastighet, bra utseende, hög tillgänglighet och semantisk kod.

Våra kunders vinst i fokus

Nya möjligheter med stilmallar i CSS3 får aldrig vara ett självändamål och är inte till för att webbdesignern ska kunna vinna ett designpris.
Min affärsidé är att jag vill öka mina kunders vinst. Därför är min fokus hela tiden inriktad på att använda (den nya) tekniken för att förbättra mina kunders hemsidor så att de ännu bättre skall nå ut till sina kunder.

Är kundernas kunder nöjda, använder sig av hemsidan och tar del av marknadsföringsbudskapet så vet jag att jag levererade ett bra jobb.

Framtiden i praktiken

Följande exempel visar i praktiken hur "upplevelsen" kan skilja sig beroende på webbläsaren. Alla skärmdumpar gjordes i en webbläsare på en dator.

Jag tycker exemplen visar mycket bra att budskapet kommer fram i vilket fall som helst, men att man erbjuder dem som har en modern webbläsare ett litet mer tilltalande utseendet.

Första bilden visar hur sidan ser ut i alla webbläsare om man först kommer till webbsidan, de följande bilderna hur utseendet skiljer sig om man rör muspekaren mot eller över texten.

Sidans utseende innan muspekaren rörs över texten
Sidans utseende innan muspekaren rörs över texten
Utseendet i IE5.5 och IE6 - ingen förändring om muspekaren rörs över texten men innehållet fullt läsbart
Utseendet i IE5.5 och IE6 - ingen förändring om muspekaren rörs över texten men innehållet fullt läsbart
Sidans utseende i IE7 och IE8
Sidans utseende i IE7 och IE8
Sidans utseende i IE9
Sidans utseende i IE9
Sidans utseende i en modern webbläsare
Sidans utseende i en modern webbläsare
 
Sidans utseende innan muspekaren rörs över texten
Sidans utseende innan muspekaren rörs över texten
Utseendet i IE5.5 och IE6 - ingen förändring om muspekaren rörs över texten men innehållet fullt läsbart
Utseendet i IE5.5 och IE6 - ingen förändring om muspekaren rörs över texten men innehållet fullt läsbart
Sidans utseende i IE7 och IE8
Sidans utseende i IE7 och IE8
Sidans utseende i IE9
Sidans utseende i IE9
Sidans utseende i en modern webbläsare
Sidans utseende i en modern webbläsare
 
Sidans utseende innan muspekaren rörs över texten
Sidans utseende innan muspekaren rörs över texten
Utseendet i IE5.5 o IE6 - ingen förändring men innehållet fullt läsbart
Utseendet i IE5.5 o IE6 - ingen förändring men innehållet fullt läsbart
Sidans utseende i IE7 och IE8
Sidans utseende i IE7 och IE8
Sidans utseende i IE9
Sidans utseende i IE9
Sidans utseende i en modern webbläsare
Sidans utseende i en modern webbläsare

Länk till originalet till skärmdumparna som visas här ovan.

Visningen i en webbläsare utan stöd för t. ex. skugga
Visningen i en webbläsare utan stöd för t. ex. skugga
Visningen i en webbläsare med stöd för skugga
Visningen i en webbläsare med stöd för skugga
Visningen i en webbläsare utan stöd för t. ex. skugga
Visningen i en webbläsare utan stöd för t. ex. skugga
Visningen i en webbläsare med stöd för skugga
Visningen i en webbläsare med stöd för skugga
Visningen i en webbläsare utan stöd för t. ex. skugga
Visningen i en webbläsare utan stöd för t. ex. skugga
Visningen i en webbläsare med stöd för skugga
Visningen i en webbläsare med stöd för skugga

Originalet hittar hittar du här.



Responsive web design

Kan vi förbättra upplevelsen för besökare som kommer till vår hemsida med en smartphone (som iPhone m.m.) eller iPad (eller liknande) ännu mer?

Först och främst är det viktigt att veta att en hemsida som är byggd enligt webbstandard, som är en självklarhet för mig, fungerar mycket

bra på en smartphone, iPad eller liknande. Har man en hel del besökare som använder sig av hemsidan med sådana enheter kan önskan kommer upp att göra hemsidan ännu bättre för just dem. Här finns möjligheten att erbjuda en anpassad design så att de behöver zooma mindre, sidan laddas snabbare och menyerna kan hanteras bättre.
Det kallas för responsive web design.

Responsive web design i vardagen

Det kan t.ex. se ut så att man istället för 3 kolumner med text visar 2 kolumner på en iPad och en kolumn på en iPhone, att menyn inte ligger på sidan utan längst upp, att man skippar en stor headerbild o s v.

Innehållet visas på ett annat sätt beroende på användarens skärmstorlek,

menyerna kan vara större för det är svårare att träffa rätt med fingret än med muspekaren. Dessutom kan man med responsive webdesign anpassa visningen beroende på om har sin enhet vänd horisontellt eller vertikalt.

Inte helt nytt för mig

Jag jobbade med design som anpassar sig till skärmens storlek genom att ändra kolumnens bredd redan för många år sedan. På så sätt är det inte helt nytt. Det som har kommit till är att vi å ena sidan har nu många människor som kommer till våra hemsidor med iPhone, iPad och liknande, d. v. s. enheter som var helt okända för några år och har helt andra behov.

Å andra sidan har vi genom s.k. media queries numera möjlighet att "titta" vilken storlek man har på skärmen.


I exemplen här nedan visas möjligheter på s.k. responsive web design. Du ser en hemsida i en webbläsare på en dator och hur hemsidan visas på en s. k. smartphone, t. ex. iPhone.

En hemsida i en webbläsare på en dator
En hemsida på en dator
En hemsida i en webbläsare på en iPhone
En hemsida på en iPhone
En hemsida i en webbläsare på en dator
En hemsida på en dator
En hemsida i en webbläsare på en iPhone
En hemsida på en iPhone
En hemsida i en webbläsare på en dator
En hemsida på en dator
En hemsida i en webbläsare på en iPhone
En hemsida på en iPhone

Vill du veta mer om professionell webbdesign, framtidens webbstandard eller responsive web design till ditt företag?

Kontakta mig.



*Ett undantag är Internet Explorer 6 (IE6) och lägre. Sedan sommaren 2011 bygger jag inte in stöd för "webbläsarnas dinosaurier". IE6 publicerades år 2001 och är nu mer än 10 år gammal. I norden har vi ungefär 0,4 % av användarna som använder sig av en så gammal webbläsare. IE6 var en bra innovation för 10 år sedan men just nu håller man på att ta fram IE10 och det är dags att säga "hej då" till dinosaurien.

Det känns inte rätt att lägga kraft på stöd för ett så gammalt program som användas av så få.

Men har du kunder i t.ex. i Kina eller Indien, där antalet användare ligger på 28 % respektive 7 % då måste vi ha stödet kvar. Likadant är det om du har en målgrupp i Norden som använder i större utsträckning IE6 då måste vi implementera stödet.