1 / 37

Being Responsibly Responsive

Discover the evolution of Responsive Web Design (RWD) and its significance in adapting to various devices. Learn about fluid grids, CSS media queries, and scalable imagery for optimal web experiences. Explore the importance and benefits of RWD in a mobile-driven world.

shobson
Download Presentation

Being Responsibly Responsive

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 NOTdeveloping 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 NOTfit 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

  22. Fluid Grids

  23. Fluid Grids Parent: 1000px Target: 333px

  24. Fluid Grids Parent: 1000px/100% Target: ? ) ( 333px1000px 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 derGraaf • http://code.google.com/p/css3-mediaqueries-js/

  33. CSS Media Queries • Full W3C specification • 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: <imgsrc=“your/image/path.jpg” /> • 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.

More Related