Responsive Design - Polopoly GeekNight Blixttal

837 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
837
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×