Blixttal på Polopoly GeekNight

Publicerad tisdag den 22 Nov 2011 20:56

Här hittar du slides och presenter notes från mitt blixttal på Polopoly GeekNight den 22 november 2011. Presentationen finns även på Speaker Deck.

Slide 3

Idag kommer jag att berätta vad Responsive Design är för något.

Jag vill också ge ett enkelt tekniktips. Det var svårt att välja ut bara en sak att visa, men jag ska visa något som jag tycker är det viktigaste för att det ska bli bra när man bygger på det här sättet

Innan jag pratar om vad Responsive design är så tänker jag berätta vad det inte är för något:

Slide 4

Responsive design är INTE en ny teknik för att bygga mobilwebb

Slide 5

Därför att faktum är att …

Slide 6

… det finns ingen mobilwebb

Det finns inte en separat webb som bara används av mobila enheter. Ibland använder vi stora enheter för att komma åt webben. Ibland använder vi små.

Oavsett vad vi använder så är det samma webb.

Vi borde bygga utifrån det sättet att tänka.

Slide 8

I begynnelsen byggde vi webb anpassat för skärmar i storleken 640 x 480 — det var den lägsta upplösningen som folk använde på sina bildskärmar.

Utvecklingen gick framåt — skärmarna blev större.

Vi kunde ta ett steg framåt och anpassa våra webbplatser till 800-bredd.

Ytterligare lite senare kunde vi gå upp till 1024-bredd.

Läget var under kontroll.

Slide 9

2007 hände det någonting: Skärmen krympte.

Man kunde komma ut på internet från telefonen långt innan, men nu gick det faktiskt att använda!

Plötsligt började folk använda telefoner för att surfa på webben.

Slide 10

Många webbsajter som vi hade byggt var feta, tröga, långsamma, och de var anpassade till en specifik typ av enhet, minst 1024 pixlar bred.

Plötsligt var det en massa människor som bara hade 320 pixlar bred skärm.

Slide 11

Vi löste problemet genom att bygga en till sajt — en mobilwebb — specialanpassad till enheter med 320 pixlar bred skärm.

Vi hade hyfsad koll på läget igen.

Slide 12

April 2010: iPad.

Slide 13

OK … Vad gör vi nu?

Slide 14

Ska vi bygga en till surfplattewebb anpassad till 768-bredd?

Man inser snabbt att lösningen att bygga en ny webbsajt för varje typ av enhet har väldigt dålig skalbarhet!

Det håller inte i längden att optimera webbplatser för en viss typ av enheter. Inte PC, inte mobiltelefoner

Slide 15

Lösningen heter Responsive design.

Responsive design består av tre komponenter:

  • Ett flexibelt gridsystem (fluid grid)
  • Flexibla bilder och media
  • CSS Media Queries

Slide 16

När man demonstrerar Responsive design så brukar man alltid ta en browser och dra lite i fönstret så man ser hur sidan ändras. Det finns inget självändamål i att sidan ändras under tiden som man drar i fönstret — det är bara en cool bieffekt.

Responsive design låter oss bygga en sajt som hantera alla tänkbara storlekar på skärmar. Det är en naturlig utveckling av hur vi bygger webb, lika naturlig som när vi började använda CSS istället för tabeller för att göra layout.

En vanlig fråga är “kan jag dölja en viss del av sidan när den visas i mobilen”

— Visst. Och din sajt ska antagligen ha färre saker än vad din “stora” sajt har idag. Inte på grund av att den visas i mobilen, utan för att din “stora” sajt är fylld med skräp som ingen använder. Alltså: Det ska antagligen inte finnas på din stora sajt heller.

Slide 17

Här har vi en enkel HTML-sida. Innehållet är uppdelat i två kolumner

Så här ser sidan ut på en vanlig dator

Och så här i en telefon: Sidan har klämts ihop. Vi vill inte ha två kolumner i mitten.

Slide 18

Här är den CSS som används för att lägga kolumnerna bredvid varandra

Slide 19

Vi lägger till en media query — CSS som specifikt riktar sig till i detta fallet skärmar bredare än 768 pixlar

Där tar vi bort float och sätter bredden till 100 %

Slide 20

Nu ser det riktigt bra ut i mobilen också!

Slide 21

Problemet här är att vi utgår från stor skärm där vi redan har applicerat layout på elementen.

Vi tar bort den layouten för smalare skärmar. Vi lägger till kod, och gör saker vi gjort ogjorda.

Inte effektivt!

Slide 22

Så — om vi istället för att skala neråt …

Slide 23

… går från liten skärm till stor — och skalar uppåt istället

Vi låter smala skärmar få bara vår grundstyle.

Slide 24

Sedan lägger vi till en annan media query som istället för att rikta sig till smala skärmar riktar sig till breda skärmar. Alla som är bredare än 768.

Vi behöver inte göra saker vi gjort ogjorda, vi lägger till det som behövs för att få kolumner när skärmbredden tillåter det

På så sätt blir vår CSS mycket mer effektiv. Vi jobbar som man ska med CSS!

Slide 25

Sammanfattning:

  • Optimera inte webbplatser för specifika typer av enheter (varken små eller stora)
  • Responsive Design är det sätt vi kommer bygga webb på den närmaste framtiden. Om du inte har börjat testa hur det fungerar så är det dags nu.
  • Jobba alltid nerifrån och upp med CSS
Kort adress till sidan: http://eklf.se/ppygn