1. Being Responsibly Responsive Jason Occhipinti @occtopia

2. Agenda Part I: Responsive Web Design (RWD) Overview Part II: New Developments in RWD

3. Part I: RWD Overview

4. 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.

5. Background Now, media converges on users through many avenues: –Desktop Computers –Tablets –Smartphones –Other web-enabled devices

6. So…how big is the mobile web getting?

7. There are over 1.2 BILLION mobile web users worldwide. -MobiThinking.com

8. In the United States, 25% of web users are mobile-only (rarely use desktops). -MobiThinking.com

9. “Apple sold more iPads in the June Quarter (2012) than any PC maker sold in their entire lineup.” -Tim Cook

10. What is Responsive Web Design? Responsive Web Design (RWD) is creating web experiences that adapt to different methods of display.

11. “The primary design principle underlying the web’s usefulness and growth is universality.” -Tim Berners-Lee

12. What is RWD Not? RWD is NOT developing a separate “mobile” website. RWD is NOT native app development.

13. 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/

14. What is RWD? RWD is comprised of three techniques: –Fluid Grids –CSS Media Queries –Scalable Imagery

15. 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.

16. 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.

17. Why is RWD Important? RWD SAVES MONEY –No forking mobile websites –No forking app development (webkit interoperability)

18. Why is RWD Important? Users, customers, and employers expectations are increasing.

19. Fluid Grids RWD calls for grids design with fluid measurements. Grid measurements should be percentage-based.

20. 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 ( )

21. Fluid Grids

23. Parent: 1000px Target: 333px

24. Fluid Grids Parent: 1000px/100% Target: ? 333px 1000px X 100 ( )

25. Fluid Grids Parent: 100% Target: 33.3% 33.3%

26. Are you confused yet?

27. Fluid Grids Fluid layouts are nothing new. While fluid layouts are ideal, some use fixed-width layouts.

28. 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).

29. 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 */ }

30. 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! */ }

31. 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.

32. 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/

33. CSS Media Queries Full W3C specification –http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/

34. Let’s Check Out An Example! Woo!

35. Scalable Imagery Scalable imagery is simple CSS-based technique that allows imagery to scale to the size of its container. –HTML: –CSS: img, object {max-width: 100%;}

36. 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.

37. One more example in Part I. I promise.