Getting started in mobile doesn’t have to be rocket science. In fact, using good Web principles and a modern device such as the iPhone is a perfect place to start. By the end of this article, you’ll know how to create a working iPhone app that can be deployed on lower-end devices and be distributed through mobile app stores.

Let me start by making a few assumptions about you, the reader. First, I’ll guess that you’ve had a mobile phone for a few years now—probably some sort of smartphone with a few advanced features, but really a phone with a few extra features bolted on. I’ll guess that you played around with some of the more advanced features, like the mobile Web browser or maybe you downloaded a game or two, but after the novelty wore off you never used those features again and your advanced (and expensive) piece of mobile technology reverted back to its primary purpose, being a telephone.

Now, I’m going to guess that when the iPhone was introduced, your ideas about what mobile technology could do changed a bit. Sure you were a little bit skeptical, but come on, admit it, when you first saw the iPhone you knew it was like no other telephone you had ever seen.
While my powers of perception might have missed about 15% of you, chances are the other 85% know what I’m talking about. Your experience in mobile pretty much summarizes the evolution of the marketplace for the past ten years. While the iPhone is certainly not the alpha and omega of mobile, it stirred something in us that’s having a halo effect on the entire mobile industry—finally consumers are starting to realize that mobile phones aren’t just telephones.

Mobile devices have already outpaced the growth of desktop computers around the world. The research firm Informa predicts that in just a few years 50% of the world’s population will access the Web through a mobile device. By the way, that’s 20% more than people who will access the Internet through a desktop browser.

In 2008, the iPhone and devices similar to it, along with flat-rate data plans, skyrocketed use of mobile devices as information devices, making the U.S. the largest consumer of mobile Web content in the world—something it has never done before.

So how do we, humble designers and developers of the Internet, adapt our designs and content for this incredible new medium? How do we take advantage of the opportunity around the iPhone explosion? And while the iPhone is the shape of things to come in mobile, it’s still a small fraction of the overall market, so how do we make our content available for everyone else?

iPhone first, other devices later
I won’t bore you with the decade of industry history; let me just tell you that the biggest challenge in designing for the mobile Web has been the mass proliferation of shoddy mobile Web browsers made worse by device fragmentation. In other words, there are a lot of devices out there that have a bad Web browser in them that can’t be upgraded.

The WebKit mobile browser, which first appeared in Nokia smartphones and then exploded with the iPhone, has started to change the landscape of the mobile Web. Along with Opera Mobile, a powerful aftermarket mobile browser in millions of handsets, Web standards are finally coming to mobile.

What does this mean for us? We can finally create graceful mobile sites with gorgeously designed experiences, and because we can use standards, we’re assured they’ll look reasonably the same on next generation devices, such as the Android G1 and the newly announced Palm Pre (which both use WebKit as well as their native mobile browser).

So my advice is to focus on creating a great iPhone site or Web app using Web standards. If we do our job right, we won’t need to worry about other devices during design and development. As long as we stick to good Web standard principles, that job will be easily tackled (which I’ll come back to at the end of this article).

Designing for context
Our first task in creating a mobile site or Web app is to understand in what context users will be using our content. Context is the circumstances that form understanding. This could be physical context; for example, the user might be on a bus or train, away from his desk. It could be media context or the type of device he’s using and its limitations (e.g., he may be using a mobile phone and network coverage might be spotty while in transit). And it could be his state of mind or modal context (he might be bored and just wants to read some news).

Context can aid us (or even distract us) in understanding or appreciating the information in front of us, adding value to what we experience and therefore to our lives. Now that might sound a bit overwhelming, improving someone’s life through a mobile website, but it happens every day. We use information to aid us in everything from the small forgettable problems of our lives, such as where to eat lunch, to big decisions, such as buying a house or seeing a doctor about that rash.
Given the constraints of the medium, good mobile experiences begin and end with understanding your user’s context and then somehow addressing it. For our purposes, we’ll start with a simple mobile Web app that grabs the recent articles from www.layersmagazine.com and presents them in a mobile-friendly format for readers who might want to catch up on the bus or train commute. Here are some things we’ll need to think about:

• We’ll need to consider that they’ll not be stable while reading, so we’ll want to use larger text.
• They may encounter dead spots in the network, so we’ll want to load larger amounts of data per page load to decrease the need for paging.
• We’ll also need to consider that they’ll only have a short timespan to read our content, so we might need to keep our entries short and sweet.

There are many more issues of context that we might address, but for now we’ll try and keep it simple.

Designing for touch interfaces
Once we have a basic idea of what we want to take mobile and addressing the user’s context, we need to create how we want to present it. Designing for the iPhone and higher-resolution devices offers a bigger and more flexible canvas to work with, but the downside is that we have to design around bulky fingertips.

Each button or hit area should be at least 40 pixels in height to allow for a nice clear target to touch. We should use larger fonts to not only fill in the event areas, but also to provide our readers a usable type size when held about 8–12″ away from their eyes.

We also want to make it clear that all actions or events on the page are visually connected to parent display or task. We want every actionable item to clearly state its intended purpose. This isn’t just to prevent frustration during time-constrained browsing sessions. When designing for mobile devices, think of each touch or click as an investment of time and money on behalf of the user, as oftentimes it actually is. Many users pay for each page they visit. So if you present a bad label that takes the user to the wrong information, the user has to literally pay hard cash for that mistake. In some cases they’ll have to pay to go back to the original page in which they started. It’s your responsibility to not allow these costly mistakes to occur.

I like to lay down a basic design approach in Adobe Photoshop first, but I only focus on the key design elements that I’ll need to slice up and optimize—the rest I’ll design with XHTML and CSS. This allows me to view my site on devices sooner, which almost always impacts my design decisions and ultimately the final design. As the designer, your challenge will be to think of your design fluidly, how it will stretch and zoom based on the user’s context and device. The tighter you try and reign down on the presentation, the less compatible and less useful it will become to mobile users.

Designing for standards
With our design direction in hand, so to speak, we are ready to start building our markup and styles. If you aren’t familiar with Web standards principles, I suggest reading up on a few of the basics (www.opera.com/company/education/curriculum). I have two easy rules:

1. Is it semantic? Don’t go crazy adding a zillion divs or spanning each with its own classes or IDs. Just use basic HTML elements like headers and lists with structural divs. All your content should live within at least a block level element, such as a paragraph tag.
2. Is it readable? Write your entire markup before you add any styles. Your site should be perfectly usable without a single style (since that’s how most other mobile devices will read it).

We’ll want to keep the layout of our content short and simple; the more complexity we add only makes it more difficult to adapt it to other devices and moves us further away from addressing context. In this example, I mentioned that we want to be able to load more content per page so the user won’t need a persistent wireless connection. So we’re going to create a simple list of entries, starting with the title and followed by the body.

Now I want to hide the body of each entry, giving the user a nicely formatted list of articles that only requires one action to view. The easiest way to do this would be with a JavaScript show/hide event, but we can’t assume that JavaScript will work on all phones; in fact, it only reliably works on a scarce number of high-end devices. So we’ll add a JavaScript target that we can style for our higher-end phones, and all other devices will just ignore it and display the body with the title.

I should probably mention this is why I don’t recommend using design libraries that are meant to emulate iPhone interactions, such as iUI. They rely heavily on JavaScript which won’t work across multiple devices, nor can it be safely downgraded to less-capable devices. These are great tools if you’re just focusing on one device, but can be a serious hindrance if you want to extend out to others.

We should now have nice semantic markup that looks a bit basic—but that’s the point. Our markup is perfectly usable in virtually all mobile devices. But let’s add a little style to it.

Designing with CSS3
The WebKit mobile browser in the iPhone, iPod touch, Android devices, and the Palm Pre supports a great deal of CSS3, which can come in handy when designing for mobile devices. You can check to see what CSS3 is currently supported in various browsers at www.css3.info. Typically, whatever is supported in Safari is supported in mobile Safari and other WebKit browsers.

For the purposes of our app, we don’t need to go too crazy. We’ll use little rounded corners around our content area and a small drop or box shadow to complete the effect. [Insert 06-css3]
You’ll notice the little “-webkit” before our CSS3 declaration. We need to do this since the World Wide Web Consortium hasn’t fully ratified CSS3 yet, but that could change soon. To be safe, you should include both the “-webkit” and the normal CSS3 syntax for support of future non-WebKit browsers. It’s a bit tedious to make sure you update everything twice, so I recommend just copying those styles when you’re satisfied with your stylesheet.

And with just a handful of styles, we’ve made an unstyled block of text into a nice-looking iPhone site.

The technical bit
If you’ve been paying close attention, you’re probably wondering where all the content came from for the Layers magazine mobile site. No, I didn’t cut-and-paste or make a CMS template; I just used the Layers magazine RSS feed and the supersimple PHP library called SimplePie to pull in content and reformat it.

In fact, RSS is the perfect place to start your mobile app. RSS is basically just an XML file, which comes in handy for simple content adaptation since the presentation from our content is already stripped out and our data is structured. By just adding a few lines of code to a single document, we can pull our RSS content into our newly styled mobile site.

Designing for the App Store
Stories of developers making cheap applications that turn them into overnight millionaires might replace your pupils with dollar signs. This isn’t a new phenomenon to mobile; it has happened many times before. Each time, the micro-industry crashed upon itself due to that same problem as before—device fragmentation. The Mobile Web is the only mobile distribution platform that promises to work consistently across all browsers, using the knowledge you already have (as you’ve seen from this article).

Who knows what will happen this time around, but one thing is for certain, it does feel good to be on the user’s desktop. Well, I have a couple of tricks for you.

By adding these few lines to your Web app, your users can bookmark your app to their iPhone or iPod touch home screen, just like a native app. The first section of code points to our app icon file; the second launches your app in its own browser, with no browser chrome, URL bar, or back buttons. Your users will get a seamless mobile app experience that you control.

And if that isn’t good enough for you, try out PhoneGap (http://phonegap.com), an open-source project that can turn your Web app into a native app that could even be sold through the iTunes App Store. Plus, PhoneGap works on the Android and Blackberry platforms as well.

Designing for the other 99.8%
Oh, there’s just one more thing. What about all those other devices? In the U.S., more than two-thirds of mobile Web traffic is coming from the iPhone and other high-end devices like it, but let’s not forget our little flip-phone buddies out there.

Since we coded everything to standards and we didn’t use any tricky JavaScript animations to get users to our content, our site can still be viewed on lower-end devices. By simply using the stylesheet media types available in XHTML, we can point to different stylesheets based on the device.

With a few tweaks in our lowest common denominator or LCD stylesheet, we have a perfectly usable site for everyone else.

I’ve shown you how easy creating mobile sites can be; now the rest is up to you. Get out there and start making cool stuff for this exciting new medium that billions of people never leave home without.

Linda Zacks can’t be indexed as one particular artistic species: she’s equal parts design, illustration, paint, poetry, zip, and zoom. She graduated from Brown University in 1995, where she studied semiotics and creative writing and spent her junior year at Rhode Island School of Design. Four years prior to launching a freelance career, Linda was Design Director at Vh1.com. Since going solo in 2004, she’s been hunkered down in her creative laboratory in Brooklyn called “extra-oomph,” concocting pieces that churn with a vivacious energy. Some recent projects include a mural in the Paris subway; a national “Back 2 School” campaign for Sony Style; parts of a “crazy A” for an Adobe campaign; funky, colorful characters for Nickelodeon’s teen network The N; and helping birth a new creative social networking website called VOO!

Layers: You use a lot of hand-drawn, painted elements along with computer-generated art. Which do you usually start with and what’s your process for combining the elements?

Zacks: I love working by hand—the messiness, the unpredictability, the accidents, the smells, the textures—I usually start there. I often use the computer as a kind of virtual glue stick: a place to combine hand-done elements and weave them together, but never really as a place to originate pictures. I’m addicted to my scanner. I’ve been known to scan in some crazy things and I think it’s the best invention on earth. I just wish they made them bigger—maybe even desk sized!

Layers: You often mix bright colors in contrast with black and white. How do you choose your colors for a project? Do you start out knowing how the final piece is going to look or does it evolve as you go along?

Zacks: I never really know exactly how something might turn out. The suspense, the twists and turns an image takes as you get in the zone are always surprising and invigorating. I am always open to happy accidents and stream of consciousness. I’ve always been in love with the strength and grit of black-and-white imagery and strong splats of color straight out of the inkbottle. I never really mix paint—love its naked intensity. Choosing colors—it could be as simple as seeing something minutes before I start to dig in, and the impression is burned into my skull and makes it into the picture.

Layers: A lot of your art has a strong emotional impact on the viewer. How personally connected are you to each piece you create? Where does your inspiration come from?

Zacks: I do a great deal of thinking before I start anything. No pen, no paper, no computer. I thoroughly dissect and analyze. It pretty much takes over my brain for a considerable period of time. I make a strong emotional connection to ideas and it carries through from my brain, to my heart, to my hands, to the paper. Inspiration comes from everywhere—mostly from the places you’d never expect.

Layers: What applications do you work with regularly? Do you have a favorite?

Zacks: I use Photoshop all the time and it’s definitely my favorite. I use Illustrator from time to time and it is definitely not my favorite.

Layers: Why did you decide to leave the corporate world and become a freelance designer? What was your biggest challenge in making the transition?

Zacks: As Design Director for Vh1’s website, I was stuck doing Web design for one brand—the commute, the bureaucracy, the headaches. In the evenings and on the weekends, I always found time to work on my own projects, but it was really difficult. I yearned to work with a diverse group of people on all kinds of projects while continuing to churn out personal work. I wanted a life that was less predictable, less 9 to 5. I wanted to be my own boss. Freelancing is full of challenges—marketing, negotiating, discipline, droughts. The lists are endless, but if you can make it work, the rewards are spectacular—the sky’s the limit!

Layers: What are the differences in working with big clients, such as Adobe and Sony, versus working with smaller, lesser-known companies?

Zacks: Big clients usually have bigger contracts to read. But other than that, I’ve worked with some wonderful people from all different kinds of places—and that’s the greatest thing about being a free agent.

Linda Zacks: www.extra-oomph.com