Responsive Design - Polopoly GeekNight Blixttal

Transcript

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. — ett nytt häftigt sätt att bygga mobilwebb Vad det

   inte är:

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

9. None

10. 1024 x 768

11. 1024 x 768 320 x 480

12. None

13. 1024 x 768 320 x 480

14. 1024 x 768 320 x 480 768 x 1024

15. Flexibla bilder Flexibel grid Media queries Responsive Design

16. None
17. None

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%; } }
20. None

21. article { float: right; width: 70%; } aside { float:

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

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