Blog

Beyond “Responsive” Design for Mobile Devices

As mobile web devices are increasingly used to access almost any web site, the need to have a site display properly on a small screen has become an essential part of any site design.

One very good technique used to achieve attractive displays on mobile devices is known as Responsive Design. A pure Responsive Design will be based strictly on using flexible CSS rules (e.g., max-width, or using relative sizes such as %), as well as using @media CSS sections for specific sized device.

A second approach (and one I don’t like) is to use a completely different design for a mobile site. These designs typically present a completely different organization to the site, and tend to use horizontal bars that will open or close sections. This certainly can work well, but the visitor is left with a totally different experience of visiting the site than when viewing from a desktop browser.

Ideally, any visitor to a site will get a similar experience no matter which browser is being used. The site will share a general look and feel, as well as have the same organization. Content such as videos will be displayed appropriately on both the desktop view, and the mobile view. Mobile views will have features that make it easier to navigate the site such as different menu operational design (the traditional pull-down menu does not work very well on phone sized screens, for example), or different handling of links (the hover capabilities doesn’t work very well on many mobile devices, for example).

While a pure responsive approach can indeed lead to sites that work well on mobile devices, I contend that this approach is not enough. In order to get the ideal view on both desktop and mobile browsers, I believe it is critical to include features in the site design that will display the site differently depending on the specific device being used to view the site.

Here are some things that can’t be done  or done efficiently with a strictly responsive design:

  1. Switching between the mobile view and a full desktop sized view.
  2. Displaying different menus depending on the device.
  3. Selectively displaying non-responsive content (e.g., external ads) on desktop, and providing alternative responsive content for mobile devices (e.g., alternate ad).
  4. Selectively displaying Flash or alternative media for desktops, Android, or iOS devices.
  5. Taking advantage of device specific capabilities (Android, iOS).
  6. Selectively displaying large amounts of content depending on device (e.g., a full sidebar for desktop, or a smaller, alternative sidebar for mobile).
  7. Dynamically adjusting viewing size of YouTube or Vimeo videos.
  8. Dynamically adjusting iframes.

Some of these technically could be done with a responsive design, but involve sending more than one alternate block of content (e.g., a different menu for desktop and mobile device), and then selectively adjusting the “display” attribute. This works, but involves sending extra content to the device. On the other hand, capabilities such as dynamically showing different content for Android and iOS devices cannot be handled.

My Weaver II WordPress theme incorporates features that allow “Beyond Responsive” site design. It implements a basic browser model that accounts for four general types of devices: desktops, small screen phone like devices, small tablets (like the Kindle Fire or B&N Nook), and large tablets.

There are features included with the theme that allow different content to be directed to each of these devices. For example, a different menu is used for phones, a modified pull-down for small tablets, and a standard pull-down menu for large tablets and desktops. Mobile devices will automatically display links differently because the traditional mouse-over hover effects often used on desktop browsers don’t work that well on touch devices. Videos (from YouTube, for example) are automatically displayed in the correct size. These features all happen automatically. While many of these features could be done by strictly responsive design, others (such as YouTube video sizing) require more active, device specific measures.

There are other features that allow the content creator to manually control content display for different devices. For example, the standard WordPress sidebars are automatically hidden, but an alternative sidebar is provided for more appropriate display on small screens. The creator can also selective display one kind of externally provided content (ads, for example) that still is often not responsive on desktops, while providing an alternative version for mobile devices – perhaps a fixed ad or other non-rotating but responsive content.

Weaver II’s Mobile View Design

Now that Weaver II’s Mobil View has been in use for some time, I thought it might be useful to summarize just what the Mobile View design philosophy is.

When a site with Weaver II is viewed from a mobile device,  the design is to present the mobile  view by default – which is really designed to be easily readable and navigated on the smaller screen. Weaver II’s mobile device model includes smart phones, small tablets (such as a Kindle Fire), and large tablets (such as an iPad).

For the phone view, the standard mobile view includes these specific design elements:

  1. A slightly modified header – the default image will be displayed, but there is a modified Site Title that comes at the top, and also leaves room for the toggle to full screen.
  2. No sidebars – instead there is an alternate widget area displayed at the bottom.
  3. There is an alternative menu which only drops down on demand, and shows all menu entries displayed vertically. This has proven much more readable and easier to use than the initial Weaver II menu version which had the standard drop down menus offset to fit the screen.
  4. The blog page will show excerpts for entries.
  5. All links are displayed with an underline – it can be more difficult to recognize links on a touch screen.
  6. The horizontal view will automatically adjust on most devices to show more content.
  7. There is a fairly easy to spot button to switch to full screen view.

The small tablet treats the vertical and horizontal views differently. The vertical view is much like the phone view with the exception that the standard drop-down menu is used. The horizontal small tablet view will automatically (sometimes requires a manual page refresh depending on the browser being used) display the standard sidebars and hide the mobile sidebar.

The large tablet view is essentially exactly the same as the standard browser view with the exception that links are underlined, and elements may be a bit narrower on the vertical view. There are no icons to switch views.

I really believe this corresponds to the best presentation of a site on mobile devices. As an older user myself, I now find it close to intolerable when I open a site on a mobile phone size device, and get a full page view of a site with nothing big enough to read. My older eyes just can’t seen that small type. I actually now find it almost insulting that a site has not taken the trouble to present a readable site for my phone.