1 / 30

Part II: New Developments in RWD

Part II: New Developments in RWD. Background. RWD is constantly evolving. Designers continue to refine RWD theory and practice. New tools are constantly created. Background. Three areas of importance to designers: Designing for Retina Displays Mobile First Coding/Philosophy

leona
Download Presentation

Part II: New Developments in RWD

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

More Related