1 / 17

Progressive Enhancement and Responsive Web Design

Progressive Enhancement and Responsive Web Design. Moinul Hossain Rifat. Outline. What is Progressive Enhancement? Why Progressive Enhancement? benefits of PE Responsive Web Design Why Responsiveness ? Conclusion. What is Progressive Enhancement?. A design Strategy for web

ayanna
Download Presentation

Progressive Enhancement and Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Progressive Enhancement and Responsive Web Design Moinul Hossain Rifat

  2. Outline • What is Progressive Enhancement? • Why Progressive Enhancement? • benefits of PE • Responsive Web Design • Why Responsiveness ? • Conclusion

  3. What is Progressive Enhancement? • A design Strategy for web • Using web technologies in a layered fashion • Separation of Content, Presentation and Behavior .

  4. What is wrong the developers are doing? 2. I am a IE6 user. Your website is broken in my browser. 1. I made a website with the latest and coolest technologies available! 3. IE User? They exist? I thought they exist in museums only ! Cool Web Designer/Developer User 4. I cannot see your site from my mobile device 5. Why don’t you just use your desktop browser? User

  5. The Graceful Degradation perspective • Focuses on building the website for the most advanced/capable browsers. • “Just upgrade your browser” attitude • Testing on the website done for older or less capable browser in last quarter of the development or no testing at all. • Fact is IE users exits !

  6. Progressive Enhancement Perspective • Design the website in a layered way • Start with a skeleton design that works on low end browsers. • Keep adding layers of ‘enhancement’ over the design for the more capable browsers. • Different browser with different capability gets different layer. • Also referred as the chocolate layers paradigm.

  7. The Chocolate Layer Paradigm What do we have in a web page?

  8. The Chocolate Layer Paradigm

  9. Client Side Rendering –An Evil ? JavaScript (Behavior Layer) Content and Presentation (HTML) Rendering Web Service Using

  10. Client Side Rendering –An Evil ? It’s slow  I made a website that is rendered in client side with cool JavaScript  I see a blank page in my mobile  The Cool Web Designer/Developer I am a web spider. I can’t get any information from your website 

  11. Client Side Rendering –An Evil ? I used to do client side rendering. But now I got back to Server Side Rendering again. My site is now 5 times faster 

  12. Progressive Enhancement - Benefits • Can reach a wide range of users • User with low bandwidth(e.g., mobile device users) gets benefited. • No download of unnecessary contents • Good for the spiders to grab • Site loads faster with server side rendering !

  13. Lets See some examples of PE • http://filamentgroup.com/examples/jqueryui-visualize/ • filamentgroup.com/examples/jquery-tree-control/

  14. Responsive Web Design (RWD) • The new progressive Enhancement Way ! • We’re more and more moving towards smart mobile devices. • The Mobile First Approach • Same website- Different presentation according to browser’s screen capacity. • Targets the ‘screen’ also not the browser only!

  15. Responsive Web Design (RWD) Screen Size--

  16. RWD - Benefits • Reach a lots of users. • Only one site that fits any screen. • No more m.mysite.com ! • More SEO Friendly. • A single URL helps Google to index • Common code base. • Developers are relieved now ! • Cost effective

  17. Conclusion • Progressive Enhancement • Responsive Web Design Questions?

More Related