Responsive design

© DevelopmentArc LLC 2013
Responsive Web Design (RWD)
A look at what responsive web
design is and why it matters for
modern websites & designers

About me...
James Polanco ( @jamespolanco )
Founder & web application architect at DevelopmentArc
Developer of Maque (maqueapp.com)
Co-founder of Pedanco.com
Author, podcaster, surfer and co-manager of the San Diego Adobe
Developers User Group

What is Responsive Web Design?
Response Web Design (RWD) is:
The process of designing layout & functionality to fit
the needs and screen resolutions of different
devices
- from mobile phones to huge desktop monitors
Achieved by leverages existing
HTML, CSS, JavaScript browser technologies with
some new CSS3 features to have your layout
‘respond’ to the size of the screen

Boston Globe example…

Why is RWD becoming important?
Before we get into Responsive Design we need
a little background…

Mobile Browsing is growing…
“Mobile-based browsing has tripled in the last two
years…” – Greg Keizer via Net Applications (computerworld)
Source:
http://www.computerworld.com/s/article/9237855/Mobile_s_browser_usage_share_jumps_26_in_three_months

Screen resolutions are shrinking…
Screen Resolution Usage Screen Size / Type
1366x768 19.2% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor
1280x800 11.3% 14'' Notebook
1920x1080 8.3% 21.5'' monitor / 23'' monitor / 1080p TV
1280x1024 7.2% 19'' monitor
1440x900 6.5% 19'' monitor
320x480 6.3% 3.5'' iPhone
1024x768 6.1% 15'' monitor
1680x1050 4.6% 22'' monitor
1600x900 4.4% 20'' monitor
768x1024 3.4% 9.7'' iPad
1920x1200 2% 24'' monitor
320x568 1.8% 4'' iPhone 5
720x1280 1.3% 4.8'' Galaxy S
1360x768 1%
1024x600 0.9% 7'' Galaxy Tab / 10.1'' Notebook
1280x720 0.9% 720p TV
Source: http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm

But they are also growing…
“1366x768 now the most popular screen resolution”
– John Callaham (Neowin.net)
Source: http://www.neowin.net/news/study-1366x768-now-the-most-popular-screen-resolution

Demographics are important
“One in four teens access the internet primarily
through mobile” – Eliza Kern (gigaom.com)

A picture is worth a thousand words…

How does RWD work?
Responsive Web Design has three core
principles:
Flexible (or fluid) grids of content
Dynamically resizing images & other media
CSS3 Media queries to delineate layout requirements
by screen resolution

What are flexible (fluid) grids?

Flexible Grids…
Source: http://www.responsivegridsystem.com/

Flexible Grids
Provides content areas that grow
wider/narrower based on the size of the
screen
Content areas are essentially columns and rows that
can span across the page
Adjusts position of content within the grid
Items positioned in the grid are aligned and moved as
the grid adjusts
Reflow textual content within the grid
Text will automatically reflow within the grid

Flexible Grids (cont.)
Uses CSS width percentage on the grid div
elements
Ex: width: 31.333%
Initial design is done with fixed width
Typical dimensions are 960 pixel wide
Define grid area and column size based on this width
Design templates in Photoshop, Fireworks and
Illustrator can be downloaded

After fixed design, calculate and apply CSS
percentages
Ethan Marcotte (author of Responsive Web
Design) uses this calculation
target context = result
Target = the base element width
Context = the parent element width
Result is the percentage to apply in CSS

Parent (405px)
Child (130px)
Calculation:
target ÷ context = result
Results:
130 ÷ 405 = 0.32098765432099
CSS:
{ width: 32.098765432099% }

How do you handle media, such as
images, in a fluid layout?

Resizing Images…
Source: http://filamentgroup.com/examples/responsive-images/

Dynamic Images
Resize Images based on screen size
Images will resize based on the parent content area
they reside in
Uses simple CSS to define image size
constraint to parent
img {
max-width: 100%;
height: auto;
}

Grids have limitations…
Make the screen too small or too big and the design falls apart.

© DevelopmentArc LLC 2013 Source: http://responsivewebdesign.com/robot/
Robot or not the the base design…

© DevelopmentArc LLC 2013 Source: http://responsivewebdesign.com/robot/
Robot or not without media queries…

Media queries to the rescue!
Radically change layout using CSS3 for different sizes

Robot or not the right way…
Source: http://responsivewebdesign.com/robot/

Media Queries
Media Queries are a CSS3 feature
You define new CSS blocks that start with the
@media key
@media screen and (max-width: 768px) {
…
}
You can set min/max screen sizes to trigger
specific CSS
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
…
}

All together now…
RWD uses Flexible grids, media resizing
and media queries
This allows for adjustable content and layout to fit all
your users’ needs
Don’t just think small…
RWD should also take advantage of larger screen
sizes
Ex: making content flow/read better on large monitors

RWD in the real world
Unfortunately it’s not all unicorns and fairy dust…

Challenges with RWD
Browser compatibility & rendering
Media queries are CSS3, which means not all browsers
support them
Internet Explore 8 and under do not support media queries
Different browser render percentages differently
they are getting a lot better at rendering sub-pixels
Asset management
CSS can scale images visually, you are still sending over
the full size image
JavaScript libraries and server technologies can help
asset management

Challenges with RWD
Device pixel density (retina vs. non-retina)
Newer devices have larger screen resolutions in a smaller
physical space
Understanding layout, sizing and asset needs for these
devices
Interaction design needs
Interactions change for hand-held devices
Users’ needs and goals change from desktop, to tablet, to
phone
Adding or removing functionality to meet your user’s goals

Challenges with RWD
Design, Development & Testing time
Design investment is much greater for understanding
interactions, functionality and layout
Development costs are higher to support RWD
Testing now means cross-browser, cross-device and
screen size

But the pain can be worth it...
The gov.uk experience

Gov.uk responsive success story
Gov.uk went responsive in Oct. 2012
Source: http://digital.cabinetoffice.gov.uk/2013/03/12/were-not-appy-not-appy-at-all/

Gov.uk responsive success story (cont.)
Mobile device usage more then doubled in a
year…
Source: http://digital.cabinetoffice.gov.uk/2013/03/12/were-not-appy-not-appy-at-all/

Helping make RWD work
There are a multitude of tools & technology…

Getting RWD done…
Using CSS, JavaScript and other
technology-based RWD frameworks
Bootstrap
http://twitter.github.io/bootstrap/
Foundation 4
http://foundation.zurb.com/
Responsive Grid System
http://www.responsivegridsystem.com/
HTML5 Boilerplate
http://html5boilerplate.com/

Getting RWD done…
Adobe Edge Reflow & Inspect

Adobe Edge Reflow

Adobe Edge Inspect

Resources…
Special thanks to Chris Griffith
http://aj-software.com/
http://chrisgriffith.wordpress.com/
Responsive Web Design by Ethan Marcotte
http://www.abookapart.com/products/responsive-web-design
Articles & Blog Posts
http://alistapart.com/article/fluidgrids
http://www.hongkiat.com/blog/rwd-tools/
http://responsive.is/trentwalton.com
http://bradfrost.github.io/this-is-responsive/resources.html
http://www.adobe.com/devnet/edge-reflow/articles/introducing-
edge-reflow.html

Q&A
Have questions? Want to talk about
something more? Ask away...

Thank you!
@jamespolanco
http://developmentarc.com
http://pedanco.com
http://maqueapp.com
Previous Presentations:
http://www.slideshare.net/developmentarc/

Responsive design

Recommended

More Related Content

Viewers also liked (11)

Similar to Responsive design (20)

Recently uploaded (20)

Responsive design