SIZE MATTERSResponsive Web Design and more ...

“ The total number of people using the web on mobile devices

is set to surpass desktops by 2015 ”

!

INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711

Desktop Mobile

RESPONSIVE WEB DESIGN

“Rather than tailoring disconnected designs to each of an ever-

increasing number of web devices, we can treat them as facets of the

same experience”

ETHAN MARCOTTE

Desktop Tablets Smartphone’s

Responsive Web Design

Fluid Grids Flexible Media Media Queries

THE FLUID GRIDhttp://www.designinfluences.com/fluid960gs/12/fluid/jquery/

FLEXIBLE MEDIAhttp://foodsense.is/

CSS3 MEDIA QUERIEShttp://www.footballmarket.com/

320 px 768 px 1024 px

Adaptive

Web Design !

!

Responsive Web design

“Our understanding of 'responsive design' should be broadened to cover any approach that delivers

elegant visual experiences regardless of the size of the user’s

display and the limitations or

capabilities of the device”JEFFREY ZELDMAN

Responsive Web Design

Responsive Web Design is just the tip of the iceberg

Responsive Web Design

Api-fication

Content Strategy

HTML5

Platform optimization

Conditional loading

Progressive enhancement

Mobile First

Performance

Responsive Web Design

Api-fication

Content Strategy

HTML5

Platform optimization

Conditional loading

Progressive enhancement

Mobile First

Performance

Front-end technique

Fundamental Change

ADAPTIVE DESIGNhttp://news.google.com

This is the web

This will be the web

Diversity is not a bug ... It’s an opportunity

Stephany Riegerhttp://stephanierieger.com/diversity-is-not-a-bug/

<input type=”file” accept=”image/*” capture=”camera”>

<a href=”tel:08000480408”> ... </a>

navigator.geolocation.getCurrentPosition( ... );

Touch control ≠ Mouse control

It is complicated!

PERFORMANCE = DESIGN

1. Mobile users expect mobile sites to load as fast if not faster than desktop sites.

2. Mobile visitors will abandon a site if it takes more than 5 seconds to load

3. Responsive websites whose small screen view weighs as much as large screen view

74%

71%

86%

http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/

AVERAGE PAGE LOAD

MOBITEST

http://mobitest.akamai.com/

WHO CAN I REACH? WHAT CAN IT DO? WHERE DOES IT GO? HOW IS IT USED? WHY IT MATTERS?

THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THINGLink to fragment Link to fragment Link to fragment Link to fragment Link to fragment