Weitere ähnliche Inhalte Ähnlich wie Responsive design (20) Kürzlich hochgeladen (20) Responsive design1. © DevelopmentArc LLC 2013
Responsive Web Design (RWD)
A look at what responsive web
design is and why it matters for
modern websites & designers
2. © DevelopmentArc LLC 2013
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
3. © DevelopmentArc LLC 2013
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
7. © DevelopmentArc LLC 2013
Why is RWD becoming important?
Before we get into Responsive Design we need
a little background…
8. © DevelopmentArc LLC 2013
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
9. © DevelopmentArc LLC 2013
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
10. © DevelopmentArc LLC 2013
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
11. © DevelopmentArc LLC 2013
Demographics are important
“One in four teens access the internet primarily
through mobile” – Eliza Kern (gigaom.com)
13. © DevelopmentArc LLC 2013
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
17. © DevelopmentArc LLC 2013
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
18. © DevelopmentArc LLC 2013
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
20. © DevelopmentArc LLC 2013
Flexible Grids (cont.)
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
21. © DevelopmentArc LLC 2013
Flexible Grids (cont.)
Parent (405px)
Child (130px)
Calculation:
target ÷ context = result
Results:
130 ÷ 405 = 0.32098765432099
CSS:
{ width: 32.098765432099% }
23. © DevelopmentArc LLC 2013
Resizing Images…
Source: http://filamentgroup.com/examples/responsive-images/
24. © DevelopmentArc LLC 2013
Resizing Images…
Source: http://filamentgroup.com/examples/responsive-images/
25. © DevelopmentArc LLC 2013
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;
}
26. © DevelopmentArc LLC 2013
Grids have limitations…
Make the screen too small or too big and the design falls apart.
27. © DevelopmentArc LLC 2013 Source: http://responsivewebdesign.com/robot/
Robot or not the the base design…
28. © DevelopmentArc LLC 2013 Source: http://responsivewebdesign.com/robot/
Robot or not without media queries…
29. © DevelopmentArc LLC 2013
Media queries to the rescue!
Radically change layout using CSS3 for different sizes
30. © DevelopmentArc LLC 2013
Robot or not the right way…
Source: http://responsivewebdesign.com/robot/
31. © DevelopmentArc LLC 2013
Robot or not the right way…
Source: http://responsivewebdesign.com/robot/
32. © DevelopmentArc LLC 2013
Robot or not the right way…
Source: http://responsivewebdesign.com/robot/
33. © DevelopmentArc LLC 2013
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) {
…
}
34. © DevelopmentArc LLC 2013
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
35. © DevelopmentArc LLC 2013
RWD in the real world
Unfortunately it’s not all unicorns and fairy dust…
36. © DevelopmentArc LLC 2013
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
37. © DevelopmentArc LLC 2013
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
38. © DevelopmentArc LLC 2013
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
40. © DevelopmentArc LLC 2013
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/
41. © DevelopmentArc LLC 2013
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/
43. © DevelopmentArc LLC 2013
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/
48. © DevelopmentArc LLC 2013
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
50. © DevelopmentArc LLC 2013
Thank you!
@jamespolanco
http://developmentarc.com
http://pedanco.com
http://maqueapp.com
Previous Presentations:
http://www.slideshare.net/developmentarc/