Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Designing Responsive Websites

11 646 vues

Publié le

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.

Publié dans : Design
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ★★★ https://tinyurl.com/y52uv4vq
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×