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 –Resources + Frameworks

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. Retina Pixels CSS Pixels

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

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

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

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.

Retina Solution: Media Queries Media queries can target devices by pixel 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 */ }

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)

Retina Solution: JavaScript JavaScipt/jQuery plugins can help devices download different images Retina.js –By Imulus of Boulder, CO –

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

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

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

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.

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.

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

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

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

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;

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

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!

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.

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

Show me MORE! Dance Monkey, Dance!

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.

Frameworks + Resources Frameworks –Bootstrap –Foundation Grid Systems –Semantic Grid System –1140.gs

Let’s Wrap This Up!

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

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.