Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design - Blixttal Polopoly GeekNight

567 views

Published on

  • Be the first to comment

  • Be the first to like this

Responsive Design - Blixttal Polopoly GeekNight

  1. 1. Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
  2. 2. Henrik EkelöfGränssnittsutvecklare på Valtech
  3. 3. Henrik EkelöfGränssnittsutvecklare på Valtech
  4. 4. Responsive Design
  5. 5. Vad det inte är:
  6. 6. Vad det inte är:— ett nytt häftigt sätt att bygga
  7. 7. Faktum är:
  8. 8. Det finns ingen mobilwebb.
  9. 9. Det finns inte en specifikwebb för mobila enheter.Allt är samma webb.
  10. 10. 640 x 480
  11. 11. 640 x 480 800 x 600
  12. 12. 640 x 480 800 x 600 1024 x 768
  13. 13. 1024 x 768
  14. 14. 1024 x 768320 x 480
  15. 15. 1024 x 768320 x 480
  16. 16. 768 x 1024 1024 x 768320 x 480
  17. 17. Responsive Design MediaFlexibel grid Flexibla bilder queries
  18. 18. Responsive Design MediaFlexibel grid Flexibla bilder queries
  19. 19. /* Här ovanför finns grundstyle - färger, fonter etc */article { float: right; width: 70%;}aside { float: right; width: 30%;}
  20. 20. article { float: right; width: 70%;}aside { float: right; width: 30%;}@media all and (max-width: 768px) { article, aside { float: none; width: 100%; }}
  21. 21. article { float: right; width: 70%;}aside { float: right; width: 30%;}@media all and (max-width: 768px) { article, aside { float: none; width: 100%; }}
  22. 22. article { float: right; width: 70%;}aside { float: right; width: 30%;}@media all and (max-width: 768px) { article, aside { float: none; width: 100%; }}
  23. 23. /* 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%; }}
  24. 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. 25. ‣ Optimera inte webbplatser för specifika typer av enheter (varken små eller stora)
  26. 26. ‣ 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
  27. 27. Tack!Henrik Ekelöf, Valtech @henrikekelof

×