Basic Mobile Layout

By on May 14, 2012 10:53 am

Mobile web development is an expansive field of engineering and design, and can require extensive expertise and involve using many tools. Dojo is designed for mobile development at many levels, including lightweight, granular modules for bandwidth and CPU constrained devices, touch and gesture events, mobile-style widgets in Dojo Mobile, feature branching for mobile customizations, and much more. However, before even getting into these sophisticated aspects of mobile development, it is worth considering some of the basics of mobile layouts. Many web sites and web applications can provide a vastly improved user experience by simply employing viewport definitions and adaptive layout techniques.

Setting the Viewport

First impressions are critical, and for many outdated web pages, the first thing a user experiences is illegibly small text that they must zoom in to read properly. Probably the first thing any web developer should learn about to prepare for mobile devices is the “viewport” meta tag. This simple tag instructs mobile devices what scale and dimensions to use to display a page, so that users can be instantly greeted with a properly scaled page where they can immediately start reading and consuming your information without zooming.

The “viewport” meta tag allows for a few different parameters that are set through the “content” attribute. Probably the first parameter (and possibly only) to set is the width. If your web page does not have any other mobile-specific customizations, the quickest way to determine a good mobile viewport width is to point your browser at your page and resize the browser horizontally. Make the browser as narrow as possible where you can still comfortably read the main content of the page without having to use horizontal scrollbars (horizontal scrollbars may appear, but shouldn’t clip the main content, only extraneous side bars). The width of the page (document.documentElement.offsetWidth) should be a good mobile width. Ideally this should be a relatively low number, in the range of 300-400 pixels (see the next section if it is not).

Now, only setting the width is not sufficiently adaptive. If you set a width of 400 pixels, this is great for a phone (at least in portrait mode), but is far too zoomed in for tablets that also use the viewport meta tag. Fortunately, this is easily solved. If we combine the width property with an initial-scale property, the browser will use both of these, first ensuring that the page will at least be the specified width, and if a wider display (such as a tablet, or a phone in landscape) is available, then it will match the initial-scale provided. This allows us to have proper scaling on multiple devices. The typical setting for the initial-scape is 1.0, which is the device’s preferred scale level for ease of reading. If you have a minimum page width of 400px, your meta tag could be:

  <meta name="viewport" content="width=400, initial-scale=1.0">

Now your users will be greeted with a page that is properly scaled right away!

There are a number of other parameters that can be used with the viewport meta tag, such as minimum-scale, maximum-scale, user-scalable, and constants device-width, and device-height. However, the settings described above provide a simple technique and an excellent user experience for initial scaling and size, without limiting the user’s ability to later scale to their preferred reading size.

Adaptive Layout

If your web application can really be resized down to a 300-400 pixels width and still be usable, you probably already have a remarkably adaptive layout. However, for most pages, having a layout that can really be usable at these widths will require some layout modifications.

There are a few CSS techniques we can use for more adaptive layouts. First, rather than specifying widths in pixels, we can use percentages. However, this approach is not heavily used in most modern web pages, as it becomes very difficult to maintain pleasant aesthetics across unbounded page widths. Having more definite limits on the layout gives a designer more constraints to work within. Instead, we can still specify widths in pixels, but provide opportunities for adaptation by using the CSS min-width and max-width properties instead of just a single width property.

A popular width for web pages is 960 pixels. To utilize a more adaptive strategy, rather than fixing the width at 960px, we could make this a maximum, and allow for narrow widths (for narrower devices). For example:

.container {
    max-width: 960px;
}

Grid systems like 960.gs then often use float: left blocks to align elements within the grid. This can still be used with an adaptive container like the one above. Using floating elements can also contribute to the flexibility of your layout since blocks can wrap down below if they run out of horizontal room. Note, we can also use a min-width if we need to have a lower bound as well.

The inner elements of the layout can also use min-width and max-width when possible. In particular, blocks of context or text can typically be resized quite a bit (while sidebar’s and navigation elements sometimes have less flexibility). Some reasonable width ranges, combined with floating elements can quickly lead to a highly adaptive layout that will scale nicely on smaller mobile devices.

Media Queries

Simply using CSS with flexible widths and floating elements may not be sufficient for a highly polished interface that is fine-tuned for the major devices out there. Media queries give us a powerful way of articulating more complex and precise styling based on device size. With media queries we can specify certain CSS properties and rules that are only to be applied for certain media conditions. For example, perhaps we don’t just want browser-controlled flexible width, but we actually want to alter font size and or background-color on smaller devices. With media queries, we can do just that.

A common media query to use is applying a maximum width for a rule (or set of rules) to be applied. Here is an example of applying a rule to our #nav element when the device width is 500px or less (generally phones, but not tablets), where we reduce the navigation bar’s font-size and change the background-color:

  @media screen and (max-device-width: 500px) {
	#nav {
		font-size: 0.8em;
		background-color: green;
	}
  }

It should be noted that you can specify a minimum device width, but since older versions of IE (IE8 and earlier) don’t understand media queries, usually you will want to target the smaller and newer mobile devices with the media queries.

Because media queries have multiple conditions that can be combined with different logical operators and encompass different CSS rules, the permutations for how we adjust our styles based on the media is virtually endless. This is powerful functionality for making web applications that can run smoothly and beautifully on many devices. Below are a few examples of media query in action:

And Beyond

These tips provide a basic start to making your web applications more mobile-ready, and give a much better user experience with a minimal effort, regardless of what toolkit (if any) you are using. However, a truly mobile-optimized web application can be much more involved. For more advanced capabilities, such as device specific builds, native matching mobile widgets, mobile themes, and touch and gesture event handling, Dojo has a robust set of tools and we can help you create amazing user experiences.

Comments