Flight Division Presents
Owltastic
Browse extras FOWD Talk Wallpaper Images Ampersandery
For FOWD 2009 I decided to talk about the importance of designing for mobile devices, different levels of mobile support, and how to get started creating mobile designs.
Listen to the MP3 - FOWD website or you can download a PDF of the slides - 6.6 MB
My research about mobile devices has been an ongoing effort over the past six months or so, so it's difficult to compile a complete list of the materials I've read on the subject. However, I've listed a few that were really helpful when putting the talk together, and you can see even more by checking out the tag "fowd09research" on delicious.com.
First Slide: Hi, my name is Meagan Fisher, and today I'm going to be discussing designing mobile interfaces. But before I do, let me give you a little bit of background on where I'm coming from.
Click: I'm not an expert at designing for the mobile web -
Second Slide: in fact most of my experience is in designing for the screen. It wasn't until fairly recently that I began to understand how important it is to consider mobile users.
Third Slide: The mobile web is a hot topic right now, and with good reason.
Click: The number of Americans accessing the mobile web went up 107% last year.
Click: Mobile Web Access is growing around 15-20% a month.
Click: Mobile internet growth is 8x greater than PC-based growth
Click: Mobile social networking sites are getting more popular, mobile Facebook has 4 million users a day.
So when I see statistics like this, it's apparent to me that being a web designer no longer means designing for PC-based browsers. Even if your clients or bosses aren't asking you to create mobile sites now, you can bet they will be in the future.
Fourth Slide: So my boss at SimpleBits, Dan Cederholm, is working on a new application, Dribble.com. It looks something like this:
Fifth Slide: The tagline for the site is "what are you working on?" and it allows people to show off snippets of their work.
Sixth Slide: One of the first questions that came up early on in the development was what level of support do we provide mobile users? Though I knew little about mobile web design at the time
Seventh Slide: I volunteered to tackle this question. Almost as soon as I did so I started kicking myself, because, well,
Eighth Slide: Mobile web design seems scary! There's thousands of devices out there, all with different levels of css support, different resolutions, different download speeds, and so on. I imagine if you're a web designer who hasn't ventured into mobile web design yet, you've felt as intimidated as I did at the time.
Ninth Slide: But fear not, friends! There are tons of excellent resources out there for those who are new to mobile web design. There's articles, tools, workshops and books which are all really valuable for getting started. One resource I especially recommend is Cameron Moll's Mobile Web Design. A lot of the information I'm presenting today I first found there.
Tenth Slide: In his book (and articles which preceded the book), Mr. Moll talks about how there are different levels of mobile support. For my presentation, I'm going to cover three of them.
Click: The first method is to show your naked site - this means mobile users see only raw html when visiting your site, no css at all.
Click: The second method is to add some style. This means that you create a handheld.css file which enriches the mobile user experience.
Click: The third method is by far the slickest - you can deck out the mobile version of your site. You don't just shape your web site to fit a mobile device, you re-think how it will be used on the go and create an entirely separate application that's geared towards mobile usage.
Eleventh Slide: The first one we'll talk about is the so called "naked" method. To achieve this level of mobile support you would disable all styles on the site. The good thing about this method is that once you go through the initial process of setting up an alternate version of your site that has disabled styles, you never have to edit a file again. Mobile users will always see the most current version of your site, but stripped down. Not showing background images and styles can keep your download times low as well, but it makes for a fairly boring user interface. It also requires your users to bookmark an alternate url when accessing the site via a mobile device.
Twelfth Slide: Adding a little style is the next level of support - all that's required here is the addition of a mobile.css file, which contains styles specific to handheld devices. This method is good because there's only one file to maintain, there can be one web address to bookmark, and the user interface is usually improved over the naked version. The downside to this method is that newer devices don't always read handheld.css files by default, so some trickery is required to point them to your mobile.css file. Also, this method still doesn't re-think the entire interface from a mobile perspective; it just simplifies it.
Thirteenth Slide: The last method, the "decked out" method, is the one that is arguably the best, in terms of optimizing your site for mobile devices. In Mobile Web Design, Cameron Moll says that this method puts context before aesthetics, function before form, and presents users with a customized experience relevant to mobility. So what do we mean when we talk about decking out your site for mobile users?
Fourteen Slide: Essentially you're creating a new website, in which the focus is based around how someone on-the-go might use your site. There are many advantages to this method - often your pages will be leaner, which means faster loading times, and it will probably result in the best looking and most usable interface. The downsides are clear, however: there's a lot of initial design and dev work that has to be done, and more to maintain.
Fifteen Slide: For the purposes of this presentation, we're going to take the middle road and discuss creating a mobile.css style sheet. This is the method Dominique Hazael-Massieux uses in his article for A List Apart called "Return of the Mobile Stylesheet."
Sixteen Slide: Of the method, he says "By starting simple, you can provide a decent initial experience, solicit user feedback, and iterate toward a more mobile-friendly design." If you're not doing anything to improve your mobile users experience, it's a great place to start.
Sixteenth Slide: So, having decided that we're going to add some styles to our site to enhance it for the mobile, I'm going to go over 4 steps to get you started.
Seventeenth Slide: Step one for mobile enhancement is writing clean, accessible HTML, and hopefully you're already doing this. The benefits to using web standards are widely known; they're faster, search engine optimized, and accessible for people with a range of disabilities. However they're also much better on the go. When you avoid tables for layout, and use correct semantic markup such as headline tags, unordered list tags, and strong tags for emphasis, you give mobile devices a much better shot at rendering your site correctly.
Eighteenth Slide: A good two step test to see if your markup is well written is to first validate your site using the W3C's validator - go to validator.w3.org to do so. Does your site validate? Then you're well on your way to being more accessible.
Nineteenth Slide: The next step is to disable the styles on your site, and see how the markup reads. Is there a clear hierarchy of text? Is it still obvious what your site does, and can you navigate it? This is what you're looking for.
Twentieth Slide: If you're not sure what I'm talking about, or feel like you're not all there on web standards, then I'd recommend picking up a copy of Designing Web Standards by Jeffrey Zeldman.
Twenty-first Slide: Step Two for mobile enhancement is improve your layout for smaller devices. This means slimming your site down to one column, so that users don't have to use horizontal scrolling to see all your important content. It also means keeping your most important content up top, though arguably that's something you should always do. You also want to hide any content that's irrelevant to mobile users, or not super useful for them. And lastly you want to disable large images to keep your loading times down.
Twenty-second slide: A site that does this really well is Twitter.com. Here's a screen shot of what Twitter looks like on a desktop browser:
Click: I've highlighted the areas that would be most important to a mobile user in blue, and the areas that are not so relevant in red.
Twenty Three: You can see how the most important content is clearly visible in the mobile view, and the site's been reduced from two columns to one. The design looks straightforward and easy to use.
Twenty Four: I've tried to follow this model with the Dribbble mobile site. I identified the portions of the site that aren't relevant or necessary for mobile users.
Twenty Five: Then I condensed the site down to one column by disabling floats, and structured the content in order of importance. I've cut it in half here, but you can see the site navigation, a description of what the site is, the popular screen shots, and browse by tags.
Twenty Six: The final step I'm going to cover in enhancing your site for the mobile web is this: keep your branding in place. Just because you want fast download speeds, and only have a small space to work with, doesn't mean you can make your mobile web presence your own. A few tips on how to accomplish this might be styling a header graphic with your logo included, using borders, background-color, and link colors that fit the style established in your site. If you have any graphics that are related to your site's branding, keep them, but include small, compressed versions.
Twenty Seven: Flickr does a nice job of this. You can see here they have an established link color, they place emphasis with font-weights and background color. Their gray and light blue colors are well known as part of the Flickr UI, as is the the pink and blue from the logo. They did a beautiful job of carrying this theme over to their mobile site.
Click: You can see the light blue and gray background colors, the font weights for emphasis, and the classic Flickr blue and pink are all present.
Twenty Eight: So again, I applied this principle of maintaining branding while working on the dribbble mobile site. Here's the site again, and here's the mobile version with some styling done. I've added a background image for the header, styled the typography similar to how it is on the site, used similar border / link colors, and maintained the pink basketball graphic that Dan designed.
Twenty Nine: So there you have it. Those are three steps to get you on your way to adding some style to your mobile site. As I mentioned earlier, there's more you can do to really deck out your web site for the mobile web, but if you create an alternate style for your mobile site that follows these tip, you're off to an excellent start.
Thirty: One thing you'll run into when creating a mobile stylesheet is that support for mobile stylesheets is inconsistent across various devices. There's hope though, as I mentioned earlier Dominique Hazael-Massieux wrote a great article for A List Apart that explains how to get most devices to recognize your mobile stylesheet, you can find it at bit.ly/mobile-stylesheet. There's also online tools that allow you to create a custom stylesheet and then generate a script that you place in the head of your site files which redirects to your mobile site. I'd recommend Mobify.me, it's free to try out, well designed, and easy to use.
My name is Meagan Fisher. I love good design, well written markup, and owls. I'm the deputy designer at SimpleBits. When not helping Dan, I work with my own clients.