Performancing Metrics

Size Matters: Reimagining Your Website for Mobile Devices

Editor’s note: This post was written by Alice McGlinn, who has been a tech nerd since receiving her first computer ten years ago. Since then, she’s been spending her time learning and writing about all things technology.

According to the Pew Research Internet Project, 56 percent of all adults in the U.S. own a smartphone, and the number is even higher for 20 to 30-year-olds. This is the first time since the Pew Research Center started watching smartphone trends that the majority of American adults use smartphones. Although most businesses these days have a website to represent their product or service, many of them are not mobile device-ready. Nothing will send your visitors away faster than a website that isn’t usable on a smartphone or tablet.

mobile devices

Why Quicker Isn’t Always Better

Many website owners try the quick fix method to create mobile versions of their websites for smaller devices. They will use an “m.sitename.com” address to create a mobile site and then redirect people to it. Then they make a few mobile-friendly tweaks and add larger buttons to make their site is work on mobile devices.

This mobile version of your website may look good on one type of smartphone, but not on another, or worse yet, it could look great on smartphones, but not work on a tablet. In addition, you’ll need to revamp each site separately with two different URLs, so it could be a detriment to your SEO.

Responsive Web Design to the Rescue

mobile devices

Web designers have found the answer to this problem with Responsive Web Design (RWD). In the article, “Responsive Web Design,” Microsoft defines responsive web design as the “use of flexible and fluid layouts that adapt to almost any screen.” Google strongly encourages the use of RWD, by the way.

Responsive web design delivers the entire web page to the device browser, so you only need to update one site, using a single URL. What does the magic is a stretchable grid that displays fluid images and structures the elements on each page automatically. CSS3, JavaScript and HTML5 code snippets use media queries to fine-tune the content to the size of the screen and orientate the device for any size screen.

The 10 Keys to Rocking Responsive Web Design

Here are the 10 key elements of RWD:

  1. Reimagine your website on a smaller scale, instead of simply reformatting it. Imagine mobile devices as separate venues that spark different needs and actions from users who want to visit your site while on the run to get instant information whenever they want.
  2. When you design your site, think mobile first. Enhance all your website content for fast and efficient viewing.
  3. Start an interactive conversation with website visitors by keeping your taglines, messages and calls to action short and with the least amount of steps possible.
  4. Imagine what your users want to see first, such as directions, contact information and hours of business. This will help you determine where to arrange the various elements for smaller screens.
  5. On smaller screens, the elements at the top are always visible before the user scrolls down, so put the most important things there, like contact information or a quick action item.
  6. Get rid of banner advertisements and scale down the visual features, such as logos and images. Eliminate Flash, because iOS devices can’t use it.
  7. Leverage white space with links that are highly visible. Avoid drop shadows and opt for flatter navigation buttons spaced apart.
  8. Make your content eyestrain-free. It should be easy to read on smaller screens.
  9. If you have to use them, keep logins and form to a bare minimum.
  10. It’s all about location, so leverage location-based services by using each devices maps and GPS. Be sure to integrate apps and social media usage, too.

Now that you understand what RWD is all about, remember that although is it a necessity for your website, it is not the complete mobile success story. According to Twenty4.com, a digital agency in Melbourne, Australia, you need to look beyond to the advertising opportunities. In their article, “Trend Forecast. Part 6: Mobile Responsive News,” they state: “The mobile revolution isn’t about design and distribution as much as it is about revenue disruption. Two big drivers of mobile disruption are geo-location and digital payments.”

Facebook recently reported that almost 100 million people began using their network solely on mobile devices void of any desktop computer. Google has experienced four months in a row of declining desktop searches due to the explosion of mobile devices, and it doesn’t appear that things will ever go in the opposite direction ever again in history. Be sure you keep up with the times by delivering the best mobile experience to your website users.

Image sources 1, 2

Categories: Blogging: How To
Tags: , ,

This post was written by . You can visit the for a short bio, more posts, and other information about the author.

Comment with Your Facebook Account

Comments

Current ye@r *