Kuriosa

Webbdesign: En resa genom tiden

2015-01-18 15:40 #0 av: Anna

1991 lanserade Tim Berners-Lee den allra första HTML-baserade webbsidan. Det är över 20 år sedan. Trots stora förändringar sedan dess är vi ironiskt nog fortfarande i ett väldigt tidigt stadie.

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/

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Anmäl
2016-03-07 12:28 #1 av: SEOSEON.com

Bra sammanfattning. :) Det som kommer att ha störst inverkan på webbens framtid över de kommande åren är, i min åsikt, artificiell intelligens och maskininlärning. 

Efter det kanske det blir 3D-webben och virtual reality?

Anmäl
2016-07-10 16:05 #2 av: Aeria

Så intressant att läsa!

Minns att jag hade en hemsida på angelfire.. och herremingud vad icke användarvänligt det var! ;D

Anmäl
2016-09-18 22:19 #3 av: isla

Åh så roligt att läsa! Jag hade också hemsida på Angelfire och skapade min första 1996. Den handlade om Gotlandsrusset (som jag senare blev uppfödare av). Det känns ganska fantastiskt att det är 20 år sedan nu, jag har tex samma mailadress, som jag hade då och jag håller fortfarande på och bygger hemsidor, även om det bara är i liten, privat skala idag. Vem vet, kanske jag fortfarande håller på med webbprogrammering om 20 år eller så går jag helt över och enbart ägnar mig åt programmering. Framtiden får utvisa. :)

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.