usable web design
TRANSCRIPT
May 2015 Not so confidential | Share Freely (but do give us credit ;) 2
What this presentation is aboutUnderstanding Responsive Web Design from a
DesignUsability
&
Businesspoint of view
May 2015 Not so confidential | Share Freely (but do give us credit ;) 3
What this presentation is not about
CSS rules
Media Queries
Flexible Images
Responsive frameworks
Hacks
Rants about Internet Explorer
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/
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
WITHOUT RESPONSIVE WEBSITES
The current scenario
May 2015 Not so confidential | Share Freely (but do give us credit ;) 6
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 …
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:
+
RESPONSIVE WEBSITES
The desired scenario
May 2015 Not so confidential | Share Freely (but do give us credit ;) 9
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
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.
Elements of Responsive Design
Content Hierarchy
Performance Optimization
May 2015 Not so confidential | Share Freely (but do give us credit ;) 13
May 2015 Not so confidential | Share Freely (but do give us credit ;) 14
Content hierarchy
Live Case Study
http://www.bostonglobe.com/
May 2015 Not so confidential | Share Freely (but do give us credit ;) 15
Navigation menus Ad spaces Content AreaInfo/Search
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 columnAd spaces shifted
‘below the fold’
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/
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.
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.
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
May 2015 Not so confidential | Share Freely (but do give us credit ;) 22
Responsive
WebsitePerformance
Striking the right balance –
designing mobile-first
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
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
… 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
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
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
May 2015 Not so confidential | Share Freely (but do give us credit ;) 28
It’s future-proofWith 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.
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
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/
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: [email protected]
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!