These are the accompanying slides from a workshop / lecture I delivered in both November 2013 to a group of students from the University of Central Lancashire, and in January 2014 to a group of students from Manchester Metropolitan University, on the topic of responsive design. This is version 2 of this slideshow, which includes added information and slides from my visit to MMU. The task list from the workshop can be found here: http://www.richardsonweb.co.uk/responsive_tasks.pdf

1. An Introduction to
Responsive Design
Liam Richardson
Front End Developer – Sigma Consulting Solutions Ltd.
@wearesigma / @meevil

2. 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

3. 8 Essential Lessons

4. What is responsive web design?

5. Lesson 1
RESPONSIVE WEBSITES
ARE SITES THAT SCALE
GRACEFULLY

6. Responsive VS. Adaptive

7. Adaptive - Pros
Desktop
Tablet
Mobile

8. Adaptive - Cons

9. Responsive FTW
Desktop
Tablet
Mobile

10. Media Queries - A Developer’s Best Friend
@media only screen and (max-device-width: 480px)
{
body{background-color: red;}
}

11. 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 the
device’s viewport

12. Introducing Foundation

13. Foundation’s Got You Covered

14. wrapper
left-column
left-column
right-column
right-column

15. Containers - Before
<div class=“wrapper">
</div>
.header{
width: 960px;
margin: 0px auto;
padding: 10px;
}

16. Foundation’s Got You Covered
<div class=“row">
</div>

17. wrapper
left-column
left-column
right-column
right-column

18. Multiple Columns - Before
<div class=“left-column">
</div>
<div class=“right-column">
</div>
.left-column, .right-column{
float: left;
width: 480px;
}

19. Foundation’s Got You Covered
<div class="row">
<div class="large-6 columns">...</div>
<div class="large-6 columns">...</div>
</div>

20. Foundation – The Basics
• Everything must be wrapped up in a row
• Rows contain columns
• Rows can contain up to 12 columns

21. Row
4 columns
4 columns
4 columns
Rows can contain a maximum of 12 columns

22. 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>

23. Row
3 columns
3 columns
3 columns
3 columns

24. 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>

25. Row
4 columns
4 columns
But what happens on mobile?
4 columns

26. Row
4 columns
Becomes 100%
4 columns
Becomes 100%
Foundation’s columns are responsive
straight out of the box.

30. Lesson 2
FRAMEWORKS LET YOU
CREATE RESPONSIVE
WEBSITES QUICKLY AND
EASILY

31. CSS nerds <3 box-sizing
.*, .*:before, .*:after
{
box-sizing: border-box;
}

33. Why Go Responsive?

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

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

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

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

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

39. Lesson 3
THE MOBILE WEB GROWS
MORE POPULAR BY THE
DAY

40. Apple Fan Boys Rejoice

41. 80%

42. Not Everyone Has An iPhone 5s

43. Gingerbread – The IE7 of the Mobile World

45. Mobile Website? Mobile Experience!

46. Lesson 4
USERS ARE WILLING TO
ACCEPT LIMITED
FUNCTIONALITY, BUT NOT
LIMITED CONTENT

47. When Do You Browse The Internet On Your
Phone?

48. • 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

49. “When reflecting on a lot of mobile usage
patterns, I like to imagine people as
one eyeball and one
thumb.
”
Mobile first – Luke Wroblewski

50. Lesson 5
USERS DO NOT USE
MOBILES IN THE SAME
WAY THEY USE DESKTOPS

51. My fancy website
News Gallery About us Contact us
jQuery slider
jQuery slider
Article 1
Info
Some text, a brief
description of the
article…
News
Images
More info
Article 1
Twitter
Some text, a brief
description of the
article…
We just ate ice
cream #tasty

52. My fancy website
News Gallery About us Contact
jQuery slider
jQuery slider
Article 1
Some text, a brief
description of the
article…
Info
News
Images

53. GRACEFUL DEGRADATION
Removing features and / or content as
the screen size becomes smaller

54. My fancy website
☰ Menu
Article 1
Some text, a brief
description of the
article…
Article 2
Some text, a brief
description of the
article…
Article 2
Some text, a brief
description of the
article…

55. Progressive Enhancement
iPhone 5s
HTC Hero
Desktop PC

57. Progressive enhancement
>
Graceful degradation

58. Lesson 7
DESIGN MOBILE FIRST

59. What Does The Future Hold?

61. Flexbox is the next big thing
display: flex;

62. Desktop
Mobile

63. 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>

64. One Final Lesson

65. Lesson 8
THE ONLY CERTAINTY IS THAT
RESPONSIVE DESIGN IS HERE
TO STAY
FIND THE SOLUTION THAT
WORKS BEST FOR YOU

66. 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

67. Further Reading

68. Any Questions?
Large-6
columns

69. Thank you!
@meevil
@wearesigma