Responsive Web Design

1,334 views

Published on

Slides to accompany a talk I gave at Conestoga College as part of their User Experience Guest Lecture Series. The description of the talk was:

In 2012 .net magazine named Responsive Web Design (RWD) as the number two Web design trend. Mashable called 2013 the year of RWD. Varying screen resolutions, window widths, preferences, and fonts have shaped how one is able to design on the Web. RWD aims to answer the question of how to best respond to the user’s view to provide an optimal user experience. Join us for a talk into this trendy topic, where we will cover the ins and outs and best practices of RWD by creating a responsive site for a small company.

Code from the talk is available at: https://github.com/BeardedCoder/ResponsiveWebDesign

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

No Downloads
Views
Total views
1,334
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Design Matthew Campbell @BeardedCoder
  2. 2. What Is It?
  3. 3. Approaches
  4. 4. Graceful Degradation
  5. 5. Progressive Enhancement
  6. 6. Mobile First
  7. 7. Tip #1 let the device width rule
  8. 8. HTML <head> … <meta name="viewport" content="width=device-width" /> </head>
  9. 9. Tip #2 use relative fonts (em, %)
  10. 10. Tip #3 use relative widths (%)
  11. 11. Tip #4 favour max- and min-width
  12. 12. Tip #5 make your images flexible
  13. 13. HTML <img src="panda.png" alt="A panda eating bamboo" /> CSS img { width: 100%; height: auto; }
  14. 14. Media Queries
  15. 15. Tip #6 use media queries to adapt your layout to devices
  16. 16. CSS @media screen and ( min-width: 780px ) { .sidebar { display: block; } .main { max-width: 800px; margin-left: 240px; padding-left: 50px; border-left: 1px solid #999; } }
  17. 17. CSS @media screen and ( min-width: 780px ) and ( max-width: 1080px ) { }
  18. 18. CSS @media all and ( max-width: 699px ) and ( min-width: 520px ), ( min-width: 1151px ) {{ }
  19. 19. Website: http://matthew-campbell.ca Twitter: @BeardedCoder GitHub: BeardedCoder

×