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. Henrik Ekelöf
Gränssnittsutvecklare på Valtech

4. Responsive Design

5. Vad det inte är:

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

7. Faktum är:

8. Det finns ingen
mobilwebb.

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

10. 640 x 480

11. 640 x 480
800 x 600

12. 640 x 480
800 x 600
1024 x 768

14. 1024 x 768

15. 1024 x 768
320 x 480

17. 1024 x 768
320 x 480

18. 768 x 1024 1024 x 768
320 x 480

19. Responsive Design
Media
Flexibel grid Flexibla bilder
queries

20. Responsive Design
Media
Flexibel grid Flexibla bilder
queries

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

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

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

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

35. /* 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%;
}
}

36. /* 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%;
}
}

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

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