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 (Continued‌) Phone
Tablet/iPad
Desktop
RWD Sample Phone
Tablet/iPad
Desktop
RWD Sample (Continued‌) Phone
Tablet/iPad
Desktop
Disclaimer: Harbinger has not designed or developed this website.
Components of RWD
RWD
Best Practices 1. Content 2. 3. Clean Use of, Frameworks Logical First – and Design Optimized with Final Code Content
Best Practices (Continued…) 7. Outside Design 5.●Think 6. 8. Awareness Iterative Test on Real Visual ofDevices CSS Design Constraints and Coding Forget about perfect ● Content Presentation ● Layouts to suit the device styles ● Fluid Inconsistencies
Best Practices (Continued‌) 9. Liquid 10. 12. Lazy Loading Videos Layouts and Data is and better Tables Grids for will performance need specific considerations
RWD Can Help in Many Ways‌
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 First Load: Detect the device before page load • Device Lookup (based on HTTP Headers) 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…) Maintain Context in the form of User Information – server side selection is faster
Store in cookies • Client width and height • Grid widths
Subsequent Loads Cookies, User context, Device Detected values at the Server
Some More Examples‌
Questions?
Thank You! Visit us at: www.harbinger-systems.com Write to us at: hsplinfo@harbingergroup.com Follow us –
Blog: blog.harbinger-systems.com
–
Twitter: twitter.com/HarbingerSys (@HarbingerSys)
–
Slideshare: slideshare.net/hsplmkting
–
Facebook: facebook.com/harbingersys
–
LinkedIn: linkedin.com/company/382306