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
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
Top Related