Now that more than 55% of American adults own a smartphone, designing for the mobile web isn't just important—it's a requirement. Through this session, we'll discuss best practices for designing mobile websites using responsive design, a technique for developing cross-platform to account for the ever-growing range of device sizes and resolutions. The session will also cover design constraints of different devices, how to use CSS3 media queries, and front-end development frameworks like Twitter Bootstrap.

1. Responsive Design
Mobile design and development techniques

2. What we’re covering
A brief agenda...
• What is responsive design
• How to design for mobile effectively
• Implementing responsive design techniques on the web
• Frameworks to make your life easier

4. @mike_tedeschi
http://mtedeschi.com

5. Why support mobile?
(really? you’re not convinced?)

6. 1.75B Smartphone Users Worldwide
http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014

7. 1.75B Smartphone Users Worldwide
http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014
(that’s 300 million more than last year)

8. 55% of Americans have smartphones
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

9. 60% use their phone to go online
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

10. http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
200 million unhappy visitors

11. 200 million unhappy visitors
customers
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/

12. What is responsive design?

13. What is responsive design?
More than just a buzzword
The web design approach for building sites that adapt and are
optimized for a range of screen resolutions, sizes, and formats.

14. They “respond” to the conditions
in which the site is viewed.

15. 1200px 996px 480px768px

16. Desktops and Laptops Tablets Phones

17. Common breakpoints
For most screen sizes
• 320 px – Mobile portrait
• 480 px – Mobile landscape
• 600 px – Small tablet
• 768 px – Tablet portrait
• 1024 px – Tablet landscape/Netbook
• 1280 px & greater – Desktop

18. Responsive
A d a p t i v e
­versus

19. Responsive (percentages) Adaptive (pixels)

20. Responsive (percentages) Adaptive (pixels)
30px

21. Responsive (percentages) Adaptive (pixels)
12.28% 30px

22. We usually meet in the middle

23. Adaptive (fixed-width grid) Responsive (%-based grid)

24. So, what actually changes?

25. Adaptive (fixed-width grid)

27. Navigation
Categories

28. Categories
Search
Ads = gone

29. Categories
Images fit

30. Mobile web design best practices

31. Best practices & considerations
Think about how people use their phones
• Consider hand placement
• Avoid edges and corners if possible
• Place content in the middle and give room to scroll
• Make targets an appropriate, easy-to-tap size
• Don’t place anything important under a target/button

32. Fingers and hand placement

34. Ideal hit zone

35. Ideal hit zone
The short stretch

36. Ideal hit zone
The long stretch
The short stretch

38. Avoid the edges

39. http://4ourth.com/

40. Inaccurate
http://4ourth.com/

41. Accurate!Inaccurate
http://4ourth.com/

42. Be smart with buttons/targets

44. Contact point +

45. +
Obscured area
Contact point

46. Where is the worst place for a button?

47. Good luck.

48. How to implement it on the web
(yes, that means writing code)

49. CSS Media Queries

50. .content {
width: 1024px;
margin: 0 auto;
background: red;
}
Start with some basic CSS.

51. What a lovely red box!

52. That doesn’t seem quite right...

53. .content {
width: 1024px;
margin: 0 auto;
background: red;
}
@media screen and (max-width: 1023px) {
.content {
width: 100%;
margin: 0 20px;
}
}
Let’s add in some media queries.

54. Much better!

55. So... break that down.

56. @media screen and (max-width: 1023px) { ... }
rule media parameters

57. @media screen and (max-width: 1023px) { ... }
print
handheld
projection
tv
aural
braille
embossed
tty
all

58. @media screen and (max-width: 1023px) { ... }
min-width
max-device-width
min-device-width
device-aspect-ratio
orientation
min-resolution
color

59. .content {
width: 50%;
margin: 0 auto;
background: red;
}
@media screen and
(min-width: 320px) and (max-width: 480px) {
.content {
width: 100%;
}
}
Between a range of screen sizes.

60. .content {
width: 50%;
margin: 0 auto;
background: red;
}
@media screen and
(min-width: 320px) and (max-width: 480px) {
.content {
width: 100%;
}
}
Between a range of screen sizes.

61. .content {
width: 100%;
margin: 0 auto;
background: red;
}
@media screen and (orientation: portrait) {
.content {
width: 50%;
}
}
Orientation of the device or window.

62. .content {
width: 100%;
margin: 0 auto;
background: red;
}
@media screen and (orientation: portrait) {
.content {
width: 50%;
}
}
Orientation of the device or window.

63. .my-image {
width: 100px;
background: url(my-image.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.my-image {
background-image: url(my-image@2x.jpg);
background-size: 100%;
}
}
On retina or high-resolution displays.

64. Frameworks and libraries

65. Frameworks & libraries
Better than starting from scratch
• Twitter Bootstrap
• Zurb Foundation
• Responsive Grid System
• Many, many others...

66. Twitter Bootstrap 3.0
getbootstrap.com

67. Zurb Foundation 5.0
foundation.zurb.com

68. Responsive Grid System
responsivegridsystem.com

69. Go make awesome mobile sites!

70. @mike_tedeschi
http://mtedeschi.com