ConvergeSE 2012 - Saturday

Published May 2, 2012

This is part two of my notes from ConvergeSE 2012 – Saturday (read notes from Friday).

(Sessions 1 & 2 I skipped)

Session 3: Keep it Simple, Stupid (Kyle Steed)

Simplicity: the quality being easy to understand or do

It takes a lot of hard work to enjoy what you do!

Value the simple things (things in life, work, faith, etc.) Jiro Dreams of Sushi – a movie about a man who works hard and produces incredible results.

Don’t overthink

  • Brainstorming is ok cause it helps you get all the bad ideas out first
  • But stick with simple ideas

Design is a choice, love is a choice, simplicity is a choice

  • Even if you’re comfortable at a 9-5, it may not be fulfilling
  • Love what you do
  • Choose to live simply

Don’t fear your peers

  • Appreciate and learn from them
  • Focus on community and connection
  • Be inspired by them!

Get good “people time” to be inspired

  • Set aside quiet time in the morning
  • Then prayer time
  • THEN work

Resources

Session 4: Modernizr (Faruk Ateş)

  • It’s all about creating tailored web experiences
  • Opera, FF, IE are going to alias -webkit prefixes
  • Browser vendors screw up UserAgent strings (add MANY conflicting identifiers!)
  • Who’s to blame: developers or browser vendors? Neither

How do we work? Person + Tool = Result
If the tool’s flawed, developers need to overcompensate for the flawed tool

The purpose of tools

  1. Empower you in your needs
  2. Make it easier to do the job the right way

Origin Story

He wanted to solve the problem of progressive enhancement without forcing people to start from scratch

How Modernizr helps

  1. Empowers designers & developers to use HTML5 + CSS3
  2. Makes it easier to do feature detection, progressive enhancement

Taking it to the next level

Regressive Enhancement – Modernizr + Yepnope.js (Modernizr.load())

Modernizr.load({
  test: 'Modernizr.csstransitions',
  yep: 'filepath.css/js',
  nope: '',
  callback: ''
})

Related Tools

What’s next?

  • Responsive Web Design (“100%”) – i.e., responsive images
  • “Mobile First” as a principle is right on the money
  • Focus on features of current browsers (and upcoming features) and design for those
  • Design for the browser of the future… (?)
  • More and better tools (everyone’s responsibility)
  • More integrated tools

Session 5: Faster Design Decisions With Style Tiles (Samantha Warren)

Who:

Her, badassideas.com. She works with clients on big responsive websites.

What:

Style Tiles are a design deliverable

  • Like paint chips or fabric swatches for a room’s styling
  • Elements of a page: type, possible colors, shapes, icons, dribbbles, buttons, textures …
  • Benefits of Style Tiles:
    • Moodboards are too vague
    • Mockups are too precise
    • Style Tiles are just right!
  • They separate style from layout

Why:

Frankenstien Comp (aka Frankencomp): putting together different comps, which is a mess
Clients don’t think like designers!

How:

  1. Listen
    • Ask goal-oriented questions
      • What are the top three user goals for the site?
      • What are the top three business goals for the site?
    • Exploratory questions, like who are your users
    • Metaphor questions, like “What cookie would your website be and why?” <– (BS)
    • “Degree of” questions, like “How strongly do you think the site should be… illustrative?” (1-5)
  2. Interpret
    • Blanket adjectives (Patriotic, Authoritative, American, Readable)
    • Extract adjectives into groups
    • Break down adjectives into groups based on elements and principles of design
  3. Define a visual language
    • “newsy,” “clean,” “playful”
    • It just needs to give you a place to start
  4. Iterate
    • Iterating on a style tile is far more efficient than iterating on a comp
    • It’s human nature to combine options

For responsive designs…

References

SESSION 6: The Intersection Of Design & Development (Jeff Croft)

He’s a hybrid.
He used to use the tools he knew to do whatever he needed to do. (vbulliten, moveabletype, etc)

Off the shelf tools suck (for doing what they’re not meant for)

He started working with the original django team on www.lawrence.com
He’s a control freak – he wants to be involved at all levels, not just making it look pretty

Materials vs. Tools

  • Mastery of tools is key (but you must understand your materials too)
  • Our material is code
  • Zeldman says real designers always write code
  • Glen Murphy says the best designers are ones with a technical background

Some of the most important design decisions happen in code

  • Be proactive in development (i.e., if the designer left something out, take care of it)

You should learn to write code even if you don’t need to for your job

It could get you hired
Being able to code makes you a better designer (whether or not your job requires it)

Jim Coudal: “All things being equal, hire the one who can write.”

The more parts of a project you can influence, the more you can innovate (like Apple does)

Breadth == Influence

How do you get there?

  • Just dive in!
  • Find a client who will fund your education
  • Don’t stop at HTML and CSS
  • The language doesn’t matter
  • Start at the language level (not the framework)
  • Stop having “handoffs” – they kill elegance
    • Instead, work together on the entire project
    • Make decisions together
  • Stop worrying so much about tools and processes
  • Don’t blindly draw a line between front-end and back-end
  • Beware the “Valley of Badness” (thinking you know more than you do – be respectful)

Truly Innovative Products Need Custom Code

  • If you plan to build the next big thing, you better know how to code
  • Have a basic understanding of graphic/interaction design (layout, color, typography, etc)

Great people

Session 7: Mobile Usability Testing (Jennifer Downs)

Make a mobile testing rig:

  • Plug in a webcam and connect it physically to your iPhone
  • Use PhotoBooth
  • Use ScreenFlow software to record from both cameras
  • Turn down iPhone screen brightness
  • with reflectionapp.com/, you can mirror your iOS device on your Mac

What was this session about?

Session 8: Creating Excellent Customer Service (Robyn Tippins)

She’s had bad experiences with brands
Most people believe that companies want to avoid serving them
Examples:

  • Verizon is terrible and she had a very bad experience
  • Blackberry and RIM are also terrible because of their blackout in Europe

Write an emergency plan, just in case

Examples of bad PR (both good and bad ways to deal with it)

Non-Scaling Situations:

  • Assessing a customer’s needs
  • Helping a non tech-savvy customer
  • Refunding a customer’s purchase

Work with marketing, but insist on conversation being within the scope you define

Example of good PR:

  • Amazon creates “amaze-me” moments – they re-sent a guy’s order for free
  • They’re very wonderful in all ways!

Create positive assumptions

  • NQA return policy
  • answer calls/messages fast

Documentation

  • Document customer support
  • Create a wiki or something like that, and seed it with content
  • Place helps in strategic places

Empower your reps

  • Tell them to take the blame
  • Encourage creativity
  • Take away the clock
  • Encourage power listening (hearing all of it from the client)
  • Have them envision the person on the other side
  • Encourage real language
  • Emphasize follow through
  • Remind them to keep their cool

Weekly checkups

  • Call your own support line
  • Send emails to your support line

Go the extra mile

  • Amaze Me reports
  • Require follow through on

Guard your territory

  • Belong
  • Fight for your voice

Love your reps!

  • Don’t allow abuse
  • Show them a way out if they want it
  • Reward them outside of customer care

Session 9: Reinventing Interest Discovery Through Adaptive Human Behavioral Analysis (Jonathan LeBlanc)

Technology is the solution!
The Sociological backbone of identity (Us & Them – The science of identity)

The different states of knowledge

  • What a person knows
  • What a person knows they don’t know
  • What a person doesn’t know they don’t know

Identity and discovery are NOT a technology solution

He decided to make a change, which led him to stopped.at
He helped them build an identity engine

Building check-in categorizations (like a miniature Googlebot)

  • shopping
  • tech
  • books
  • posters
  • gifts

The more you use it, the more accurate it becomes
Find people you mostly overlap with, and help people learn what the other knows that they don't
That’s how you get the “don’t know they don’t know” section

The Future of the web will not be driven by technology, it will be driven by human nature

Session 10: Getting Your CSS Under Control (Jonathan Snook)

He’s worked for himself, Yahoo, Shopify
Misconception: CSS is easy
CSS renders in reverse – each element in the page tests against each selector from right to left until a non-match is encountered

  1. Categorization a. Base (body, input, links)
    1. necolas.github.com/normalize.css (he didn’t actually mention this one)
    2. meyerweb.com/eric/thoughts/2011/01/03/reset-revisited
    3. html5boilerplate.com b. Layout (columns, main/sidebar)
    4. 960.gs
    5. elasticss.com c. Module
    6. form, search, sidebar “About”
    7. Sub-modules (like types of button) d. State (like active, current, etc) use “is” (i.e. “.is-active”) to designate e. Theme
    8. colors, borders, text, fonts/font-sizes
    9. only override what needs to be overridden, don’t rewrite everything
  2. Naming Convention a. They clarify intent b. Use classes over IDs (specificity is dangerous – leave room for multiples in the future) c. Specify what node you’re styling (use “.btn.btn-large” instead of “.btn.large”)
  3. Decouple HTML/CSS a. use child selectors because they limit scope, and they render faster b. use them inside a class-based module
  4. Increase Semantics a. use only one selector in a string if possible! b. add the same class to different types of tag, if they’re performing the same role

What does it mean?

  • Shift away from a page mentality
  • Don’t code CSS for the page, code it for the system

State-based design

  • A layout or module style
  • Sub-modules
  • JavaScript-driven states
  • Pseudo-class states
  • Media query states

References

Session 11: Beyond The Click: A Quick Start To Designing With Gestures (Wren Lanier)

  1. Gestures are good
  2. Make them intuitive

Session 12: Design Everything (Steve Smith)

Design: Deliberately making something awesome

Our design focus is too narrow
We spend all our time on headers, logos, etc
We ought to design support, team, workflows, analytics, community, etc

Team Workflow

  1. idea
  2. discussion
  3. visuals & development
  4. deployment
  5. monitoring
  6. iteration

This process can be used for everything

We need to design our (design) process

Every step needs thought, design, …, documentation

Tools for Team Interaction

  • They have their own app for ideas & discussion – team.githubapp.com
  • They have their own app for video presentation – it’s all automated (amazing!) – talks.githubapp.com
  • Script/Bootstrap (sets up everything automatically)
  • Branches (every feature is a new branch, some get merged back into master, some don’t)
  • Pull Requests (way to manage and comment on branches and merges)
  • Campfire (auto-notifies them about what goes on)
  • Play – sense of community because they can all listen to the same music even though some of them are remote – play.githubapp.com

Tools for Deployment

  • Hu-bot (office robot) for instance… “hubot deploy github to production” or “hubot deploy github/branch-name to production” – hubot.github.com
  • After commits to master, code is automatically deployed

Tools for Monitoring

Things we must design

  • Design for mobile devices
  • Design for customer support
  • Design for the first-time user
  • Design external notifications
  • Design APIs
  • Design for speed

We should design everything!!

← OlderConvergeSE 2012 - Friday
Newer →Target Blank

If you have comments, please send them my way via Twitter

Recent Posts

What I'm listening to

Loading...