part ii: new developments in rwd
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/1.jpg)
Part II: New Developments in
RWD
![Page 2: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/2.jpg)
Background• RWD is constantly evolving.
• Designers continue to refine RWD theory and practice.
• New tools are constantly created.
![Page 3: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/3.jpg)
Background• Three areas of importance to designers:
– Designing for Retina Displays– Mobile First Coding/Philosophy– Resources + Frameworks
![Page 4: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/4.jpg)
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
![Page 5: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/5.jpg)
Issues With Retina Displays
• Images that look crisp on ordinary conditions may look like pixilated garbage on retina displays.
• Mo’ Pixels = Mo’ Problems.
![Page 6: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/6.jpg)
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
![Page 7: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/7.jpg)
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
![Page 8: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/8.jpg)
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.
![Page 9: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/9.jpg)
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 */
}
![Page 10: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/10.jpg)
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)
![Page 11: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/11.jpg)
Retina Solution: JavaScript
• JavaScipt/jQuery plugins can help devices download different images
• Retina.js– By Imulus of Boulder, CO– http://retinajs.com/
![Page 12: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/12.jpg)
Retina Solution: JavaScript
• Pros: – Easy implementation.
• Cons: – Not standards-based.– JavaScript reliance.
![Page 13: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/13.jpg)
Retina Solution: Laziness• Sometimes through laziness, solutions present themselves.
• Create images from 130-150% of their original sizes in your favorite image editor.
![Page 14: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/14.jpg)
Retina Solution: Laziness• Pros:
– Simple to implement.
• Cons: – Not ideal, by any stretch.– All users download images that may 30-50% larger.
![Page 15: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/15.jpg)
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.
![Page 16: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/16.jpg)
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.
![Page 17: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/17.jpg)
Why Mobile First?• Mobile first forces a focus on content.
• Mobile is exploding. Period.
• Future-friendly (NOTHING is EVER future proof)
![Page 18: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/18.jpg)
Why Mobile First?Mobile Last Degraded, Short Sighted, Crap.
Mobile First Progressively Enhanced, Future Friendly, Awesome.
![Page 19: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/19.jpg)
Mobile First Philosophy• Put content before navigation.
• Design strategy is more user-goal driven.
• We are designing for tactile devices.
![Page 20: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/20.jpg)
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;
![Page 21: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/21.jpg)
Ask Yourself• What content is relevant in the mobile context?
• Who is my audience?
![Page 22: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/22.jpg)
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!
![Page 23: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/23.jpg)
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.
![Page 24: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/24.jpg)
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! */
}
![Page 25: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/25.jpg)
Show me MORE! Dance Monkey, Dance!
![Page 26: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/26.jpg)
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.
![Page 27: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/27.jpg)
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
![Page 28: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/28.jpg)
Let’s Wrap This Up!
![Page 29: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/29.jpg)
What Designers Should Take Away
• Technology and layout facilitates the communication of relevant content.
• Content will make or break your website.
![Page 30: Part II: New Developments in RWD](https://reader031.vdocuments.net/reader031/viewer/2022013012/5681697c550346895de18609/html5/thumbnails/30.jpg)
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.