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.

• http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Retina PixelsCSS 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 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 */

}

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– http://retinajs.com/

Retina Solution: JavaScript

• Pros: – Easy implementation.

• Cons: – Not standards-based.– JavaScript reliance.

Retina Solution: Laziness

• Sometimes through laziness, solutions present themselves.

• Create images from 130-150% 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 */

/* ----------------------------------------------------- */

@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! */

}

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 http://twitter.github.com/bootstrap/– Foundation http://foundation.zurb.com/

• Grid Systems– Semantic Grid System http://semantic.gs– 1140.gs http://cssgrid.net

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.