Responsive and Mobile Design

Responsive DesignMobile design and development techniques

What we’re coveringA brief agenda...

• What is responsive design• How to design for mobile effectively• Implementing responsive design techniques on the web• Frameworks to make your life easier

@mike_tedeschihttp://mtedeschi.com

Why support mobile?(really? you’re not convinced?)

1.75B Smartphone Users Worldwide

http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014

1.75B Smartphone Users Worldwide

http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014

(that’s 300 million more than last year)

55% of Americans have smartphones

http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

60% use their phone to go online

http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

200 million unhappy visitors

200 million unhappy visitorscustomers

http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

What is responsive design?

What is responsive design?More than just a buzzword

The web design approach for building sites that adapt and are optimized for a range of screen resolutions, sizes, and formats.

They “respond” to the conditionsin which the site is viewed.

1200px 996px 480px768px

Desktops and Laptops Tablets Phones

Common breakpointsFor most screen sizes

• 320 px – Mobile portrait• 480 px – Mobile landscape• 600 px – Small tablet• 768 px – Tablet portrait• 1024 px – Tablet landscape/Netbook• 1280 px & greater – Desktop

Responsive

A d a p t i v e versus

Responsive (percentages) Adaptive (pixels)

Responsive (percentages) Adaptive (pixels)

30px

Responsive (percentages) Adaptive (pixels)

12.28% 30px

We usually meet in the middle

Adaptive (fixed-width grid) Responsive (%-based grid)

So, what actually changes?

Adaptive (fixed-width grid)

NavigationCategories

Categories

SearchAds = gone

Categories

Images fit

Mobile web design best practices

Best practices & considerationsThink about how people use their phones

• Consider hand placement• Avoid edges and corners if possible• Place content in the middle and give room to scroll• Make targets an appropriate, easy-to-tap size• Don’t place anything important under a target/button

Fingers and hand placement

Ideal hit zone

Ideal hit zone

The short stretch

Ideal hit zone

The long stretch

The short stretch

Avoid the edges

http://4ourth.com/

Inaccurate

http://4ourth.com/

Accurate!Inaccurate

http://4ourth.com/

Be smart with buttons/targets

Contact point +

+

Obscured area

Contact point

Where is the worst place for a button?

Good luck.

How to implement it on the web(yes, that means writing code)

CSS Media Queries

.content { width: 1024px; margin: 0 auto; background: red;}

Start with some basic CSS.

What a lovely red box!

That doesn’t seem quite right...

.content { width: 1024px; margin: 0 auto; background: red;}

@media screen and (max-width: 1023px) { .content { width: 100%; margin: 0 20px; }}

Let’s add in some media queries.

Much better!

So... break that down.

@media screen and (max-width: 1023px) { ... }

rule media parameters

@media screen and (max-width: 1023px) { ... }

print

handheld

projection

tv

aural

braille

embossed

tty

all

@media screen and (max-width: 1023px) { ... }

min-width

max-device-width

min-device-width

device-aspect-ratio

orientation

min-resolution

color

.content { width: 50%; margin: 0 auto; background: red;}

@media screen and (min-width: 320px) and (max-width: 480px) { .content { width: 100%; }}

Between a range of screen sizes.

.content { width: 50%; margin: 0 auto; background: red;}

@media screen and (min-width: 320px) and (max-width: 480px) { .content { width: 100%; }}

Between a range of screen sizes.

.content { width: 100%; margin: 0 auto; background: red;}

@media screen and (orientation: portrait) { .content { width: 50%; }}

Orientation of the device or window.

.content { width: 100%; margin: 0 auto; background: red;}

@media screen and (orientation: portrait) { .content { width: 50%; }}

Orientation of the device or window.

.my-image { width: 100px; background: url(my-image.jpg);}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .my-image { background-image: url([email protected]); background-size: 100%; } }

On retina or high-resolution displays.

Frameworks and libraries

Frameworks & librariesBetter than starting from scratch

• Twitter Bootstrap• Zurb Foundation• Responsive Grid System• Many, many others...

Twitter Bootstrap 3.0getbootstrap.com

Zurb Foundation 5.0foundation.zurb.com

Responsive Grid Systemresponsivegridsystem.com

Go make awesome mobile sites!

@mike_tedeschihttp://mtedeschi.com