The number of mobile devices loose in the world greatly exceeds the number of desktop (or laptop) computers filling up desk and table space in offices and homes. The number of people who might view your site while clutching a screen measuring anywhere from 100 pixels to 640 pixels in width increases daily. Creating mobile-friendly content is quickly becoming less of an occasional add-on and more of a standard practice.
This article will take a look at how you can create mobile-friendly content, how you can test your work, and offer a few tips for writing CSS for the media type handheld. If you are a Dreamweaver or Flash user, we’ll also take a look at something new from Adobe that will help you test your pages for handheld devices.
Start with the basics
If you begin with standards-based HTML that is formatted with logical, semantic markup, you’re ahead of the game already. A well structured document with clear organization and semantic markup will display cleanly, be usable, and be accessible on any device – mobiles included. Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile device. Pay attention to other basics as well. For example, good alternative text is an essential for any non-text element in your pages. Make sure that form fields are properly labeled.
Clean, semantic markup is crucial when you consider the variety found in mobile devices. Some phones may only understand WAP. More capable phones may understand WAP2, which opens them up to rendering websites with XHTML and CSS. Some devices may display only monochromatic screen colors, while others may have full color. Some devices support CSS, some do not. Some only understand HTML 3.2, while others understand XHTML. Some devices undertand tables, floats, frames, JavaScript, and dynamic menus, but many do not. Most devices don’t support cookies. Devices at the high end of the mobile market such as BlackBerry, Palm, or the upcoming iPhone are highly capable and support nearly as much as a standard computer.
All those possibilities are enough to make you long for the days when the browser wars meant coding for Internet Explorer 4 or Netscape Navigator 4! But we have two things now that we didn’t have in the bad old days: a large body of knowledge about how to write standards-based HTML and XHTML using semantic markup and about how to separate content from presentation with CSS. If you stick to best practices in those two areas, the need to worry about every single rendering possibility from mobile devices diminishes and you can develop with confidence.
Testing your site
None of the free or fee-based testing options can equal the testing results you get with an actual device. I recommend testing with real mobile devices much as possible, but I know it isn’t feasible to run out and buy every single mobile device. There are some fairly reliable ways to test your site without going to that extreme. Some of the testing techniques are free, some are not. First, let’s look at the free options.
Opera provides two good testing tools. Using the standard Opera browser, select View > Small Screen to see your page rendered in an approximation of what a mobile screen might display. The Opera web developer bar has a button called Display that allows you to toggle CSS on or off when viewing a page using small screen view. Here you see two Opera small screen views of my blog, Web Teacher, first with CSS, then without.
As you can see, Opera renders the images in small screen view. (We’ll talk more about images later.) Note that the small screen view renders the content in source order, that is, the order in which the elements appear in the HTML. Elements are clearly distinguishable from a semantic viewpoint: headings, links, paragraphs, blockquotes. The organizational and semantic underpinnings hold up so that the content is readable and useable. This is especially easy to see in the second screen shot, with the CSS toggled off. Keep in mind that neither of the displays in the previous two screen captures are influenced by a handheld CSS media type stylesheet. When a heldheld CSS stylesheet is present, Opera’s small screen view will take it into account. More about this in a bit.
Opera provides a free browser that can be downloaded and installed on handheld devices. It’s called Opera Mini. (You can purchase Opera Mobile for even more capability.) Both are available at opera.com. Since Opera is in the business of providing browsers for mobiles, the company made a helpful online mobile simulator at operamini.com/demo. Here, you can load a page into the Mini Demo and operate it with mouse or keyboard as if it were a real mobile phone. The screen capture shows that the Mini Demo renders images and CSS. Again, there is no handheld CSS media type stylesheet affecting this rendering.
Another free way to test your site for clear structure, organization, and proper semantics is with Firefox’s Web Developer extension. Use this tool to disable images, JavaScript, and CSS and you’ll have a good idea about whether your content is going to make sense and be navigable in one of older and less capable mobile phones.
Here’s a Firefox screen capture. For this, the Web Developer Toolbar was used to disable all CSS, all JavaScript, and all images.
Viewing the page without images and with no functioning JavaScipt is very useful in terms of testing for older mobile devices. Keep in mind that some of the less capable mobile devices don’t render tables. None of them understand frames. Seeing your site this way really drives home the importance of standards-driven, semantic markup.
Using specific emulators
Some of the phone and PDA manufacturers have emulators on their sites that you can download and use for testing. Depending on your target audience, testing on a specific emulator might be helpful. If you are interested in specific device or manufacturer, check their site for developer resources. (For example, Sony Ericsson’s Developer World, Nokia has a developer forum with an XHTML section,
Testing CSS Handheld media stylesheets
An important tool in the Firefox Web Developer Toolbar is CSS > View CSS by Media Type > Handheld. If you look at Web Teacher in a standard monitor, you see that it is a simple two column layout using a left float for the content div and a large margin-left to create the sidebar as a second column. I’ll add a stylesheet for handheld media to the testing mix. It contains only two rules — to reset the sizes of the content div and sidebar div and to remove the float. Here’s the entire stylesheet:
#content {
float: none;
width: 95%;
}
#sidebar {
width: 90%;
margin-left: 5%;
}
The link to this stylesheet was added to the document head after the all media stylesheet, so as to be last in the cascade. I’ll use a link element for this. For those mobiles that do understand CSS, using link is more reliable than using @import for bringing in styles, although some of the more capable devices understand @import. Here’s the link element:
Media types are mutually exclusive. A user agent can only support one media type when rendering a document. If I want to retain any of my existing styles in a handheld display, I need to take one more step, and that is to list all the media types I want my existing styles to apply to in a comma separated list. I change the link element for my existing stylesheet, which is called 2col.css to include this media attribute: media="handheld,all". The two link elements are now:
The styles and the color scheme I have in 2col.css should also apply to handheld renderings, but the two column layout will be removed by the mobile.css rules.
Testing with the Firefox Web Developer Toolbar menu CSS > View CSS by Media Type > Handheld should now show handheld media results, and it does.
The first screen capture shows the two column layout, as it normally displays with the all media stylesheet. The second shows Firefox using the handheld media view.
From the second screen capture, you can see that Firefox has expanded the content div to 95%, according to the mobile.css rules. If you scrolled down the page past the content div, you would find the sidebar div now displays at 90% width after the content div. Note in the second screen capture, that styles from 2col.css such as the presentation of the list under the title image and the background gradient behind the headings are retained because of the handheld media designation in that stylesheet.
You may not want to retain any of your all media styles in the handheld CSS rules, as in this example. Keeping the background images, for example, results in longer page load times. Since many wireless mobile devices load very slowly, you want to really simplify things for handhelds. In that case, simply leave the handheld media attribute out of your main stylesheet. I’ll give you more tips for simplifying things for handheld media shortly.
Testing with subscription services or with software
The testing tools I just mentioned are all free. There are other options that are not free, but you might find them helpful and worth the expense. Browser Cam, where you can test your sites in all sorts of browsers, has added a testing area called Device Cam. Here you can test a page in a smattering of Windows Mobile-based PDAs and several BlackBerry versions. Here’s a screen capture of the test page in a Device Cam rendering of a BlackBerry. Note the strong resemblance to what you saw previously in Opera’s small screen view when the CSS was toggled off.
A brand new option for owners of Adobe’s latest CS3 software is Adobe’s Device Central. Device Central uses skins for dozens of mobile devices to display your content in various ways. Here’s a rendering of the test page in a Nokia 7390 skin.
Device Central can load a live URL or a file from many of the Adobe CS3 applications. It responds to the presence of a stylesheet of the handheld media type when the page is rendered using Opera’s small screen view. Using the Opera small screen view is an option with each of the skins in Device Central. Deselecting the option to view the rendering with Opera’s small screen view in Device Central rendered this page as two columns, in spite of the presence of the handheld stylesheet rules meant to eliminate that.
Tips for handheld CSS
Handheld media stylesheets can be more extensive than the two rule example I showed you previously. A few more rules would certainly benefit Web Teacher, but keep in mind that handheld stylesheets should be as small and compact as possible because of download time.
What can you do to simplify your site and make it more usable in mobiles? First, eliminate some of these problematic items from mobile display.
- Eliminate floats and frames
- Eliminate columns – one column with the content first is the best option
- Eliminate scripted effects such as popups or pop out menus in favor of plain old HTML and simple text menus
- Eliminate decorative images that slow down the loading process. Use
display:noneto remove anything that isn’t absolutely necessary, such as links to external resources. Remember, however, that devices that don’t understand CSS won’t do anything withdisplay: none. Any essential images need to be reworked for the small screen and the width and height attributes need to be included in the HTML. - Eliminate nested tables and layout tables. If you have tabular data, consider finding a way to present it in a linearized alternate display.
Once you’ve simplified through elimination, start building the rules you need to add. Consider these ideas.
- If you’re not already using relative measures, switch to ems or percentages rather than pixels
- Reduce margins, paddings and borders to suit the small screen
- Use smaller font sizes for headings and paragraph text
- If you have a long navigation list at the start of the page, add a skip to main content link, or move the links to the end of document flow. Keep the number of clicks required to get to content as minimal as humanly possible. Without a mouse or keyboard, most mobile users have to click laboriously through any top navigation.
- Make sure your color combinations provide good contrast between foreground and background colors, particularly for devices with fewer color options.
Tips for bloggers
Some blogging software provides the opportunity to format a single blog posting with several different templates, one of which can be meant for mobile users. This specially formatted and simplified material is posted to a unique URL on your site, perhaps something like mobile.mysite.com. If you’re a blogger, check your software to see if you have this capability with your blog. One important consideration for the mobile users of your blog is to keep the number of blog postings per page to a minimum for faster downloads.
In summary, making your site mobile friendly can be boiled down to a few concepts. Use validated, standards-based HTML or XHTML, ensure meaningful semantic markup with presentation removed to a stylesheet, and add handheld media rules as needed.
Amazing, I was messing with this only 2 days ago (even though I saved the bookmark back in February)! lol
[…] Virginia DeBolt schreibt bei Vitamin einen Artikel über die Grundlagen. Sie beschreibt Schritt für Schritt, wie man mit System eine gute Basis schafft, um die eigene Website auch mit Rücksicht auf mobile Geräte aufzubereiten. Der Artikel: Make your site mobile friendly […]
[…] Next article on Vitamin describes how to make you site mobile friendly. […]
[…] Make your site mobile friendly (tags: Mobilize) […]
It’s really helpful for me. I’m planing to shift my site to mobile friendly site. Thank you, best regards.
–
Alex
how to make a web tour guide
http://www.sameshow.com/demo-creator.html
Sometimes it is really crucial to create separate site for mobile browsers, not just applying different style sheet to an existing one. User experience on a mobile is different than on the desktop. Thus it is better to create mobile site from scratch and optimize design for it.
Stefan, You are right. I did mention something like that in the Tips for Bloggers section, but there is no reason why the idea should only apply to blogs.
It is important to know that Pocket Internet Explorer applies both the handheld AND screen media types, so it is necessary to include some rules in your handheld stylesheet to override rules in your screen stylesheet(s).
There are emulators for Pocket PC and Blackberry available for download from Microsoft and Blackberry’s web sites respectively. The Pocket PC emulator requires you to change the network settings before you are able to access the Internet.
While the Firefox Web Dev toolbar is great to have, it is not necessary to disable CSS. Simply go to View -> Page Style -> No Page Style.
Maybe I missed something but what about the iphone?
[…] Make your site mobile friendly […]
@ Holly, when the phone actually comes out, we’ll cover it.
Good article, although my method of linking CSS for handheld devices is a bit different.
What should be noted is that it makes sense to reduce long text passages for mobile users or even remove parts of the web page completely (via
display: none).Sorry, I forgot the link to linking CSS for handheld devices.
[…] A detailed article that explains the basics of designing for hand-held devices. This is an issue that we should all be aware of. Claen, semantic HTML is a good start, and the handheld media type allows us to design sites that look great in a web browser, but are also accessible to mobile phones, blackberries and the like. […]
Hello. A great article. I’ve never tried testing on a mobile device, but your tips are a good start.
Thinkvitamin rocks and one more good article from you guys.
just to add if you strictly follow content out approach and write your XHTML markup before touching your CSS, you are almost done with important primary things.
I think it would be great to mention that “Mobile Devices” aren’t just mobile phones. There will be a huge growth of ultraportable mobile pc’s in the next two years. They won’t support such native display resolutions we allready know and they won’t also have a mobile phone display.
Good to remember when you’re building for a 19″ tft display and a 2,5″ mobile phone display..
Cool article, my blog is about 3 months old and this is good info.
[…] Vitamin Features » Make your site mobile friendly […]
“Maybe I missed something but what about the iphone?”
The iPhone uses the same Webkit-based browser as the new N or E series Nokias (S60 v3)
Great article, it will come in handy as I have to create a mobile version of my site really soon. Thanks!
[…] Make your site mobile friendly - How do your web pages fare in today’s mobile browsers ? […]
Hi Virginia
I thought you might be interested in this - I work on www.zinadoo.com. It’s a web based tool that lets you do all of the above very simply. No programming skills required you just log on, add text, upload pictures etc and you have a mobile friendly site in minutes.
Check it out and let me know what you think!
[…] The dotMobi Mobile Web Developers Guide was linked to extensively a while back, and it’s a great document, definitely worth taking a look at. Vitamin recently published an article about developing a mobile-friendly site; it doesn’t cover the broad range of topics in the dotMobi guide, but it’s a good first take. […]
good work - good article. very interesting. Greatings
[…] Think Vitamin: Make your site mobile friendly […]
Keep up. Thanks for nice article. interesting. Greatings!
This is an excellent article (definitely bookmarkable). However, one thing worth remembering is that ebooks and mobile RSS readers are also solving the platform-independence problem.
with ebooks, the mobipocket platform allows for lots of features and optimization for various mobile devices. Mobipocket even allows for RSS feeds to be wrapped up in a single binary file.
RSS readers remove design considerations altogether. My guess is that RSS readers, not webpages will be the reading method of choice on mobile devices.
Robert,
Excellent points. Thanks for adding this information to the comments.
Virginia
Great article Virginia, Thanks!
I believe we will be seeing more and more content tailored for mobile devices.
Very nice article indeed. I have since long been creating the mobile version of websites. Very well said by one of the visitors that if you are careful with the XTML, you are pretty much done. Also on the bit of testing, these days there are mobiles such as N80, N91, N95, E65 or for that matter any mobile which connect the internet using wlan is a good candidate for testing as well.
The only thing is that they probably will not understand the localhost on your local network, you have to host you website somewhere on the internet to access the actual website. Apart from that my pda works well for testing purposes for mobile css results. And it is better, as it can test anything on the network using wlan or bluetooth connection or active sync connection on the localhost.
[…] Make your site mobile friendly - How do your web pages fare in today’s mobile browsers ? […]
[…] Vitamin Features » Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try… (tags: usability webdesign) […]
[…] Vitamin Features » Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try… (tags: usability webdesign) […]
[…] Make your site mobile friendly - How do your web pages fare in today’s mobile browsers ? […]
Thanks you, nice tips
[…] Make your site mobile friendly - How do your web pages fare in today’s mobile browsers ? […]
[…] Websivustojen pitää toimia jatkuvasti paremmin ja paremmin matkapuhelimilla. Tutkimusten mukaan viidennes webin käyttäjistä selailee verkkoa myös mobiililaitteilla. Tähän lukuun pitää suunnittelijoiden vastata. Virginia Boltin Vitamin Featuresiin kirjoittama artikkeli Make your site mobile friendly antaa pari hyvää perusneuvoa sivustojen matkapuhelinystävällisyyden parantamiseksi. […]
[…] Breaking out the box su Sitepoint un bel tutorial di Jina Bolton che conduce il lettore allo sviluppo di una pagina completa con HTML e CSS. Make your site mobile friendly un articolo con i tips esssenziali per rendere i siti consultabili con i dispositivi mobili. Per la tipofografia segnalo la ricca Complete typography guide con ben 200 risorse sull’argomento. Una lettura veloce, ma senza dubbio meritevole Top ten tips for web typography di Richard Rutter. […]
Very useful text. Its amazing how meny people are browsing the net using mobile and I think every site should be optimized this way.
[…] Make your site mobile friendly Wie passt man Web-Seiten an, um Inhalte auch auf mobilen Geräten leserlich und benutzerfreundlich darzustellen. Eine Übersicht mit einem Beispiel in diesem Beitrag. […]
[…] Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try, […]
[…] Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try, […]
[…] Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try, […]
[…] Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try, […]
[…] Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try, […]
I’d like to learn to make Mobile Websites. Is there anyone that would be willing to guide and help me?
Spazzy, there are several books available on the topic of mobile design that will help you learn everything you need to know about it. Take a look at amazon,com or your favorite bookstore.
[…] Make your site mobile friendly How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try, […]
[…] Virginia DeBolt writes an article for Vitamin demystifying how to make your site mobile friendly. “Making your site mobile friendly can be boiled down to a few concepts. Use validated, standards-based HTML or XHTML, ensure meaningful semantic markup with presentation removed to a stylesheet, and add handheld media rules as needed.” […]
I was trying to get a friend on to the mobile web. he owns a restaurant. The ideal solution I thought was at buildmymobi.com where for $20 a year I could build a mobile friendly site for him in minutes. They use the standards guide for .mobi and its easy to create even for novices.
Tools like this will help get small businesses publish thier content on the web. His website is passagetoindia.mobi ( see it on a phone because on a PC the request gets redireced to the PC website)
[…] Vitamin Features » Make your site mobile friendly […]
Great article. I cant wait to do my first .mobi site. Thanks for the help.
Hi, I’m in the process of creating a mobile friendly site,
I have some questions that i want to confirm before moving ahead with this.
I’m in the process of creating the css (mobile.css) for handheld devices,
Would adding this
just enough to accomplish this?
Also client insists on keeping all the images, some of the content is in tables. Would that be a problem?
Also he has a contact form, through which he gets all his leads. And he wants to keep this form too. Would this be a problem as mobiles don’t support cookies?
Please help !!!
Thanks.
As I explained in the article, a handheld style sheet is not the only step. You also need semantic, well-structured HTML as a foundation. For some mobile devices tables are a problem, as are various scripting techniques.
I suggest you study some sites that use forms for mobile users successfully (maybe Fandango or something like that) to see just what the possibilities are.
[…] Make your site mobile friendly - How do your web pages fare in today’s mobile browsers ? […]
Websivustojen pitää toimia jatkuvasti paremmin ja paremmin matkapuhelimilla. Tutkimusten mukaan viidennes webin käyttäjistä selailee verkkoa myös mobiililaitteilla. Tähän lukuun pitää suunnittelijoiden vastata. Virginia Boltin Vitamin Featuresiin kirjoittama artikkeli Make your site mobile friendly antaa pari hyvää perusneuvoa sivustojen matkapuhelinystävällisyyden parantamiseksi
if you don’t have a mobile phone to test your site, you can use:
http://tiltview.com
you can also use it to access a mobile version of any site. For example, you can type in cnn.com and it will direct you to http://m.cnn.com. You can see how CNN designed their website.
[…] Make your site Mobile Friendlypor Think Vitamin […]
[…] Make your site mobile friendly […]
[…] http://www.thinkvitamin.com/features/css/make-your-site-mobile-friendly […]
You have very good staff and opinions here, I will be happy to suggest our free mobile site builder, create your mobile site in 5 minutes, it’s free and easy to use.
Jag.ag