1. Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/

2. Henrik Ekelöf
Gränssnittsutvecklare på Valtech

3. Responsive Design

4. Vad det inte är:
— ett nytt häftigt sätt att bygga mobilwebb

5. Faktum är:

6. Det finns ingen mobilwebb.

7. Det finns inte en specifik webb för
mobila enheter.
Allt är samma webb.

8. 640 x 480
800 x 600
1024 x 768

10. 1024 x 768

11. 1024 x 768
320 x 480

13. 1024 x 768
320 x 480

14. 768 x 1024 1024 x 768
320 x 480

15. Responsive Design
Flexibel grid Flexibla bilder Media queries

18. /* Här ovanför finns grundstyle - färger, fonter etc */
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}

19. article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
@media all and (max-width: 768px) {
article,
aside {
float: none;
width: 100%;
}
}

21. article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
@media all and (max-width: 768px) {
article,
aside {
float: none;
width: 100%;
}
}

24. /* Här ovanför finns grundstyle - färger, fonter etc */
@media all and (min-width: 768px) {
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
}

25. ‣ 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
‣ Jobba alltid nerifrån och upp med CSS

26. Tack!
Henrik Ekelöf, Valtech
@henrikekelof