Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Cobey Potter

Other Decks in Programming


  1. Taking Control of User-generated Content The Power of HTML5 and

    CSS3 Cobey Potter Wellfire Interactive
  2. User-generated content can be a pain in the Theon.

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

    structure, or have all the time in the world to “beautify” their content.

  5. We finally have the tools to control them.

  6. HTML5

  7. Become HTML5 in one easy step

  8. 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">
  9. 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">
  10. Become HTML5 in one easy step <!DOCTYPE html>

  11. New HTML5 Content Elements <article></article> for consumable content comments, blogposts,

    whitepapers; anything that can stand on its own
  12. New HTML5 Content Elements <section></section> for distinct parts of content

    or areas on a page subsections in a whitepaper, a comment silo
  13. 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
  14. 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
  15. 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.
  16. BUT I — MY <DIV>S

  17. 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
  18. 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
  19. 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
  20. One does not simply use HTML5 alone...

  21. Time for my skills!?

  22. CSS3

  23. CSS3 Magic? lots of new CSS3 functions to play around

    with: border radius, gradients, box-shadows even state transitions and animations
  24. 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+ ~
  25. 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
  26. 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+ ~
  27. 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
  28. Play in the sandbox twostepmedia.co.uk/cssselectors/ lea.verou.me/demos/nth.html

  29. Now we have the weapons, the tools!

  30. Thanks! Cobey Potter Wellfire Interactive @courcelan @wellfire cobey.potter@wellfireinteractive.com All Images

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