Transcript Being Responsibly Responsive

Being Responsibly
Responsive
Jason Occhipinti
@occtopia
Agenda
• Part I: Responsive Web Design (RWD) Overview
• Part II: New Developments in RWD
Part I: RWD Overview
Background
• Consumer technology/media availability has fueled changes
in web design.
• Experts and futurists predicted the rise of the “magic box.”
• Boy, were they wrong.
Background
• Now, media converges on users through many avenues:
–
–
–
–
Desktop Computers
Tablets
Smartphones
Other web-enabled devices
So…how big is the mobile web getting?
There are over 1.2 BILLION mobile web
users worldwide.
-MobiThinking.com
In the United States, 25% of web users are
mobile-only (rarely use desktops).
-MobiThinking.com
“Apple sold more iPads in the June
Quarter (2012) than any PC maker sold
in their entire lineup.”
-Tim Cook
What is Responsive Web Design?
• Responsive Web Design (RWD) is creating web experiences
that adapt to different methods of display.
“The primary design principle
underlying the web’s usefulness and
growth is universality.”
-Tim Berners-Lee
What is RWD Not?
• RWD is NOT developing a separate “mobile” website.
• RWD is NOT native app development.
What is RWD?
• “Responsive Web Design” was originally coined in 2010 by
designer + developer Ethan Marcotte.
– Article in “A List Apart” – May, 2010
• http://www.alistapart.com/articles/responsive-web-design/
What is RWD?
• RWD is comprised of three techniques:
– Fluid Grids
– CSS Media Queries
– Scalable Imagery
RWD Beyond Technology
• RWD calls for a rethinking of the way we design websites.
• Concedes that one size DOES NOT fit all.
• Additionally, RWD touches on other areas of design,
including:
– Content theory + prioritization.
– Tactile interface design + usability.
Why is RWD Important?
• As mobile usage increases, so do the odds your site will be
viewed on a tablet or smartphone.
• RWD makes your content more accessible.
Why is RWD Important?
• RWD SAVES MONEY
– No forking mobile websites
– No forking app development (webkit interoperability)
Why is RWD Important?
• Users, customers, and employers expectations are
increasing.
Fluid Grids
• RWD calls for grids design with fluid measurements.
• Grid measurements should be percentage-based.
Fluid Grids
• Converting existing pixel-based grid systems is simple via a
formula.
• Yes, I hate math too, but you know? Too bad!
(
Target Container (px)
)
Parent Container (px)
X 100
Fluid Grids
Fluid Grids
Fluid Grids
Parent: 1000px
Target: 333px
Fluid Grids
Parent: 1000px/100%
Target: ?
(
333px
1000px
)
X 100
Fluid Grids
Parent: 100%
Target: 33.3%
33.3%
Are you confused yet?
Fluid Grids
• Fluid layouts are nothing new.
• While fluid layouts are ideal, some use fixed-width layouts.
CSS Media Queries
• Media Queries allow site layouts to change based on predefined criteria.
– Example: Screen Width + Orientation
• Introduced in Cascading Style Sheets, Level 3 (CSS3).
CSS Media Queries
• Media Queries were designed to address the technical
shortcomings of CSS Media Types.
• Media Types:
@media screen { /* your code goes here */ }
@media print { /* your code goes here */ }
@media handheld { /* your code goes here */ }
CSS Media Queries
• Enter Media Queries:
@media screen and (min-width: 900px) {
/* Your CSS code goes here! */
}
@media screen and (orientation:portrait) {
/* Your CSS code goes here! */
}
CSS Media Queries
• Each new set of styles creates a “breakpoint” (an area where
a new set of style rules begin).
• Set your breakpoints where your layout breaks, NOT targeting
a specific device.
CSS Media Queries
• Supported in all modern browsers:
– Internet Explorer 9+, Chrome, Firefox 3.5+, Safari 3+
• Older “trouble-making” browsers can use JavaScript to add
functionality.
– css3mediaqueries.js by Wouter van der Graaf
• http://code.google.com/p/css3-mediaqueries-js/
CSS Media Queries
• Full W3C specification
– http://www.w3.org/TR/css3-mediaqueries/
Let’s Check Out An Example! Woo!
Scalable Imagery
• Scalable imagery is simple CSS-based technique that allows
imagery to scale to the size of its container.
– HTML: <img src=“your/image/path.jpg” />
– CSS: img, object {max-width: 100%;}
Scalable Imagery
• Max-width CSS property is supported in all major browsers,
even Internet Explorer 7.
• Other responsive image techniques are arising, but none are
official standards.
One more example in Part I.
I promise.