part ii: new developments in rwd. background rwd is constantly evolving. designers continue to...
TRANSCRIPT
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;
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! */
}
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
What Designers Should Take Away
• Technology and layout facilitates the communication of relevant content.
• Content will make or break your website.