How to bring awesomeness to your mobile presence

Target audience: Small, mid-size and large businesses, social enterprises, mobile developers, social marketers, educators — and anyone with a mobile website.

Yesterday we discussed some of the choices you have when it comes to creating your mobile website.

Regardless of the solution you choose, there are some best practices that should be applied to all mobile websites.

Here are 10 important tips to get your mobile site off to a roaring start.

Keep it simple and prioritize content

1In general, keeping your site simple means eliminating most images; simplifying navigation, layout, and design elements; eliminating Flash and other proprietary software; keeping your site free of clutter; and breaking up text and other content.

Space is in high demand on a mobile site and site visitors are on the go, so you need to anticipate what content users will most likely want to access. Choose the three most important content items and make those items easy for users to find and act upon.

Recall that users are not browsing your mobile site — so make it easy for them to do the things they most likely want to do, like find store locations, buy or review products, review menu items, place calls to your business, or request additional information.

Take advantage of mobile features

2Like the click-to-call button, there are features specific to mobile devices that can be used to improve your site’s user experience. The most useful of these features is location, both yours and the customer’s. By accessing user location information, you can offer a more personable experience.

Think ‘tap-able,’ not ‘clickable’

3Design your site’s buttons, navigation items, and links for touch screens, not for a mouse. This will improve the user experience and prevent accidental navigation away from your site. Do not use hover-over features on your mobile site. A thumb cannot “hover” over an item on a mobile site.

Minimize scrolling and use vertical navigation

4Mobile users prefer to scroll from top to bottom, so design your site so that left to right scrolling is eliminated. You should keep the need for scrolling — even top to bottom scrolling — to a minimum.

Pay special attention to the navigation on your mobile website. Keep in mind the “tap-able” issues discussed above, as well as scrolling and readability issues. Your navigation menu should not scroll left or right. If your menu items are too long to fit horizontally, create a vertical navigation structure.

Formatting content: Be concise

5Content is still king, even on the mobile Web, and there are plenty of ways to keep your valuable content available to your visitors while still maintaining a simple, readable, error-free mobile site:

• Make headers prominent and concise.
• Text should be readable at arm’s length, and broken up with “read more” links or collapsible navigation.
• Use bulleted lists when formatting your text, and avoid the use of images wherever possible.
• Avoid placing too many links within the body of your text, especially if the links are close together.

Focus on simple usability

6Your mobile website design should focus on simplicity and usability. Designing for a smaller screen can be challenging and requires eliminating many elements we take for granted on desktop sites. The following best practices can help:

• Do not clutter your site with paid ads or unnecessary elements.
• Use CSS to organize content on your mobile site. Do not use HTML tables.
• Use plenty of white space on your site, and use lighter-colored backgrounds.
• Single column layouts are the best choice for mobile websites.

Page size matters

7Page load time — how fast a page renders in a mobile browser — plays a major role in how well a site places in mobile search engines, and can also determine if someone stays on your site or not. A website designed for desktop browsers can take up to 40 seconds to load on a mobile device, a far cry from an optimized mobile site that should take around four seconds.

Images tend to take a long time to load. Mobile users are content motivated — they are not necessarily “browsing” or “admiring” your mobile site, rather, they are there for a purpose. A few images are fine, but excessive use will degrade your site’s efficiency. Use an image cruncher like crunch4Free to cut back on image size.

Just as for images, including video on your mobile site can affect load times and usability. Rather than streaming the video yourself or relying on other proprietary software, consider using YouTube to place video on your mobile site. HTML5 has a video tag that renders video efficiently, too.

URL structure

8You have a few choices for what type of URL to use for your mobile site. You could purchase a domain name using the “dotmobi” or “.mobi” extension so your site would have a URL like “yoursitename.mobi.” Or, you could point a sub-domain name like “m.yoursitename.com” or “mobile.yoursitename.com” to your mobile website. It is becoming standard to find a website’s mobile version at a URL like m.example.com.

Redirecting visitors to your mobile site: Let them choose

9When someone accesses your website using a mobile device, there are ways you can make sure the mobile version of your site is what they see. One way is to redirect them to the mobile version of your website using scripts. Regardless of how you redirect visitors to your mobile site, it is always best to allow them the option of viewing the standard version of the site if they choose.

Test your mobile site

10Mobile browsers are not as forgiving as desktop browsers when it comes to errors. The best place to test your mobile website for errors is the W3C mobileOK Checker. This tool not only checks your site for errors, but checks page sizes, load times, image sizes, and many other factors that can keep your mobile site from displaying properly in mobile browsers.

Taking your mobile site to the next level

So, what can you do on your mobile website?

Granted, the guidelines above are pretty strict, and many of them have older mobile devices in mind. However, you should still attempt to adhere as closely as possible to the suggestions here when developing your mobile website. The mobile audience has a shorter attention span than ever, so every second counts!

There is still a lot you can do to create a beautiful mobile website while adhering to best practices. Check out the sites on Mobile Awesomeness for inspiration. Note: Not every mobile site featured on Mobile Awesomeness adheres to the best practices discussed in this post.

This article is paraphrased from the book The Bootstrapper’s Guide to the Mobile Web, by Deltina Hay, and is a shortened version of a post from Mobile Web Slinger.

The post 10 best practices for your mobile website appeared first on Inside Social Media.

In previous mobile web series articles, we covered:

• Why you need a mobile website
• How people use the mobile web
• Steps for planning your mobile website

But none of that tells you how to create your mobile website, or what your options are.

Luckily, you have a host of solutions available to get your Web presence mobile-ready, with many of them taking very little time, effort, or money to implement.

If you have HTML experience, you can use responsive Web design to create separate style sheets without the need to alter your existing website code, or use new Web standards found in HTML5 and CSS3 to create your mobile website from scratch.

There are also some nice HTML5 mobile website frameworks and templates available to help you kick-start your efforts and stay compliant.

But don’t despair if you do not have web programming experience. There are many tools and services you can use to create a successful mobile Seb presence. Many of these solutions require very little time or money.

The difference between a conversion and a hosting service

You should know the difference between a conversion service and a hosting (or DIY) service before you decide on your solution. Conversion services take your existing website and convert it to a mobile website. DIY services allow you to create a separate mobile website tailored specifically to the mobile audience. I talk about both these methods, the pros an cons of each, and how to choose the solution that best fits your needs in The Bootstrapper’s Guide to the Mobile Web.

The Bootstrapper’s Guide website has a good list of mobile website conversion services and mobile website creation or DIY services for you to check out and compare if you’re ready to dig right in.

If your website is powered by a content management system like WordPress, Joomla or Drupal, there are specific mobile solutions available. Mobile plug-ins, responsive themes and hosting services can all help get your CMS mobile-ready.

This article originally posted on MobileWebSlinger.com.

The post Making sense of mobile website solutions appeared first on Inside Social Media.

Target audience: Mid-size and small businesses, online marketers, Web publishers, mobile developers, entrepreneurs, educators, journalists, general public.

We sometime don’t appreciate how fast things are moving, but the mobile Web is exploding.

In celebration of the release of my new book, The Bootstrapper’s Guide to the Mobile Web, I offer you this mobile Web infographic to use as your guide to preparing for these sweeping changes, whether you’re an online marketer, publisher or a one of the users of 5.6 billion mobile phones worldwide today (over 327 million in the United States). The infographic explains the difference between native apps and Web apps (big difference), and points out the numbers:

There will be 788 million mobile-only Internet users by 2015, driving $20.6 billion in mobile ad revenue and $119 billion in merchandise spent by mobile shoppers by 2015. And it’s just getting started.

You’re welcome to share and re-post the infographic as long as the header and credits sections remain intact. A larger version of the graphic can be downloaded from TheBootstrappersGuide.com.

Related on Socialmedia.biz

• The importance of mobile optimized landing pages
• 3 steps to a successful mobile website
• 4 reasons you need a mobile website
• How do people use the mobile Web?
• Why you should care about the mobile Web

The post The Ultimate Mobile Web Infographic appeared first on Inside Social Media.

Plan for a mobile site that meets your strategic needs

This is the first of a two-part series on the mobile Web. Tomorrow:
• The Ultimate Mobile Web Infographic

Target audience: Mid-size and small businesses, Web publishers, mobile developers, entrepreneurs, educators, journalists, general public.

As we’ve been saying, the time has come for you to offer your readers a mobile version of your website in one form or another.

But before leaping in and creating a mobile website just because you need one, pull back and plan for a mobile site that meets your customer’s needs, fulfills your business objectives, and integrates the features you need now and in the future.

Here are some guidelines to help you plan a successful mobile website:

Plan for user expectations

1In a previous post, we discussed how people use the mobile Web. Mobile device users already know what they want when they get to a mobile website, and are more likely to take action once they get there. To plan for this type of user behavior, answer the following questions about potential visitors to your mobile site:

• Why are they most likely coming to your site?
• What information are they most likely seeking?
• What types of actions are they most likely to take?

The answers to these questions can help you prioritize the content on your mobile site. You should highlight the three most important items and make them prevalent on your site. You may only have a few seconds to make a conversion, so call-to-action links or buttons should be one of those priorities.

If possible, reach out to your mailing list or social networking connections and ask what they would like to see on your mobile site.

Plan for business objectives

2Mobile visitors are not going to navigate around your site the way they might on a PC, so have your immediate goals in mind when planning your mobile website. You should also consider the resources you have to put toward your mobile website. Answer the following questions about your goals and resources:

• What are my immediate goals: Sell products, drive traffic to my location, generate leads?
• How much money do I have to invest in the set-up and maintenance of a mobile website?
• How much time can I put toward the set-up and maintenance of the site?

Answering these questions can help you focus your mobile website content and decide on the most feasible overall solution.

Plan for mobile features

3We learned that mobile device users:

• Access social media sites second only to search sites
• Take action more often than PC users
• Are location motivated
• Like to share information

Using this insight, you want to include features on your mobile site that will encourage mobile device users to share your content, contact your business, access your social media sites, find your business, and so forth. Depending on the results of steps one and two above, consider the following features to include on your mobile website:

• Click-to-call functionality
• Links to your social media accounts
• “Check-in” links for location-based services (like Yelp, Google Places, and Foursquare)
• Google Maps
• Ability to SMS (text message) your business

This is not an exhaustive list, but should give you an idea of the types of features to consider for your mobile website.

These steps can help you flesh out the information you need to move forward with your mobile website strategy.

This excerpt was paraphrased from The Bootstrapper’s Guide to the Mobile Web by Deltina Hay. Learn more about the book at The Bootstrapper’s Guide website, where you will find a plethora of resources, worksheets, and examples.

Related on Socialmedia.biz

• The importance of mobile optimized landing pages
• 3 steps to a successful mobile website
• 4 reasons you need a mobile website
• How do people use the mobile Web?
• Why you should care about the mobile Web

The post 3 steps to a successful mobile website appeared first on Inside Social Media.

How does your site look on a smartphone?

Many of you may be thinking, My website displays fine in mobile browsers, even if it is a little small.

What’s the big deal?

Just having a mini version of your existing website is not going to cut it. You need a mobile version of your website that addresses all of the following issues:

Load time

1A website designed for mobile will load in around four or five seconds, while a traditional website can take as long as 40 seconds to load on a mobile device. Not only will this lead to much frustration for your site visitors, but it will also keep your site from placing well in mobile directories.

Mobile directories

2Even if your site displays properly in mobile browsers, it may not be indexed by mobile search algorithms. When one uses a search engine on a mobile device, the search query accesses a separate index maintained for mobile content. If your website is not optimized for mobile search engines, it will not place well in such search results.

Mobile browser standards

3Mobile browsers do not work the same as desktop browsers. They do not render video, Flash, image galleries, and many other software and scripts in the same manner as desktop browsers. Most mobile browsers simply ignore Flash. If your site uses Flash or other proprietary software, it may not load in mobile browsers at all. A mobile version of your website that adheres to mobile standards as set by W3C’s mobile web initiative will solve these issues.

User experience

4As discussed in a previous post, users have different expectations when browsing with mobile devices. Not only are they seeking specific information when they land on your site, but they also expect an experience that is consistent with the device they’re using. If you force users to do the “pinch and pull” in order to read your content or navigate your site, they will probably move on.

Stay tuned as we discuss how you can optimize for the mobile web in 2012!

This excerpt was paraphrased from The Boostrapper’s Guide to the Mobile Web by Deltina Hay. The book will be released in May, but you can request a review copy today. Post originally appeared on Mobile Web Slinger.

Related

• Have you made your site mobile-ready? (Socialmedia.biz)

• Why you should care about the mobile Web (Socialmedia.biz)

• Encourage visitors to save your site as a mobile shortcut (Socialmedia.biz)

The post 4 reasons you need a mobile website appeared first on Inside Social Media.

You don’t need a mobile app to help your audience keep your website top of mind on their smartphone or tablet. Your site visitors can easily save your website as a shortcut on their mobile device, keeping your content as fresh in their minds as their Angry Birds.

The problem is that many of your site visitors may not know how to create a mobile shortcut, so you should offer instructions on how they can. There are any number of ways to do this: You can offer a link to a page with instructions or place a short video on your site showing how they can create a shortcut on their mobile device.

Above is a short video on how to create a mobile shortcut that you are welcome to embed on your own site. (If so, grab the embed code on YouTube.)

I’m sure your next question is going to be: How did you get the mobile devices to use those nifty little shortcut icons to represent your website? And a good question that is!

Creating your own mobile shortcut icons

The first step is to create the icon. Create your icon as a .png file that is at least 128px by 128px (this size will accommodate newer mobile devices, too). Check out the ICONJ iPhone Style Icon Generator if you want a quick solution to creating icons.

Next, name the icon “apple-touch-icon.png” and place the icon file in the root directory of your website.

This is all you need to do to accommodate Apple devices, but you need to add some code to your site to accommodate other devices like Android mobile devices.

Add the following code to the head section of every page you want the icon to represent as a mobile shortcut icon:

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon.png” />

Once you add the icon file and code, mobile devices will use your icon as the shortcut icon.

You can take the process a bit further by adding an automation script but I only recommend doing this for full-fledged web apps or fully mobile-optimized sites.

This post is based on the book The Bootstrapper’s Guide to the Mobile Web, which will be released in May 2012, but you can get a review copy from the author today.

The post Encourage visitors to save your site as a mobile shortcut appeared first on Inside Social Media.