Taking Control of
User-generated Content
The Power of HTML5 and CSS3
Cobey Potter
Wellfire Interactive
Slide 2
Slide 2 text
User-generated content can be a pain in the Theon.
Slide 3
Slide 3 text
Users either:
are perfect,
spit out content too quickly, lacking structure, or
have all the time in the world to “beautify” their content.
Slide 4
Slide 4 text
WEBSITE STYLE GUIDES ARE EASILY IGNORED.
Slide 5
Slide 5 text
We finally have the tools to control them.
Slide 6
Slide 6 text
HTML5
Slide 7
Slide 7 text
Become HTML5 in one easy step
Slide 8
Slide 8 text
Become HTML5 in one easy step
Slide 9
Slide 9 text
Become HTML5 in one easy step
Slide 10
Slide 10 text
Become HTML5 in one easy step
Slide 11
Slide 11 text
New HTML5 Content Elements
for consumable content
comments, blogposts, whitepapers; anything
that can stand on its own
Slide 12
Slide 12 text
New HTML5 Content Elements
for distinct parts of content or areas on a page
subsections in a whitepaper, a comment silo
Slide 13
Slide 13 text
New HTML5 Content Elements
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
Slide 14
Slide 14 text
New HTML5 Content Elements
not necessarily a stand-in for an image wrapper
“optional” item that helps strengthen main
content
pullquotes, infographics, images
Slide 15
Slide 15 text
New HTML5 Content Elements
site or local/in-page navigation
links that could be considered for an aside are
not items.
links to external sites are not always
items.
Slide 16
Slide 16 text
BUT I — MY
S
Slide 17
Slide 17 text
HTML5 (DOM) Outline
Document Object Model has been updated...
and for the better.
article, section, aside, and nav reset the Outline
all headings (
,
,
, etc) restart
without detriment by search engines &
accessibility readers
Slide 18
Slide 18 text
User-generated content can be contained
users love using
; the bigger, the better!
allows for multiple
on a page
eases editors following behind users and
cleaning the content
still results in a design/structure decision, but
now we have options
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
One does not simply use HTML5 alone...
Slide 21
Slide 21 text
Time for my skills!?
Slide 22
Slide 22 text
CSS3
Slide 23
Slide 23 text
CSS3 Magic?
lots of new CSS3 functions
to play around with:
border radius, gradients,
box-shadows
even state transitions
and animations
Slide 24
Slide 24 text
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+
~
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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+
~
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
Play in the sandbox
twostepmedia.co.uk/cssselectors/
lea.verou.me/demos/nth.html