This document discusses responsive web design from design, usability, and business perspectives. It defines responsive design as adjusting content according to the viewing device rather than just resizing content. The document outlines how responsive design improves user experience and visibility on search engines by optimizing content hierarchy and performance for different screens. It argues that responsive design benefits businesses by increasing visibility, conversion rates, and reducing maintenance costs by supporting all devices with a single adaptive site.

1. Responsive Web Design
R. Kasturika
Sr. Digital Designer, Ideafarms
Work @

2. May 2015 Not so confidential | Share Freely (but do give us credit ;) 2
What this presentation is about
Understanding Responsive Web Design from a
Design
Usability
&
Business
point of view

3. May 2015 Not so confidential | Share Freely (but do give us credit ;) 3
What this presentation is notabout
CSS rules
Media Queries
Flexible Images
Responsive frameworks
Hacks
Rants about Internet Explorer

4. May 2015 Not so confidential | Share Freely (but do give us credit ;) 4
‘… the ebb and flow of things’
“The control which designers know in the print medium, and often desire in the web
medium, is simply a function of the limitation of the printed page. We should
embrace the fact that the web doesn’t have the same constraints, and design for this
flexibility. But first, we must ‘accept the ebb and flow of things.’”
– John Allsopp, “A Dao of Web Design”
Source: http://alistapart.com/article/dao/

5. May 2015 Not so confidential | Share Freely (but do give us credit ;) 5
Image Source: http://globalwebindex.net/blog/80-of-internet-users-own-a-smartphone

6. WITHOUT RESPONSIVE WEBSITES
The current scenario
May 2015 Not so confidential | Share Freely (but do give us credit ;) 6

7. Without Responsive Design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 7
What an unresponsive site
looks like on a small device …

8. Without Responsive Design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 8
Small Font sizes
Tiny links
Horizontal scroll
Slow loading time
Bad User Experience
+
+
What an unresponsive site
looks like on a small device …
… and how it impacts user experience:
+

9. RESPONSIVE WEBSITES
The desired scenario
May 2015 Not so confidential | Share Freely (but do give us credit ;) 9

10. May 2015 Not so confidential | Share Freely (but do give us credit ;) 10

11. May 2015 Not so confidential | Share Freely (but do give us credit ;) 11
Content adjusts according to the
device on which it is being viewed

12. So just rearrange stuff, right?
{
‘Responsive’ : more than just moving content to fit a smaller screen;
}
May 2015 12Not so confidential | Share Freely (but do give us credit ;)
A web page must begin as a responsive design.

13. Elements of Responsive Design
Content Hierarchy
Performance Optimization
May 2015 Not so confidential | Share Freely (but do give us credit ;) 13

14. May 2015 Not so confidential | Share Freely (but do give us credit ;) 14
Content hierarchy
Live Case Study
http://www.bostonglobe.com/

15. May 2015 Not so confidential | Share Freely (but do give us credit ;) 15
Navigation menus Ad spaces Content AreaInfo/Search

16. May 2015 Not so confidential | Share Freely (but do give us credit ;) 16
Navigation menus Ad spaces Content AreaInfo/Search
Condensed navigation
Condensed navigation
Summarized information
Minimized search
Main content in a
single column
Ad spaces shifted
‘below the fold’

17. May 2015 Not so confidential | Share Freely (but do give us credit ;) 17
But there’s more…
“Responsive web design is great, but it’s not a silver bullet.”
– Maximiliano Firtman
“You May Be Losing Users If Responsive Web Design Is Your
Only Mobile Strategy”
Source: http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/

18. May 2015 Not so confidential | Share Freely (but do give us credit ;) 18
Performance Optimization

19. Responsive web design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 19
Image Source: http://www.guypo.com/real-world-rwd-performance-take-2/
72% of responsive websites
deliver the same number of
bytes regardless of screen
size, even on slow mobile
network connections.

20. Responsive web design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 20
72% of responsive websites
deliver the same number of
bytes regardless of screen
size, even on slow mobile
network connections.
Image Source: http://www.guypo.com/real-world-rwd-performance-take-2/
Not all users will wait
for your website to load.

21. May 2015 Not so confidential | Share Freely (but do give us credit ;) 21
Performance
Responsive
Website
The big bulky site leaves
performance hanging in the air

22. May 2015 Not so confidential | Share Freely (but do give us credit ;) 22
Responsive
Website
Performance
Striking the right balance –
designing mobile-first

23. HOW DOES A RESPONSIVE WEBSITE
AFFECT YOUR BUSINESS?
Why a responsive website should be your top priority
May 2015 Not so confidential | Share Freely (but do give us credit ;) 23

24. It’s good for visibility
Google now includes
‘Mobile-friendly’ label to
mobile search results.
May 2015 Not so confidential | Share Freely (but do give us credit ;) 24

25. … very good for visibility
May 2015 Not so confidential | Share Freely (but do give us credit ;) 25
*Source: http://googlewebmastercentral.blogspot.in/2015/04/rolling-out-mobile-friendly-update.html
We’re boosting the ranking of
mobile-friendly pages on mobile
search results.
– Google Webmaster Central Blog*
“
Being mobile-friendly will now affect search rankings
That means a higher ranking on Google search results

26. May 2015 Not so confidential | Share Freely (but do give us credit ;) 26
It’s good user experience
“…when a team designs mobile first, the end result is an experience focused
on the key tasks users want to accomplish… That's good user experience and
good for business”
– Luke Wroblewski

27. May 2015 Not so confidential | Share Freely (but do give us credit ;) 27
Improves conversion rates
“An optimized and consistent site, no matter what platform it’s viewed on,
provides a better experience for the user which is more likely to lead to them
engaging with you than going elsewhere.”
- Paul Mist

28. May 2015 Not so confidential | Share Freely (but do give us credit ;) 28
It’s future-proof
With increasing number of devices with different dimensions, a dedicated
mobile site is no longer an option. A single responsive site adapts to different
screen sizes and reduces the cost of development
and maintenance.

29. May 2015 29Not so confidential | Share Freely (but do give us credit ;)
Responsive
 user friendly
 higher visibility
 more users
 good for business
 site is usable across all devices
 improved conversion rate
 reduces development costs

30. May 2015 Not so confidential | Share Freely (but do give us credit ;) 30
Making the web a friendly place…
Ideafarms is a design-led IT company. We are pioneers in the application of
Industrial Design concepts and approaches to IT-enabled services and solutions.
Find out more at:
http://ideafarms.com/mobile-web/

31. May 2015 Not so confidential | Share Freely (but do give us credit ;) 31
Where to find us:
Ideafarms
C 94A, South City I,
Gurgaon - 122001
India
Tel: +91 124 4075513
Email: its.magic@ideafarms.com
Visit us at www.ideafarms.com
If you have a legacy website which requires to be adapted
for different devices, drop us a line. We’re happy to help!