• Make Your Responsive Site Work for You AND Your Customers

iStock_000019353695XSmall.jpg

It’s been said before and we’ll say it again: 2013 is the year of the Responsive Website. This “write once, run everywhere” style of building websites gives business owners and website developers the ability to target multiple devices  – desktop computers, laptops, tablets and smart phones – by using a single website that intelligently adjusts its layout and features according to how it’s being viewed.

Why is this important to you as a business owner, you might wonder? Simple. Since the explosion of mobile web, thanks largely in part to Apple and the “Smart Phone Revolution”, virtually anyone and everyone can access the internet from basically anywhere. With Tablet sales expected to exceed over 100 million units this year alone, it’s no wonder business owners are seeing jump in their site’s overall mobile traffic, especially considering the majority of U.S. mobile subscribers (49.7%) now own smart phones. With 90% of people using multiple screens sequentially, the most popular cross-device activities are surfing  the web (81%), shopping online (67%), online banking (46%), and vacation planning (43%)– responsive design gives marketers the ability to engage their audience no matter what screen they’re looking at.

As the numbers reflect the growing mobile trend, the real question becomes what can you do to make your responsive website work for you and for your users? The following 5 tips are ways to maximize your responsive website to help improve your user’s experience while still reaching your target audience.

1: Design for the Extremes – Mobile Site to Web Site

First and foremost, keeping your overall layout simple, clean, and uncluttered is essential. Get rid of Flash or JS. These elements slow sites down and do nothing to enhance the user’s experience, and can, in some instances, drive users away. Keeping your layout flexible is the best way to be ready for any kind of screen size and orientation.

Keep in mind that responsive design is not just about making a website look pretty on any screen size and ensuring that your brand is reaching your target audience. It’s also about making sure your users have the optimal experience. Enhancing your users’ experience means being prepared and ensuring that your content is displayed in a way that functions for the benefit of the user, allowing him or her to find and utilize important information fast and without any difficulty.

2: Access to Content – Less is More, or Is It?

There’s a great struggle when it comes to balancing information and simplicity across website platforms. One of the major differences between a responsive and mobile website is in the content and features that are delivered to the browser. Typically, mobile-only sites display a greatly scaled-down version of the same content/features that would be found on a full site. However, the main issue here is determining what information is deemed “important” enough to your users and if you should display only that information.

Preventing access to information solely based on the device a person is using will likely frustrate a potential customer and turn them away when they don’t fit the “ideal scenario that you envisioned when you decided what to include in and what to eliminate from your mobile site.” It’s impossible to design for every possible combination of device and info being sought. So what content is most valuable to your viewers and do you also allow access to additional, less valuable, content?

A great way to get feedback on this issue is to go directly to the source: your users! Find out what content they deem important and what pages on your site are being used and which are not to improve the user experience and effectiveness of your site. This also allows you to treat the most popular content properly, focusing site design on what matters most to your users.

While you may scale back on content for a mobile site, it’s equally as crucial not to completely remove access to additional content. Providing a “load more” option allows you to skip the non-essential content but makes it still accessible to your viewers should they seek it.

3: High Functionality – Don’t Make Your Users Work For it – Make the Site Work for Your Users

Consider how quickly you want access to important and relevant information when you are browsing for a phone number or location of a restaurant on your mobile phone. Mobile web traffic is booming, and more customers are using high-end, fast devices or systems to do their internet browsing. This means that you have to provide an unparalleled user experience, ensuring the details people want are right there when they need them.

Don’t make your users work to get crucial information, such as a phone number, address, or days/hours of operation. Mobile users have very high expectations when it comes to obtaining and using information. Users expect that any good mobile site will have click-to-call functionality (calling you at the tap of a button), any address listed will have tap-to-map features immediately redirecting to Google Maps, and an email address will have a click-to-send option that opens up a brand new email. Make sure these features are available so new customers can reach you with no more effort than a swipe and a tap.

4: Responsive Navigation- Design and Functionality = Better Usability

Designing your site’s navigation – the organization of pages or tabs – is one of the trickiest parts of building a responsive website. There are a couple different areas of navigation to be considered:

  • Primary Navigation – this is your main navigation bar and is present in all versions of the site. It’s basically the steering wheel your browsers use to steer through your site.
  • Help Navigation – This type serves to link various portals and services that your viewers would use, for example where your “Search” bar would be found, allowing users to search your site for keywords, articles, links, etc.
  • Footer Navigation – This is your secondary navigation bar, located at the bottom of the page where your tabs and subtabs are all neatly listed. On a mobile site, you might also find another click-to-call feature or a link to the full website here.
  • Section-Specific Navigation – This is typically only seen on the larger screen layouts (tablet/full webpage) and generally found on the subpages of a website to delve further into a topic.

The key to ensuring that your navigation is easy to use is to consider overall usability. Keeping in mind the varied sizes of screens will help to determine the types of navigation used on a full website versus a mobile site. A mobile site, for example, would not need help navigation as users should already be able to access the most crucial information from the primary navigation. A desktop viewer, on the other hand, may find the search bar useful as they read in more detail. All users want a navigation bar that is simple, easy to use, and that works, no matter what device they are using.

5: Picture Perfect – Making Your Site’s Images An Enhancing Feature

Images – whether they are photos, logos, or maps, are great additions to any site. Not only do they add another dimension to your content but also serve as way to make you and your business memorable – but only if they’re used in the right way. On full sites image size isn’t much of an issue, though no one likes squinting to make out a teeny, tiny image. It’s equally as frustrating (if not worse) when mobile site images are so huge that users must pinch and zoom out a bunch to be able to see more than just a corner of the picture. 

The important point here is to use images that can be expanded or sized-down to be effective whether users are on their phones or on their laptops.

 

In all areas of responsive design, keeping your website flexible and fluid is the best way to be ready for any screen size or orientation. Responsive websites are all about making your website work for you and your users, regardless of whether it’s being viewed at home on a laptop or on-the-go on a smartphone.

 


Want to learn more about Propel’s Responsive Design? Check out PropelWeb

ThriveHive
ThriveHive
ThriveHive combines easy-to-use tools and expert guidance to help businesses stand out and get found online. Learn more about our guided marketing and advertising solutions here.

Leave a Reply

Your email address will not be published. Required fields are marked *