Downloaded 164 times
Uploaded byClarissa Peterson
Designing Responsive Websites
The document highlights the importance of responsive web design and provides links to various resources and tools for designing websites. It discusses essential aspects such as typography, performance testing, and layout adjustments for different screen sizes. The text includes quotes from industry professionals emphasizing ongoing developments in web design practices.
More Related Content
![Building a MVP [Webinar Edition]](https://cdn.slidesharecdn.com/ss_thumbnails/howtobuildmvpwebinar-140130112222-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Designing Responsive Websites
![iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207191544-22b737dc-thumbnail.jpg?width=640&height=640&fit=bounds)
![Soundtoys Mac v5.5.5.0 Crack for MacOS Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207193711-91d8ae6b-thumbnail.jpg?width=640&height=640&fit=bounds)
![Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185324-b2fb71b4-thumbnail.jpg?width=640&height=640&fit=bounds)
![AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207190907-2316965f-thumbnail.jpg?width=640&height=640&fit=bounds)
Designing Responsive Websites
- 1. Clarissa Peterson @clarissa Designing Responsive Websites
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 13. #content { width:90%; }
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. article { width:92%; } @media only screen and (min-width:40em) { article { width: 70%; float: left; }
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. “It's not likeour industry nailed web design before we started doing responsive design. It's still a work in progress.” - Dan Willis @uxcrank
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. Small Screen First https://flic.kr/p/abN4Q4
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 61.
- 62. 2em = twiceas big 1em = default
- 63. 2em = twiceas big 1em = default .5em = half as big
- 64. h1 { font-size:3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
- 65. h1 { font-size:3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
- 66. body { font-size:100%; }
- 67.
- 68.
- 69. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
- 72.
- 73.
- 74. article { max-width:28em; }
- 75. article { max-width:28em; }
- 78. @media only screenand (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 79. @media only screenand (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 80.
- 81.
- 82. #intro { font-size:1em; font-family: Helvetica, sans-serif; }
- 83. #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; } }
- 84.
- 85.
- 86.
- 92.
- 93.
- 94.
- 95. “You can't mockup performance in Photoshop.” - Brad Frost @brad_frost
- 96.
- 97.
- 99.
- 100.
- 101.
- 102.
- 103. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa