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.