An Introduction to Responsive Design

Liam RichardsonFront End Developer – Sigma Consulting Solutions Ltd.@wearesigma / @meevil

Today’s workshop

• Learn valuable tips and tricks that will help speed up web development in general

• Learn about the fundamentals of responsive design

• Learn the differences between Responsive and Adaptive design• Learn how to approach a responsive project• Learn how to adapt pre-existing knowledge• Learn why we make websites responsive in the first place• Learn about mobile first design• Learn what the future holds In store

8 Essential Lessons

What is responsive web design?

Lesson 1

RESPONSIVE WEBSITES ARE SITES THAT SCALE GRACEFULLY

Responsive VS. Adaptive

Adaptive - Pros

Desktop

Tablet

Mobile

Adaptive - Cons

Responsive FTW

Desktop

Tablet

Mobile

Media Queries - A Developer’s Best Friend

@media only screen and (max-device-width: 480px) {

body{background-color: red;}

}

Media Queries - A Developer’s Best Friend

Is the screen smaller than 960px?Show the tablet version.

Is the screen smaller than 768px?Show the mobile version.

Media queries change how content is displayed depending on the size of thedevice’s viewport

Introducing Foundation

Foundation’s Got You Covered

left-columnleft-column right-columnright-column

wrapper

<div class=“wrapper"></div>

Containers - Before

.header{width: 960px;margin: 0px auto;padding: 10px;

}

<div class=“row"></div>

Foundation’s Got You Covered

left-columnleft-column right-columnright-column

wrapper

Multiple Columns - Before

<div class=“left-column"></div>

<div class=“right-column"></div>

.left-column, .right-column{float: left;width: 480px;

}

Foundation’s Got You Covered

<div class="row">

<div class="large-6 columns">...</div>

<div class="large-6 columns">...</div>

</div>

Foundation – The Basics

• Everything must be wrapped up in a row• Rows contain columns• Rows can contain up to 12 columns

Row

4 columns 4 columns 4 columns

Rows can contain a maximum of 12 columns

Foundation – Three Column Layout

<div class="row">

<div class="large-4 columns">...</div>

<div class="large-4 columns">...</div>

<div class="large-4 columns">...</div>

</div>

Row

3 columns

3 columns

3 columns

3 columns

Foundation – Four Column Layout

<div class="row">

<div class="large-3 columns">...</div>

<div class="large-3 columns">...</div>

<div class="large-3 columns">...</div>

<div class="large-3 columns">...</div>

</div>

Row

4 columns 4 columns 4 columns

But what happens on mobile?

Row

4 columns

Becomes 100%

Foundation’s columns are responsive straight out of the box.

4 columns

Becomes 100%

Lesson 2

FRAMEWORKS LET YOU CREATE RESPONSIVE WEBSITES QUICKLY AND EASILY

.*, .*:before, .*:after{box-sizing: border-box;}

CSS nerds <3 box-sizing

Why Go Responsive?

Mobile internet usage now equates for 10% of total internet usage worldwide(and is expected to surpass that of desktop web usage by 2016)

Smartphones outsold the combined global market of laptop, desktop, and notebook computers in 2012, two years earlier than originally predicted.

62% of people who live in the UK own a smartphone

74% of UK smartphone owners use their phone to access the internet every day

A third of all online shopping related activity now comes from a mobile device

Lesson 3

THE MOBILE WEB GROWS MORE POPULAR BY THE DAY

Apple Fan Boys Rejoice

80%

Not Everyone Has An iPhone 5s

Gingerbread – The IE7 of the Mobile World

Mobile Website? Mobile Experience!

Lesson 4

USERS ARE WILLING TO ACCEPT LIMITED FUNCTIONALITY, BUT NOT LIMITED CONTENT

When Do You Browse The Internet On Your Phone?

• 80% use them during miscellaneous downtime throughout the day

• 74% use them while waiting in lines or waiting for appointments

• 69% use them while shopping

• 64% use them at work

• 62% use them while watching TV (a different study claims 84%)

• 47% use them during their commute

Mobile first – Luke Wroblewski

“When reflecting on a lot of mobile usage patterns, I like to imagine people as

one eyeball and one thumb.

”Mobile first – Luke Wroblewski

Lesson 5

USERS DO NOT USE MOBILES IN THE SAME WAY THEY USE DESKTOPS

jQuery sliderjQuery slider

My fancy websiteNews Gallery About us Contact us

Article 1Some text, a brief description of the article…

Article 1Some text, a brief description of the article…

Info

News

Images

More info

Twitter

We just ate ice cream #tasty

My fancy website

Article 1Some text, a brief description of the article…

News Gallery About us Contact

jQuery sliderjQuery slider

Info

News

Images

GRACEFUL DEGRADATIONRemoving features and / or content as the screen size becomes smaller

My fancy website

Article 1Some text, a brief description of the article…

Article 2Some text, a brief description of the article…

☰ Menu

Article 2Some text, a brief description of the article…

Progressive Enhancement

HTC Hero

Desktop PCiPhone 5s

Progressive enhancement >

Graceful degradation

Lesson 7

DESIGN MOBILE FIRST

What Does The Future Hold?

Flexbox is the next big thing

display: flex;

Desktop

Mobile

HTML Gets On Board

<picture>

   <source media="(min-width: 64em)" src="high-res.jpg">   <source media="(min-width: 37.5em)" src="med-res.jpg">   <source src="low-res.jpg">   <img src="fallback.jpg" alt="This picture loads on non-supporting

browsers.">   <p>Accessible text.</p>

</picture>

One Final Lesson

Lesson 8

THE ONLY CERTAINTY IS THAT RESPONSIVE DESIGN IS HERE TO STAY

FIND THE SOLUTION THAT WORKS BEST FOR YOU

What have we learned?

• Learned tips and tricks that will (hopefully) help speed up web development in general

• Learned about the fundamentals of responsive design

• Learned the differences between Responsive and Adaptive design• Learned how to approach a responsive project• Learned how to adapt pre-existing knowledge• Learned why we make websites responsive in the first place• Learned about the benefits of mobile first design• Learned what the future has in store

Further Reading

Any Questions?

Large-6 columns

Thank you!

@meevil

@wearesigma