Tag: mobile website design

61% of Americans own smartphones. 63% of those use their phones to access the Internet. The direction of technology is pretty clear: mobile is king. So if you want to stay ahead of the curve, the number one thing your company should do is develop a top-notch mobile website that attracts users to your brand.
A mobile website is accessed from a mobile phone and is optimized for viewing on a smaller screen. It is accessible to touch screens and loads quickly within the mobile browser. Developing a mobile website may seem like a daunting task, but if you have the right web development team, it can actually be easier than designing a full site. Follow these 5 basic steps to build an attractive and effective mobile website:
1. Develop a strategy.
The most crucial step is to map out your strategy before you start. Figure out what information you want to feature and how you want it organized. Hierarchy, branding, and functionality are all concerns you will want to address ahead of time. (For more information on this topic, read Four Rules of Mobile Website Design on the 60 Second Marketer blog.)
2. Prioritize hierarchy of information.
Best practices in mobile website design suggest that just a few (3-5) menu options should be presented to the user at first, with each menu item revealing any additional options that are needed. For example, an Italian restaurant might have their logo at the top with 4 buttons directly underneath: About, Menu, Location, and Contact; with their hours listed at the bottom of each page on the site. After pressing the Contact button, users may be presented with 3 more buttons: options to call the restaurant, send an email, or connect on social media. This type of prioritizing makes the site more aesthetically pleasing and easier to navigate on a smaller screen.
3. Incorporate branding.
Your mobile website should be a reflection of your brand as a whole. Be sure to incorporate as many design elements from your full site as you can without making the mobile version too cluttered. This should definitely include your logo, header, and colors. Your branding should also extend into the tone of the written copy. Basically, your mobile website should reflect all the branding and personality of your company, just like your full website, print media, and social media elements.
4. Optimize functionality.
Mobile website functionality is going to be vastly different from that of a standard web page. For example, buttons should always change visually when they are pressed to let the user know they are working. Buttons also need to be plenty big enough for the average user’s thumb. If possible, include elements of your site that incorporate the phone’s other functions. For example, in our fictional Italian restaurant, the Contact options could be programmed to access the user’s phone so that they can simply press a button to call the restaurant (no dialing), email the manager (no copying and pasting), or follow the establishment on Twitter (no searching). All of the functionality is specifically designed to make the user’s experience easier.
5. Update often.
If something warrants a change on your basic website, it warrants a change on the mobile version. With so many of your customers relying on their mobile experiences to determine their relationships with your brand, you can’t afford to let your mobile presence fall behind. Keep the technical aspects of your mobile site and the information found on it up-to-date to keep your users happy.
Now you’re off to the races! Mobile is unavoidable at this point, and it’s better to get ahead of the curve with your mobile site’s design and functionality than to be left in the dust. Follow these five steps to make sure that your mobile presence is worthy of your brand.
About the Author:Samantha Gale is a social media and content marketing specialist working for 60 Second Communications, a full-service marketing agency working with brands around the globe.

To recap our last post about mobile media, we continued your education with The Five Things You Need to Know Before Launching a Mobile Paid Search Campaign. The information in that post provided insight on what we feel are some of the more important pieces to launching a successful paid search campaign.
This of course leaves the burning question of -- Now that you've got a mobile search campaign expertly tailored and ready to go, is your mobile website up to par? Because as most marketers will agree, no matter how good of an ad you have, regardless of media type, you're not going to be successful if your store, website, product or service is a piece of junk. (Read our blog from last Friday for more on website design best practices)
This sentiment becomes intensely magnified when you are attempting to communicate with your target audience on the smaller screens of mobile devices where people want specific information in a quick and easily digestible format. We know that we have alluded to it in previous posts, but today we will take a deeper dive on the topic of mobile websites.
Mobile Website Best Practices
One of the first things your business should determine when designing your mobile website is what is the main activity that you want visitors to take or what is the most important information they want from you. Your mobile website should not incorporate all of the functionality and content of your traditional website. If you try to do this, your mobile site will be difficult to navigate and probably take forever to load.
Instead, review your website analytics reports and look for which pages are visited and what actions are taken most often on your standard website. These will be the pages you want to feature prominently on your mobile site or even consider using for your mobile homepage. Take a look at the screen capture to the right of our own mobile website that we recently redesigned versus the old version. You can also navigate to it on your mobile -- www.bkv.com. Notice the four prominently displayed buttons for "about us", "what we do", "our clients" and "contact us". We've taken the four most important things that anyone would want to know about a service firm and made them our mobile website homepage.
Now that you know what the focus of your mobile website is, you can start to build around that centerpiece. The next thing to be aware of is that mobile sites, because they can be viewed on any mobile device with a web browser, must be kept simple and clean from a layout and messaging perspective. Try not to get overly wordy (like some of our mobile blog posts, sorry!) with the copy and messaging on your mobile site. Remember, mobile site visitors aren't doing research. Also, try to use a layout that will scale well for different sized screens. While you may be working on a brand new iPhone, penetration rates for smartphones still hovers around one third of all US cell phone users; not everyone can scroll left and right, zoom, pinch and flick.
Depending on the activity that people will be partaking in when they are on your mobile site, they may need to input a search query, fill out a form or input their credit card information to make a purchase. Regardless of the specific task, you want your mobile site visitor to be able to complete it all on one screen. Where you may have multiple pages in a check out process on your standard website, try to use a scrolling feature so that all information can be captured on one page. Common knowledge amongst marketers is that the more steps required to complete a purchase or fill out a request form, the fewer the number you can expect to receive.
As mentioned previously, you want to avoid making your mobile website cumbersome to navigate and do what you can to make sure that it loads quickly. Even the most advanced mobile device platforms are still not that great at handling complex elements on websites. To solve for this, keep your use of graphics to a minimumand when you do decide to include graphics, eliminate any Flash elements. Mobile users have enough problems getting website to load that result from the networks they are on, so don't add to their frustration with a mobile website chock full graphics and unique style sheets. If ever there was a place to follow the K.I.S.S. principle, its here.
The last thing task that MUST be completed and arguably the most important thing to do before launching the new version of your mobile website is to test it out. This might seem like a simple recommendation, because quite frankly, it is. However, because this is the simplest task of any that we've mentioned here today, its the most likely one to be overlooked.
The best way to go about testing your new mobile website is to navigate to it on several different types of mobile devices with web browsers and test the navigation, layout and functionality. Be sure to include tablets, smartphones and standard mobile phones. Remember, the majority of people don't have smartphones. Also, there are a number of free mobile website emulators available on the web where you can test out how your mobile website will perform. These emulators let you see how your mobile website will look and function on a variety of mobile operating systems all from the comfort of your desktop browser. We recommend using the emulators first as they can help correct for a number of sweeping errors and then move to testing on handsets to look for device specific quirks.
Summary
To summarize the aforementioned best practices for mobile website design:

Focus on the customer - Design your mobile website around what your customers are currently doing most often on your standard website.

Keep the layout simple and the content succinct - You want your mobile website to be easily and quickly read on a range of mobile devices.

Use a scrolling feature - Making your mobile visitors click through multiple pages is not a good idea.

Don't use tons of graphics or Flash - Use of large graphics files or advanced media will slow down your mobile website to a crawl.

Test! Test! Test! - Did we mention you should test your mobile website?

Parting Thought
We hope that you are keeping up with our posts about mobile marketing and that the homework assignments and takeaways have proved useful.
Clearly there is a lot more that goes into launching and perfecting a mobile marketing program but the information that we've presented, and continue to present, should be a good jumping off point for you to have a meaningful conversation with your colleagues, or maybe your advertising agency, about ways to begin incorporating mobile into your existing marketing efforts. With that said, if there is a topic within mobile media you would like to know more about, please post a comment and we will put together a brief, yet comprehensive piece on the requested topic to the best of our abilities.
Posted by Matt Luber, Mobile Media Manager at the 60 Second Marketer and MBA candidate at Emory University's Goizueta Business School.

Connect with Jamie Now

New Here?

The 60 Second Marketer is an online magazine read by hundreds of thousands of people around the globe. Some of the posts are provided by our sponsors. 100% of our posts have been reviewed, edited and approved by the 60 Second Marketer. Come on in and enjoy the ride.

Looking for a Speaker?

Watch Jamie Turner on CNN

Connect with Our Readers

Find Stuff on the Website

Join Thousands in Our Community and Get Access to Our Resource Library Now!