These are the accompanying slides from a workshop I delivered to UCLan students on the 9th October 2014 on the topic of responsive design. This was the third time I'd delivered the talk, and I felt the need to update the presentation with more modern techniques and ideas. The original presentation from November 2013 can be found here - http://www.slideshare.net/richardsonweb/an-introduction-to-responsive-design-30162238 The task list from the workshop can be found here: http://www.richardsonweb.co.uk/responsive_tasks.pdf

1. Front End Developer – Sigma Consulting Solutions Ltd.
@meevil

2. • Liam Richardson
• Front end developer at Sigma
• Studied Web & Multimedia at UCLan
• Graduated in May 2013
• Creating responsive websites since around
2012
• Takes weird selfies in public places

3. • Valuable tips and tricks that will help you create cooler websites, faster
• The fundamentals of responsive design
• How to approach a responsive project
• How to adapt pre-existing knowledge
• Why we make websites responsive in the first place
• What the future holds In store

7. - Keith Doyle, Navopia

9. Lesson 1

21. Lesson 2

31. Lesson 3

34. • 80%
• 74%
• 69%
• 64%
• 62%
• 47%

35. Mobile first – Luke Wroblewski

36. Lesson 4

46. <div class=“container">
</div>
.container{
width: 960px;
margin: 0px auto;
padding: 40px;
}

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

49. <div class=“left-column">
</div>
.left-column {
float: left;
width: 700px;
}
<div class=“right-column">
</div>
.right-column {
float: right;
width: 160px;
}

50. <div class="row">
<div class=“large-10 columns">...</div>
<div class=“large-2 columns">...</div>
</div>

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

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

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

58. @media only screen and (max-device-width: 480px) {
body{background-color: red;}
}

60. @media only screen and (max-device-width: 480px) {
.container{
width: 100%;
}
}
.container{
width: 25%;
}

67. Lesson 5

72. Lesson 6

78. Removing features and / or content as
the screen size becomes smaller

82. Adding features as the screen size
becomes larger

83. HTC Hero
Desktop PC
iPhone 6

86. Lesson 7

89. display: flex;

93. Lesson 8

97. Large-6
columns?