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 - Polopoly GeekNight Blixttal

1,075 views

Published on

  • Be the first to comment

  • Be the first to like this

Responsive Design - Polopoly GeekNight Blixttal

  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. Responsive Design
  4. 4. Vad det inte är:— ett nytt häftigt sätt att bygga mobilwebb
  5. 5. Faktum är:
  6. 6. Det finns ingen mobilwebb.
  7. 7. Det finns inte en specifik webb för mobila enheter. Allt är samma webb.
  8. 8. 640 x 480 800 x 600 1024 x 768
  9. 9. 1024 x 768
  10. 10. 1024 x 768320 x 480
  11. 11. 1024 x 768320 x 480
  12. 12. 768 x 1024 1024 x 768320 x 480
  13. 13. Responsive DesignFlexibel grid Flexibla bilder Media queries
  14. 14. /* Här ovanför finns grundstyle - färger, fonter etc */article { float: right; width: 70%;}aside { float: right; width: 30%;}
  15. 15. article { float: right; width: 70%;}aside { float: right; width: 30%;}@media all and (max-width: 768px) { article, aside { float: none; width: 100%; }}
  16. 16. article { float: right; width: 70%;}aside { float: right; width: 30%;}@media all and (max-width: 768px) { article, aside { float: none; width: 100%; }}
  17. 17. /* 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%; }}
  18. 18. ‣ 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
  19. 19. Tack!Henrik Ekelöf, Valtech @henrikekelof

×