Building responsive websites

841 views

Published on

Introduction in responsive web design.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
841
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building responsive websites

  1. 1. W W W Building responsive websites E2 Partners | 9 Oktober 2013 | Erik Lenaerts
  2. 2. Easy reading Easy navigation Minimal scrolling Minimal resizing Responsive design is
  3. 3. Mobile behavior Touch enabled Tappiness Responsive design is not per se
  4. 4. Across device One codebase, one url for all devices.
  5. 5. If you build a new website or web application Why not?
  6. 6. Grid Solid visual and structural balance of web-sites Layout the site elements on the grid Use the grid for device specific breakpoints
  7. 7. Automatic image resizing max-width: 100%; height: auto;
  8. 8. Media queries @media(max-width: 768px)
  9. 9. Text % em rem vw vh vmin 1em = 12pt = 16px = 100% Aim between 50 and 75 characters per line ┌ ├ └ Use relative font sizes Font size and line height are proportionally related. http://www.pearsonified.com/2011/12/golden-ratio-typography.php http://www.webdesignerdepot.com/2012/10/a-simple-guide-to-responsive-typography/ http://www.sitepoint.com/new-css3-relative-font-size/
  10. 10. Browser equality
  11. 11. Progressive Enhancement
  12. 12. RESSResponsive Webdesign with server side coding If you want layout adjustments across devices And optimization at the component level to increase performance or tune user experience You trust server-side device detection with sensible defautls
  13. 13. Bootstrap 3 Foundation 4 Skeleton HTML5 Kickstart http://responsive.vermilion.com/compare.php
  14. 14. CSS3 + HTML5 + Javascript J Q u e r y , L E S S , f o n t a w e s o m e , A n g u l a r J S , …
  15. 15. Design should be great Design should be gorgeous Design should be addictive Design should be intuitive

×