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

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:

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

Assumed Strategy

Everything that I consider about web design and development comes with the assumption that you are operating from a well defined strategy. Whether you’re a freelancer or corporate web manager – if you don’t have a strategy, you’re just building web pages.
Continue reading

The Universal Power of Tablet PCs

While researching mobile strategy I came to realize the universal power of Tablet PCs. No other device can access both old and new web sites and run apps, with a screen size that accommodates complex interactions. Smartphones provide all the same access but fail when a larger screen is really needed. In the form-factor tug-of-war the Tablet PC fits all of your needs except the “fits in your pocket test”.

The Tablet PC

  • Can view both mobile and web properties: websites, mobile websites, and apps.
  • Has a screen large enough for complex, multi-page transactions.
  • Can have both Wi-Fi and cellular connectivity.
  • Has a modern browser that can take advantage of responsive designed web sites.
Tablet PCs Span both Mobile Web and Apps

Tablet PCs have the widest range of mobile and traditional web access.


Decision Criteria for Mobile Development

Companies founded in the mobile age have an advantage. They’ve incorporated mobile from the start. Many companies are now working to incorporate mobile access into web applications and overall business strategy. Mobile can be a difference-maker and a budget-breaker. This post looks at two currently popular techniques to incorporate mobile access into websites and e-commerce: Responsive Web Design and Mobile App Development. Continue reading

Bloomberg TV Interviews Expedia CEO – Mobile Bookings at 20%

Interesting interview on Bloomberg TV with Expedia CEO, Dara Khosrowshahi. Mobile now over 20% of Expedia bookings. Mobile buy is “very much last-minute”/at point-of-need pattern. Expedia runs a multi-platform operation using responsive design techniques to adapt to PC/Tablet/Smart-Phone, requiring more “investment and design work” to achieve. iOS is dominant for Expedia mobile access in US; Android dominant in Europe and gaining in US. An Expedia app is available for both Android and iOS. Expedia App.
[6:30] Bloomberg TV Interview

Embedded Fonts – How To

By using CSS, it’s possible to use a non-standard web font on your website. Your web pages can reference 3rd-party fonts from a website, such as Google Fonts or you can install a font on your own web server and reference it from there. This post describes how to incorporate a new font onto a web server and make it viewable in the client web browser.
Continue reading