New Developments in Responsive Web Design (RWD)

1. Part II: New Developments in RWD

2. Background • RWD is constantly evolving. • Designers continue to refine RWD theory and practice. • New tools are constantly created.

3. Background • Three areas of importance to designers: • Designing for Retina Displays • Mobile First Coding/Philosophy • Resources + Frameworks

4. Retina Displays? • High pixel density, or “retina” displays are becoming more and more common, with pixels per inch (PPI) more than doubling in 5 years. • http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density CSS Pixels Retina Pixels

5. Issues With Retina Displays • Images that look crisp on ordinary conditions may look like pixilated garbage on retina displays. • Mo’ Pixels = Mo’ Problems.

6. What Do I Do?!?!?! • PANIC (just kidding). • There are a lot of things we can do! • Some solutions include: • Scalable Vector Graphics (SVG) • Media Queries • JavaScript • Laziness

7. Retina Solution: SVG • SVG, or Scalable Vector Graphics have existed for some time. • SVG are easily created with image editing tools: • Adobe Illustrator • CorelDraw! • Inkscape

8. Retina Solution: SVG • Pros: • Infinitely Scaling with ONE asset. • Comparable file sizes at low complexity. • Cons: • Not suited for high-complexity. • Iffy-browser support. Yeah, thanks again Internet Explorer 8 and below.

9. Retina Solution: Media Queries • Media queries can target devices by pixel density: @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Your Style Code Goes here */ }

10. Retina Solution: Media Queries • Pros: • Excellent browser support. • Fewer unnecessary downloads. • Cons: • Pain to implement on larger sites. • Should only be used for background images. • (Not semantically correct)

11. Retina Solution: JavaScript • JavaScipt/jQueryplugins can help devices download different images • Retina.js • By Imulus of Boulder, CO • http://retinajs.com/

12. Retina Solution: JavaScript • Pros: • Easy implementation. • Cons: • Not standards-based. • JavaScript reliance.

13. Retina Solution: Laziness • Sometimes through laziness, solutions present themselves. • Create images from 130-150% of their original sizes in your favorite image editor.

14. Retina Solution: Laziness • Pros: • Simple to implement. • Cons: • Not ideal, by any stretch. • All users download images that may 30-50% larger.

15. So…What Solution is Ideal? • All of them? None of them? Some of them? • Even more solutions exist! • Glyph + Symbol Fonts • Downsampling • It all depends on your own requirements, environment, and goals.

16. Mobile First • “Mobile First” is a philosophy, accompanied by a series of coding and usability techniques. • Advocates placing modern, mobile-friendly experiences before all others in priority.

17. Why Mobile First? • Mobile first forces a focus on content. • Mobile is exploding. Period. • Future-friendly (NOTHING is EVER future proof)

18. Why Mobile First? Mobile Last Degraded, Short Sighted, Crap. Mobile First Progressively Enhanced, Future Friendly, Awesome.

19. Mobile First Philosophy • Put content before navigation. • Design strategy is more user-goal driven. • We are designing for tactile devices.

20. Content, Content, Content • Imagine losing 80% of screen real estate. • Make tough choices, as to what content stays. • Although not ideal, content can be hidden via display: none;

21. Ask Yourself • What content is relevant in the mobile context? • Who is my audience?

22. How Touching! • Design for tactile interfaces is also important. • Subject is immense, however, helpful guidelines exist: • Apple iOS/OSX Human Interface Guidelines. • Android User Interface Guidelines. • Books!

23. Mobile First Coding • Uses the basics of responsive design. • Uses a different philosophy in setting up in stacking media queries: • Common styles first… • …followed by smartphone upwards. • Ensures older, inept browsers get a baseline experience, while modern browsers can mobile devices get more.

24. Mobile First Media Queries /* Common + non-responsive browser styles go here */ /* ----------------------------------------------------- */ @media screen and (min-width: 200px) { /* Your Smartphone code goes here! */ } @media screen and (min-width: 600px) { /* Your Tablet code goes here! */ } @media screen and (min-width: 1000px) { /* Your Desktop code goes here! */ }

25. Show me MORE! Dance Monkey, Dance!

26. Frameworks + Resources • Other designers have created tools to help make the responsive design process simpler. • Frameworks are prefabricated, customizable CSS and HTML assets designed to speed-up prototyping and development.

27. Frameworks + Resources • Frameworks • Bootstrap http://twitter.github.com/bootstrap/ • Foundation http://foundation.zurb.com/ • Grid Systems • Semantic Grid System http://semantic.gs • 1140.gs http://cssgrid.net

28. Let’s Wrap This Up!

29. What Designers Should Take Away • Technology and layout facilitates the communication of relevant content. • Content will make or break your website.

30. What Designers Should Take Away • RWD is still in it’s infant stages. Design patterns, and techniques are still being created. • You can contribute meaningfully.