Design

Slides: Design: PC-based and Mobile

Google Analytics: What You Read: Most Popular Hoof Blog Stories of 2013

Three “viewports” for which to design:

  • Web-PC view
  • Web-Mobile view
  • Mobile

Web-PC view

  • Fulfill stated objectives for content and structure: codified
    goals

  • Fulfill user needs:
    • informational needs
    • physical behaviors (how the user interacts with the interface)
    • mental models

  • Design for usability – easily understood by intended audiences
    Includes load time: How Loading Time Affects Your Bottom Line

  • Design and content: consider SEO
  • Built in a way that it can be easily maintained and updated, within constraints of the organization (What we can learn from the evolution of Content Management Systems)

  • Means to determine success of site, continue to improve. Analytics, user feedback

Web-Mobile view

Check web analytics to determine the types of access to the site. If mobile is an increasing percentage of those accessing the site, then designing the site for mobile will be important.

Local Biz Searchers Using Mobile or Tablet More Likely to Purchase Than PC/Laptop Users

The above apply to all views, with the following additional
considerations that stem from:

4 Tips For Your Mobile SEO Strategy – Whiteboard Friday Moz

  • Screen size
  • User interaction: finger versus mouse
  • Mobile means, mobile not fixed
  • Mobile search is increasing versus PC search
  • More so the further down the purchase funnel
  • Responsive design:
    • Reflow content depending on “viewport” (screen size)
    • Encoded in the CSS; media queries
    • Breakpoints in design, to reflow
    • EXAMPLE: a “landscape” calendar would reflow to a vertical flowing
      calendar
  • Adaptive design:
    • In additional to responsive design, replaces appropriate content for the different viewports and circumstances. Responsive design is in fact a subset of Adaptive design.
    • The Many Faces of ‘Adaptive Design’
    • EXAMPLE: using geo location data for shopping
  • Second site:
    • Dynamic serving within the same URL (user agent detection)
    • Design a second site for mobile viewing
    • Was the original means to adapt to mobile, now responsive and adaptive is becoming more popular
    • Requires designer to maintain and update two separate sites
    • Works IF mobile use of site, and PC-based use of site are dramatically different

Mobile App Design

Content for this page is a collaboration with Olkin Communications Consulting