Screen Design - Part 1

Understanding platform differences

Perhaps the most important aspect of web design for us to consider is the platforms in which our pages will be accessed. Although the term platform used to refer to the type of computer used, it has expanded to include in the case of web design any type of device used to access a web page. For the purposes of our
discussion, let’s group the platforms into three basic groups: traditional computers, tablets, and mobile phones.

Each of these platform types has certain distinctions that we must take into consideration, most of which are tied to the platform’s screen size.

Screen size

One of your first tasks, when designing a new web site, is to identify the target page size. In the age of such varying platforms from desktops and laptops to tablets and phones you will likely need to design multiple page sizes. Indeed, most sites now offer two primary page sizes: traditional web and mobile. Let’s take a look at a few examples to help see exactly how different screen sizes can change the viewing of a single web page.

Below show the same site www.foodnetwork.com – as appears on three different platforms.

Above shows the same site as it displays on an iPad (a tablet computer).

Above shows the site when viewed on an iMac (a desktop computer).

Above show two versions of the site on an iPhone (mobile phone).

Note that all four figures use the Safari browser, so the only variable at this point is the platform. Above screen capture of Food Network’s mobile site. While this version is much easier to read and navigate, the content is not as immediately accessible. This is the compromise of making sites available to mobile users.

When doing so, the tiny available content area means you must consider what content mobile users will most likely wish to access. In this case, site developers must have determined that access to the recipe search was the most important piece of content for mobile users. The other aspects of the site are still available to mobile users, they are just not the primary focus of the mobile site.

To really understand the differences between the screen sizes of the available platforms, we need to also talk about how the view port of each device works. On a traditional computer, the size of the browser window is independent of the screen size. That means you can shrink or expand the browser window as needed. However, the browser window cannot be increased beyond the width of the monitor.

But on many mobile devices, the viewport is such that you’re only viewing a portion of the browser window at any given time. For example, if we view the full Food Network site on a mobile device with zooming enabled, we can then zoom in to read a particular portion of the page (as shown in below). In such instances, the browser window is not limited by the size of the viewable area.

 To really give you an idea as to the vast array of possible screen sizes, consider the many common screen sizes available on the market today. Given how fast the market changes, this is obviously a moving target.

So what do you do?

First, we must recognize it is impossible for any web page to look perfect on every platform. After we’ve gotten that out of the way, we can move on in coming up with the next best way to ensure all the content is accessible to the widest possible multi-media users. There are three basic schools of thought in terms of how to do that.

Design for one size, ignore everyone else. While you may initially laugh at the idea of ignoring a large portion of site users, unfortunately many site developers fall into this trap simply by never looking at their pages on different platforms. With so many options out there, you absolutely must consider a variety of platforms and sizes when designing for the web. This means testing your pages on traditional systems, tablet computers, and mobile devices.

Thankfully, there are lots of testing tools to help you do that without going broke. Here’s one example that couldn’t possibly be any easier: http://quirktools.com/screenfly.

Create multiple designs for the most common sizes

When developers set out to accommodate as many users as possible, one method commonly employed is to create multiple style sheets for their sites one for each group of platforms. For example, you might create a mobile style sheet for small-screen mobile phone users, then an alternative style sheet for tablet and traditional systems with larger screens. Here’s one example of what the HTML code might look like for each style sheet:

<link rel=”stylesheet” media=”screen” href=”default.css”>
<link rel=”stylesheet” media=”print” href=”print.css”>
<link rel=”stylesheet” media=”screen and (max-device-width: 480px)” href=”mobile.css” />

For more tips on how to target specific platforms (and browsers) with your code,check out these resources: http://css-tricks.com/resolution-specific-stylesheets/ and http://docs.rhomobile.com/rhodes/css-framework.

Create flexible designs that shift according to the screen size.

The other common method of accommodating as many users as possible is to create a flexible design that shrinks and expands according to the available viewing area. Depending on who you ask, such designs are often referred to as responsive, elastic, fluid or liquid. This flexibility is best accomplished by using percentages instead of pixels for content area dimensions. For example, a fluid layout might include dimensions like these:

#header {
               width: 100%; height: 10%;
}
#columnA {
               width: 30%; height: 70%;
}
#columnB {
               width: 70%; height: 70%;
}
#footer {
               width: 100%; height: 20%;
}

Thousands of sample flexible layouts exist online. Here are just a few to get you started:
http://www.alistapart.com/articles/responsive-web-design/, http://www.alistapart.com/articles/fluidgrids/, and http://css-tricks.com/the-perfect-fluid-width-layout/.

Navigation method

Before we move to browser differences, there’s another platform difference worth noting. Traditional systems typically require users to work with a mouse and/or keyboard for navigation purposes. Because of this, most of the modern web navigation systems are customized for these types of input devices.

But what about tablet and mobile devices?

Users in each category often interact with web sites via finger swipes and double-taps. The challenge for web designers, then, is to design navigation methods easily accessible for human fingers working on small screens.

Here are a few suggestions for possible solutions:
http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial and http://bradfrostweb.com/blog/web/responsive-nav-patterns.

Next to - Screen Design - Part 2