all presentations: http://aneventapart.com/2011/sanfrancisco/slides/
Using Flexible Boxes – Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.
flexible boxes are sort of like tables, but behave much better and do cooler things.
starting with: a list with list items (boxes of content, should align side by side).
on ol:
using display:box on the parent element makes all of its child elements also have display:box;
box-orient:horizontal;
box-pack:center /* only supported in webkit */
on li:
set a background color, then all the elements will match in height.
box-flex:1; /* sets flexible boxes. */
each box will get the same amount added (or subtracted) to it to fit the containing space.
for flex to be applied: you take the amount of space left over, and divide by the total number of box flex numbers, and apply the designated amount to each box. (could have box-flex:2 etc. which would get that box 2 parts assigned.)
box-ordinal-group: 2. could make a bunch of boxes 2, then give another one say class “sticky” of box-ordinal-group: 1, then it will always stay at the beginning of the list of boxes.
You can turn your whole page into a flex box, and use ordinal groups to rearrange content for mobile, etc. (put nav at the bottom, for example).
what to do with browsers that don’t support flexible boxes?
float it. This doesn’t solve all the problems though, for example equal height is not possible, or ordinal groups.
2011 flexible box specification has lots of new stuff
Our Best Practices are Killing Us – Nicole Sullivan, co-author, Even Faster Websites
stubbornella.org
Object Oriented CSS on Github
use grep to find problems with css.
use CSS Lint to find errors and duplication
usecases
facebook css was 1.9MB. Facebook blue was declared 261 times. 548 unique colors (whaaa?). color: was declared 6498 times.
salesforce: over 5000 padding declarations.
Duplication is a serious problem esp. with font size, floating, padding
alexa top 1000 consumer site study –
worst examples: 518 !important
733 floated elements – look at a grid based layout system!
889 font-size declarations
Myths
Using px is bad
using px is ok. only ie6 doesn’t support page zoom, which is the only reason not to use px. Using em’s turns into a mess because of nesting. It is hard to predict results, so it causes bugs. If you don’t support ie6, there is really no reason not to use px font sizes. Only use em’s or percentages on body and leaf nodes (if you must use them at all), no where in between.
Less markup is good
Less markup is good, but don’t go so far that doing so causes bugs. Surrounding a list by a div is ok, if it solves problems.
Semantic Markup is essential
css is too tightly coupled with the content. can semantics be taken too far? classes and id’s are not read by anybody besides other developers. So let’s make them work for us. For CSS, more is not better. Do not repeat yourself!
CSS pattern abstraction: “the media block“. (image on the left, some content on the right)
what we know:
can be nested
optional right button
must clearfix
don’t know:
image width, decoration
right content is unknown
width is unknown
separate structure from chrome
Is performance the most important thing
No. More important is repetition, duplication, legacy code.
Choose semantic elements: headings, lists, paragraphs
Abstract the css as much as possible from style and content.
http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/
https://github.com/stubbornella/oocss/wiki
Too many classes is bad
Uses more classes is actually faster and avoids duplication than using descendent selectors only. Using a class is more specific than using elements.
Specificity grows over time. Difficult to tell which rules take precedence.
Over time – specificity and duplication grows.
Use semantically correct headings in html, add class names to each one in css so you can apply visual semantics. (h1, .h1 {blah}).
Avoid descendent selectors whenever you can. Because those elements might not always be in that same situation. Make “reusable lego pieces”. Add class directly to elements you want to change, not parent nodes.
There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.
Idea to Interface – Aarron Walter, author, Designing for Emotion
greg’s notes. i failed.
Smoke Gets In Your Eyes (css3 animations) – Andy Clarke, author, Hardboiled Web Design
css animation fits better with semantic meaningful markup than other ways of web animation.
css3 animation demo studiohttps://developer.mozilla.org/en-US/demos/tag/tech:css3/
http://animatable.com/
http://animatable.com/demos/madmanimation/
transitions are basic animations.
@keyframes create more advanced animation effects.
@keyframes fade {
0% {opacity:0;}
25% {opacity:.5;}
100% {opacity:1;}
}
.lamp {
animation-name: fade;
animation-duration: 6s;
animation-delay:1500ms;
animation-iteration-count: 1;
transform: rotate(5deg);
}
css3 transforms
apply transforms and combine with keyframe animations to create effects.
translate (move)
rotate
scale
skew
greg’s notes (have more code samples)
A Content Strategy Roadmap – Kristina Halvorson, author, Content Strategy for the Web
Content First – we can all agree on that. Content Always
Content isn’t copy. Content first is not copy first.
What we need is “content strategy” in the project framework
Content strategy plans for the creation, delivery and governance of useful, usable content.
what,why,how,when, for whom, with what, where, how often, what next
content components: substance, structure
people components: workflow, governance
how will your content serve your business and your users?
get away from the “launch it and leave it” strategy
it should enter a content lifecycle that goes around and around until the content is DELETED: >strategy>plan>create>maintain>audit>
Discovery
content audit: what do you have, what is it, where is it, what is it for. Also a good chance to update your meta title, desc. and keywords. A good person to do this task is the copywriter or “content wrangler”.
content ROT (redundant, outdated, trivial). REMOVE IT.
content readability, stakeholder agendas, legal requirements, style guides, metadata integrity, workflow and timelines, content owners
Define
content requirements
pair our business objectives with what the user expects and desires
content wrangler works with UX to create a “core message” that should guide the content requirements. Bring the copywriter in at the beginning of the content strategy process!
short and simple styleguide to demonstrate the copy voice matches the personality of the “core message”. This can be one page long.
editorial calendar – start this early and make it realistic based on the facts of the resources available.
make “page tables” which are templates for people to deliver content. Templates would include: key message, objective, priority, maintenance, source material. This will make it easier for content creators to give you what you want, and keep with the content objectives at all times.
Develop
html, qa, content upload, seo implementation, authoring conventions, data model, system integration
content inventory, upload, styleguide, seo guidelines, error messages, metadata, training materials, content qa plan
After Deployment. Maintain and Care
Maintain and care for the content, audit it, revisit, revise, keeping it with your core message
responsive content
Structure content to be modular for use across different devices. Think of your content objective, not the form that it lives in. Always keep with your core message, prioritize the content.
The Secret Lives of Links – Jared Spool, Founding Principal, User Interface Engineering
oops I got tired.
links. make them go where people want, make them look good but still like links, use trigger words to help people go where they want (hint: a trigger word is what they would put in the search bar).
Avoid back button and pogosticking (back and forth between the information hierarchy)