notes from Kristina Halvorson’s talk “A Content Strategy Roadmap” at AEA2011SF

Content first!

Content strategy plans for the creation, delivery and governance of content.

Strategy without tactics is the slowest route to victory.
Tactics without strategy is the noise before defeat.
– Sun Tzu, The Art of War

“We need to get away from the launch it and leave it mentality.”

content audit, you *have* to do one of these!
a spreadsheet with the following: post id, title, url, meta tags, author, notes (what works, what needs to be changed, if it needs to be re-written)

define your project, and your content

define:
a core message
e.g. “Jungle makes it possible for everyone to experience the joy of owning, breeding and raising exotic frogs.”
a style guide – not a big ass binder that you can’t use. just define your voice. it can be a 1-pager… e.g. “smart, helpful, enthusiastic”
topics/transactions
governance guidelines
editorial calendar e.g. upcoming hot topics for each month

• Empower your writers
• Assign content owners
• Content inventory
• Short-form style guide
• Page tables
• Use real copy
• Editorial calendar
• Collaborate on metadata
• Content QA plan
• Get Real

Content always!

http://www.scoop.it/t/an-event-apart-content-strategy-resources

notes from Aarron Walter’s talk “Idea to Interface” at AEA2011SF

execution vs creative thinking
when you stop thinking creatively, it’s bad for you, your boss, the business

how to promote creative thinking:
- independent thinking
- start an independent project

get in the habit of having new ideas
1,000 things on a shelf. (building a toolbox)

how did you go from where you’ve been to where you’re going?
i’m not the best, but i’m as good as the next guy
hiero – king of syracuse

ideate
incubate
don’t show the judge…. don’t talk about half-baked ideas, bc you’re introducing the judge into the creative process
design (“make things, collect things, break things, connect things”)
- who are you designing for? wireframes
- what are you solving?
- sketchboarding. (put your ideas where people can see them, more collaboration) (video)
fork (create different versions)
evaluate
- prototyping http://keynotekungfu.com http://gomockingbird.com/ http://icanhazjs.com/ http://patterntap.com/
- http://developer.yahoo.com/ypatterns
- Designing Interfaces by Jenifer Tidwell
- https://github.com/stubbornella/oocss/
- http://flowplayer.org/tools/
- design persona

“scratch an itch”
weekend hacker
make an idea visible – clarity, confidence, boss, employee, indie, permission

resources:

http://www.alistapart.com/articles/personality-in-design/

http://www.abookapart.com/products/designing-for-emotion

notes from Nicole Sullivan’s talk “Using Flexible Boxes” at AEA2011SF

things to avoid:
!important declarations
float (too many means you don’t have an abstract layout mechanism)
font-size

myth: pixel-based font sizes are naughty.
why did we stop using pixels for fonts? (IE6 didn’t allow you to re-size pixel-based fonts)
bc with ‘page zoom’, pixels, em, and %’s can all be resized (IE7+)

takeaways:
%’s and em’s have drawbacks for predictability. nesting messes it up
px-based fonts can be resized
check how many ie6
only use %/em’s on body and “leaf nodes”

myth: don’t add any extra markup
separation of concerns. “process of separating a computer program into distinct features that overlap in functionality as little as possible”
the module body plays an important role.

takeaways:
solve one problem at a time.
add mark-up judiciously,
don’t cause bugs just to eliminate a div or two

myth: the more semantic the better
css is coupled too tightly to the style – mixing things up that don’t belong
class names & ids are not read by accessibility devices, not read by search engines, not read by users

more is not always better
css is coupled too tightly to the content – mixing things up that don’t belong

DRY – don’t repeat yourself
if you find yourself solving the same problem over and over, you need to create an abstraction

“Media Block”
unabashedly visual, but class names are abstract enough
what do we know about this media block?
- can it be nested?
- does it have a close button?
- does it have a clearfix?
what don’t we know about this media block?
- is the image width and decoration unique for each implementation?
- is the content known?
- is the width known?
need to separate structure from chrome

takeaways:
choose good semantic elements: headings, list, paragraphs
css shouldn’t be tightly coupled with display nor content
think abstract (visual represendatations of our repeating patterns)

“understanding specificity”

universal selector – specificity of 0

concatenating specificity
[inline, id's, classes, elements]
0,0,1,0 is less specific than 0,0,0,10

specificity grows over time (cruft!)
difficult to tell which rules take precedence
developers end up coding by firebug

!important adds another layer of specificity
[inline !important ] [ids !important] [classes !important] [elements !important] – [inline] [ids] [classes] [elements]
creates a hostile coding environment

“hostile code environment”:
- Two layers develop
- Specificity grows over time (more and more rules become impor tant).
- Even more difficult to tell which rules will take precedence Developers always code by firebug
- Eventually, it becomes impossible to get the look and feel you want.

takeaways:
- Classes are far more flexible & reusable
- Keep specificity as low as possible
- Avoid the descendent selector
- Make reusable website “lego”
- Add classes to the element you wish to change rather than a parent node.

Object Oriented CSS
CSS Lint

“GREAT DEVELOPERS CAN BUILD AMAZING THINGS
if we move worst-best practices out of our way”
-@stubbornella

Ethan Marcotte’s talk “The Responsive Designer’s Workflow” at AEA2011SF:

extractions and soundbytes from the presention:

What makes a design responsive?
- flexible grids
- flexible images and media
- css media queries

“design isn’t just about layout.”
“design is the method of putting form and content together.” -paul rand
“design is the stuff around the end result.” -mark boulton

What makes our design responsive?
Starting a conversation.

The pod convenes.
Designers: introduce the comp.
Developers: ask lots of questions.
Discuss how the layout might adapt.
Discuss how the interface might adapt. (Touch, Keyboard, Mouse, Spoken)
We need questions more than we need answers.
What value does this content have for our mobile users.

Mobile traffc has exploded
New capabilities — touch, geo, voice, ubiquity
Narrower screens force us to focus
The mobile user can’t control their environment, so designs for mobile users should be stripped free of cruft.

Context doesn’t necessarily determine the user’s intent.

“If it’s not valuable to mobile users, what value does it have to any users?”

Prototype like the wind!
Step 1: Fluid Grid.
target ÷ context = result

Step 2: Flexible Images

Step 3: Media Queries

Identify common breakpoints
DEVICE TYPE -> WIDTH
Small screens (portrait) -> 320px
Small screens (landscape) -> 480px
10″ tablets (portrait) -> 768px
10″ tablets (landscape), “desktop” -> 1024px
Widescreen -> 1200px

media query polyfill: github.com/scottjehl/Respond

Designing in the browser
The interactive design review.
Verify your work␣“live”
- How well does the layout adapt?
- Do individual modules still feel␣usable?
- Do any elements need additional␣design direction?

Rinse, repeat, and refine as␣needed.

A flexible foundation is key. (It means considerably less code, too.)
Adaptive > Responsive

http://www.informationarchitects.jp/en/

There is No Mobile Web

To be honest, I can think of a few, but not many use cases of web sites or apps which are or should be exclusively mobile. It seems like “the Mobile Web” allows us to revisit all of the talk of inclusion, progressive enhancement and accessibility from years ago.
— STEPHEN HAY, There Is No Mobile Web

A responsive layout meets mobile first.
- Defaults to a linear, small screen-friendly design
- Media queries based on min-width scale up, not␣down
- More accessible, more compatible, more␣responsible

http://github.com/␣lamentgroup/Responsive-Images

Being responsible.

“Mobile” & “Desktop”
vs.
“Mobile sites” & “Responsive sites”

It’s about your audience.

his book: Respsonsive Web Design Ethan Marcotte