Download as PDF, PPTX
Uploaded byClarissa Peterson
UX & Responsive Design
The document discusses UX and responsive design with a focus on performance considerations for web design. It emphasizes the importance of not neglecting speed and performance, comparing it to print design's attention to color accuracy. It also includes references to design processes, typography, and various design resources.
More Related Content
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
UX & Responsive Design
- 1. UX & ResponsiveDesign @clarissa https://flic.kr/p/ohrJBb
- 2.
- 3.
- 4.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. article { width:92%; } @media only screen and (min-width:40em) { article { width: 70%; float: left; }
- 16.
- 17.
- 18.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. “You can't mockup performance in Photoshop.” - Brad Frost @brad_frost
- 35.
- 36.
- 37.
- 39.
- 40. Blocking CSS &JavaScript https://flic.kr/p/5kcFk
- 41.
- 42.
- 43. Being a Webdesigner & not considering speed/performance is like being a print designer & not considering how your colors will print. - Luke Wroblewski @lukew
- 44.
- 45.
- 46.
- 47.
- 49. ul a {display: block; }
- 50. ul a {display: block; padding: 3px 5px; }
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 66.
- 67. 2em = twiceas big 1em = default
- 68. 2em = twiceas big 1em = default .5em = half as big
- 69. h1 { font-size:3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
- 70. body { font-size:100%; }
- 71.
- 72.
- 73. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
- 76.
- 77.
- 78. article { max-width:28em; }
- 79. article { max-width:28em; }
- 81. @media only screenand (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 82. @media only screenand (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 83.
- 84.
- 85. #intro { font-size:1em; font-family: Helvetica, sans-serif; }
- 86. #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; } }
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 98.
- 99. https://flic.kr/p/fyTLNm Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa