The market dynamics are changing. The 2013 ComScore mobile report states that ‘Smartphones have surpassed 125 million U.S. consumers and tablets are now owned by more than 50 million. We have now crossed into the Brave New Digital World – in which consumers are always connected’. It also reveals that ‘more than one out of every three minutes online is now spent on devices beyond the PC’. As an aside, research tells us that the attention span of a modern internet customer is diminishing. Companies are finding innovative ways to enhance customer engagement and create a better digital experience for their customer, partners and prospects. In this scenario, a company’s website becomes an undisputed heavyweight factor responsible for attracting and retaining audience to the company. In this multi-device world, from the audience’ viewpoint, ease of navigation across all devices and responsiveness of a website are of prime importance in their buying cycle. Be it on a desktop, mobile or a tablet, the uniformity of experience for the customer is of utmost significance. Thankfully, ‘Responsive web design (RWD)’ can be the optimum solution to address this need. RWD has been there for a while. Conceptually it has matured and emerged as a preferred choice for companies aiming to achieve a seamless user experience with minimum of resizing across devices - a ‘one-face’ from any device, any place and any time.

2. Harbinger Systems Welcomes you
A Webinar on
Best Practices in Responsive Web Design

3. Panellists
Prachi Kulkarni
DGM
Technology Solutions
Vibhuti Agrawal
Manager
Design and User Experience
Amit Kaveeshwar
Associate VP
Business Development

4. Agenda
• Introduction to Responsive Web Design
• Key Components
• Best Practices
• Advantages
• Limitations and Solutions
• Q&A

5. Device Usage Preferences in a Day

6. 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

7. Nature is Responsive…
What we need is
Smart, Adaptive, Logical
and Single Source Design

8. 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

9. 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

10. RWD Sample
Phone Tablet/iPad Desktop
(Continued…)

11. RWD Sample
Phone Tablet/iPad Desktop

12. RWD Sample
Phone Tablet/iPad Desktop
(Continued…)
Disclaimer: Harbinger has not designed or developed this website.

13. 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

14. Best Practices
1. Clean , Logical and
Optimized Code
2. Content First – Design
with Final Content
3. Use of Frameworks 4. Consider Breakpoints

15. 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

16. 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

17. 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

18. 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

19. All would be well only if…

20. 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

21. 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!

22. Making it ‘Responsive’ All the Way!!!

23. 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

24. 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

25. 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

26. Some More Examples…

27. Questions?

28. Thank You!
Visit us at: www.harbinger-systems.com
Write to us at: hsplinfo@harbingergroup.com
Blog: blog.harbinger-systems.com
Twitter: twitter.com/HarbingerSys (@HarbingerSys)
Slideshare: slideshare.net/hsplmkting
Facebook: facebook.com/harbingersys
LinkedIn: linkedin.com/company/382306
Follow us