responsive design and retina displays

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

http://responsive.is/bostonglobe.com

Testing your new site

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(twitter@2x.png); background-size: 16px auto; } }

Let’s code!

The standards are still in limbo

Keep yourself educated

Questions?