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
10. 1024 x 768
11. 1024 x 768 320 x 480
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
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