38. ‣ Optimera inte webbplatser för
specifika typer av enheter (varken
små eller stora)
39. ‣ 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
Hej! Jättekul att få komma hit, tack Marcus Frödin för att jag fick möjligheten. \n\n
World wide web. \n\nEller rättare sagt - jag kommer att prata om hur vi ska \nbygga web för att den ska fortsätta att vara användbar \ni framtiden.\n
Jag heter Henrik Ekelöf och jobbar som gränssnittsutvecklare på Valtech\n\nJag har jobbat med bl.a. vårdguiden.se, 1177.se, SL, Riksbanken\n
Idag kommer jag att berätta vad Responsive Design är för något.\n\nJag vill också ge ett enkelt tekniktips. Det var svårt att välja ut en sak\natt visa, men jag ska visa något som jag tycker är något av\ndet viktigaste för att det ska bli bra när man bygger på det här sättet\n
Innan jag pratar om vad Responsive design ÄR \nså tänker jag berätta vad det inte är för något:\n\n- Responsive design är INTE en ny teknik för att bygga mobilwebb\n
Därför att faktum är att ...\n
... det finns ingen mobilwebb!\n
Det finns inte en separat webb som bara används av mobila enheter.\n\nIbland använder vi stora enheter för att komma åt webben. \n\nIbland använder vi små. \n\nOavsett vad vi använder så är det samma webb.\n\nVi borde bygga utifrån det sättet att tänka.\n\n
I begynnelsen byggde vi webb anpassat för skärmar i storleken 640 x 480\n- det var den lägsta upplösningen som folk använde på sina bildskärmar.\n\nUtvecklingen gick framåt - skärmarna blev större. \nVi kunde ta ett steg framåt och anpassa våra webbplatser till 800-bredd.\n\nYtterligare lite senare kunde vi gå upp till 1024-bredd.\n\nLäget var under kontroll.\n\n2007 hände det någonting.\n
I begynnelsen byggde vi webb anpassat för skärmar i storleken 640 x 480\n- det var den lägsta upplösningen som folk använde på sina bildskärmar.\n\nUtvecklingen gick framåt - skärmarna blev större. \nVi kunde ta ett steg framåt och anpassa våra webbplatser till 800-bredd.\n\nYtterligare lite senare kunde vi gå upp till 1024-bredd.\n\nLäget var under kontroll.\n\n2007 hände det någonting.\n
Skärmen krympte.\n\nMan kunde surfa på telefonen långt innan, \nmen nu gick det faktiskt att använda! \n\nPlötsligt började folk använda telefoner för att surfa på webben.\n
Många webbsajter som vi hade byggt var feta, tröga, långsamma. \n\nOch de var anpassade till en specifik typ av enhet, minst 1024 pixlar bred.\n\nPlötsligt var det en massa människor som bara hade 320 pixlar bred skärm.\n\nVi löste problemet genom att bygga en till sajt \n- en mobilwebb -\nspecialanpassad till enheter med 320 pixlar bred skärm.\n\nVi hade väl hyfsad koll på läget igen.\n\n
April 2010: iPad.\n
OK ... Vad gör vi nu?\n\nSka vi bygga en till surfplattewebb anpassad till 768-bredd?\n\nMan inser snabbt att lösningen att bygga en ny webbsajt för varje typ\nav enhet har väldigt dålig skalbarhet!\n\nDet håller inte i längden att optimera webbplatser för en viss typ av enheter. \nInte PC, inte mobiltelefoner\n
OK ... Vad gör vi nu?\n\nSka vi bygga en till surfplattewebb anpassad till 768-bredd?\n\nMan inser snabbt att lösningen att bygga en ny webbsajt för varje typ\nav enhet har väldigt dålig skalbarhet!\n\nDet håller inte i längden att optimera webbplatser för en viss typ av enheter. \nInte PC, inte mobiltelefoner\n
OK ... Vad gör vi nu?\n\nSka vi bygga en till surfplattewebb anpassad till 768-bredd?\n\nMan inser snabbt att lösningen att bygga en ny webbsajt för varje typ\nav enhet har väldigt dålig skalbarhet!\n\nDet håller inte i längden att optimera webbplatser för en viss typ av enheter. \nInte PC, inte mobiltelefoner\n
Lösningen heter Responsive design.\n\nResponsive design består av tre komponenter:\n\n- Ett flexibelt gridsystem (fluid grid)\n- Flexibla bilder och media\n- CSS Media Queries\n\nJag kommer strax att ge ett exempel på hur man använder Media Queries\n
\nNär man demonstrerar Responsive design så brukar man alltid \nta en browser och dra lite i fönstret så man ser hur sidan ändras.\n\nDet finns inget självändamål i att sidan ändras under tiden som\nman drar i fönstret - det är bara en cool bieffekt!\n\nSå här:\n\n\n
Responsive design låter oss bygga en sajt som hantera alla tänkbara\nstorlekar på skärmar.\n\nDet är en naturlig utveckling av hur vi bygger webb, lika naturlig som när vi började\nanvända CSS istället för tabeller för att göra layout. \n\nEn vanlig fråga är “kan jag dölja en viss del av sidan när den visas i mobilen”\n\n- Visst. Och din sajt ska antagligen ha färre saker än vad din “stora” sajt\nhar idag. Men inte på grund av att den visas i mobilen, \nutan för att din “stora” sajt är fylld med skräp som ingen använder.\n\nAlltså: Det ska antagligen inte finnas på din stora sajt heller.\n\n
Responsive design låter oss bygga en sajt som hantera alla tänkbara\nstorlekar på skärmar.\n\nDet är en naturlig utveckling av hur vi bygger webb, lika naturlig som när vi började\nanvända CSS istället för tabeller för att göra layout. \n\nEn vanlig fråga är “kan jag dölja en viss del av sidan när den visas i mobilen”\n\n- Visst. Och din sajt ska antagligen ha färre saker än vad din “stora” sajt\nhar idag. Men inte på grund av att den visas i mobilen, \nutan för att din “stora” sajt är fylld med skräp som ingen använder.\n\nAlltså: Det ska antagligen inte finnas på din stora sajt heller.\n\n
Här har vi en enkel HTML-sida. Innehållet är uppdelat i två kolumner\n\nSå här ser sidan ut på en vanlig dator\n\nOch så här i en telefon: Sidan har klämts ihop. Vi vill inte ha två kolumner i mitten.\n
\nHär är den CSS som används för att lägga kolumnerna bredvid varandra\n
Vi lägger till en media query - CSS som specifikt riktar sig till\ni detta fallet skärmar bredare än 768 pixlar\n\nDär tar vi bort float och sätter bredden till 100 %\n
\nNu ser det riktigt bra ut i mobilen också!\n
\nProblemet här är att vi utgår från stor skärm där vi redan har applicerat layout\npå elementen. \n\nVi tar bort den layouten för smalare skärmar.\nVi lägger till kod, och gör saker vi gjort ogjorda. \n\nInte effektivt!\n
\nSå - om vi istället för att skala neråt ...\n
\n... går från liten skärm till stor - och skalar uppåt istället\n\nVi låter smala skärmar få bara vår grundstyle.\n\n\n
\nSedan lägger vi till en annan media query som istället för att rikta sig till smala skärmar\nriktar sig till breda skärmar. Alla som är BREDARE än 768.\n\nVi behöver inte göra ogjort något, vi lägger till det som behövs för att få \nkolumner när skärmbredden tillåter det\n\nPå så sätt blir vår CSS mycket mer effektiv. Vi jobbar som man ska med CSS!\n
Optimera inte webbplatser för specifika typer av enheter (varken små eller stora)\n\nResponsive Design är det sätt vi kommer bygga webb på den närmaste framtiden\nOm du inte har börjat testa hur det fungerar så är det dags nu.\n\nJobba alltid nerifrån och upp med CSS\n
Optimera inte webbplatser för specifika typer av enheter (varken små eller stora)\n\nResponsive Design är det sätt vi kommer bygga webb på den närmaste framtiden\nOm du inte har börjat testa hur det fungerar så är det dags nu.\n\nJobba alltid nerifrån och upp med CSS\n
Optimera inte webbplatser för specifika typer av enheter (varken små eller stora)\n\nResponsive Design är det sätt vi kommer bygga webb på den närmaste framtiden\nOm du inte har börjat testa hur det fungerar så är det dags nu.\n\nJobba alltid nerifrån och upp med CSS\n