Day 1

Understanding Web Design (Jeffrey Zeldman, Founder, Happy Cog and A List Apart)

• Anything that gets in the way of users doing what they want to do is bad web design
• Web design is more like type-face, architecture – it steps away and allows the user or content to produce the meaning
• Great websites makes interaction easy
• Guides you subtly toward your heart’s desire (looks passive, but it’s active)
• Can be invisible or in your face
• Great web design delights

Designing Using Data (Sarah Paramenter, Founder, You Know Who)

• Research and data helps back up decisions of why you are changing something (and in turn – helps to remove resistance to that change)
• Avoid vanity metrics (metrics that can’t be acted upon, e.g. hits, pageviews)
• Track users and their habits (identify, segment, track)
• Leverage Facebook to find out who interacts with your content (use ads and Facebook insights)
• Test phrasing (“See plans and pricing” performed better than “Free trial” for CTA because it was less commital)

Recommended Tools
– TrueSocialMetrics
– Minimalytics
– Crazy Egg
– Optimizely
– BrowserStack

Responsive Design is Still Hard/Easy! Be Afraid/Don’t Worry! (Dan Mall, Founder & Design Director, SuperFriendly)

Inventory

• Content inventory: identify all pages on the site and what the page is supposed to do
• Pattern inventory: identify the atoms / molecules / organisms on the website (can do this in spreadsheet, photoshop, coded, etc, whatever’s fastest), check out Pattern Lab

Sketch

• Lay everything out simply (use grey boxes)
• Number them & block them out on the page
• Easy to layout and make responsive
• Simple visualization allows for dialog about layout
  Check out Sparkbox example

Assemble

• Create organisms
• Presets: list out all the potential organisms for each page
• Once organisms and presets are created/prepped (mise en place!), putting pages together should be easy
• Check out Pattern Primer

Screen Time (Luke Wroblewski, CEO & Co-Founder of Input Factory Inc.)

• Know your screen (increasingly mobile)
  
• Output (high resolution, widescreen aspect rations, media queries know more than width)
  
• Input (support all inputs, communicate what’s possible, screen size is poor proxy but it’s all we’ve got)
  
• Posture (design to human scale, environments, not to screen width, distance from device impacts interactions)
  

Note: there is a need to optimize tablets for both horizontal and vertical orientations (because both orientations are used!)

Content/Communication (Kristina Halvorson, Author, Content Strategy for the Web)

• Principles: internally motivates us to do things that are good and right, unites us in our day-to-day work
  
• Strategy: good strategy will provide constraints and keeps us accountable
  
• Process: process should evolve (retrospectives to figure out what works and what doesn’t), good process allows us to move together
  
• Roles: roles give us a place, use the RACI model
  
• Perceptions: prevent crossed wires or communication issues, ask for clarification when needed, perceptions give way to perspective
  

All this stuff is important because:
“A study of over 350 people in 6 business units at a financial services company found that the greatest predictor of a team’s achievement was how the members felt about one another.”
– Shawn Achor, The Happiness Advantage

UX Strategy Means Business (Jared Spool, Founder, User Interface Engineering)

Great content + Great design = Great UX

Business Strategy Priorities
1. Increase revenue
2. Decrease costs
3. Increase new business
4. Increase existing business
5. Shareholder value

The 5 strategic priorities are a tool for mapping our design intent into business objectives

Business Model Options
– Metered paywalls
– Repurposed content
– Supporting product sales
– In-app purchases
– Alternate channel revenue
– Content distribution
– Advertising (ideally avoid this)

Advertising: disruptive and corporate (doesn’t add value for the user)
Experience: in the moment of what the user is doing

Day 2

The Long Web (Jeremy Keith, Maker of Websites)

Progressive Enhancement

• Start using html elements that are not universally supported and because of HTML error-handling, things will still work
• Not designing for the lowest common denominator but starting there (e.g. escalators are progressively enhanced stairs)
• Make sure you build a strong base
• JS doesn’t share the error-handling of HTML/CSS – what happens when JS doesn’t load appropriately?
• Need to think long term and having a strong HTML base that is backwards compatible is the way to do it

Responsive Design Performance Budget (Paul Irish, Developer advocate, Google Chrome)

71% expect sites to load faster on their phone than on their laptop

Bandwidth: amount of information
Latency: lag time Latency on phones is high which is why it’s slow and the number of users with higher latency is going to increase (more people using mobile)

Aggressive, but good goals:
1. Deliver a fast mobile web page load (show above-fold content in <1 second, serve above-fold content, including critical path CSS, in first 14KB of response)
2. Speed index <1000
3. Delight users

Recommended Tools
– WebPageTest
– PageSpeed Insights: can run URL through and provides recommendations
– PageSpeed Module: plugin for Apache or NGiNX

The Chroma Zone: Engineering Color on the Web (Lea Verou, W3C CSS Working Group Invited Expert)

• Lightness is not a good deciding metric for whether you should put white or black text on top of color background - relative luminence instead?
• Variables in CSS coming (e.g. currentColor is currently available but limited)
• 4-digit hex code (last for alpha)
• HWB = hue whiteness blackness

Mind the Gap: Designing in the Space Between Devices (Josh Clark, Principal, Global Moxie)

67% users start shopping on one device and continue on another and have to think about each device and also the gaps between

Sometimes don’t even need the internet to have device exchange:
– WebSockets
– WebRTC
– Bluetooth LE

Bridge the physical and the digital

Giving digital a physical presence and vice versa

Neat Examples
– Making devices happier together =)
– Grab screen from tv and put it on the phone

Web+: Can the Web Win the War Against Native Without Losing its Soul? (Bruce Lawson, Developer Relations, Opera)

Reasons people prefer native vs. mobile web – Device-specific functionality
– Offline capability
– Faster performance (local storage)
– Familiar
– Mobile users bookmark by downloading native app (vs. bookmarking in browser)

10% of users bookmark a page (computer) and is less on mobile

For mobile users – installing IS bookmarking

On the web – the conversation can happen in real time (instant updates vs. downloading updates with a native app)

How to Champion Ideas Back at Work (Scott Berkun, Author, The Year Without Pants)

“The real designer is the person with the power to make decisions”

1. Get idea
2. Build it
3. Ship it

Between steps 1 & 2 – need to convince people to build and maybe between 2 & 3 – need to convince to ship (lots of convincing needs to happen)

Find ways to bring ideas while mitigating risk