An Introduction to
Responsive Design
Liam Richardson
Front End Developer – Sigma Consulting Solutions Ltd.
@wearesigma / @...
Today’s workshop
• Learn valuable tips and tricks that will help speed up web development in
general
• Learn about the fun...
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 small...
Introducing Foundation
Foundation’s Got You Covered
wrapper

left-column
left-column

right-column
right-column
Containers - Before
<div class=“wrapper">
</div>
.header{
width: 960px;
margin: 0px auto;
padding: 10px;
}
Foundation’s Got You Covered

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

left-column
left-column

right-column
right-column
Multiple Columns - Before
<div class=“left-column">
</div>
<div class=“right-column">
</div>
.left-column, .right-column{
...
Foundation’s Got You Covered
<div class="row">
<div class="large-6 columns">...</div>
<div class="large-6 columns">...</di...
Foundation – The Basics
• Everything must be wrapped up in a row
• Rows contain columns
• Rows can contain up to 12 column...
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">......
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">...<...
Row
4 columns

4 columns

But what happens on mobile?

4 columns
Row
4 columns
Becomes 100%

4 columns
Becomes 100%

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

FRAMEWORKS LET YOU
CREATE RESPONSIVE
WEBSITES QUICKLY AND
EASILY
CSS nerds <3 box-sizing

.*, .*:before, .*:after
{
box-sizing: border-box;
}
Why Go Responsive?
Mobile internet usage now
equates for 10% of total
internet usage worldwide
(and is expected to surpass that of desktop we...
Smartphones outsold the
combined global market of
laptop, desktop, and notebook
computers in 2012, two years
earlier than ...
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
appo...
“When reflecting on a lot of mobile usage
patterns, I like to imagine people as

one eyeball and one
thumb.
”
Mobile first...
Lesson 5

USERS DO NOT USE
MOBILES IN THE SAME
WAY THEY USE DESKTOPS
My fancy website
News Gallery About us Contact us

jQuery slider
jQuery slider

Article 1

Info

Some text, a brief
descri...
My fancy website
News Gallery About us Contact

jQuery slider
jQuery slider

Article 1
Some text, a brief
description of t...
GRACEFUL DEGRADATION
Removing features and / or content as
the screen size becomes smaller
My fancy website
☰ Menu

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

Article 2
Some text, a brief
descriptio...
Progressive Enhancement

iPhone 5s

HTC Hero

Desktop PC
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...
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 abo...
Further Reading
Any Questions?

Large-6
columns
Thank you!

@meevil
@wearesigma
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
Upcoming SlideShare
Loading in …5
×

An Introduction to Responsive Design

1,614 views

Published on

These are the accompanying slides from a workshop / lecture 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 Liam's visit to MMU.

The task list from the workshop can be found here: http://www.richardsonweb.co.uk/responsive_tasks.pdf

Published in: Technology, Business
1 Comment
0 Likes
Statistics
Notes
  • Websites can be developed an effective responsive design layout to enhance the portability and enriching convenience.So this guidance would be a great thing to build a responsive design web application
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,614
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • - Incrementally adapts to general device sizes
  • http://www.computerandvideogames.com
  • http://www.polygon.com
    - Adapts fluidly to any device
  • Media queries allow us to change the layout of the page depending on the size of the screen
    They effectively allow us to change the CSS in whatever ways we want
  • - Foundation gives you a rock solid responsive layout
  • - This changes the CSS box model to effectively change the way that padding and margin works
  • - It just makes sense, why WOULDN’T you go responsive. All sites should be responsive
  • Access to sites were controlled by carriers
    Sites were slow
    Sites were just a collection of links
    Mobile services were slow and expensive
    The iPhone changed all that. The web was displayed the same as on a desktop
    Next slide 80% width
  • - We lost 80% of our screens!
  • - Notoriously incompatible
  • - There are so many different types of devices out there. What are we to do?
  • Lots of companies decided to split their sites into two.
    Desktop / Mobile
    Limited experience on mobile
  • Now, let’s talk about the how and when we use our mobile devices…
    People don’t use mobile phones in the same way they use desktops
  • - How do we appeal to these people? How do we appeal to users who, a lot of the time, aren’t paying attention?
  • - jQuery heavy site story
  • - Really, what we should really be doing, is starting with the underdog first, then working our way up
  • An Introduction to Responsive Design

    1. 1. An Introduction to Responsive Design Liam Richardson Front End Developer – Sigma Consulting Solutions Ltd. @wearesigma / @meevil
    2. 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. 3. 8 Essential Lessons
    4. 4. What is responsive web design?
    5. 5. Lesson 1 RESPONSIVE WEBSITES ARE SITES THAT SCALE GRACEFULLY
    6. 6. Responsive VS. Adaptive
    7. 7. Adaptive - Pros Desktop Tablet Mobile
    8. 8. Adaptive - Cons
    9. 9. Responsive FTW Desktop Tablet Mobile
    10. 10. Media Queries - A Developer’s Best Friend @media only screen and (max-device-width: 480px) { body{background-color: red;} }
    11. 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. 12. Introducing Foundation
    13. 13. Foundation’s Got You Covered
    14. 14. wrapper left-column left-column right-column right-column
    15. 15. Containers - Before <div class=“wrapper"> </div> .header{ width: 960px; margin: 0px auto; padding: 10px; }
    16. 16. Foundation’s Got You Covered <div class=“row"> </div>
    17. 17. wrapper left-column left-column right-column right-column
    18. 18. Multiple Columns - Before <div class=“left-column"> </div> <div class=“right-column"> </div> .left-column, .right-column{ float: left; width: 480px; }
    19. 19. Foundation’s Got You Covered <div class="row"> <div class="large-6 columns">...</div> <div class="large-6 columns">...</div> </div>
    20. 20. Foundation – The Basics • Everything must be wrapped up in a row • Rows contain columns • Rows can contain up to 12 columns
    21. 21. Row 4 columns 4 columns 4 columns Rows can contain a maximum of 12 columns
    22. 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. 23. Row 3 columns 3 columns 3 columns 3 columns
    24. 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. 25. Row 4 columns 4 columns But what happens on mobile? 4 columns
    26. 26. Row 4 columns Becomes 100% 4 columns Becomes 100% Foundation’s columns are responsive straight out of the box.
    27. 27. Lesson 2 FRAMEWORKS LET YOU CREATE RESPONSIVE WEBSITES QUICKLY AND EASILY
    28. 28. CSS nerds <3 box-sizing .*, .*:before, .*:after { box-sizing: border-box; }
    29. 29. Why Go Responsive?
    30. 30. Mobile internet usage now equates for 10% of total internet usage worldwide (and is expected to surpass that of desktop web usage by 2016)
    31. 31. Smartphones outsold the combined global market of laptop, desktop, and notebook computers in 2012, two years earlier than originally predicted.
    32. 32. 62% of people who live in the UK own a smartphone
    33. 33. 74% of UK smartphone owners use their phone to access the internet every day
    34. 34. A third of all online shopping related activity now comes from a mobile device
    35. 35. Lesson 3 THE MOBILE WEB GROWS MORE POPULAR BY THE DAY
    36. 36. Apple Fan Boys Rejoice
    37. 37. 80%
    38. 38. Not Everyone Has An iPhone 5s
    39. 39. Gingerbread – The IE7 of the Mobile World
    40. 40. Mobile Website? Mobile Experience!
    41. 41. Lesson 4 USERS ARE WILLING TO ACCEPT LIMITED FUNCTIONALITY, BUT NOT LIMITED CONTENT
    42. 42. When Do You Browse The Internet On Your Phone?
    43. 43. • 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
    44. 44. “When reflecting on a lot of mobile usage patterns, I like to imagine people as one eyeball and one thumb. ” Mobile first – Luke Wroblewski
    45. 45. Lesson 5 USERS DO NOT USE MOBILES IN THE SAME WAY THEY USE DESKTOPS
    46. 46. 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
    47. 47. 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
    48. 48. GRACEFUL DEGRADATION Removing features and / or content as the screen size becomes smaller
    49. 49. 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…
    50. 50. Progressive Enhancement iPhone 5s HTC Hero Desktop PC
    51. 51. Progressive enhancement > Graceful degradation
    52. 52. Lesson 7 DESIGN MOBILE FIRST
    53. 53. What Does The Future Hold?
    54. 54. Flexbox is the next big thing display: flex;
    55. 55. Desktop Mobile
    56. 56. 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>
    57. 57. One Final Lesson
    58. 58. Lesson 8 THE ONLY CERTAINTY IS THAT RESPONSIVE DESIGN IS HERE TO STAY FIND THE SOLUTION THAT WORKS BEST FOR YOU
    59. 59. 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
    60. 60. Further Reading
    61. 61. Any Questions? Large-6 columns
    62. 62. Thank you! @meevil @wearesigma

    ×