Constant Contact Labs Developer Blog
-
Developing for the Mobile Web Posted Tuesday, December 29, 2009 0 Comments
After developing the mobile version of the Constant Contact Labs website, I’ve learned 2 really important lessons:
Developing a mobile website is “easy”
Planning for a mobile website is “hard”Here’s why…
Developing a mobile website
If you’ve been developing traditional content-based websites for a while, the jump to mobile web development isn’t a far leap. I use the term “traditional” very loosely as desktop web applications are by no means dead or dying, but web browsing through mobile devices is a growing trend that should alarm those that are not preparing themselves.
Mobile markup languages
The growth of web browsing through mobile devices has ushered in a wide range of new markup languages and standards. Although there are too many to cover here, you’ll find a great blog post about mobile markup languages on the Google India blog. Luckily, there remain 2 dominant markup languages that are being adopted by todays developers. These standards are XHTML-MP and WML.
XHTML Mobile Platform (XHTML-MP) is pretty much a slimmed down version of XHTML with the biggest difference being it’s DOCTYPE…
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
...and some different MIME type options:
application/vnd.wap.xhtml+xml application/xhtml+xml text/html
To learn more about XHTML-MP I recommend reading the XHTML-MP entry on Wikipedia. This entry has useful information on some of the major differences and limitations between XHTML and XHTML-MP.
Wireless Markup Language (WML) brings larger differences, but if you’re experienced with XML, it’s easy to get up to speed with WML:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml" > <wml> <card id="main" title="First Card"> <p mode="wrap">This is a sample WML page.</p> </card> </wml>source: Wikipedia
WML works within a concept of Decks and Cards. A WML document is known as a “deck”. The data within this deck is structured into one or more “cards”. Each card represents a single action with the user (Think of a deck as a single page). I was thrown off by this concept at first, but with a little bit of research I picked it up just fine. I also recommend reading the WML entry on Wikipedia as a good starting point.
Helpful tips
One of the most troublesome areas when developing your mobile site is CSS. Some devices render CSS just fine, while other devices have a hard time with colors, background images, font sizes etc. I’ve gotten into the practice of not using background images on any mobile site as this has caused many of my most significant CSS problems. Developers should also avoid styling ‘visited’ and ‘active’ links because some devices may highlight selected links by inverting link and background colors (as is the case with my Blackberry 9630 device). When this occurs it effectively hides the currently selected link in case the above CSS is applied. Finally, in regards to CSS, it’s also recommended that you use inline stylesheets and not reference external files. This can cause significant issues with devices that have limited or expensive bandwidth.
While researching this topic, I uncovered this great document by Luca Passani on Global Authoring Practices for the Mobile Web. This is a great resource for any developer looking to develop a mobile site. It covers dozens of techniques on how to get the best user-experience out of a (potentially static) XHTML-MP page.
Planning for a mobile website
Planning for a mobile website has been the most troublesome area for me because of the large amounts of devices available on the market. Questions like “Should we support this device?” and “What should my layout look like?” become vastly more complex when you begin to consider how these decisions may impact the overall experience of your visitors.
Screen size is key
One of the most important decisions you’ll have to make early on has to do with screen size support. There are dozens of different devices with many different screen sizes. If your intention is to support the 3 most popular devices on the market, and each device carries a different screen size, how do you manage this? Which size do you support? Should you go with the screen size of the most popular device? Should you attempt to support them all? Do you even have the capacity to support them all, and if not, who is excluded if you support just one? These are some of the questions you should spend a lot of time thinking about, because getting it wrong may have huge implications on the success of your mobile site. For example, if you were to support a screen size of 320x480 and then find that 75% of your mobile visitors use only 240x240, this can have a crippling effect on your bounce rates.
The strategy of the Labs group was to profile our main website, ConstantContact.com. We then took a hard look at general mobile screen size trends. In understanding our demographic, we also looked at the type of devices individuals in the tech-savvy Developer Community carry. This helped us determine a range of different screen sizes and mobile devices we were willing to support.
Simplify everything
Serving up the right content is another important area you should take a hard look at. It’s recommended practice to build adaptive applications, meaning, delivering different content to different devices based on their capabilities. With so many devices on the market, this can sometimes seem impossible, but in certain instances it will be required. To simplify this, do not attempt to recreate your desktop website for mobile browsers. Visitors to your mobile site are not interested in the same things as visitors to your desktop site.
To put this in perspective, consider the mobile user; She may be visiting your website while waiting for a flight, or sitting on the train on the way to work. Also consider the device your visitor is using, not all phones are touch screens. The method in which she navigates your site may vary greatly. Her phone may contain a scrolling ball, a D-pad or it may be a touch screen. If you’re a Blackberry user like me, you understand the difficulties of having to move that scrolling ball back and forth. My difficulties are compounded when navigating through large websites with lots of content (not to mention the scrolling ball doesn’t work half the time — but I digress). Users need to be able to access, find and digest information on your mobile site quickly because they may only have a moment before that next train arrives. Also consider that this user may be on a 3G network, a Wireless network or a GSM network. This will affect the speed in which the device can access your content.
What does this all mean? Slim down your content. Simplify everything. Consider serving only the most relevant information based on the context in which the user is visiting your mobile site. If the user came to your site for a recipe, show the user a recipe, perhaps some related recipe links, but not much more than that. Make important considerations to Information Density and how you use the available screen space. Labs Jim Garretson has written a great blog post on Information Density and Mobile Devices. This will provide insight on how to manage small interfaces and how much you can learn from the screen of information in front of you.
An important layout decision that I made early on was to place our navigation menu at the bottom of the page—beneath the actual content. This has translated well for visitors to our mobile site. They can get to the content without being inundated with a Navigation menu after each click. This may work well for a desktop website since a navigation bar typically won’t send content below the fold. On a mobile device where screen space is limited, you can’t afford to have your content exist below the fold.
As you can imagine, this has been a challenging yet fruitful experience. And although we’ve successfully launched both a Desktop friendly and Mobile friendly website, we are continuing to enhance and improve both. I suspect that we will continue to learn many new lessons in the mobile web development space. There will be more to come on this topic—In the meantime, please share your comments below.
The opinions expressed here represent those of the author and not those of Constant Contact, Inc. Read Blog Terms
Comments
+comment on this post
Add your comment below
* Please be aware that all comments are moderated.
Popular blog posts
Recent comments
Join our mailing list
