Monokromt och begränsat (1989)

På slutet av 1980-talet fanns inga grafiska element - istället var det svarta skärmar med monokroma pixlar i grönt som kännetecknade denna era. Webbläsarna var Unix-baserade och kunde på sin höjd visa blinkande text och en muspekare.

Foto: ajmexico / Foter / CC BY

Utvecklingen går framåt (tidigt 1990-tal)

Först i början av 1990-talet introducerades HTML på ett sådant sätt att man kunde skapa text-baserade webbsidor. Även ankarlänkar introduceras tidigt och användes för att navigera i innehållet. 

1994, tre år efter att Tim Berners-Lee publicerat världens första hemsida, skapade han World Wide Web Consurtiom (W3C), för att introducera globala mål och standarder för framtidens hemsidor. W3C är aktuell och används världen över än idag.

År 1993 fanns det 600+ hemsidor online.

Tabeller - hur det började (1995)

Halvvägs in på 90-talet började de flesta webbläsare även kunna visa bilder. 

Det närmaste man kunde komma en struktur på hemsidorna var att dela upp innehållet i tabeller. Genom att placera tabeller inuti varandra kunde man arrangera sin text och sina bilder i ett rutnätsliknande system. Tack vare detta kunde man nu ha flera kolumner, något som tidigare varit omöjligt.

Tabell-konceptet var och förblev standard i många år, trots att dess ursprungliga funktion var att enbart strukturera upp siffror. 

Designers formgav layouten, medan utvecklare fick uppgiften att bryta ner den i små delar för att kunna anpassa den för webben. Detta kallades för "slicing designs".

När tabellerna öppnade upp fler och fler möjligheter för webbutvecklarna, blev det allt vanligare och mer accepterat att överarbeta webbsidorna - ungefär såhär: ju fler avancerade element, desto bättre. Man använde sig utav animerad text och GIF-bilder, och varenda hemsida hade snart en populär besöksräknare.

Här kom även de första webbhotell- och hemsidetjänsterna, som till exempel Geocities och Angelfire. 

JavaScript till undsättning och födelsen av Flash (1996)

När JavaScript lanserades kom ännu fler möjligheter. Pop-ups och dropdown-menyer blev snabbt populärt - både på gott och ont. 

JavaScript gjorde det även möjligt att för första gången kunna skapa användarprofiler, vilket banade väg för de allra första forumen. 

Något senare kom Flash - och nu hade man mer frihet än någonsin tidigare. Tabell-baserade webbsidor kryddade med Flash-element blev snart standard. Nu kunde man designa vilka former, layouter och animationer man ville. Nytt för Flash var dock att det nu krävdes ett plugin för att webbläsaren skulle kunna tolka innehållet.

Här började interaktiv webbdesign ta fart - ibland kanske lite för mycket. Animerade intron och alldeles för många effekter resulterade i tunga webbsidor som generellt inte bara var svårnavigerade för användaren, utan även påkostande för processorn.

När Apple lanserade sin första iPhone år 2007, valde de att helt utesluta Flash. Detta blev starten på en global utfasning. Idag ser man Flash mycket sällan.

År 1996 fanns det 650 000+ hemsidor online.

Apple, juli 1997

Tre stora nyheter: CSS, Frames och PHP (1998-1999)

Strax efter att Flash och JavaScript tog form föddes detta ännu bättre sätt att strukturera sin design - Cascading Style Sheets. CSS är ett enkelt koncept som går ut på att separera innehållet från formatteringen.  Grundtanken är att utseende bestäms i CSS-filen, medan innehållet skrivs i HTML.

Det största problemet med CSS låg i hur långsamt de aktuella webbläsarna anpassade sig och lärde sig det nya språket. Det tog flera år innan det fanns fullt stöd. Det var även här man började se skillnad på webbläsare för första gången - vissa hakade på direkt medan andra saknade stöd helt, vilket var en mardröm för utvecklarna.

På slutet av 1990-talet blev även Frames populärt - tack vare dessa kunde man visa två olika element sida vid sida i samma webbläsare.

PHP3 släpptes och blev grunden till det vi idag kallar dynamiska hemsidor.

CSS3 introducerades 1999 med ännu fler funktioner och förändrade återigen utvecklingen - helt i rätt riktning.

År 1999 fanns det 2,2 miljoner+ hemsidor online.

###

Google, februari 1999

Sociala medier tar form (2003)

Web 2.0 lanserades 2003 och blev grunden till sociala medier. Nu kunde man lättare skapa användarbaserad information i form av konton, bloggar och wikis.

År 2003 fanns det 38 miljoner hemsidor online.

Designen anpassas för smartphones (2007)

När smartphonen föddes blev det plötsligt ett krav för utvecklarna att ta fram webbsidor som både såg bra ut och fungerade på flera olika skärmstorlekar och enheter. Skulle designen vara exakt likadan på mobilen som på den stationära datorn hemma - eller skulle man skala av designen och anpassa funktionerna?

Nu blev det ännu viktigare med kolumner och rutnät. Formulär, navigation och knappar behövde packas ner för att bli så lätta och användbara som möjligt även på mycket små skärmar. 

Följsamt och avskalat (2010)

Det var Ethan Marcotte som myntade den idag mycket välkända termen "Responsive web design". I Sverige kallar vi tillvägagångssättet för "följsam webbdesign". Konceptet är det samma som tidigare - fortfarande HTML och CSS - men layouten byggs upp på ett sådant sätt att den anpassar sig efter enheten och dess skärmstorlek. 

För designern innebär detta att man behöver ta fram flera olika layouter till samma hemsida, eftersom den kommer se olika ut på olika enheter. Tack vare detta började ett nytt, mer effektiviserat, och framförallt "plattare" mode att träda fram. Hemsidor blev mer och mer avskalade - flashiga effekter togs bort och istället lade man mer fokus på rötterna av designen. Användarvänlighet stod nu i fokus.

I samband med detta släpptes även HTML5 - lättläst av både människor och datorer, och med stöd för den allra senaste multimedian.

År 2010 fanns det 240 miljoner+ hemsidor online.

Foto: axbom / Foter / CC BY-SA

Framtiden (2015-)

Kod fortsätter att utvecklas och förenklas hela tiden. Vi utvecklare får fler och fler möjligheter nästan konstant. På senare tid har vi bland annat fått nya CSS-units i form av vh och vw (viewport height och viewport width), vilket är mer flexibelt när man positionerar sina element. Detta möjliggör även vertikal centrering på ett bra mycket smidigare sätt än tidigare. 

Med tanke på att Internet och webbsidor bara funnits i ca 20 år - visst är det spännande att tänka - var kommer vi vara, och hur kommer Internet att se ut, om ytterligare 20 år?

Källor

http://blog.froont.com/brief-history-of-web-design-for-designers/

https://blog.kissmetrics.com/evolution-of-web-design/?wide=1

http://visual.ly/history-web-design

Screenshots från http://archive.org/web/