Designing Responsive Websites

10,958 views

Published on

Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.

Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.

Published in: Design
1 Comment
80 Likes
Statistics
Notes
  • Hi, Very nice description about Web Development Company India. I like your web blog. Because whenever i come into your web blog then i always get the new interesting and important information in your web blog. Thank You Website Designing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,958
On SlideShare
0
From Embeds
0
Number of Embeds
414
Actions
Shares
0
Downloads
154
Comments
1
Likes
80
Embeds 0
No embeds

No notes for slide

Designing Responsive Websites

  1. Clarissa Peterson @clarissa Designing Responsive Websites
  2. http://www.oliverharvey.co.uk/
  3. http://www.oliverharvey.co.uk/
  4. http://www.linksture.com/
  5. http://www.linksture.com/
  6. http://skinnyties.com/
  7. http://skinnyties.com/
  8. Flexible https://flic.kr/p/jXxfeF
  9. #content { width: 90%; }
  10. Adjustable https://flic.kr/p/j9KrpA
  11. http://www.unitedpixelworkers.com/
  12. http://www.unitedpixelworkers.com/
  13. http://www.unitedpixelworkers.com/
  14. http://www.unitedpixelworkers.com/
  15. http://www.unitedpixelworkers.com/
  16. article { width: 92%; } @media only screen and (min-width:40em) { article { width: 70%; float: left; }
  17. https://flic.kr/p/ca1kU
  18. https://flic.kr/p/cfQwL7
  19. Design Process https://flic.kr/p/bSHvgv
  20. https://flic.kr/p/35Ahx
  21. Design Develop
  22. Design Develop
  23. https://flic.kr/p/rZVTg
  24. “It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress.” - Dan Willis @uxcrank
  25. Content https://flic.kr/p/4qc5EB
  26. http://teamtreehouse.com
  27. http://teamtreehouse.com
  28. http://teamtreehouse.com
  29. http://teamtreehouse.com
  30. Small Screen First https://flic.kr/p/abN4Q4
  31. Wireframes
  32. http://flic.kr/p/cJJdzm
  33. http://foundation.zurb.com/
  34. http://foundation.zurb.com/prototype-example2.php
  35. http://foundation.zurb.com/prototype-example2.php
  36. http://foundation.zurb.com/prototype-example2.php
  37. http://foundation.zurb.com/prototype-example2.php
  38. http://foundation.zurb.com/docs/forms.php
  39. http://foundation.zurb.com/docs/typography.php
  40. http://www.hotgloo.com/
  41. Typography https://flic.kr/p/4r1D8w
  42. http://www.trentwalton.com
  43. http://www.trentwalton.com
  44. http://www.trentwalton.com
  45. http://www.trentwalton.com
  46. https://flic.kr/p/eYEFGY Ems & Rems
  47. 1em = default
  48. 2em = twice as big 1em = default
  49. 2em = twice as big 1em = default .5em = half as big
  50. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
  51. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
  52. body { font-size: 100%; }
  53. https://flic.kr/p/8iNCNU
  54. Scale https://flic.kr/p/dhufQk
  55. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
  56. 45-75 Characters
  57. max-width https://flic.kr/p/7nCGk3
  58. article { max-width: 28em; }
  59. article { max-width: 28em; }
  60. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  61. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  62. http://wearyoubelong.com/
  63. http://wearyoubelong.com/
  64. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
  65. #intro { font-size: 1em; font-family: Helvetica, sans-serif; } @media only screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; } }
  66. Mobile https://flic.kr/p/d5DEjS
  67. https://flic.kr/p/jRnhnU
  68. https://flic.kr/p/nNu7sP
  69. <a href=”tel:202-123-4567”>202-123-4567</a>
  70. Performance
  71. https://flic.kr/p/23xNNg
  72. “You can't mock up performance in Photoshop.” - Brad Frost @brad_frost
  73. Performance Budget https://flic.kr/p/hT9yw7
  74. https://flic.kr/p/5R51o3
  75. https://flic.kr/p/7NFTF6
  76. Testing https://flic.kr/p/bPZzeM
  77. http://www.browserstack.com/
  78. Device Labs
  79. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa

×