The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes.
Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.
7. Adaptive Layouts - What Do
They Do?
Enables development of designs that “adapt” to
various screen sizes
Screen Size vs. Viewport size:
2660px by 1440px 27” displays now cost $600 - $800
8. Ethan Marcotte (May 2010 article in alistapart.com)
http://www.alistapart.com/articles/responsive-web-design
RESPONSIVE DESIGN:
Three Methods:
1. CSS3 Media queries
2. Flexible Layout (aka fluid grids, elastic layouts, etc.)
3. Flexible images
“INTERACTIVE ARCHITECTURE” (by Michael Fox and Miles Kemp)
• “a multiple-loop system… a continual information exchange.”
• Rather than creating immutable, unchanging spaces that define a
particular experience, they suggest that the inhabitant and structure
can—and should—mutually influence each other.
This is our way forward.
9. Ethan’s Book
“But most importantly, responsive web design
isn’t intended to serve as a replacement for
mobile web sites.
Responsive design is, I believe,
• one part design philosophy,
• one part front-end development strategy.
And as a development strategy, it’s meant to be
evaluated to see if it meets the needs of the
project you’re working on."
http://mediaqueri.es has several example sites
10. Mark Boulten
(Jan 2011 at the New Adventures Conference Nottingham, England)
http://2011.newadventuresconf.com/audio/mark.html
Responsive design is nothing new.
• Products adapt to our needs.
• Human / technology connection that started with the monks.
EMBRACE REFLOW!!!
11. Mark Boulten
(Jan 2011 at the New Adventures Conference Nottingham, England)
1. Design base layout size from the
content. If no constraints, create some
2. Use relative measurements,
not fixed or absolute
3. Use media queries and responsive
design techniques… embrace
REFLOW
12. Mark Boulten (Jan 2011)
Adaptive Layouts:
Currently we’re changing layouts based on a screen size.
We’re capable of so much more.
Today:
• Screen size Device capabilities
Consider:
• Network and context (at home, in a train (direction), etc.)
• Content based on context
http://www.markboulton.co.uk/journal/comments/a-responsive-experience
13. Mark Boulten (Jan 2011)
Responsive Web Design
• Currently changes a layout because of the environment.
• Will grow into a practice of changing an experience
because of the environment:
1. Content
2. Layout
3. Behavior
4. Perception
5. Brand
6. Feel
All of those things are open for change…
http://www.markboulton.co.uk/journal/comments/a-responsive-experience
http://2011.newadventuresconf.com/audio/mark.html
14. What is Responsive Design?
Adaptive Layout
+
??????? ????????
+
???? ??????????
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
15. Jeffrey Zeldman July 2011 – expands
definition
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."
http://unstoppablerobotninja.com/
16. Dan Cederholm (Aug 2011)
Finally… we’re not designing sheets of paper that happen to be on screen.
√ “I’d love us to rethink things in a more holistic manner…but for now… for
dribbble.com let’s take a step towards a responsive design by crafting an
adaptive stylesheet… (and) continue to maintain just one codebase.
http://simplebits.com/notebook/2011/08/19/adapted/
Aaron Gustafson - ADAPTIVE WEB DESIGN (progressive enhancement)
Jared Ponchot (Sept, 2011)
The key to understanding progressive enhancement or graceful
degradation lies in the starting point.
√ So, I've continued believing that "adaptive web design" refers more to the
secondary and less fluid approach of adapting existing web designs, or
designing for controlled adaptation as opposed to a truly fluid and flexible
"responsive" design.
http://www.lullabot.com/articles/responsive-adaptive-web-design
17. What is Responsive Design?
Adaptive Layout
+
C?????? S???????
+
???? ??????????
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
18. Where do I start?
Adaptive Style-sheet
?
Holistic Approach
Progressive Enhancement
Graceful Degradation
Fluid Grid
19. Mobile First
(invert the design
approach)a half-day of brainstorming
“Just
about your mobile experience can
open up new ways of thinking about
your product”
“With responsive web design, you can set a
baseline (mobile) experience first, then
progressively enhance or adapt your layout
as device capabilities change.”
“This is accomplished by setting resolution “break points”
and applying a different set of layout rules and media assets
to each. A break point can be thought of as a conditional
statement that determines if a device meets specific criteria
like a minimum width of 600 pixels. If that condition is true,
then the browser applies a different set of layout rules, usually
through CSS, though sometimes with a little JavaScript as
well”
20. “Web products should be designed for mobile first.”
Luke Wroblewski - December 7, 2011 Technology Conference & Expo -Washington, DC
We really need to shift now to start thinking
about building mobile first. This is an even
bigger shift than the PC revolution.”
-Kevin Lynch, CTO Adobe
“Designing the mobile app first forced us to
strip down to essentials.”
-Bill DeRouchey, BankSimple
We're just now starting to think about mobile first
and desktop second for a lot of our products.”
-Kate Aronowitz, Design Director Facebook
21. Designing for Mobile First
Know your customers and their business…
The Southwest Airlines iPhone
application only has room for what
actually matters
Designing for mobile forces you to get there, like it or not.
22. What is Responsive Design?
Adaptive Layout
+
C?????? S???????
+
???? ??????????
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
23. What is Responsive Design?
Adaptive Layout
+
Content Strategy
+
???? ??????????
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
24. Content
Anything that conveys information
• Audio • Text
• Downloadable • Images
documents • Graphics
• Icons • Social media
• Logos • Video
• Buttons
All disciplines are responsible for content
• Brand managers • Copywriters
• Developers • UX
• Designers • Online marketers
25. Content Strategy
Harmony through collaboration
• On-message copy
• On-brand design
• Intuitive and memorable interface
• Solid and accommodating technology
There are no requirements for pixel perfection
across platforms… content is malleable
Create the right content to serve the users’
needs
.net issue 222 “Content strategy for the web” – Sandi Wassmer
26. Jeffrey
Zeldm
an
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."
“Remember to think cross-device instead of just mobile.”
27. What is Responsive Design?
Adaptive Layout
+
Content Strategy
+
U??? E?????????
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
28. What is Responsive Design?
Adaptive Layout
+
Content Strategy
+
User Experience
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
29. User Experience
Dan Saffer, Kicker Studios
1. What a customer perceives while engaged with your
product
2. A way of looking at a product holistically… doesn’t care
how its made…
Jared Spool, CEO of User Interface Engineering
UX is just one thing… whether or not your design is intuitive
• The average designer doesn’t spend any time watching
people use the things they design
• If you think of a designer as a type of artist, their
medium is actually the behavior of the users
• A good designer creates behaviors
30. Responsive Design Is
Adaptive Layout
+
Content Strategy
+
User Experience
Mairead Buchan – headlondon.com
http://headlondon.com/our-thoughts/news/posts/responsive-web-design
33. Media Queries
Allow detection of:
1. Width, height, orientation, aspect ratio
Example (HTML):
<link rel=“stylesheet” href=“ipad.css” media=“screen”>
@media [not|only] type [and] (expression) {rules} [,type… ] [,type…]
Use of a meta tag is recommended:
<meta name=“viewport” content=“width=device-width initial-scale=1”>
Examples (CSS usage):
@import url(“iphone.css") screen and (max-device-width: 480px);
The not negates what follows… all that follows, except the comma OR
@media not screen and (min-width: 600px) and (max-width:1200px)
The “only” keyword forces usage only by CSS3 capable browsers
@media only and (device-aspect-ratio:16/9)
34. Media Queries
Supported in all “modern” browsers (except IE8
and under)
• respond.js by Scott Jehl
https://github.com/philwareham/txp-h5bp-theme/issues/9
• http://code.google.com/p/css3-mediaqueries-js/
• http://protofunc.com/scripts/jquery/mediaqueries/
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://resizemybrowser.com/
35. Combine <meta> with viewport
media queries
<meta name="viewport" content="width=device-width">
Normally the If you combine
layout a width media query
viewport with the meta
takes a width viewport tag, your
that the site will use the
vendor has width that the device
decided is vendor considers
optimal for optimal.
viewing
desktop sites.
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
36. Common Media Queries
http://www.smipple.net/snippet/joost.kiens/Common%20@media%20queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { /* Styles */ }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { /* Styles */ }
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation :
landscape) { /* Styles */ }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation :
portrait) { /* Styles */ }
//* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { /* Styles */ }
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { /* Styles */ }
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
38. Grid Systems
1. A grid is a consistent system for the placment of content
2. It works on two levels:
• at the unit level of cells (e.g. 60×60 pixels)
• at the column level (e.g. 4 columns)”
3. Consistently implemented, increases readers’ confidence
1140 – http://cssgrid.net
960 – 960.gs
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html
41. Mind the grid:
• When you're not sure where to begin with your UI design,
start by building a grid.
• Not a straitjacket.
• Embracing the constraints of a grid in your design-- and
knowing when to break those constraints-- is a crucial skill
for designers.
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html
42. Flexible Grids – usage overview
Flexible Layouts (Grids)
1. Use percentages (for column widths, margins, padding, etc.)
2. Use ems instead of pixels (for font size and line height)
3. Use media queries when flexible layouts break… all layouts will
have a “breakpoint”
4. Applied different CSS to change the layout aspect for each
“breakpoint”
44. Grid Math- its all relative
1. Start with the container, set it in pixels… say 960px
2. Make internal columns percentages using this formula:
target ÷ context = result
200px ÷ 960 = 20.83%
3. Change Fonts and Line Height from “px” to “em”:
1. Font-size:24px becomes font-size:1.5em (24px ÷ 16px = 1.5em)
2. Font-size:14px becomes font-size:0.875em (14px ÷ 16px = 0.875)
3. Font-size:12px becomes font-size:0.75 em (12px ÷ 16px = 0.75)
4. Font-size:12px becomes font-size:75%
5. Line-height: 1.5em; (em is relative to its container… 18px for 12px font size)
4. Now change the container to a percentage (960px to something like 80%)
That’s it! QED
49. Flexible Images
Images:
width: 100% and use ie9.js
max-width: 100%
Backgrounds:
jquery-backstretch by Scott Robbin for IE6, IE7, IE8
background-size:cover;
– Scales the image, while preserving its intrinsic aspect ratio (if any), to the
smallest size such that both its width and its height can completely cover the
background positioning area.
background-size:contain;
– Scales the image, while preserving its intrinsic aspect ratio (if any), to the
largest size such that both its width and its height can fit inside
the background positioning area.