Responsive Web Design

  • 955 views
Uploaded 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: …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
955
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
42
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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