Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Skapa bättre upplevelser med Responsive Web Design

by Emilia Blom on Nov 25, 2011

2,646 views

Presentation from my talk about Responsive Web Design at CAP&Design Live 23d & 24th Nov 2011.

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Apple Keynote

Usage Rights

File a copyright complaint

3 Embeds 42

http://dl.dropbox.com	29
http://paper.li	10
http://a0.twimg.com	3

Statistics

Likes: 9
Downloads: 41
Comments: 2
Embed Views: 42
Views on SlideShare: 2,604
Total Views: 2,646

1–2 of 2 previous next

Martin Sandström, Interaction designer at Onzo Snygg presentation o bra intro till responsive. Tack for att du delar. 6 months ago
Are you sure you want to
Hanna Karlsson, Digital kommunikatör at Improove Tack för bra slides. Gav en bra överblick om vad responsive web design är. Även om man förstår att det gör sig bäst med prat till ^^ 1 year ago
Are you sure you want to

\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Förra veckan gav stiftelsen .se ut sin årliga rapport ”Svenskarna och internet”. Där kom det fram att vi på ett år har fördubblat vårt mobila surfande. \n\nVarje dag skeppas över en miljon touch screen-enheter till butiker över hela världen. Små datorer som var och en har ett eget operativsystem, webbläsare, skärmstorlek och -upplösning.\n\nFör oss som designar gränssnitt är det verkligen dags att inse följande: vi kan inte längre strunta i eller nedprioritera den mobila webb-upplevelsen. Användarna måste få en lika bra, eller kanske till och med bättre upplevelse när de surfar mobilt.\n\nMen hur ser vi till att ge användarna en optimal upplevelse oavsett vilken enhet de använder eller i vilken kontext de befinner sig?\n\nAtt designa webbgränssnitt som funkar med de vanligaste webbläsarna var komplicerat nog redan innan marknaden översvämmades av en uppsjö olika telefoner och surfplattor.\n
Förra veckan gav stiftelsen .se ut sin årliga rapport ”Svenskarna och internet”. Där kom det fram att vi på ett år har fördubblat vårt mobila surfande. \n\nVarje dag skeppas över en miljon touch screen-enheter till butiker över hela världen. Små datorer som var och en har ett eget operativsystem, webbläsare, skärmstorlek och -upplösning.\n\nFör oss som designar gränssnitt är det verkligen dags att inse följande: vi kan inte längre strunta i eller nedprioritera den mobila webb-upplevelsen. Användarna måste få en lika bra, eller kanske till och med bättre upplevelse när de surfar mobilt.\n\nMen hur ser vi till att ge användarna en optimal upplevelse oavsett vilken enhet de använder eller i vilken kontext de befinner sig?\n\nAtt designa webbgränssnitt som funkar med de vanligaste webbläsarna var komplicerat nog redan innan marknaden översvämmades av en uppsjö olika telefoner och surfplattor.\n
Frågor:\nHur många är AD?\nHur många är utvecklare?\nVem är interaktionsdesigner?\nVem är projektledare? Eller kanske strateg? Vem är copy?\n\nVem har designat för eller byggt en mobilversion av den sajt?\nVem har designat för eller byggt en iPhone-app? Android-app?\nVem har designat för eller byggt en webbapp?\n\n
Jag jobbar som interaktionsdesigner på digitala byrån Good Old i Malmö. Innan dess pluggade jag sociologi, etnologi och media kommunikation i Tyskland. Efter det läste jag Digital media på Hyper Island i Stockholm.\n
Jag ska prata om hur man kan skapa bättre användarupplevelser med hjälp av det som kallas responsive webdesign. Först går jag igenom vad det är för något. Sen pratar jag lite om hur det går till konkret, både ren produktion och hur man bör jobba som team. Jag avslutar med att lista lite för- och nackdelar med tips på hur man kan tänka när man kan använda sig av det.\n
Begreppet Responsive Web Design myntades av Ethan Marcotte och är egentligen mer än bara en teknisk lösning. Jag skulle säga att det har vuxit fram tre aspekter av RWD:\n\nFilosofi: Av sina anhängare har det mer eller mindre utropats till en filosofi. Detta handlar mest om att se till tänket som ligger bakom den tekniska lösningen.\nUtförande: interaktionsdesign, grafisk form och frontend-utveckling.\nArbetsprocess: vi behöver ändra på hur vi arbetar för att kunna skapa anpassande webbplatser.\n
Det hela går ut på att man redan från början designar för det lilla, mobila gränssnittet. Vi säkrar kvalitet och tillgång för de användare som har minst skärm och oftast sämst uppkoppling. För att kunna göra det behöver man rensa och förbättra sitt content.\n\n
\n
\n
\n
\n
RWD är ett sätt att tänka och arbeta och hänger tätt ihop med begreppen ”mobile first” och ”content first” (myntade av Luke Wroblewski).\n\nDet hela går ut på att man redan från början designar för det lilla, mobila gränssnittet. Vi säkrar kvalitet och tillgång för de användare som har minst skärm och oftast sämst uppkoppling. För att kunna göra det behöver man rensa och förbättra sitt content.\n\n\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
Visa sajter:\n\nblog.mediaevolution.se\n\nquarterly.co\n\n...\n
\n
Om en design ska kunna anpassa sig efter en skärms storlek och upplösning måste vi sluta använda oss av fasta mått som pixlar.\n\nWebben har alltid varit ett flexibelt medium och det blir mer och mer tydligt att vi måste sluta utgå från printmetaforer som till exempel canvas när vi designar för digitala gränssnitt. Webbläsarens fönster är ingen fast duk vi kan måla på och sedan utgå från att tavlan kommer se likadan ut för alla användare. Snarare tvärtom. \n\nOch det gör inget! Det är dags att börja leva med och till med omfamna detta. RWD är till för att hjälpa oss på traven.\n
\n
Ett exempel på hur man kan designa i procent istället för pixlar är att använda sig av den relativa måttenheten em ( bild av ett M) när man bestämmer fontstorlekar.\n\nDet finns en formula man kan utgå ifrån för att räkna om från pixlar till em. Det som är bra med denna är att den går att översätta till alla andra aspekter av att bygga responsive.\n\nDenna formula ser ut så här:\n\nTarget / Context = Result\n\nDe flesta webbläsare utgår från 16px som ett mått på 100%. (Kanske nämna: För att detta ska slå igenom måste man använda ett reset stylesheet.) Om vi då anger att font-size på h1 ska vara 100% kommer den visas ut som 16px. \n\nOm vi nu vill att h1 ska vara 24 pixlar, men vill ange detta i em räknar vi så här:\n\n24/16=1.5 Alltså anger vi font-size 1.5em\n\nLätt som en plätt...\n\n\n
Kontentan för detta är att vi kan applicera samma tänk på flexibel gridbaserad layout som flexibel typsättning: tänk proportionerligt!\n\nVarje rad och kolumn kan uttryckas som en proportion av sitt innehåll istället för ett antal fasta pixlar! Gå från pixlar till procent! (bild)\n\nFormulan fungerar även på detta. Om man tänker att webbläsarens fönster är 100% blir det så här:\n\n#page {\nmargin: 36 px auto;\nwidth: 90%\n}\n\nÄven här kan vi använda formulan ovan. Vi måste bara tänka på två saker:\nNär vi räknar ut bredden på ett elements marginaler är context lika med bredden på elementets container.\nFör padding är context lika med bredden på elementet självt.\n\n
Kontentan för detta är att vi kan applicera samma tänk på flexibel gridbaserad layout som flexibel typsättning: tänk proportionerligt!\n\nVarje rad och kolumn kan uttryckas som en proportion av sitt innehåll istället för ett antal fasta pixlar! Gå från pixlar till procent! (bild)\n\nFormulan fungerar även på detta. Om man tänker att webbläsarens fönster är 100% blir det så här:\n\n#page {\nmargin: 36 px auto;\nwidth: 90%\n}\n\nÄven här kan vi använda formulan ovan. Vi måste bara tänka på två saker:\nNär vi räknar ut bredden på ett elements marginaler är context lika med bredden på elementets container.\nFör padding är context lika med bredden på elementet självt.\n\n
Media queries är den mekanism som ger den slutgiltiga finishen. De är till för att reda ut vilken typ av enhet som renderar en webbplats. En media query kan se ut så här:\n\n@media screen and (min-width: 1024px) {\nbody {\nfont-size 100%;\n}\n}\n\n\nMedia Queries ger oss ett vokabulär att uttrycka hur vi vill att vår design ska te sig på olika enheter och skärmupplösningar.\n\n\n
Det som händer när en webbläsare läser vårt stylesheet är att den ställer några enkla frågor kring den enhet som används:\n\nÄr detta en screen media type? (alltså någon form av dator med skärm)\nOm ja, klarar skärmen en upplösning på minst 1024 pixlar?\n\nFår webbläsaren ja på båda frågorna läser den in den angivna CSS:en. Om inte ignorerar den detta och fortsätter som vanligt.\n\n\n
Det som händer när en webbläsare läser vårt stylesheet är att den ställer några enkla frågor kring den enhet som används:\n\nÄr detta en screen media type? (alltså någon form av dator med skärm)\nOm ja, klarar skärmen en upplösning på minst 1024 pixlar?\n\nFår webbläsaren ja på båda frågorna läser den in den angivna CSS:en. Om inte ignorerar den detta och fortsätter som vanligt.\n\n\n
Det som händer när en webbläsare läser vårt stylesheet är att den ställer några enkla frågor kring den enhet som används:\n\nÄr detta en screen media type? (alltså någon form av dator med skärm)\nOm ja, klarar skärmen en upplösning på minst 1024 pixlar?\n\nFår webbläsaren ja på båda frågorna läser den in den angivna CSS:en. Om inte ignorerar den detta och fortsätter som vanligt.\n\n\n
Saker man kan fråga efter:\nBredd (både display och skärm)\nHöjd (både display och skärm)\nAspect-ratio (både display och skärm)\nFärg\nFärg-index\nMonochrome\nUpplösning\n\n
Saker man kan fråga efter:\nBredd (både display och skärm)\nHöjd (både display och skärm)\nAspect-ratio (både display och skärm)\nFärg\nFärg-index\nMonochrome\nUpplösning\n\n
Saker man kan fråga efter:\nBredd (både display och skärm)\nHöjd (både display och skärm)\nAspect-ratio (både display och skärm)\nFärg\nFärg-index\nMonochrome\nUpplösning\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
När vi vet vilka enheter vi vill täcka upp kan vi göra en lista som kan se ut så här:\n\n320px - Telefoner i porträttläge\n480px - Telefoner i landskapsläge\n600px - Mindre surfplattor (Kindle, Nook) i porträttläge\n768px - Tio-tums-plattor som iPad i porträttläge\n1024px - iPad och andra större surfplattor i landskapsläge, samt vissa laptops, netbooks och desktops\n1200px - Storbildsskärmar, laptop och desktop\n\nMen det är fortfarande långt ifrån alla webbläsare som klarar media queries.\n\nGör research kring de enheter du väljer att fokusera på. Ta reda på vilka media queries de stödjer så att du kan testa därefter.\n\nVi kan alltså använda media queries för att styra exakt hur vår design ska visas ut i olika lägen och därmed optimera utvisningen av vårt innehåll anpassat för olika enheter skärmbredder. Vi skräddarsyr vår design för olika upplösningsomfång.\n\n(Bild på olika upplösningsomfång med varsin bild av en egen designvariant.)\n\nDe gränsvärden man kan använda:\n\n(max-width: 768px)\nDe flesta telefoner och surfplattor faller passar in under denna tröskel.\nNu kan vi rätta till de element som inte skalar ner så snyggt i den här storleken.\nOm man till exempel vill ändra storleken på en font kommer den overrida den vanliga CSS:en, men den behåller alla andra attribut som till exempel färg och stil.\n\nDetta går så klart även att applicera för att anpassa till stora skärmar. Då använder man \n\n@media screen and (min-width: 1200px) {\n…\n\n\n\n
\n
Vattenfallsmodellen med de traditionella överlämningarna mellan designteam och utvecklare fungerar inte för ett RWD-projekt. Dessa två team behöver flätas samman till en enhet som kan arbeta iterativt.\n\n\n\n\n\n\n
Det är inte kostnadseffektivt eller ens möjligt att skissa ut detaljerad visuell design för alla möjliga bredder. Grafisk form måste fungera mer som en stilmall, som designers och utvecklare sedan kan diskutera och utgå ifrån under arbetet med att testa och förbättra slutresultatet.\n\n\n
Flexibel design kräver en flexibel designprocess. Design <3 Utveckling!\n\nMen detta kräver även ett nytt sätt att kommunicera design med kunder. Det kan vara svårt att förklara för en kund att det inte går att se exakt hur det kommer se ut förrän man börjat bygga.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

9 Likes

Anders Andersen, Product Manager at Mobiletech AS 1 year ago
Louise Tralau Tags responsive web 1 year ago
Max Oso, World at Pappa 1 year ago
Daniel Hansson, Web strategist at Valtech 1 year ago
Peter Svenonius, Business developer specializing in Sales and Marketing at LOOA, consultant Tags responsive web design 1 year ago
Per Addenbrooke, Interaction and service designer at inUse 1 year ago
Patric Lanhed, Interactive Developer at KAN 1 year ago
Emanuel Hallklint, Designer, Self employed consultant at Järna Kommunikation 1 year ago
Fredrik Cederman, Editorial Development IT at Expressen 1 year ago

Skapa bättre upplevelser med Responsive Web Design Presentation Transcript

No transcript available.

Skapa bättre upplevelser med Responsive Web Design

by Emilia Blom on Nov 25, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 42

Statistics

Skapa bättre upplevelser med Responsive Web Design Presentation Transcript