responsive design and retina displays
DESCRIPTION
These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12TRANSCRIPT
Responsive Design and Retina Displays
“Things done changed.”-web designer/rapper (The Notorious
BIG)
“Work harder, not smarter.”-Doug McMakin
Before we begin . . .
In 2012, what do we target?
Responsive design attempts to solve the
problem of targeting our design to the device that it is being displayed on.
www.bostonglobe.com
What is responsive design?
Seminal article on A List Apart on May 25,
2010 http://www.alistapart.com/articles/responsive-
web-design/
Ethan Marcotte
We will be using HTML5, because it’s the
future and we should at least be using structural elements https://github.com/h5bp/html5-boilerplate
We will be using normalize.css https://github.com/necolas/normalize.css
Let’s do some code!
<meta name="viewport"
content="width=device-width">
Force correct display in phones!
Media queries added in CSS3 Allows “adaptive” design@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
background: red;}
Media Queries are magic
http://css-tricks.com/snippets/css/media-queri
es-for-standard-devices/
Common sizes
Control what gets displayed at certain
resolutions
Using display: none;
Allow the web site to “respond” to screen sizes Allows “responsive” design
Max-width & min-width
img {
max-width: 98%; /* Changes the image size with 1:1 ratio. */padding: 1%; }
Images
Allows the components of the site to scale
proportionally with screen size Again “responsive” design
Use percentages
https://github.com/Automattic/_
s/blob/master/js/small-menu.js http://css-tricks.com/
Navigation is challenging
Fortunately, there is a lot of help on the
Internet http://mediaqueri.es/ Google stuff! Go out and code!
Responsive design is challenging
Questions about responsive design?
Introduced with the iPhone 4 Many desktop displays have 92-120ppi iPhone 5 has 326ppi
At distance of 12in, people with normal visions can’t see the pixels
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Retina displays
Different displays ppi
Being released on Oct, 8 Will support high DPI I suspect it will usher in crazy new products
Windows 8
How do we make things look good on high-dpi
screens but not take to long to load on low-dpi screens?
Retina brings challenges
Make the image 1.3x it’s normal size Doesn’t look too bad on retina screens Only takes slightly longer to download Great for non-vector images
Make big images
Scalable Vector Graphics can scale without
issue But they don’t work well with non-vector
images Not well supported yet.
SVGs
CSS can scale without any resolution issues
Excellent solution Can solve some generic designs
Custom fonts can be download to create scale-free icons https://
github.com/blog/1106-say-hello-to-octicons Technically challenging Doesn’t seem to display multiple colors easily
Text and CSS elements
http://retinajs.com/ Prevents non-retina browsers from
downloading large images Doesn’t prevent retina displays from
downloading small images
Retina.js
@media only screen and (-moz-min-device-pixel-
ratio: 2), only screen and (-webkit-min-device-pixel-
ratio: 2), only screen and (min-device-pixel-ratio: 2) { #icon { background-image: url([email protected]); background-size: 16px auto; } }
Let’s code!
The standards are still in limbo
Keep yourself educated
Questions?