Webinar Recording "Best Practices in RWD - Responsive Web Design"


Published on

Key Takeaways:
A> Understanding RWD: What exactly is Responsive Web Design – the philosophy, the concept

B> Techniques and tools for RWD - Details about Media queries and CSS as well as various frameworks and tools for creating RWD design

C> Advantages and Limitations in RWD

D> Conceptual Knowledge of Server Side Responsive Design (RESS)

Have Questions? - Please feel free to email sachink@harbingergroup.com

Sachin Katariya - Harbinger Systems

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Put media queries in CSS not HTML header
  • Iterative : go from mobile to desktop or consider mobile and desktop and then breakpoints
  • Convert tables to Graphs..Video and third party content
  • iFrame Support, Video Codec, CSS sprints, Physical Screen Size
  • Webinar Recording "Best Practices in RWD - Responsive Web Design"

    1. 1. Harbinger Systems Welcomes you A Webinar on Best Practices in Responsive Web Design
    2. 2. Panellists Prachi Kulkarni DGM Technology Solutions Vibhuti Agrawal Manager Design and User Experience Amit Kaveeshwar Associate VP Business Development
    3. 3. Agenda • Introduction to Responsive Web Design • Key Components • Best Practices • Advantages • Limitations and Solutions • Q&A
    4. 4. Device Usage Preferences in a Day
    5. 5. It’s Explosion of Devices 60% of users in all age groups use multiple devices simultaneously – activities involve email, sports, travel, news, reviews, shopping etc. - Survey by COMSCORE Google sees 1.5 million android devices activated per day! 119 M US TVs will be connected to Internet by 2015 - Factbrowser Review Mobile internet is expected to overtake desktop internet usage this year. This makes it necessary to design websites that are flexible and can be viewed from almost any device. In Q1 2013, 43.5% users used Mobile Net compared to 79% on desktop. The desktop net usage slipped 8% in 6 months! - Media Behavior
    6. 6. Nature is Responsive… What we need is Smart, Adaptive, Logical and Single Source Design
    7. 7. Other Attempts • UI Designer’s Community have been attempting to be responsive for quite a while now.. • Widths in percentages to support various browsers - Adaptive Design • Mobile First Design Style – Possible Simplistic design • A combination of all these attempts culminated in RWD
    8. 8. What is Responsive Web Design? Responsive Web Design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices (from desktop computer monitors to mobile phones). - Wikipedia
    9. 9. RWD Sample Phone Tablet/iPad Desktop (Continued…)
    10. 10. RWD Sample Phone Tablet/iPad Desktop
    11. 11. RWD Sample Phone Tablet/iPad Desktop (Continued…) Disclaimer: Harbinger has not designed or developed this website.
    12. 12. Components of RWD Fluid Layout- Use of Grid Widths for Dynamic change of Layout .entity {width = 22.75%;} Media Queries + HTML5 + CSS3 @media screen and (max- width: 800px) {} @media screen and (max- width: 480px) {} Flexible Images and Media RESS RWD
    13. 13. Best Practices 1. Clean , Logical and Optimized Code 2. Content First – Design with Final Content 3. Use of Frameworks 4. Consider Breakpoints
    14. 14. Best Practices (Continued…) 5. Iterative Visual Design and Coding 6. Test on Real Devices 7. Think Outside Design • Layouts to suit the device styles • Content Presentation • Forget about perfect • Fluid Inconsistencies 8. Awareness of CSS Constraints
    15. 15. Best Practices (Continued…) 9. Liquid Layouts and Grids (@media, viewport, respond.js and media queries library) 10. Lazy Loading is better for performance 11. Use SVG No Pixels, Always Crisp, Small File Sizes, Very Scalable 12. Videos and Data Tables will need specific considerations
    16. 16. RWD Can Help in Many Ways… Single Source and URL Better for SEO Similar User experience and Content across devices Common Deployment, easier Version Control Works for all Current and Future Devices
    17. 17. Keep this in Mind • Use RWD only if it fits • Features and Content, User Friendliness, eCommerce and SEO strategy • Progressively Enhancing Mobile Site can be good • Fluid Mobile Layouts + media queries to optimize for bigger screens • RWD may cost more initially but it will have lasting benefits
    18. 18. All would be well only if…
    19. 19. RWD Limitations • Single-solution may not mean delivering the optimal experience for each visitor • Desktop and Mobile UI has to be different with respect to Layout and many times content • Converting existing site to RWD is usually a Rebuild of UI – Can be tough decision for working site • Build and Maintain are time consuming
    20. 20. RWD Limitations (Continued…) • Site Load Takes Time • Media Queries are Client Side • 86% of designs are observed to send same content to desktops and Mobile Devices • This is over-downloading specially for mobile • Backward compatibility on devices is tough due to device limitations– NO CSS3 NO RWD! • Handling Third Party Content • Can wrap in iFrames!
    21. 21. Making it ‘Responsive’ All the Way!!!
    22. 22. RESS • Responsive Server Side Design will take help from Server to do the following: • Determine Context specific content • Cache Device specifications • Image Handling • In addition to the above, following Sensors can also be considered • Time of the day • Network speed • Page weight
    23. 23. RESS Workflow Detect the device before page load • Device Lookup (based on HTTP Headers) First Load: Server side selection • Based on the device select appropriate content • Have image server appropriately scale the images and send them • Send device capabilities to JavaScript • Send markups based on capabilities Device Feature Detection on Client Side
    24. 24. RESS Workflow (Continued…) Store in cookies •Client width and height •Grid widths Maintain Context in the form of User Information – server side selection is faster Cookies, User context, Device Detected values at the Server Subsequent Loads
    25. 25. Some More Examples…
    26. 26. Questions? Please feel free to email Sachin Katariya - Harbinger Systems sachink@harbingergroup.com