Upload
alva
View
52
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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 GridsParent: 1000px
Target: 333px
Fluid GridsParent: 1000px/100%
Target: ?
333px
1000pxX 100( )
Fluid GridsParent: 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 pre-
defined 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.