Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

Adapting Sites for Mobile



Optimizing Existing Sites Rather Than Building New Ones

Instead of completely rebuilding an existing website—or building an additional, entirely new website for that matter—we create alternate templates that adapt page layout and reconfigure content when the site is accessed using a mobile device. Aside from being the faster, more efficient, and less expensive development method, taking this approach is much easier from a content perspective. Since only the template changes, you don't have to create alternate mobile-specific versions of any content; you can go on using your site just as you did before.

These alternate mobile templates are designed specifically to be compatible with the WebKit platform*, an open-source web browser engine that is currently used by Apple's Safari browser and its mobile versions (for iPhone, iPod touch, and iPad), all Android devices, and Google's Nexus One phone. We intentionally chose to develop for WebKit because with such a broad scope of compatible devices, it is quickly becoming the industry standard for mobile development. In other words, developing for WebKit will ensure the most consistent user experience accross the broadest spectrum of devices.

*Accordingly, all illustrations of functionality in this article show a generic device, rather than an actual iPhone/Droid/NexusOne. However, we expect that the majority of our audience will, at this point, be using an iPhone.

 

Thinking Small

For most marketing sites, creating a few alternate mobile templates can be a fairly comprehensive solution. However, some more complex page templates may not transition so easily to the small screen. For an initial foray into mobile development, we recommend limiting alternate templates to around five, focusing on the information that would be most useful to users accessing your site from a mobile device. Sites with larger numbers of unique templates tend to have pages with a level of complexity that wouldn't conform well to the reduced real estate of mobile device screens anyway, particularly if functionality on these pages is interactive and unlikely to be used while "on the road."

In the illustration above, you can see how difficult our standard homepage (shown on the left) would be to read and navigate on a mobile device. However, the mobile version of our homepage (shown on the right) isolates the information we believe is important to be available to a mobile user: contact information, navigation to our About, Newsletter, and Blog pages, and a list of upcoming and recent site activity.

In this illustration, our standard blog page template (shown on the left) is compared with its mobile version. We've reduced it down to the article alone, removing all sidebar material and relocating some of it to the bottom of the page (offscreen).

Once you've identified which types of content you want to make alternate mobile templates for, you'll need to give some thought to how that content is best displayed on a much smaller screen, and how to optimize it for touch interaction. Because vertical scrolling has been made so easy on mobile touchscreen devices, we generally recommend moving any subpage navigation, related content links, or calls to action that are preserved in your mobile templates to the bottom of the screen. To make it easier for users landing on a page to get an initial overview of its content, we truncate longer articles so that the elements moved to the bottom of the page can be seen right away. If a user wants to read the full article or its comments, she can tap the "more" links, which expand the page without having to reload it. This solution is a simple, quick, and more satisfying way to consume and interact with content in a mobile environment.

On the left, our blog page's mobile template loads a truncated version of the article, bringing the comments and related content closer to the top. By tapping the "Read All" link, the user can instantly load the full article (shown on the right) without having to wait for the actual page to reload in the device's browser. Expanding the comments area works in the same way. The top and bottom of the page are ghosted to give you a better sense of how the page scrolls vertically.

Pocket Productivity

Because we believe in building effective data- and lead-generating websites, retrofitting public-facing site content is only one piece of a worthwhile mobile solution. If you rely upon your website to generate leads, you'll want to be able to access that information wherever you are. Additionally, if you're like most of our clients, you're probably working with your developers routinely—perhaps even on a daily basis—to continually expand and refine functionality. In other words, productivity surrounding your website is essential. That's why our mobile offering includes two additional elements: mobile versions of the NewfangledCMS Advanced Measurement Dashboard and the My.Newfangled.Com client-facing project management application.

If you're unfamiliar with our advanced measurement dashboard or our client-facing project management application (My.Newfangled), you can read all about both tools in our newsletter from August, 2009 on Coping with Complexity.

Below are a few screenshots of the mobile version of our dashboard. We've packed five of the most important reports in to a light and fast mobile application. Once logged in, you can review an up-to-date page views report, as well as a general stats report that will keep you in touch with the pulse of your site when on the go. You can also dig in further to view your new leads, top sessions, and current keyword rankings.

Our NewfangledCMS Advanced Measurement Dashboard has been adapted for mobile users, too! Now, anyone who updates to the latest version of the NewfangledCMS with the mobile module can access their marketing dashboard to check on general site statistics, any new leads that have come in, current top sessions, and an up-to-the-minute report on keyword rankings. The illustration above shows the dashboard landing screen and the general site stats that can be expanded without reloading the screen.

Additional dashboard screens include a detailed report of new leads and a keyword rankings report.

Our active clients refer to their My.Newfangled.Com accounts to track progress on their current projects and communicate with their Project Management team. Now that we've created a mobile version, this application can be accessed from anywhere!

Your mobile My.Newfangled.Com account includes contact information for your team, a current progress report, any messages to you from your team, and any system alerts from our tech team. The screenshot above shows the home and schedule screens.

Additional screens for the mobile version of My.Newfangled.Com include details about your team (shown at the left) and any messages they've sent you (shown at the right).

Getting Started with Mobile

Mobile technology is still in its early stages of growth and innovation. As mobile devices become more sophisticated in their functionality and more widely used, we'll begin to uncover new ways to focus what we do online more specifically for the mobile context. In the meantime, taking an initial step to adapt portions of your website for mobile use will give you that first experience in thinking more particularly about the mobile user experience that you'll need in order to keep current with the trajectory of this technology.

We're very excited to be able to offer mobile-specific capability, especially as part of a comprehensive package that addresses the user experience of our clients, and our clients' clients! With a mobile-optimized site and mobile versions of the analytics and project management tools our clients have come to rely so heavily upon, we're confident that our mobile suite will be the best first step our clients can take. If you'd like more information about it, get in touch with us by using the "Let's Talk" form on the top right-hand corner of this page, or just give us a call at (800) 330 - 4435.





Comments

Rod Lowenthal | May 4, 2010 9:50 PM
This is a very impressive package. I do think it's smart to scale down what is considered for iphone and the like, though it does seem to me that we are actually now talking about a second website in the end, not just an adaptation, correct? For instance, numerous UI considerations come into play with a mobile site that you wouldn't consider in the same manner for a standard one. But, preloading the page and then letting the user control the expansion of portions of it is a superb idea. Even on 3G the time to load additional pages is quite precious! I would not want to wait an additional 15 seconds to view the comments on a blog post.
Chris Butler | May 5, 2010 8:19 AM
Rod: The way I'd differentiate between a project that adapts an existing website and one that creates a separate site for mobile devices is that an adaptation is limited to alternate mobile-optimized templates that are called from the database when a user accesses the site with a mobile device. A separate mobile site would have a separate database, with mobile-specific content that would be managed separately from the main site's content. This differentiation is, I think, a central selling point of our approach. While some may desire to manage two sets of content and have a more granular level of control over it on a context-specific basis, most of the interest we've received about mobile optimization tends to be in the area of ensuring that existing website content is accessible, legible, and functional for users accessing the site with their mobile devices.

On that note, I'm trying to stick to referring to these devices generically (though it's tempting to just say iPhone) since our approach is to develop for the WebKit platform, which, as I mentioned in the article, is used by a diversity of devices. Though the iPhone is most popular in our circle, the Android platform is rapidly growing and the promise is that the next generation of BlackBerry devices will be built to WebKit specifications as well. I'd like our clients and prospective clients to be confident that what we build for them will have the widest possible scope, not just be limited to one, albeit popular, device.

Preloading and truncating the page was something that Dave Mello, the developer who built our site and recently adapted it for mobile, came up with after realizing that the length of our articles tended to require a bit too much vertical scrolling in order to get an overview of what was on the page. By setting it up this way, you only have to wait once for page content to load (which, by the way, is quite fast compared to other sites I've accessed on a mobile device) and can quickly see that there are additional areas of content, like comments and related links.

Thanks for reading, and for your comments!
Chuck | May 5, 2010 3:03 PM
Blackberry will have a WebKit browser. There's a demo of it on their blog here: http://devblog.blackberry.com/2010/02/blackberry-webkit-browser-preview-at-mobile-world-congress/
Linda | May 5, 2010 5:32 PM
As usual, you all have done a great job putting this together. Very nice!
Chris Butler | May 6, 2010 8:56 AM
Chuck: Thanks for that link. It looks like this tech is about a year old at this point? I noticed that several commenters asked for an idea of when this would be released but there was no reply from the author. Any idea?

Linda: Thank you very much!
Michael Holden | May 6, 2010 10:44 AM
How are you dealing with content like videos or flash that may not work on mobile devices?
Chris Butler | May 6, 2010 10:56 AM
Hey Mike! We generally advise our clients to avoid Flash, but many of our clients have video on their sites that use a Flash-based player. So, moving forward, this will be a compatibility issue for them. For the past few years, the .flv video format was the best option for web video--it is fast, high quality, and light in terms of file size. But it isn't going to be suitable for mobile devices. The html 5 standard now will allow for a very light player that deals directly with .mov files, so we're trying to give our client base a "heads up" to move to that format. Meanwhile, embedding YouTube videos should still be a good solution for those not using video to sell products or services. On the iPad, embedded YouTube videos will be recognized and played in context, since the browser communicates with the YouTube application. I understand that this is not the case now with the iPhone, but I imagine it will be soon.

↑ top