Small Screen Navigation – Ben Callahan

Breaking Development Conference – Nashville – July 2014
Conference Session: Small Screen Navigation
Ben Callahan – SparkBox

A review of current mobile design patterns for navigation and interaction. Trigger Indicators and Interaction Patterns.

My Notes:

  • Don’t assume the big companies got it right. Don’t blindly copy patterns.
  • Vast differences in nav indicators and response across sites (e.g. “>” on some sites opens/closes a menu; on other sites it takes you to a page).
  • Content First – make sure we are building the right nav.
  • Give priority to high use cases.
  • Focus – overlay content with nav, e.g. content half hidden while overlay with menu.
  • Behavior – e.g. single top-to-bottom accordion menu JavaScript – strive for a single DOM.
  • Fallbacks aren’t worth it. Start with the lowest common denominator.
  • Usability – Web Designers understand Hamburger Menu, average user does not.
  • “Familiarity breeds usability” e.g. same nav on PC and Mobile.
  • “Design without testing is guesswork.”

Other conference notes on Ben Callahan at BDCONF can be found at: Ben Callahan notes on Speaker Deck


“You cannot do timeless work on your own. It takes a team. Collaborate!”
~Ben Callahan




Real World Responsive Web Redesign – Jonathan Stark

Breaking Development Conference – Nashville – July 2014
Conference Session: Real World Responsive Web Redesign
Jonathan Stark

This session discussed the RWD/redesign of Entertainment Weekly. I took away more about about project management than RWD but I was more so looking for PM tips.

My Notes:

  • RWD Guiding Principles: speed is a feature; progressive enhancement from low device to high; assume low; easier to progressively add features than to degrade gracefully.
  • Design: No Big Reveal – Constant feedback during design. Final design is 1 week from last review.
  • Big Pieces From Client: we knew all photos, videos, etc. from current site, and challenges before we started design process.
  • Advertising is a big challenge for mobile.
  • Prioritize Design with typical sticky note voting. Allow 20 seconds for +/- reactions to similar sites or comps/mood boards.
  • Set Initial design decisions: e.g. no carousels, progressive content, etc. Now you have a roadmap.
  • Did not use Agile or Waterfall but a hybrid, with information architecture, visual, and development in parallel.
  • Weekly build and push to dev site. Weekly all hands review with client. Weekly freeze.
  • Throw out elements client doesn’t like (e.g. which callout do you not like). Thereby weekly not a sign off.
  • Always design and demo in the browser, not comps.
  • Emphasize phone view in weeklies.
  • Start with small scale elements for review (e.g. and build to footer, then pages).
  • JavaScript: “Every script has a cost”
  • Consider starting with a site that works without JavaScript.
  • Create your own JavaScript library is better for minimum footprint. Don’t go to extremes with JavaScript.
  • Help yourself out: Use a common/single bug tracker; lots of screen shots for bug documentation with re-creating; we used multiple trackers – should have learned GIT better; automate deployment.


“Communication Trumps Process!”
~Jonathan Stark




Content First UX
Steph Hay

Breaking Development Conference – Nashville – July 2014
Conference Session: Content First UX
Steph Hay

Steph Hay presented a fresh approach to web site design by way of defining all of the content and information architecture up front, before you make the first wireframe or comp. The result is an outline of the site’s IA, which resembles a sitemap but is a complete definition of the site and actual copy. This reverses the typical process of adding content after design.

The process follows a user journey/dialog that is approached as a conversation. Elements of gamification are used to help the user seek goals and reinforce the learning experience along the way. Hay spent time in her presentation on this aspect of the process, which I cannot do justice here – but it’s important to the process. My main takeaway is her rethinking of the site development process. Putting content first makes absolute sense if we believe that content is the foundation of website experience.

My Notes:

  • Content First: Create the content and information architecture first, without tradition wireframes and other design techniques. This is a design-agnostic methodology.
  • Feels like a conversation. Promote user engagement.
  • Write all the content and structure in an outline [yields sitemap byproduct].
  • Greatly speeds up the overall a development process by improving front-end definition time.
  • Note: more than one speaker stated a ratio of ~3-to-2 | definition-to-build/activate.
  • Content First is inherently low risk, low res, and low cost. Promotes greater collaboration and helps define the end result more quickly without getting bogged down in design (speculative) considerations. Will result in faster overall development and launch.
  • Use with analytics to determine audience and solve the right problem.
  • Make a content workbook.
  • Language Boards: Core messaging; Choose Your Own Adventure style.
  • Ben &Jerry’s content written from a single statement/tag line.
  • User is Hero; Iterate until you win.
  • Conversation rather than structure. Hero journey; next steps…

Book reference: Make It Stick: The Science of Successful Learning (not Made to Stick) – some degree of difficulty in learning improves retention; applies to user journey as well.

Other conference notes on Steph Hay at BDCONF can be found at: http://www.lukew.com/ff/entry.asp?1899

Steph Hay on YouTube | How Two Startups Used a Google Doc to Plan Their User Interface


“Content Defines Structure, not the other way around.”
~Steph Hay




Mobile Design Now
Luke Wroblewski

Breaking Development Conference – Nashville – July 2014
Conference Session: Mobile Design Now
Luke Wroblewski

Luke Wroblewski is synonymous with Mobile First. He set the mobile design tone for the 2-day Breaking Development Conference.

My Notes:

  • Lots to learn but more to unlearn about mobile.
  • Above the fold: Scrolling is a continuation. Clicking is a decision.
  • We’re trying to fit large screen to small.
  • Hamburger Menu is a case of follow the leader imitation. The word menu, outlined to appear as a clickable object, was interpreted as a menu 21%+ more than the Hamburger Menu in A-B testing.
  • It takes big changes to go small.
  • Compared hotel sites with +/- 50% difference in process steps. [the difficulty of any extra field or step is magnified in mobile]
  • Startup: Release/Refine/Repeat; Learn Faster

Luke Wroblewski conference notes can be found at: http://www.lukew.com/ff/

[On Mobile] “It takes big changes to go small.”
~Luke Wroblewski




5-Day Rapid Prototyping
Daniel Burka – Google Ventures

Breaking Development Conference – Nashville – July 2014
Conference Session: 5-Day Rapid Prototyping and Testing – Build for Speed
Daniel Burka – Google Ventures

I’m not sure which Breaking Development session was my favorite but I could really relate to the information about rapid prototyping presented by Daniel Burka of Google Ventures. I was first introduced to rapid prototyping in 1986. The concept is the same today but we have now learned to include the client and customers directly in developing the solution in order to be successful. Amen.

This was an excellent session on rapid prototyping and, more importantly, about quickly getting to a high quality decision on the viability of an idea. Daniel Burka is with Google Ventures, the VC arm of Google. He has prior history with Digg and Milk, both of which are startups by Kevin Rose. Rose is a General Partner of Google Ventures.

A 5-day Rapid Prototype sprint can be applied to many different business ideas, technical or not. The presentation at #BDConf was based upon applying the process toward improving overall sales at Blue Bottle Coffee, based in San Francisco.

5-day Rapid Prototype:

Day-1: Put pressure on the team up front. On Monday, invite 5 prospective/customers to evaluate the prototype on Friday. Five is enough to provide an adequate evaluation and to complete the eval in one day.

Analyze: Dig into the design problem through research, client interviews, and strategy exercises. The client also participates. Listen and learn. The team includes both client and Google Venture folks. Build user flows, look for patterns and thoroughly understand the problems, constraints, and goals.

Day 2: Start to design solutions – but don’t group-think or brainstorm. Rapidly develop as many solutions as possible. Create multiple, individual solutions. By end of day two you want 10 to 20 divergent solutions. Actually write the copy, make sketches that can be matched to real images for build, and sketch out and document each idea thoroughly so that it can be directly prototyped.

Day 3: Select from among the ideas, as whole solutions or an amalgam of ideas. This is not a democratic process. Everyone votes with blue dots on mock-up sketches. All ideas compete and are pitted against others in a bake-off. Executives and leaders who are most responsible get extra/super-votes (e.g. red dots). Being democratic will water down the ideas, just like brainstorming creates design-by-committee solutions. By end of day three you want your three best options.

Day 4: Build the Prototype, usually as a website and/or mobile site mockup: Burkas demo of a low fidelity prototype was actually very graphically rich. Keynote or Power Point make good prototyping options (Keynotopia). Make the prototype clickable, with design elements to simulate real web pages. Use a technique that also makes the demo viewable on a smartphone, tablet and laptop PC.

Day 5: Validate: Show the prototype to the people you invited on Monday to learn what works and what doesn’t work. Again, keep it simple. Burka talked about using a USB camera to view and record phone interaction, over-the shoulder of the customer/test client. No 2-way mirrors and lab coats.

~~~  ~~~  ~~~  ~~~  ~~~  ~~~  ~~~  ~~~  ~~~  ~~~  ~~~  ~~~  

You may also want to read about Google Ventures’ Rapid Prototyping process as documented by Google Ventures and at Venture Beat:

The Product Design Sprint, 5-day Recipe for Startups (Google Ventures Methodology)
Jake Knapp – Design Partner Google Ventures

How Google Ventures Does Rapid Prototyping ‘Design Sprints’ With its 170 Startups

Here’s a link to a video of the presentation: Video: 5-Day Rapid Prototyping – Google Ventures


“We can’t solve problems by using the same kind of thinking we used when we created them.”
~Albert Einstein




Build Platforms, not Solutions

I say this quite often but have never written about it: Build Platforms, not Solutions.

It became clear to me when I was in that middle-stage of project/developer evolution that it was much more efficient to build a platform than a one-off solution. It’s way better than the idea of custom developing new solutions for every problem that you deal with.

The idea of platforms really hit home on a project where I had developed an expert system and needed a way to get information out of the system. My “solution” was to create an object-oriented, tree-walking method that would extract only certain objects …blah, blah, blah… And then an engineer said to me: “Oh – why don’t you create a report writer!”. Always in plain site but invisible to me, that suggestion opened my eyes.

The idea is to extrapolate the problem to the next higher level and create a more universal tool to solve the immediate problem as well as similar problems. Better yet, make that a part of a whole bunch of common solutions in the form of a platform.

It’s always easiest to solve the problem at hand with the quickest and surest solution. If you take the time to look at the problems that you are solving you will likely find a number of separate solutions that, taken together, will comprise a platform for a wide range of applications.


“Build Platforms, not Solutions.”
~Bob Reid




Startup Checklist

There is a lot information available about how to setup and run a small business. Here are a few resource links that float to the top. Theses are aimed at setting up shop from an operational perspective.

The following list provides money-saving ideas and resources for operating a small business or website startup. Please feel free to suggest ideas that have worked for you in the comments section.

Print: Vistaprint.com
Free Phone Number: Google Voice
Email: Google Gmail
Hosting: Winhost.com, Arvixe.com, too many to list…
Blog: WordPress, Blogger
Productivity: DropBox
Communication: iStockPhoto
Self-ed: W3Schools
Social: LinkedIn
SEO: Google Web Analytics
SEO: SEOMoz.org
SEO: SearchengineLand.com
SEO: Google Webmaster Tools
Productivity: EverNote
Communication: SlideShare
Shameless self-Promotion: SortFolio
Productivity: Dragon Naturally Speaking
Tech: Amazon Web Services (AWS)
Tech: Amazon S3 Cloud Storage
Productivity: SalesForce.com
Productivity: Google Docs
PDF Printer: PrimoPDF Continue reading