Stylish Content with Better Typography & CSS
Upcoming SlideShare
Loading in...5
×
 

Stylish Content with Better Typography & CSS

on

  • 415 views

Slides for the presentation I gave at Blog Better Boston 2012. A little lack of context without my narration, but some may find useful…

Slides for the presentation I gave at Blog Better Boston 2012. A little lack of context without my narration, but some may find useful…

Statistics

Views

Total Views
415
Views on SlideShare
415
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • lots of skillsets and comfort zones in the room, emphasize theory how many bloggers in the room? what systems? wp? blogger? typepad? tumblr? designed their own site? wrote html before? wrote css before? wrote javascript before?
  • the user experience of blog reading no mention of color, background image, adjectives of any kind we don’t go into photoshop aimless. like all good processes, we define the rules first.
  • clarity: Information hierarchy (most important at the top), spacing/white space ease of use: obvious navigation, consistent, oriented, link colors, widgets visual appeal: color palette, crisp images, some sense of order difference btwn other sites and blogs: other sites provide utility (apps), game, or wayfinding
  • clarity: Information hierarchy (most important at the top), spacing/white space ease of use: obvious navigation, consistent, oriented, link colors, widgets visual appeal: color palette, crisp images, some sense of order difference btwn other sites and blogs: other sites provide utility (apps), game, or wayfinding
  • brand could be story, YOU… does your blog SHOW who you are?
  • content for you guys means blog posts… mostly text… thus…
  • brand could be story, YOU… does your blog SHOW who you are?
  • original definition: the style and appearance of printed matter i think the crowd can relate to these concepts
  • style is very emotional there’s a goal to style style is assemblage
  • appearance is the essence of a thing so if typography is thoughtful presentation of text, what can we do to text to influence its style and appearance
  • appearance is the essence of a thing assemblage: whole is greater than the sum of its parts so if typography is thoughtful presentation of text, what can we do to text to influence its style and appearance
  • appearance is the essence of a thing assemblage: whole is greater than the sum of its parts so if typography is thoughtful presentation of text, what can we do to text to influence its style and appearance
  • appearance is the essence of a thing assemblage: whole is greater than the sum of its parts so if typography is thoughtful presentation of text, what can we do to text to influence its style and appearance
  • modern blog
  • newspapery blog
  • designy blog
  • pretty
  • Content is primary concern of the audience font rules largely come from low dpi of monitors varies font to font but we don’t want good typography… we want stylish typography
  • describe how they work (embed tag, simple snippets… talk about later) kottke.org … barackobama.com
  • kottke.org … barackobama.com
  • brand could be story, YOU… does your blog SHOW who you are?
  • gross over generalization
  • tags, classes selectors
  • human language when you put these all together…

Stylish Content with Better Typography & CSS Stylish Content with Better Typography & CSS Presentation Transcript

  • Monday, March 26, 12
  • Stylish Content by Eric D. Fields / UX Director at HipHostMonday, March 26, 12
  • Goals • reevaluate the design of our site as it relates to our content • empower you to start customizing your own contentMonday, March 26, 12
  • 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 processMonday, March 26, 12
  • The Rules of Good Web Design • present information clearly • provide intuitive navigation • make it easy on the eyesMonday, March 26, 12
  • The Results of Good Web Design • site becomes a destination • keeps the user on the site • increased virality • helps establish trust & authorityMonday, March 26, 12
  • The Results of Stylish Web Design • get noticed • builds or reinforces a brand • creates an emotional responseMonday, March 26, 12
  • What should we style? • banner? • background? • sidebar? • images?Monday, March 26, 12
  • What did the users come for? CONTENTMonday, March 26, 12
  • CONTENT = TYPOGRAPHYMonday, March 26, 12
  • What is typography? And why should I care? The style and appearance of text.Monday, March 26, 12
  • What is typography? And why should I care? The style and appearance of text. composition, attitude, look, feelMonday, March 26, 12
  • What is typography? And why should I care? The style and appearance of text. shape, color, bare attributesMonday, March 26, 12
  • Typographic Elements Letterforms Sans serif, Serif, Slab serif, Script, Blackletter, Monospaced, Hand, Decorative Weight WidthMonday, March 26, 12
  • Typographic Elements WordsMonday, March 26, 12
  • Typographic Elements Words & PhrasesMonday, March 26, 12
  • Typographic Elements Words & Phrases Come Together (At Long Last!) 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.Monday, March 26, 12
  • Words & Phrases Come Together (At Long Last!) 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 quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?Monday, March 26, 12
  • Words & Phrases Come Together (At Long Last!) 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 “Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni eos qui” 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…Monday, March 26, 12
  • Words & Phrases Come Together (At Long Last!) 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…Monday, March 26, 12
  • Words & Phrases Come Together (At Long Last!) 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, Quis nostrum exercitationem ullam corporis suscipit eaque ipsa quae ab illo inventore veritatis et quasi architecto laboriosam, nisi ut aliquid ex beatae vitae dicta sunt explicabo. ea commodi consequatur? 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
  • Good typography is readable • high contrast • line-height: 1.5 • left-aligned (never justified) • ~ 80 characters per line • 16px font sizeMonday, March 26, 12
  • 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
  • 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
  • kottke.org barackobama.comMonday, March 26, 12
  • So how do we style our blog? CSSMonday, March 26, 12
  • CASCADING STYLE SHEETSMonday, March 26, 12
  • CSS is 1/3 of your (or most) websites • HTML – content • JavaScript – behavior • CSS – presentationMonday, March 26, 12
  • 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 propertiesMonday, March 26, 12
  • 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
  • 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
  • CSS Looks Like… h1 { .entry-header .comments-link a { font-size: 24px; background: #EEE url(images/comment-bubble. font-weight: bold; color: #666; color: red; font-size: 13px; margin-bottom: 11px; font-weight: normal; } line-height: 35px; overflow: hidden; padding: 0 0 0; position: absolute; .special-paragraph { top: 1.5em; font-style: italic right: 0; border-top: 1px solid #9999AC; text-align: center; padding-top: 10px; text-decoration: none; padding-bottom: 10px; width: 43px; } height: 36px; }Monday, March 26, 12
  • Here we go!Monday, March 26, 12
  • Thank You! Any questions?Monday, March 26, 12