Responsive Web Design

RESPONSIVE WEB DESIGN

Tuesday, 10 April, 12

two stories: responsive web design, but also a much bigger story. A clear trend that has really only emerged in the
last two months, which is that we are on the cusp of the death of the PC.

“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 ﬂexibility.”
John Allsopp, “A Dao of Web Design” http://www.alistapart.com/articles/dao/ (April 7, 2000)


This was written in 2000, almost 12 years ago and we have forgotten it.

WHAT IS RESPONSIVE DESIGN?
Responsive design is about creating objects and
experiences that respond or adapt to the
people using them and to their changing environment.


The term stems from a discipline within architecture called Responsive Architecture and is spreading to all ﬁelds of
design.


A building that adapts to the people inside of it as well as the environment around it.


This car (FORD EVOS) knows its driver and adapts the seating position, temperature, music, GPS routes, gear shift
timing, suspension stiffness, etc. to the driver’s preferred settings, past habits and data from the cloud.


Table leaving behind an imprint from a previous person

HOW DOES IT APPLY TO THE WEB?
Responsive web design is about creating a
singular experience that adapts and responds to
the canvas or medium it is presented on.


HOW CAN WE USE RESPONSIVE
WEB DESIGN TO IMPROVE
HOW WE BUILD SITES TODAY?


1920 pixels wide
960 pixels wide (1024 x 768)


Let’s look at how we build sites today

HOW WE USED TO SURF
(1024 x 768)


We are building sites for how we used to surf

HOW WE SURF TODAY


But this is how we surf today

We build for a screen size that represents
less than 13% of desktop and laptop users today.

Mobile devices (phones and tablets) now account
for nearly 11% of all devices out there.

In 2010, PCs outsold tablets 20 to 1. In 2011 it was 6 to 1.

In all of 2011, 488 million smartphones were
sold globally compared to only 415 million PCs.


WHAT ABOUT TOMORROW?


In 2012, 5% of tablets sold will be to
households that already have one.

By 2015 there will be 7.1 billion connected
mobile devices worldwide.

By 2016 half a billion connected consumer electronic devices
(Blu-Ray players, TVs, game consoles, etc.) will be sold.


WHAT SCREEN SIZE SHOULD
WE BE BUILDING FOR?


Let’s look at the displays out there

6 MOST COMMON COMPUTER DISPLAY SIZES (DESKTOPS AND LAPTOPS)

1680 x 1050
1280 x 1024

1440 x 900

1280 x 800
1366 x 768 1024 x 768


The good news is displays with resolutions higher than 1024x768 now cover 85% of desktop displays...1024x768 is
at 13% and dropping...though the iPad and iPad 2 caused a slight rebound in that number

iOS DEVICES

768 x 1024
iPad 640 x 960
Phone 4 and higher

1024 x 768
iPad

960 x 640
iPhone 4 and higher

320 x 480
iPhone 3GS and lower

480 x 320


iPhone, landscape... and portrait. iPhone 4 has the same screen size, but double the resolution... iPad

6 MOST COMMON ANDROID DEVICES
800 x 1280

600 x 1024

480 x 854
1280 x 800 480 x 800

480 x 640
1024 x 600

854800 x 480 640 x 480
x 480 320 x 480

480 x 320


yuk

HDTV

1920 x 1080


2048 x 1536

FUTURE
DEVICES?
(iPAD 3)
768 x 1024
iPad 640 x 960
Phone 4 and higher

1024 x 768
iPad

960 x 640
iPhone 4 and higher

320 x 480

480 x 320


This is the rumoured display size of an iPad 3

WE ARE ENTERING THE ERA OF...


2048 x 1536

CANVAS HELL
800 x 1280

Terms like ‘screen size’
and ‘page fold’ are 1920 x 1080
1680 x 1050
1280 x 1024 768 x 1024
600 x 1024
becoming meaningless. iPad
640 x 960
Phone 4 and higher
1440 x 900
480 x 854
1280 x 800 480 x 800
1366 x 768 1024 x 768
iPad

960 x 640 480 x 640
1024 x 600 4 and higher
iPhone

854800 x 480640 x 480
x 480 320 x 480

480 x 320


I think Cam got a hold of the slide... How could you ever build a website that caters to and effectively displays your
content on each of these screens?

HOW DO WE SOLVE THIS PROBLEM
WITH RESPONSIVE WEB DESIGN?


HOW DO WE SOLVE THIS PROBLEM
WITH RESPONSIVE WEB DESIGN?

4 STEPS


STEP 1
SIMPLIFY OUR CANVAS:


4 COMMON RANGES 1920 +
HDTV/Large Display 1280 ish
Laptop/Tablet 700 - 1024 ish
Tablet 320 - 640 ish
Low-res Phone
HDTVs/large monitors/
1920- ∞ ish Laptops/
1200-1600 ish Tablets (portrait)/
800-1024 ish iPhone 3 &ish
320-480 4 (portrait)
unknown future devices tablets (landscape) iPhone 4 (landscape)


Not screen sizes, but ranges.

WHAT DOES THIS LOOK LIKE?


http://www.breadandpepper.com/en/company/

http://upperdog.se/

http://designmodo.com/responsive-design-examples/

http://foodsense.is/

http://stephencaver.com/

https://jux.com/


This site will work from 1920px wide to 320px wide. And they don’t just stretch to ﬁt each screen, they adapt and
change themselves.
http://stunningcss3.com/code/bakery/index.html

STEP 2
ADOPT A FLUID GRID SYSTEM:


WHAT IS A GRID SYSTEM?


The standard grid, not ﬂexible. It is the structure that we build our designs around.

WHAT IS A FLUID GRID SYSTEM?


A ﬂuid grid-system adapts and changes in real-time

WIRE-FRAMING FOR A FLEXIBLE GRID SYSTEM


Process will still need to be worked out, it will change how we work

DESIGNING FOR A FLEXIBLE GRID SYSTEM


POPULAR FLEXIBLE
GRID SYSTEMS


These are all designed for a 1024 x 768 pixel display and smaller...


This grid system will scale down, or up, to any width.
http://framelessgrid.com/


This one dynamically changes it’s columns and gutters in a very ﬂuid way.
http://goldengridsystem.com/

STEP 3
USE FLEXIBLE MEDIA:



This image scales to ﬁt each design. If we source the highest resolution images we can, we can adapt them for any
screen.

STEP 4
MEDIA TYPES AND MEDIA QUERIES:


MEDIA TYPES AND MEDIA QUERIES ALLOW:
• Screen-size specific layouts
• Screen-orientation specific
layouts
• Select media optimized for a
device or screen resolution
• Colours optimized for a device
or screen
• Different input options based
on device (finger vs. mouse)


SO, WHAT ARE WE SELLING?


RIGHT NOW, WE SELL THIS: THEN WE SELL THIS:


WE NEED TO START SELLING THIS:

Your Website

?
Phone Tablet Laptop Desktop HDTV Future


WHAT’S NEXT FOR RESPONSIVE DESIGN?


IT’S NOT JUST SIZE THAT MATTERS...


...IT’S HOW YOU USE IT...


As the sensors in these devices get better we can do more. High contrast version of a site when sunlight is detected.
Larger buttons when put into your biker jacket. Detecting a TV near by. Knowing that you’re taking a macro photo.
Knowing that you’re an infant.

...AND IT’S ABOUT THE LITTLE THINGS...

iPHONE 3GS iPHONE 4S
3.5 INCH SCREEN 3.5 INCH SCREEN
480 x 320 960 x 640
163 PPI 326 PPI


This is a trend we can expect to see in more and more displays...not just in mobile devices, but laptops and desktops
too.

...AND IT’S ABOUT MORE THAN JUST ADAPTING. IT’S ABOUT RESPONDING.


Responsive is going to mean a whole lot more as more and more technology becomes more and more aware of its
surroundings. It’s not going to just be about adapting, it’s going to be about responding.

Responsive Web Design

Recommandé

Recommandé

Contenu connexe

Similaire à Responsive Web Design

Similaire à Responsive Web Design (20)

Dernier

Dernier (20)

Responsive Web Design