More Stylish Content with Typography & CSS (formerly Design Hacks)

Blog Better Boston 2012

Transcript

1. Monday, March 26, 12
2. by Eric D. Fields / UX Director at HipHost Stylish Content Monday, March 26, 12
3. Goals • reevaluate the design of our site as it relates to our content • empower you to start customizing your own content Monday, March 26, 12
4. When we talk about good web design… • we empathize with the user… • … to make informed decisions… • … that lead to the best possible user experience • we educate the client about the design process Monday, March 26, 12
5. The Rules of Good Web Design • present information clearly • provide intuitive navigation • make it easy on the eyes Monday, March 26, 12
6. The Results of Good Web Design • site becomes a destination • keeps the user on the site • increased virality • helps establish trust & authority Monday, March 26, 12
7. The Results of Stylish Web Design • get noticed • builds or reinforces a brand • creates an emotional response Monday, March 26, 12
8. What should we style? • banner? • background? • sidebar? • images? Monday, March 26, 12
9. What did the users come for? CONTENT Monday, March 26, 12
10. CONTENT = TYPOGRAPHY Monday, March 26, 12
11. What is typography? The style and appearance of text. And why should I care? Monday, March 26, 12
12. What is typography? The style and appearance of text. And why should I care? composition, attitude, look, feel Monday, March 26, 12
13. What is typography? The style and appearance of text. And why should I care? shape, color, bare attributes Monday, March 26, 12
14. Slab serif, Script, Blackletter, Monospaced, Hand, Decorative Weight Width Typographic Elements Letterforms Sans serif, Serif, Monday, March 26, 12
15. Typographic Elements Words Monday, March 26, 12
16. Typographic Elements Words & Phrases Monday, March 26, 12
17. Typographic Elements Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Words & Phrases Come Together (At Long Last!) Monday, March 26, 12
18. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of cia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Words & Phrases Come Together (At Long Last!) Monday, March 26, 12
19. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad… Words & Phrases Come Together (At Long Last!) “Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni eos qui” Monday, March 26, 12
20. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of cia deserunt mollit anim id est laborum. Words & Phrases Come Together (At Long Last!) Sed ut perspiciatis unde omnis iste natus error sit Voluptatem accusantium doloremque laudantium, totam rem aperiam. Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam… Monday, March 26, 12
21. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam… Words & Phrases Come Together (At Long Last!) Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Monday, March 26, 12
22. Good typography is readable • high contrast • line-height: 1.5 • left-aligned (never justified) • ~ 80 characters per line • 16px font size Monday, March 26, 12
23. Stylish typography is emotional • Strict color palette • Mix serif headlines w/ sans-serif copy • Headlines ~ 2x body copy size • Embrace whitespace • Custom fonts?! Monday, March 26, 12
24. Web font services • TypeKit (http://typekit.com) • Google Web Fonts (http://www.google.com/webfonts) • Fonts.com (http://webfonts.fonts.com/en-US) • H&FJ (http://www.typography.com/ — soon… $$$) Monday, March 26, 12
25. kottke.org barackobama.com Monday, March 26, 12
26. So how do we style our blog? CSS Monday, March 26, 12
27. CASCADING STYLE SHEETS Monday, March 26, 12
28. CSS is 1/3 of your (or most) websites • HTML – content • JavaScript – behavior • CSS – presentation Monday, March 26, 12
29. How CSS Works • Every page of your blog links back to one or many stylesheets (*.CSS files) • Within the CSS file, selectors describe elements in the HTML • Properties are defined within selectors that describe the presentation elements • The browser matches elements based on CSS selectors and renders them according to defined properties Monday, March 26, 12
30. CSS Selectors Look Like • h1 (tag-based selector) • strong (tag-based selector) • .gallery (class-based selector) • .post p (class-based selector) • #footer (id-based selector) • #main-content li a (id-based selector) Monday, March 26, 12
31. CSS Properties Look Like • font-size: 24px; • margin-top: 12px; • padding-left: 80px; • color: #9988ac; • text-decoration: underline; • font-weight: bold; Monday, March 26, 12
32. CSS Looks Like… h1 { font-size: 24px; font-weight: bold; color: red; margin-bottom: 11px; } .special-paragraph { font-style: italic border-top: 1px solid #9999AC; padding-top: 10px; padding-bottom: 10px; } .entry-header .comments-link a { background: #EEE url(images/comment-bubble. color: #666; font-size: 13px; font-weight: normal; line-height: 35px; overflow: hidden; padding: 0 0 0; position: absolute; top: 1.5em; right: 0; text-align: center; text-decoration: none; width: 43px; height: 36px; } Monday, March 26, 12
33. Here we go! Monday, March 26, 12
34. Thank You! Any questions? Monday, March 26, 12