Jeremy Keith: The Spirit of the Web

Jeremy pratar på Smashing Conferens 2012 om The Spirit of the Web.
Här finns videon på Vimeo.

Referat från föreläsningen:Har webben en själ?

Webben är routers, servers, inte ett cloud.  Men det vårt att förklara vad webben är. För vissa är det shopping och andra är det information.

”The web is agreement”.Vi kommer överens om att använda standarder, protokoll osv.

Men, filer, URL, HTTP…

POST är det viktigaste verbet. handlar om adda saker, deleting saker.
GET är inte delete.

Basecamp använde delete links. Men google accesselorator tool som folk hade installerat hämtade länkar i förväg och så plötsligt så deletades deras filer… Så helt fel att använda länkar för deletes. det är post.

Log out är inte heller länkar utan knappar!

GET – man hämtar filer. Mest html filer,css, javascript som vi hämtar. Vi pratar om webbsidor, webb app. Men de här sidorna kan presenteras på olika devices och vi vet inte vilken kapacitet, storlek, nätverkshastighet som betraktarna har. Webben handlar inte om att skaparna har kontroll, utan en massa saker vi inte vet. Förr bestämde vi att alla sajter skulle vara 640*480, sen 800*600 och därefter 1024*768…
Kontroll är inte en del av webbens själ!

Läs ”A Dao of Web Design” av John Allsopp som han skrev för 12 år sedan på A List Apart. Handlar om att acceptera att vi inte vet hastighet, skärmstorlekar och att vi inte har kontroll som designers och utvecklare.

Photoshop – innan du ens har börjat så måste du ange storlek. Så innan du ens kommit igång så kräver verktygen att du ska vara i kontroll. CMS gör också antaganden av hur content ska vara och se ut.

Style Tiles – använd inte layout och inte bestämd storlek. Börja med de individuella bitarna som ska skapa sajten, som byggstenar. Som ett mood board. Jeremy visar upp ett bibliotek med html/css element.

Börja med content istället för skapa ett ramverka att hälla i content i. Börja inifrån och ut med responsive design. Det betyder inte att man ger upp kvalitet för att man ger upp kvalitet. Responsive är mer en konversation mellan användare och content.
”My website will meet you wherever you are”

”Fluid is in the spirit of the web” – jeremy visar den första webbsidan som gjordes i olika skärmstorlekar.. (bara text förstås.)

Keeping a website responsive. Progressive enchancement, starta med det lägsta och ge nya devices allt det där som de klarar av i olika lager. Byggstenarna är strukturer, beteende och presentation. Tex vid javascript – fråga webbrowsern om den förstår geolocation och om den klarar det så bygger vi vidare på det. Progressive enchancement är att  webbsidor behöver inte se likadana ut i varje browser. Då accepterar man att man inte längre har kontrollen. Testa istället om det fungerar.
Men du kan inte testa på alla devices… Jeremy köpte en massa och de låg bara där, så han skrev på Twitter att de var fria att använda. Inom 24 -4 8 h så hade massa andra kommit över med deras devices till hans labb i Brighton. Share är just vad som är internets spirit. GitHub är absolut sharing, där du kan ta upp ngn annans arbete och använda det.

Responsive images. Vi började med hacks och workarounds, men det funkar inte i längden, därför behöver vi en standard (Srcset) eller filtypernas format (JPEG2000) ska vara responsive i sig. Men just nu måste vi använda oss av hacks och javascript.De flesta hacksen följer dessa regler – börja med den lilla formatet och ladda sedan ned det stora om det behövs. Men vi vill ju inte ladda ner båda båda två. Men tänk så här:

I CSS kan du säga att den lilla bilden ska skalas upp till en större bild, men du kan via javascript sedan byta ut bilden till det stora. För användarens är upplevelsen bra även om man laddar ner två. För de får ju snabbt upp en bild, om än den först ser lite hackig ut innan den byts ut mot den nya som laddats ner. Kommer ni ihåg lowsrc? Visade en mindre filstorlek medan man laddade ned den större bilden. Det är samma sak här, som när vi inte hade höghastighets internet.
Jeremy lägger inte ned energi på att göra olika bilder, utan på att göra filstorleken på bildstorleken mindre istället. Använder ”content-is-first” metod. Vad är viktigast i bilden? Ansiktet? Ok, då kan du göra det andra mer blurrigt och spara på kb. Förr i tiden hade vi ett mål på 100 Kb per, men nu är vi uppe på 1 mB istället. Vi har alltså samma problem nu med responsive som förr då vi hade sämre hastighet på nätet. Det värsta som finns är när ngt är slött och tar lång tid att ladda ner – performance!

Steve Sauders.

Conditional loading for files. Vilka MÅSTE vara med i på webbsidan? Lägg sedan till saker. Jeremy lägger till mer grafiska element med javascript. Te x video att titta på. Reducera antalet http requests.  Tänk inte att ni måste ha med Bootstrap, jQuery osv. Vänta tills ni har problemen! För CSS finns det massor av ideer för att minska storlek request te x; CSS Sprites, base-64 encoding, gradients, rounded corners. Det här är varför man pratar om MOBILE first

Glömt inte att URL är delar av hur man hittar fram till dokumentet, dvs filstrukturen och vad sökvägen har döpts till. Ex: /things/add/
URLer är definitiv internets själ.

Etiketter: ,

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s


%d bloggare gillar detta: