Being Responsibly Responsive
description
Transcript of Being Responsibly Responsive
![Page 1: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/1.jpg)
Being Responsibly Responsive
Jason Occhipinti@occtopia
![Page 2: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/2.jpg)
Agenda• Part I: Responsive Web Design (RWD) Overview
• Part II: New Developments in RWD
![Page 3: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/3.jpg)
Part I: RWD Overview
![Page 4: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/4.jpg)
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.
![Page 5: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/5.jpg)
Background• Now, media converges on users through many avenues:
– Desktop Computers– Tablets– Smartphones– Other web-enabled devices
![Page 6: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/6.jpg)
So…how big is the mobile web getting?
![Page 7: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/7.jpg)
There are over 1.2 BILLION mobile web users worldwide.
-MobiThinking.com
![Page 8: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/8.jpg)
In the United States, 25% of web users are mobile-only (rarely use desktops).
-MobiThinking.com
![Page 9: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/9.jpg)
“Apple sold more iPads in the June Quarter (2012) than any PC maker sold in their entire lineup.”
-Tim Cook
![Page 10: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/10.jpg)
What is Responsive Web Design?
• Responsive Web Design (RWD) is creating web experiences that adapt to different methods of display.
![Page 11: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/11.jpg)
“The primary design principle underlying the web’s usefulness and growth is universality.”
-Tim Berners-Lee
![Page 12: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/12.jpg)
What is RWD Not?• RWD is NOT developing a separate “mobile” website.
• RWD is NOT native app development.
![Page 13: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/13.jpg)
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/
![Page 14: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/14.jpg)
What is RWD?• RWD is comprised of three techniques:
– Fluid Grids– CSS Media Queries– Scalable Imagery
![Page 15: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/15.jpg)
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.
![Page 16: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/16.jpg)
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.
![Page 17: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/17.jpg)
Why is RWD Important?• RWD SAVES MONEY
– No forking mobile websites– No forking app development (webkit interoperability)
![Page 18: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/18.jpg)
Why is RWD Important?• Users, customers, and employers expectations are
increasing.
![Page 19: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/19.jpg)
Fluid Grids• RWD calls for grids design with fluid measurements.
• Grid measurements should be percentage-based.
![Page 20: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/20.jpg)
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( )
![Page 21: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/21.jpg)
Fluid Grids
![Page 22: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/22.jpg)
Fluid Grids
![Page 23: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/23.jpg)
Fluid GridsParent: 1000px
Target: 333px
![Page 24: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/24.jpg)
Fluid GridsParent: 1000px/100%
Target: ?
333px
1000pxX 100( )
![Page 25: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/25.jpg)
Fluid GridsParent: 100%
Target: 33.3%
33.3%
![Page 26: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/26.jpg)
Are you confused yet?
![Page 27: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/27.jpg)
Fluid Grids• Fluid layouts are nothing new.
• While fluid layouts are ideal, some use fixed-width layouts.
![Page 28: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/28.jpg)
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).
![Page 29: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/29.jpg)
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 */ }
![Page 30: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/30.jpg)
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! */
}
![Page 31: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/31.jpg)
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.
![Page 32: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/32.jpg)
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/
![Page 33: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/33.jpg)
CSS Media Queries• Full W3C specification
– http://www.w3.org/TR/css3-mediaqueries/
![Page 34: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/34.jpg)
Let’s Check Out An Example! Woo!
![Page 35: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/35.jpg)
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%;}
![Page 36: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/36.jpg)
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.
![Page 37: Being Responsibly Responsive](https://reader036.fdocuments.in/reader036/viewer/2022081512/56816304550346895dd37f3e/html5/thumbnails/37.jpg)
One more example in Part I. I promise.