Responsive Design
Mobile design and development techniques
What we’re covering
A brief agenda...
•	What is responsive design
•	How to design for mobile effectively
•	Implementing re...
@mike_tedeschi
http://mtedeschi.com
Why support mobile?
(really? you’re not convinced?)
1.75B Smartphone Users Worldwide
http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014
1.75B Smartphone Users Worldwide
http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014
(...
55% of Americans have smartphones
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
60% use their phone to go online
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
200 million unhappy visitors
200 million unhappy visitors
customers
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
What is responsive design?
What is responsive design?
More than just a buzzword
The web design approach for building sites that adapt and are
optimiz...
They “respond” to the conditions
in which the site is viewed.
1200px 996px 480px768px
Desktops and Laptops Tablets Phones
Common breakpoints
For most screen sizes
•	320 px 					 – Mobile portrait
•	480 px 					 – Mobile landscape
•	600 px 					...
Responsive
A d a p t i v e
­versus
Responsive (percentages) Adaptive (pixels)
Responsive (percentages) Adaptive (pixels)
30px
Responsive (percentages) Adaptive (pixels)
12.28% 30px
We usually meet in the middle
Adaptive (fixed-width grid) Responsive (%-based grid)
So, what actually changes?
Adaptive (fixed-width grid)
Navigation
Categories
Categories
Search
Ads = gone
Categories
Images fit
Mobile web design best practices
Best practices & considerations
Think about how people use their phones
•	Consider hand placement
•	Avoid edges and corner...
Fingers and hand placement
Ideal hit zone
Ideal hit zone
The short stretch
Ideal hit zone
The long stretch
The short stretch
Avoid the edges
http://4ourth.com/
Inaccurate
http://4ourth.com/
Accurate!Inaccurate
http://4ourth.com/
Be smart with buttons/targets
Contact point +
+
Obscured area
Contact point
Where is the worst place for a button?
Good luck.
How to implement it on the web
(yes, that means writing code)
CSS Media Queries
.content {
	 width: 1024px;
	 margin: 0 auto;
	 background: red;
}
Start with some basic CSS.
What a lovely red box!
That doesn’t seem quite right...
.content {
	 width: 1024px;
	 margin: 0 auto;
	 background: red;
}
@media screen and (max-width: 1023px) {
	.content {
		w...
Much better!
So... break that down.
@media screen and (max-width: 1023px) { ... }
rule media parameters
@media screen and (max-width: 1023px) { ... }
print
handheld
projection
tv
aural
braille
embossed
tty
all
@media screen and (max-width: 1023px) { ... }
min-width
max-device-width
min-device-width
device-aspect-ratio
orientation
...
.content {
	 width: 50%;
	 margin: 0 auto;
	 background: red;
}
@media screen and
	(min-width: 320px) and (max-width: 480p...
.content {
	 width: 50%;
	 margin: 0 auto;
	 background: red;
}
@media screen and
	(min-width: 320px) and (max-width: 480p...
.content {
	 width: 100%;
	 margin: 0 auto;
	 background: red;
}
@media screen and (orientation: portrait) {
	.content {
	...
.content {
	 width: 100%;
	 margin: 0 auto;
	 background: red;
}
@media screen and (orientation: portrait) {
	.content {
	...
.my-image {
	 width: 100px;
	 background: url(my-image.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2),
	(min-resolutio...
Frameworks and libraries
Frameworks & libraries
Better than starting from scratch
•	Twitter Bootstrap
•	Zurb Foundation
•	Responsive Grid System
•	...
Twitter Bootstrap 3.0
getbootstrap.com
Zurb Foundation 5.0
foundation.zurb.com
Responsive Grid System
responsivegridsystem.com
Go make awesome mobile sites!
@mike_tedeschi
http://mtedeschi.com
Responsive and Mobile Design
Responsive and Mobile Design
Responsive and Mobile Design
Responsive and Mobile Design
Responsive and Mobile Design
Upcoming SlideShare
Loading in...5
×

Responsive and Mobile Design

776

Published on

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.

Published in: Design

Responsive and Mobile Design

  1. 1. Responsive Design Mobile design and development techniques
  2. 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
  3. 3. @mike_tedeschi http://mtedeschi.com
  4. 4. Why support mobile? (really? you’re not convinced?)
  5. 5. 1.75B Smartphone Users Worldwide http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014
  6. 6. 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)
  7. 7. 55% of Americans have smartphones http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  8. 8. 60% use their phone to go online http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  9. 9. http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/ 200 million unhappy visitors
  10. 10. 200 million unhappy visitors customers http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  11. 11. What is responsive design?
  12. 12. 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.
  13. 13. They “respond” to the conditions in which the site is viewed.
  14. 14. 1200px 996px 480px768px
  15. 15. Desktops and Laptops Tablets Phones
  16. 16. 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
  17. 17. Responsive A d a p t i v e ­versus
  18. 18. Responsive (percentages) Adaptive (pixels)
  19. 19. Responsive (percentages) Adaptive (pixels) 30px
  20. 20. Responsive (percentages) Adaptive (pixels) 12.28% 30px
  21. 21. We usually meet in the middle
  22. 22. Adaptive (fixed-width grid) Responsive (%-based grid)
  23. 23. So, what actually changes?
  24. 24. Adaptive (fixed-width grid)
  25. 25. Navigation Categories
  26. 26. Categories Search Ads = gone
  27. 27. Categories Images fit
  28. 28. Mobile web design best practices
  29. 29. 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
  30. 30. Fingers and hand placement
  31. 31. Ideal hit zone
  32. 32. Ideal hit zone The short stretch
  33. 33. Ideal hit zone The long stretch The short stretch
  34. 34. Avoid the edges
  35. 35. http://4ourth.com/
  36. 36. Inaccurate http://4ourth.com/
  37. 37. Accurate!Inaccurate http://4ourth.com/
  38. 38. Be smart with buttons/targets
  39. 39. Contact point +
  40. 40. + Obscured area Contact point
  41. 41. Where is the worst place for a button?
  42. 42. Good luck.
  43. 43. How to implement it on the web (yes, that means writing code)
  44. 44. CSS Media Queries
  45. 45. .content { width: 1024px; margin: 0 auto; background: red; } Start with some basic CSS.
  46. 46. What a lovely red box!
  47. 47. That doesn’t seem quite right...
  48. 48. .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.
  49. 49. Much better!
  50. 50. So... break that down.
  51. 51. @media screen and (max-width: 1023px) { ... } rule media parameters
  52. 52. @media screen and (max-width: 1023px) { ... } print handheld projection tv aural braille embossed tty all
  53. 53. @media screen and (max-width: 1023px) { ... } min-width max-device-width min-device-width device-aspect-ratio orientation min-resolution color
  54. 54. .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.
  55. 55. .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.
  56. 56. .content { width: 100%; margin: 0 auto; background: red; } @media screen and (orientation: portrait) { .content { width: 50%; } } Orientation of the device or window.
  57. 57. .content { width: 100%; margin: 0 auto; background: red; } @media screen and (orientation: portrait) { .content { width: 50%; } } Orientation of the device or window.
  58. 58. .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.
  59. 59. Frameworks and libraries
  60. 60. Frameworks & libraries Better than starting from scratch • Twitter Bootstrap • Zurb Foundation • Responsive Grid System • Many, many others...
  61. 61. Twitter Bootstrap 3.0 getbootstrap.com
  62. 62. Zurb Foundation 5.0 foundation.zurb.com
  63. 63. Responsive Grid System responsivegridsystem.com
  64. 64. Go make awesome mobile sites!
  65. 65. @mike_tedeschi http://mtedeschi.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×