$30 off During Our Annual Pro Sale. View Details »

Taking Control of User-generated Content

Taking Control of User-generated Content

User-generated content is something that we as web developers, designers, and managers struggle with attempting to control; we don't know what our users will write or how they'll write it. Using HTML5 and CSS3, we can strengthen our control and keep our brands intact.

Cobey Potter

June 06, 2012
Tweet

More Decks by Cobey Potter

Other Decks in Programming

Transcript

  1. Users either: are perfect, spit out content too quickly, lacking

    structure, or have all the time in the world to “beautify” their content.
  2. Become HTML5 in one easy step <!DOCTYPE html PUBLIC "-//W3C//DTD

    XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
  3. Become HTML5 in one easy step <!DOCTYPE html PUBLIC "-//W3C//DTD

    XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
  4. New HTML5 Content Elements <section></section> for distinct parts of content

    or areas on a page subsections in a whitepaper, a comment silo
  5. New HTML5 Content Elements <aside></aside> content that pertains indirectly to

    main content or to site on the whole callouts, related articles/pages, etc great for modules in a sidebar or footer
  6. New HTML5 Content Elements <figure></figure> not necessarily a stand-in for

    an image wrapper “optional” item that helps strengthen main content pullquotes, infographics, images
  7. New HTML5 Content Elements <nav></nav> site or local/in-page navigation links

    that could be considered for an aside are not <nav> items. links to external sites are not always <nav> items.
  8. HTML5 (DOM) Outline Document Object Model has been updated... and

    for the better. article, section, aside, and nav reset the Outline all headings (<h1>, <h2>, <h3>, etc) restart without detriment by search engines & accessibility readers
  9. User-generated content can be contained users love using <h1>; the

    bigger, the better! allows for multiple <h1> on a page eases editors following behind users and cleaning the content still results in a design/structure decision, but now we have options
  10. Whats the support like? new elements are all legal in

    any browser. for enabling native support in old browsers & checking out in the wild modernizr.com when should you use new elements? html5doctor.com bit.ly/trOtvq
  11. CSS3 Magic? lots of new CSS3 functions to play around

    with: border radius, gradients, box-shadows even state transitions and animations
  12. CSS3 Selectors - Real Magic child selector: article > p

    adjacent sibling: h1 + p general sibling: p ul available in Chrome, Safari, Firefox, Opera and yes, even IE7+ ~
  13. CSS3 Selectors - Some math required nth-child / nth-last-child: ul

    li:nth-child(2n+1){} first-of-type / last-of-type: dl dt:last-of-type {} nth-of-type / nth-last-of-type: dl dt:nth-of-type(odd) only-child / only-of-type: ul li:only-child available in IE9+, Chrome, Safari, Firefox, Opera * “type” refers to tag type, not class or ID
  14. CSS3 Selectors - String matching equals: a[title=“Game of Thrones”] begins

    with: a[href^=“http://”] ends with: a[href$=“.png”] contains: a[href*=“facebook”] space separated value: a[data-info =“stark”] available in IE7+ ~
  15. User-generated content can be styled users generally get basic elements,

    non-classed these selectors allow us to style based on position alone WARNING: “Keep Local.” ex: .user-gen ul li:only-child
  16. Thanks! Cobey Potter Wellfire Interactive @courcelan @wellfire [email protected] All Images

    © HBO except Cat Helicopter Image used in part from Guardian UK