Designing Your Mobile Website to Draw Visitors

In my last blog post, we established the need to have a mobile optimized website for businesses to increase their reach and improve chances of interacting with target audiences in their comfort zones. But the idea is not to merely offer a “good enough” mobile experience, but to make your services available in a smartphone context. Let’s dig in further and understand what works in this format.

You can reach your mobile audience with three different approaches. The best option for your business will depend on your primary web interactions, your users’ habits and your budget.

Responsive or adaptive design: This involves having one URL to serve the same HTML to both mobile and desktop devices but using CSS to alter the page rendering according to the device. A responsive design will show more stuff or less, optimized for a mobile layout. For example, if you rotate the phone between landscape and portrait, it will change the spacing, but not the content but is likely to still provide access to the full desktop-view’s content. An adaptive design, by contrast, might show very different content and also present a different user interface, reflecting the tap/swipe/scroll of touchscreens versus desktops keyboard/mouse interactions.

Separate mobile URLs: Every desktop URL would have an equivalent mobile-optimized URL. Separate mobile URLs, also known as mobilized websites, may share some content with the desktop-oriented websites, but will have a lot of their own code with slightly different URLs, like “m.affinityexpress.com” or “mobi.affinityexpress.com”. For companies with both desktop and mobilized websites, the code may detect the users’ devices and either automatically switch to the appropriate sites or offer choices.

Mobile apps: A mobile app is downloaded on the mobile device and doesn’t require Internet access to run (although it may require Internet access to perform most tasks).

Before going ahead and choosing one of these three options, it is important to understand your audience and their requirements and hence customize your mobile format:

1. Check mobile usage patterns:

You need to find out if your potential customers have mobile interactions in a rush while on the go or in a more relaxed fashion as this will impact your content, design, amount of text and calls to action. Most people now use their phones for the same tasks we do on desktops but knowing the specifics of your target audience will help in providing the content that they are looking for in the exact fashion they like.

2. Build for future:

Plan ahead and invest in mobile technology that can be evolved a year or two from now rather than going for complete redesigns. It is good to define your expectations from mobile websites in the current scenario as well as in the long run. This will help you weigh pros and cons of having apps versus investing in sites that work across devices.

3. Make functional mobile website:

Users expect mobile websites to fulfill their needs, primarily entertainment, productivity or communication. So more than great designs and artistic presentations, your prospects are interested in the functional aspects of your websites. Therefore, it is important that your mobile designs facilitate easy and quick website transactions. Confusing user interfaces or poor performance will result in bad brand images and render even the most beautiful designs ineffective.

4. Decide between mobile website and app:

Mobile apps are great for more focused and personal user experiences but they require complex management and involve many outside participants like carriers, handset manufacturers, operating system developers, store administration and others. Mobile sites avoid all of these things and allow for a much faster path to execution. If your goal is to offer mobile-friendly content to the widest possible audience, then a mobile website is the right choice as it offers broader accessibility, compatibility and cost-effectiveness. On the other hand, you can look at developing a mobile app if you plan to provide specific advantages to your customers such as:

• Interactivity/gaming: To let your customers play interactive branded games like Angry Birds.
• Regular usage/personalization: To personalize your services like the Net-A-Porter app that reflects the website’s lifestyle network. In addition to snapping up a Proenza Schouler handbag and Alexander Wang sandals, users can read up on the latest fashion trends and watch exclusive videos on everything from designer interviews to full-blown runway shows.
• Complex calculations or reporting: To allow complex data calculations and reporting that could be used by financial and investment related domains.
• No internet required: If the content is not updated on a daily basis and you just need to provide offline access or perform functions without a network/wireless connection.

5. Check analytics for better focus:

Before focusing on the operating system, version and screen size, it is good to see which device is getting the bulk of your mobile traffic. For example, in Google Analytics you can see a breakdown of the devices that are being used, the divide between different operating systems, as well as what versions of each operating system are being used. You can see the devices bringing the traffic on Audience> Mobile > Devices.

To check out the mobile operating software being used by your website visitors, you could look at another variation of the report:

6. Identify and address core audiences:

Mobile devices are very under-powered compared to traditional computers. Mobile is inherently more selective than the general public web and the mobile ecosystem is far more fractured. Since mobile users visit mobile websites away from their regular internet connections, out in the real world, most interactions are driven by the content and ease of maneuvering. In other words, a shopping assistance site is more likely to be used in an actual retail environment than an exotic recipes site, which is why it’s vital that mobile sites be specifically developed to address distinct needs and user profiles. Some tips to keep in mind while developing sites are:

• Design the pages to fit the most-used mobile screens
• Limit images and text so pages load quickly even at slow connections speed
• Create links and other navigation options that are easy to click on with a (fat) finger, stylus, or other limited input options.
• Find out and address most urgent needs on the first page.

7. Avoid separate mobile websites:

Avoid building separate mobile websites, as each of these take up time, energy and money. It also makes maintaining and updating content difficult on all of them, not to mention the effort required to check and report on each one’s performance. The best option is to build mobile platforms that are optimized for as many devices as possible. This is the optimal setup for focusing your resources and budget on developing engaging content rather than maintenance.

8. Aim for an easy mobile experience:

Successful and often-visited mobile sites are easy and clean. Consider having a survey to ask your clients what’s really important to them and what they expect to see on your mobile website. Give out information that they seek like light image galleries on a wedding photographer site, requests for demos on a coffee vending machine site and menus with location maps on a restaurant website. Some more tips for a user-friendly site are:

• Use minimum layers to navigate in the compact screen
• Avoid artistic fonts and instead keep the text easy to read with crisp fonts
• Do not ask for too much information as typing on a mobile or iPad is not exactly pleasant
• Use technologies that are easily grasped by your target audience

Are you using a mobile platform for a broader reach? How does your mobile website/app help you better connect with your audience?