0
Responsive Web Design
Chris Love
http://Love2Dev.com
@ChrisLove
Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Mobile Web, Jav...
High Performance Single Page Web
Applications
•
•
•
•
•
•
•

Responsive Design
Touch
Mobile First
SPA
Extensible, Scalable...
Slide Deck & Source Code
• Slide Deck – slidesha.re/15YTrTT
• Source Code – http://GitHub.com/docluv
“this unspoken agreement to pretend that we had a certain size. And
that size changed over the years. For a while, we all ...
“The emergence of ideas like “responsive design” and “future-friendly
thinking” are in part a response to the collective r...
“Any attempt to draw a line around a particular device class has as
much permanence as a literal line in the sand. Pause f...
“How long do you think that hardware will be able to be found? Three years
from now when a computer dies and has to be rep...
Responsive Web Design
• Introduced by Ethan Marcotte 2010 - bit.ly/178an9e
• Web Design Approach To Create An Optimal View...
Mobile First
• Determine The Most Important Information
• Expand From There
• Start Responsive Design Mobile First
Fluid Layout
• Stretch as the Browser ViewPort Changes
• Browser’s Viewable Area Inside the Chrome

• Serve as the Foundat...
Media Queries
@media (min-width: 600px) {
/* Selectors & Rules */
}
@media (min-width: 820px) {
/* Selectors & Rules */
}
...
Responsive Navigation
• Use Media Queries to Optimize Rendering
• Show and Hide Content Based on ViewPort Dimensions
• Cre...
Responsible Web Design
• Practice of Providing Appropriate Content by Context
• Primarily to Limit Image and Content Affec...
matchMedia
• Allows You To Bind JavaScript Callbacks to MediaQuery Breakpoints
• Available in All Modern Browsers (IE 10+)...
matchMedia
window.matchMedia("(min-width: 400px)").addListener(function (e) {
if(e.matches)
{
console.info("the view port ...
The Image Problem
• Images Account for Majority of Downloaded Content
• Screen Diversity Means Variety of Image Sizes & Qu...
The Image Problem – Proposed
Solutions
• Picture Element – Already Killed
• Srcset – Current Specification Path
• Src-N – ...
SRCSET
<img src="fallback.jpg" alt=""
srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x,
med.jpg 1x, med-hd.jpg 2x “/>
SRC-N
<img src="fallback.jpg" alt=""
srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x,
med.jpg 1x, med-hd.jpg 2x “/>
The Image Problem – Background
Images
• Use Nested Elements
• CSS background-image
• Display: none
Thank You!
•
•
•
•
•
•
•

Responsive Design
Touch
Mobile First
SPA
Extensible, Scalable Architecture
Web Build and Workflo...
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Upcoming SlideShare
Loading in...5
×

Responsive web design

791

Published on

An introduction to responsive web design and why it is important. Source code is from my latest book, High Performance Single Page Web Applications (http://amzn.to/1a55L89). Source code is on GitHub, https://github.com/docluv/movies.

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
  • Once it comes for a web application,greater the effectiveness,greater the usability.these days,developing a site is merely a primary process to initiate the business in online. so build the website with responsive framework is the best and upcoming trend to enrich the functionality of the website.so based on that aspect, this presentation reveals several beneficial information about responsive design and its exclusive features.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
791
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive web design"

  1. 1. Responsive Web Design Chris Love http://Love2Dev.com @ChrisLove
  2. 2. Who Am I • ASP.NET MVP • ASP Insider • Internet Explorer User Agent • Author • Speaker • Tweaker, Lover of Mobile Web, JavaScript, CSS & HTML5 • @ChrisLove • Love2Dev.com
  3. 3. High Performance Single Page Web Applications • • • • • • • Responsive Design Touch Mobile First SPA Extensible, Scalable Architecture Web Build and Workflow Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89
  4. 4. Slide Deck & Source Code • Slide Deck – slidesha.re/15YTrTT • Source Code – http://GitHub.com/docluv
  5. 5. “this unspoken agreement to pretend that we had a certain size. And that size changed over the years. For a while, we all sort of tacitly agreed that 640 by 480 was the right size, and then later than changed to 800:600, and 1024; we seem to have settled on this 960 pixel as being this like, default. It’s still unknown. We still don’t know the size of the browser; it’s just like this consensual hallucination that we’ve all agreed to participate in: “Let’s assume the browser has a browser width of at least 960 pixels.” Jeremy Keith bit.ly/1bhH6rw
  6. 6. “The emergence of ideas like “responsive design” and “future-friendly thinking” are in part a response to the collective realization that designing products that solve one problem in one context at a time is no longer sustainable. By refocusing our process on systems that are explicitly designed to adapt to a changing environment, we have an opportunity to develop durable, long-lasting designs that renew their usefulness and value over time.” Wilson Miner bit.ly/1fbq5lB
  7. 7. “Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone. Let’s take the absolute best case scenario. You’re building a web app for internal users for whom you get to specify what computer is purchased and used. You can specify the browser, the monitor size, keyboard, etc.” Jason Grigsby bit.ly/KzJH9G
  8. 8. “How long do you think that hardware will be able to be found? Three years from now when a computer dies and has to be replaced, what are the chances that the new monitor will be a touchscreen? By making a decision to design solely for a “desktop UI”, you are creating technical debt and limiting the longevity of the app you’re building. You’re designing to a collective hallucination. You don’t have to have a crystal ball to see where things are headed. And once you start accepting the reality that the lines inside form factors are as blurry as the lines between them, then responsiveness becomes a necessity.” Jason Grigsby bit.ly/KzJH9G
  9. 9. Responsive Web Design • Introduced by Ethan Marcotte 2010 - bit.ly/178an9e • Web Design Approach To Create An Optimal Viewing Experience Across All Browser ViewPorts • Fluid Layouts • Media Queries • Minimal if any JavaScript Required
  10. 10. Mobile First • Determine The Most Important Information • Expand From There • Start Responsive Design Mobile First
  11. 11. Fluid Layout • Stretch as the Browser ViewPort Changes • Browser’s Viewable Area Inside the Chrome • Serve as the Foundation for the Web Application Layout • Great Way To Create Native Like Experience
  12. 12. Media Queries @media (min-width: 600px) { /* Selectors & Rules */ } @media (min-width: 820px) { /* Selectors & Rules */ } @media (min-width: 1080px) { /* Selectors & Rules */ }
  13. 13. Responsive Navigation • Use Media Queries to Optimize Rendering • Show and Hide Content Based on ViewPort Dimensions • Create A Mobile Friendly View • Optimize for Large Screens Without Device Detection
  14. 14. Responsible Web Design • Practice of Providing Appropriate Content by Context • Primarily to Limit Image and Content Affects over Mobile • Can Involve JavaScript • Can Also be Used as a Design Technique
  15. 15. matchMedia • Allows You To Bind JavaScript Callbacks to MediaQuery Breakpoints • Available in All Modern Browsers (IE 10+) • Eliminated Need to Bind to Resize Event
  16. 16. matchMedia window.matchMedia("(min-width: 400px)").addListener(function (e) { if(e.matches) { console.info("the view port is at least 400 pixels wide"); }else{ console.info("the view port is not at least 400 pixels wide"); } });
  17. 17. The Image Problem • Images Account for Majority of Downloaded Content • Screen Diversity Means Variety of Image Sizes & Quality • • • • Screen Size Screen Resolution Bandwidth Consideration Art Direction
  18. 18. The Image Problem – Proposed Solutions • Picture Element – Already Killed • Srcset – Current Specification Path • Src-N – New Comer • Read More at http://responsiveimages.org/
  19. 19. SRCSET <img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x “/>
  20. 20. SRC-N <img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x “/>
  21. 21. The Image Problem – Background Images • Use Nested Elements • CSS background-image • Display: none
  22. 22. Thank You! • • • • • • • Responsive Design Touch Mobile First SPA Extensible, Scalable Architecture Web Build and Workflow Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×