• Save
Webinar Recording "Best Practices in RWD - Responsive Web Design"
Upcoming SlideShare
Loading in...5

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



Key Takeaways: ...

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



Total Views
Slideshare-icon Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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" Webinar Recording "Best Practices in RWD - Responsive Web Design" Presentation Transcript

  • Harbinger Systems Welcomes you A Webinar on Best Practices in Responsive Web Design
  • Panellists Prachi Kulkarni DGM Technology Solutions Vibhuti Agrawal Manager Design and User Experience Amit Kaveeshwar Associate VP Business Development
  • Agenda • Introduction to Responsive Web Design • Key Components • Best Practices • Advantages • Limitations and Solutions • Q&A
  • Device Usage Preferences in a Day
  • 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
  • Nature is Responsive… What we need is Smart, Adaptive, Logical and Single Source Design
  • 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
  • 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
  • RWD Sample Phone Tablet/iPad Desktop (Continued…)
  • RWD Sample Phone Tablet/iPad Desktop
  • RWD Sample Phone Tablet/iPad Desktop (Continued…) Disclaimer: Harbinger has not designed or developed this website.
  • 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
  • Best Practices 1. Clean , Logical and Optimized Code 2. Content First – Design with Final Content 3. Use of Frameworks 4. Consider Breakpoints
  • 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
  • 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
  • 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
  • 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
  • All would be well only if…
  • 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
  • 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!
  • Making it ‘Responsive’ All the Way!!!
  • 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
  • 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
  • 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
  • Some More Examples…
  • Questions? Please feel free to email Sachin Katariya - Harbinger Systems sachink@harbingergroup.com