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

I’m new to Vim but I’ve been using Sublime Text in vintage mode to practice. I’ve tried a few tutorials but I’ve found it more helpful to actually learn by using the commands while coding.

I wanted to share my starter set of commands and I hope I remember to add blog posts as I add to my repetoire.

How to cut/copy and paste:
1. v (or V for whole lines) to highlight what you want to cut or copy
2. d (for cut), y (for copy)
3. p to paste after cursor (P for before the cursor)

Recently at Launch Academy, we learnt about sessions and cookies as a means to store data between requests. Using the session hash in Rails means we can persist data.

In our example, we stored a registration id to the session hash in the create controller action so that we could access it in subsequent visits to the new page. Since there isn’t always necessarily a session available, we needed to make sure we wouldn’t encouter exceptions when looking for the last session.

Here are a 3 methods I tried:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# GET /registrations/new

# Method 1
def new
  # Use find_by_id to try and locate a Registration with the last registration id
  # Using find_by_id instead of find since find_by_id returns nil when not found
  # (find throws an exception)
  @last_registration = Registration.find_by_id(session[:last_registration_id])
  @registration = Registration.new

  # Sets the registration email as the last registration email if it exists
  # (prepopulating the form would happen in the view)
  if @last_registration.present?
    @registration.email = @last_registration.email
  end
end

# Method 2
def new
  # Looks for last registration the same way as method 1
  @last_registration = Registration.find_by_id(session[:last_registration_id])
  @registration = Registration.new

  # Instead of using an if statement, use .try to pull the last registration email address
  # (results in nil instead of throwing an error if last registration email doesn't exist)
  @registration.email = @last_registration.try(:email)
end

# Method 3
def new
  # Here comes the ternary operator (condition ? if_true : if_false)
  # Use ternary operator to check if there is a session last registration id and
  # if there is, the last registration email is set to that
  # If there is no last registration id, last registration email is set to a blank string
  @last_registration_email = session[:last_registration_id] ? Registration.find_by_id(session[:last_registration_id]).email : ''
  @registration = Registration.new
end

The last method is definitely the most concise—and I think pretty expressive too.

The more I pair program, the more I enjoy it. It’s very much like sharing the platform with a buddy. Here are a few pros I’ve found:

Pacing: Sharing the platform makes it easier to time when you should be lifting – it’s much easier to prevent your breaks between sets from being too short or too long. Similarly, pair programming can helps pace yourself—having someone to code with means that you can talk through your thought process as you work.

Staying Focused: Having a friend can keep you from getting distracted and keep you on task and in the zone.

Share the Knowledge: I always learn something new from my partner. Whether it’s a lifehack, computer shortcut, or a tip for just doing it better. It’s always an educational experience to work with someone.

Pairing can be very uncomfortable at because it requires you try to accommodate someone else’s working style and having someone watch you work, but there are some definite benefits. And as with a lot of things, practice helps! Looking forward to more pairing in my life.

Humble beginnings! Here’s a first post.