• Your Mobile-Optimized Website: Getting from Here to There May 28, 2012

    Your Mobile-Optimized Website: Getting from Here to There


    Let's assume you need no further convincing of the importance of making your website more friendly to mobile users, how do you get there from here? In this post, I'll primarily be referring to optimizing your website for smartphone users, since they present the most extreme case. (We'll cover adapting your website for tablets, like the iPad, in a future post.)

    In optimizing your website for mobile, you will need to choose from three solutions:

    • Retrofit. Make design and coding changes to your website so that some or all of its content displays conveniently on smartphone screens and full-size displays.
    • Supplement. In some cases, it may make more sense to leave your existing website more or less as is and supplement it with a standalone or related website intended to meet the needs of mobile users.
    • Redesign. If your website is due for a thorough redesign, then you have an opportunity to for achieving the best possible results by building mobile optimization right into your redesign specifications. Be advised, though, that adding mobile optimization to a website redesign is not likely to be cost-free. However, the results may be achieved with greater elegance and efficiency.

    These three solutions are not mutually exclusive. They may be used singly, in combination, or in sequence as part of a multi-step plan. Determining the path that is best for you will probably hinge on your answers to these questions:

    Is your website relatively small? If your website has relatively few pages, then it may be an optimal candidate for a retrofit. As in the physical world, virtual construction is usually achieved more quickly and affordably when there is less work to do. Often it may be possible to insert media queries (special style tags) into the coding of your pages so that they display differently depending on the medium in which they are presented. As the dimensions of the display medium changes, the type size, image size, page layout and navigation can all change. This approach, in which the page layout and included elements change to fit the display medium is often referred to as responsive design.

    You can see a nice example of this in a website we recently upgraded for a long-time friend and client: Begin by viewing it in a full-size desktop web browser. Then, grabbing the lower-right corner of your browser window, gradually narrow and shorten the size of your browser window until it approximates the dimensions of a smartphone. Watch as the page transforms! (Thanks to Doug Gagliardi, our highly-accomplished technical designer, for proposing and engineering this solution.)

    Is your website relatively simple? Even if your website has many pages, if they all share the same basic page layout and design, then, too, may be in a good position for a retrofit because the same set of code changes can probably be applied to all the pages in a time-efficient manner.

    If your website is large and complex? If you have lots of pages with many different formats and designs, then a retrofit is still possible, but considerable time may be required to make changes to each of the different design templates that are in use. And, of course, since every page will need to be quality checked, the sheer number of pages will also add to the total time required.

    Does your website use a CMS? If your website is equipped with a content management system so that non-technical people can make content changes through their web browsers, then you may be in luck -- or maybe not! The good news is that content management systems store page content in a database, which means that the "content layer" is more or less separated from the "presentation layer." In theory, this puts you in a good position to re-present your content in different formats for different types of users. In practice, it may depend on how recently your CMS was written and upgraded. (Talk to your web developer.)

    Both of the CMS platforms we use here at Highpoint now have mobile options baked into the core code. This doesn't mean we can get great mobile results just by flipping a switch, but with some customization time we can produce good-looking results for most website pages.

    Does your website incorporate specialized applications? If your website has been developed over a considerable period of time, then it probably contains, in addition to its regular "content pages," special-purpose pages or sections designed to deliver specific types of information or perform special business functions. Perhaps your website includes a members-only section, e-commerce features or access to special databases. Or it may contain third-party applications or use web services over which you have little or no control. Websites that incorporate special applications typically require a thorough analysis when deciding how to adapt to mobile.

    Who are your customers and how will they use your website on their phones? This is probably the most important question you should ask. Your answers will help you to decide how much and which of your content resources you need to provide to mobile users.

    • Brochure-like websites. If your website's main purpose is to provide information to prospective customers, then you will want to make sure that the most basic and compelling information about your organization, along with some kind of "contact us" page is available in mobile-optimized form -- even if that means building a small, supplemental mobile site just for that purpose.
    • Interactive websites. If users return regularly to your website to perform special functions like searching databases, checking calendars, reading time-sensitive news, participating in discussions, or registering for special events, then you may want to consider which of these activities they are most likely to be using on their smartphones and create a supplemental mobile site that is centered around these purposes.
    • E-commerce websites. Many types of organizations now find that cash flow through their websites is important revenue component. However, successful e-commerce requires special attention to interface design and lots of testing in order to ensure a trouble-free user experience. Simple donation forms may be easy to handle, but long or multi-step forms may require some re-thinking. Ditto for shopping cart systems. Porting e-commerce to mobile may prove challenging in the short run, but as smartphones gradually become a greater share of your website traffic, failing to build phone-optimized e-commerce may result in a net reduction in revenue, so don't wait -- begin planning now.

    Don't be afraid to start incrementally. In times of rapid technological change, it's often a good idea to jump into the water, but that doesn't necessarily mean you need to plunge head first into the deep end. Analyze your needs and choose a project that is appropriately scaled to your budget and that targets the most vital needs of your mobile users, then build on that.

    A membership organization might begin by launching its first mobile-optimized site in concert with its annual conference to provide members with vital information about conference events while they are far from home. When we developed a mobile site for almost 2 years ago, we started by providing a way for jazz fans to quickly access the site's jazz calendar when they were on the go. A city might start by launching a mobile site that acts as a guide to accessing essential locations and services.

    Whatever it is you decide to do, the important thing is to get started now. As your experience with mobile increases, your comfort-level in managing this new medium will increase as well.