Since we announced our optimization of the Element Fusion website for mobile devices including the iPhone, we've had quite a few requests to share the steps that were taken to complete this task. While there are different ways to accomplish such a task, the following is a look at how we did it.

Phone considerations

For our purposes, we divided all mobile devices into three categories.

1. Devices with screens that have widths between 320 and 480 pixels, that support CSS, and that support screen media types and media queries. This includes the iPhone and the G1. We will refer to this group collectively as the iPhone. These devices will be able to support all of the optimizations we put in place.
2. Devices that support CSS and that either support the handheld media type or support the screen media type and media queries and have screens smaller than 320px wide. We'll create separate, simplified CSS rules for these devices since their screen size will limit what they are able to display.
3. Devices that don't support CSS. These devices will render our content from the markup only. We don't have to provide any special optimizations for this group. Since we use standards-based XHTML, it will still render effectively on these devices.

Design

First, we had to decide which elements should be kept onscreen for the iPhone and which elements should be removed. Here's a look at the Element Fusion home page with overlayed notes about our decision-making process.

Once these decisions were made, we created a mockup to lay out the included elements on a screen that's 320 pixels wide.  Our mockup can be seen in the image below.

Notice the "Give us a call" and "Find us on the map" buttons in the footer of this mock-up. We're replacing the regular footer on the EF site with this special footer content which will only be shown on the iPhone. We'll cover this special situation a little further down.

Implementation

To implement our changes, we first set the viewport to the device's width. Do this by inserting the following line of code into the head of your XHTML template:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Next, we linked up a special stylesheet called mobile.css right below our initial screen stylesheet and set it to target our first group of devices, the ones with screens between 320 and 480 pixels. We could have targeted all screens smaller or equal to 480 pixels without specifying a minimum value, but in this case, we wanted to use a different stylesheet for any screen smaller than 320 pixels. Note that only devices that support screen media types and media queries will use this stylesheet, but that includes the iPhone and G1 phone. Here's the code we added to the head of our XHTML template:

<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />

Then, we linked up another stylesheet called mobile_simple.css which would target our second group of devices. This stylesheet will not only target browsers that support the handheld media type, but also other browsers that support the screen media type and media queries and have screens smaller than 320 pixels. Here's the code we added to the head, directly below the previous link:

<link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" />

Development

Next, we created our mobile.css stylesheet to target the iPhone / G1 phone, overwriting the PC screen style sheet, changing dimensions, modifying backgrounds, and hiding or showing elements as defined by our mockups for the iPhone. This tutorial assumes knowledge of CSS to make such changes, so we won't get into all of the CSS rules here. However, you can view our stylesheet here to see what's under the hood.

We also created the mobile_simple.css stylesheet for smaller-screen devices. This stylesheet essentially strips out most of the content styling, making our website display in an almost "unstyled" form which is more accessible to other mobile devices with smaller screens. You can view this stylesheet here.

As a final step, we added this javascript to the head of our template to hide the URL Bar when the page loads on the iPhone.

<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 1);
}

</script>

Testing & troubleshooting

We used the emulators that come with iphone and Android SDKs to test our site. These emulators are free and available to the public. We also used some browser-based emulators.

The final product

Here's the resulting code added to the head of our template documents. To see this in context, you can view the source of our Element Fusion homepage and look at the head section.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link media="Screen" href="style.css" type="text/css" rel="stylesheet" />

<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" />
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 1);
}
</script>

Special content for iPhone

As we noted on our mock-up above, we created a custom footer containing two special buttons that will exist only on the iPhone to provide special functionality unique to that mobile platform. The "Give us a call" button immediately dials our company number. Handy, since the user is browsing on their phone. The "Find us on the map" button launches the built-in Google client on the device and pinpoints our location.

Whereas all of the previous modifications were made by simply restyling and hiding content that already existed on our website, these new buttons are actually additional content that had to be added to the markup of our web pages. So, we added the following HTML code to the footer of all our templates.

<div class="iphone">
<ul>
<li id="iphone_call"><a href="tel:(405) 948-8300">Give us a call</a></li>
<li id="iphone_map"><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=element+fusion&ie=UTF8&ll=35.594786,-97.053223&spn=5.760649,9.30542&z=7&iwloc=A">Find us on the map</a></li>
</ul>

<p>© 2009 Element Fusion, LLC. All Rights Reserved. <a href="http://www.embracewater.com/" title="Water content management system for business">Powered by Water</a></p>
</div>

Here are some important things to note about this content:

1. The "iphone" class applied to the div surrounding this content allows us to hide it for PC browsers and to enable it only for our iPhone devices, using the stylesheets mentioned above.
2. Note the syntax of the link reference for the phone number. This tells the iPhone to dial the phone number when the link is clicked.
3. The Google maps link works just like every other Google maps link. The iPhone knows internally to launch them through the internal Google client.

This week, Vandelay Design, a web design company out of New Jersey, published a very comprehensive tutorial of our LightCMS product on their popular web design blog. We were delighted to see this article, entitled "How to Set Up Your First Site with LightCMS," which does a very thorough job of explaining LightCMS and showing the simple process of integrating a design onto the system. If you haven't seen it, please take a look.

We want to say thanks to Steven Snell and Vandelay Design for taking the time to publish this article. There is a lot of great insight here, especially for designers just getting to know the LightCMS system.

In my last post, I described some design changes to the content management system’s element control bars used to edit content. The new UI design called for control bars with some clean, rounded edges. The problem is that the control bars appear inside the site’s visual design template so we have no idea, on a system-level, what color or image the control bars will appear on top of. This presented some contrast issues as described in the aforementioned post, but also required us to use actual transparency.

Sliding Doors

Typically, when you need to create rounded containers with CSS, Doug Bowman’s Sliding Doors technique is the way to go. Unfortunately, sliding doors is best for containers that are only rounded on two edges (think tabs instead of buttons), or have one fixed dimension (buttons that get wider but not taller), and are in front of a regular, known background. In our case, the the boxes must scale to most any width and height, are round on all four sides, and must be actually transparent — including some subtle drop-shadows. Phew.

For those of you who know your way around CSS and are unfamiliar with the technique, sliding doors uses two HTML elements, two images, and some clever CSS to create a rounded tab that will expand to hold its contents in some limited ways. The solution is elegant (no extra markup in most cases) and reliable in modern browsers. The two images consist of a narrow left edge graphic, and a wider right edge image. The left edge covers the right, completing the illusion. However, the rounded images are GIF or JPG graphics that are square and match the background color. A true transparent image would break the effect. So, I realized that while I could use what I new about sliding doors to find a solution, I would have to try something new.

The Solution

I knew right off that elegance would by and large go out the window. The technique is pretty simple, but requires extra, non-semantic mark-up. But here is the general idea for truly transparent sliding doors. Traditional sliding doors pad the outer container so that the nested element will show the other piece behind it. It covers the wider image. My technique places them side-by-side so that the transparency can work. We’ll use two nested DIV elements, the outer having a negative margin that is exactly as wide as the "corner" image, and a give the nested DIV a negative margin to match, pulling it outside the outer element. It works surprisingly well in all of the modern browsers. Here are a few details.

The markup:

<div class="actions">

<div class="roundedTop"><div class="rLeft"></div></div>

</div>

The CSS:

.roundedTop {

height: 6px;

background: url(actionsBar_RT.png) no-repeat right top;

margin-left: 6px;

}

.roundedTop .rLeft {

height: 6px;

background: url(actionsBar_LT.png) no-repeat left top;

margin-left: -6px;

}

That’s the code for the two top pieces Here’s a graphic that shows the individual graphics and DIV boundaries. The final piece is a top, middle, and bottom repeating the technique above all wrapped in a containing DIV:

That’s it. Feel free to use this technique in your website designs. I have attached a ZIP file that contains all of the HTML and CSS in a working example for you to experiment with. Let us know in the comments if you find any bugs or improvements to this idea.

Tim's recent post, Learn about CSS specificity, is a great read for those of you who have done some basic CSS but want to explore some of the more advanced techniques. That article made me think of another area that can be difficult to master but is an essential skill for the really advanced layouts: positioning.

The goal for any CSS purist is the perfect separation of form (design, style, graphics, presentation) and content (typically your document's marked-up copy and images). Most people start by working with fonts and colors in CSS, but the real challenge comes in using CSS for layout. That's where positioning comes in. Knowing how best to position your content to create an attractive and practical layout using only CSS is tough to do but really takes your website design to the next level.

One of the best and most concise explanations of CSS positioning is this handy presentation, Learn CSS Positioning in Ten Steps. Sadly, I had learned CSS before this was around, but I think it's a great refresher for any designer and will be especially helpful to those of you up-and-coming CSS masters.

If you are interested in CSS, love CSS, or want to know more about CSS, here is a great article on "CSS Specificity:  Things You Should Know" over at Smashing Magazine.

I just point this out in case you're not a regular reader of Smashing Magazine which, if you want to learn more about stuff related to web design, you should be.  This article is not for everyone as it's a bit advanced but if you're sort of a CSS wannabe like me, it's a good read and makes learning fun by relating everything to Star Wars.  Hooray!

It also provides a ton of links to other great resources on the web.  Enjoy.