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.