Tutorials and Guides

Design considerations
03/01/2011 - 6:13pm

What works well in a mobile web environment

Most XHTML elements are supported within mobile device web browsers. The six basic headline elements, <h1> through <h6>, work well, as do the paragraph element (<p>) and the various list elements.

Support for XHTML-based forms is also quite good. You'll be able to make use of the usual text boxes, radio buttons, check boxes, and other types of form fields.

I've also found that Server-Side Includes (SSIs) are well supported. If you have chunks of content that you use on multiple pages on your website, you can continue to use SSIs.

Using a Table of Contents

Since mobile device users may not be using a mouse or other pointing device, they may benefit from having access to a special table of contents or other supplementary navigation. However, you may not feel the need to provide these features to "screen media" users. In this case, you can add a style class to your "screen media" style sheet to hide such content from users with desktop or laptop computers.

     .handheldContent { display : none; }

Note that this custom class name begins with a dot (.handheldContent). The dot tells the browser that you’re creating a custom CSS class and that this class can be used many times within the document.

The "display : none" attribute and value pair coding instructs a desktop or laptop computer's browser to ignore the content in question and to not display it, while a mobile device would still be able to display it.

This .handheldContent style can be used whenever it is needed and as many times as needed.

To create a table of contents for mobile device users only:

     <div class=”handheldContent”>

     <p><strong>Contents:</strong></p>

     [ table of contents coding goes here ]  . . .

     </div>

Coding tip: Note that the dot in the .handheldContent class name is not needed and should not be used within the <div> element.

Step 1: Install mobile device emulators
03/01/2011 - 6:13pm

There is a wide variety of platform and browser combinations in the mobile web environment, more than a hundred such combinations. Screen sizes vary widely, too, from mobile phones with tiny screens in the 100-150 pixel range to pocket PCs with screens that are 600 pixels wide. To make things a little easier for you during the design process, you can install mobile device emulators on your PC and view the files on your hard drive as you’re working on them. There are several options available.

Getting emulators

Note: All of these links will open in new browser windows.

Recent versions of Dreamweaver (CS3 or later) offer a suite of mobile device emulators built into the package. Education discounts are available.

Download the Opera web browser. You can view your pages in small screen mode on your workstation (use the View menu > Small Screen option). There's also an Opera for Mobile version of the browser, and it’s installed on millions of mobile devices. Opera is free of charge as of this writing.

Tips:

  • For the ultimate emulation experience, minimize your Opera browser window to a 150-pixel width!
  • To locate emulator software for specific devices, do a Google search for "mobile emulator."
Step 2: Switch to XHTML
03/01/2011 - 6:13pm

If you’re still using HTML 4 (or an older version of HTML), you should upgrade your code to XHTML. I recommend upgrading to XHTML 1.0 Transitional — this version of XHTML is more forgiving than the Strict version, and if you’re used to HTML 4 the learning curve won't be so steep.

Why do you need to do this? Because of the wide variety of handheld devices and mobile browsers that are available, your code should comply with the current standards that are being promoted by the World Wide Web Consortium (W3C). Also, mobile device browsers support Extensible HTML (XHTML) rather than HTML. If you're using HTML 4 or an even older version of HTML, your code may display poorly, if it displays at all.

Drupal users: go ahead and skip to the next step. The Drupal development community has made it easy to create XHTML-based websites right out of the box!

Dreamweaver users: Dreamweaver has a built-in code conversion feature. Open the document that you want to upgrade, and use File > Convert > XHTML to upgrade the code.

If you code by hand:

Step 4: Create your handheld media style sheet
03/01/2011 - 6:13pm

To help you get started, I've created a sample handheld media style sheet that you can print or download.

» Sample handheld media external style sheet (PDF, opens in a new window)

As a reminder, a mobile device's browser first reads in the styles from the external "handheld media" CSS document, if one is being called. Then it reads in any styles that are embedded in the <head> section of the page. If an embedded style conflicts with a style in the external CSS document, the browser will discard the style from the external document and use the embedded style. If an inline style is declared within the page's <body> section, the browser will use the inline style instead of the style that was declared in an embedded or external style sheet.

For example, if you specify a first-level (<h1>) headline using an inline style with a very large font size, the mobile device will try to display the huge headline even if an <h1> headline style was declared with a smaller font size in the external "handheld media" style sheet. To avoid such conflicts, define the giant-sized headline styles only within your "screen media" external style sheet.

As I mentioned earlier in this tutorial, this doesn't mean that you always need to avoid embedded or inline styles. This is just something to be aware of, in case a page element does display in a way that you didn't intend. If you have one headline on one page that you want to display using a special red color, for instance, that should work well on mobile devices so feel free use an inline style in such a case.

Some Tips:

Create style definitions for every commonly used style in both external style sheets.

Make at a general purpose style, such as .dontShow, for use as needed to hide large images, complex data tables, or other content that you decide not to display on mobile devices.

If you're using a large page banner, hide it from display on mobile devices. For example:

      #banner { display : none; }

Create a special logo ID style for display only on mobile devices. This logo style would be displayed in lieu of the large page banner when a mobile device loads your pages. You can call it anything you'd like, but #logo would do.

If your pages usually display content in two or more columns, including a navigation menu, set each of these ID or class styles to fill a 100% width. For example:

      #content { width : 100%; }

Note: The mobile device will display the content in the order that it appears in the XHTML document.

You may also want to hide the navigation menu, if it's long:

      #navigation { display : none; }

Note: Custom style names that begin with pound signs (#) are known as "ID" styles, and they are used only once in a web page. In this case, only one content section would be used in each page, so I created a #content ID style type.

Style names that begin with dots are "class" styles, and such styles can be used as many times as needed within a web page. Since I may need to use the .dontShow style more than once in any given page, I'll make it a class style rather than an ID style.

Drupal users: If you've already built a custom theme (or plan to build a custom theme), you can add a new "handheld media" style sheet to your theme. When the style sheet is ready for use, add a link to it in your theme's page template.

Step 3: Update your screen media style sheet
03/01/2011 - 6:13pm

If you're new to CSS: I've prepared a simple external style sheet document that you can download or print. I'll also cover some of the basic concepts in this tutorial.

Note: all of the links on this page will open in a new browser window.

» Sample screen media external style sheet (PDF)

CSS Basics

Cascading Style Sheets get their name from the way they behave. Style designations literally cascade downward, from external styles to embedded styles to inline styles.

First, the browser reads in the styles from the external CSS document, if one is being called. Then it reads in any styles that are embedded in the <head> section of the page. If an embedded style conflicts with a style in the external CSS document, the browser will discard the style from the external document and use the embedded style. If an inline style is declared within the page’s <body> section, the browser will use the inline style instead of the style that was declared in an embedded or external style sheet. This can create unexpected results so, if a headline or chunk of content doesn't look the way that you expect it to look, check to see if an embedded or inline style might be the culprit.

This doesn't mean that you need to always avoid embedded or inline styles. For example, if you have one paragraph on one page that you want to display using a blue color, that should work well on a mobile device so feel free use an inline style in such a case.

Drupal Users:

There are a number of Drupal themes that provide CSS styling for mobile devices as well as for screen media. Two that I'm familiar with are Framework and Pinstripes (a theme that I developed).

If you prefer, you can make use of scripting or a theme switcher to allow visitors to choose among themes. There are several themes and subthemes available that were designed especially for mobile device display, and you can enable your chosen theme switcher to offer a menu of theme options.

Dreamweaver users:

To learn more about creating and using style sheets within the Dreamweaver environment, take a look at the Missing Manual series. There should be an edition available for your particular version of Dreamweaver.

Also, check to see there's an online course available at E-Learn Berkeley. Log on at BLU and navigate to E-Learn (it’s in the Self Service section). When you arrive at the site, browse or search for a working with Cascading Style Sheets in Dreamweaver course.

Some tips:

Create style definitions for every commonly used style and add them to your external style sheet.

Make at least one general purpose style in your "screen.css" document that you can use as needed to display content that is intended only for display on mobile devices, such as secondary navigation or a table of contents. I chose .handheldContent as the name for this style class.

If your website makes use of a large banner image, you can have handheld devices display a text-based logo instead of the large banner. In the screen media style sheet, set the #logo style so that it doesn't display along with the banner:

      #logo { display : none; }

If you would like to learn more about CSS:

A self-paced online course is available at About.com. You'll receive the lessons in e-mail, and the course is free of charge. There's no requirement to buy a textbook or submit homework assignments.

CSS: The Definitive Guide, 3rd Edition, by Eric A. Meyer.

Why are some of the style definitions using pound signs while others have dots in their names?

Custom style names that begin with pound signs (#) are known as "ID" styles, and they are used only once in a web page. In my sample style sheet, only one content section would be used in each page, so I created a #content ID style definition.

Style names that begin with dots are "class" styles, and such styles can be used as many times as needed within a web page. Since I may need to use the .handheldContent style more than once in any given page, I’ll make it a class style rather than an ID style.

Popular Tutorials

more