+ All Categories
Home > Design > Usable web design

Usable web design

Date post: 15-Jul-2015
Category:
Upload: ideafarms
View: 1,249 times
Download: 2 times
Share this document with a friend
Popular Tags:
31
Responsive Web Design R. Kasturika Sr. Digital Designer, Ideafarms Work @
Transcript

Responsive Web DesignR. Kasturika

Sr. Digital Designer, Ideafarms

Work @

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 ;) 10

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/

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

Performance Optimization

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!


Recommended