5 Ways to Make Your Product Pages More Responsive

We no longer live in a world where a 12 inch black-and-white TV screen is our only window into the world. Whereas one television screen per household was more than anyone would even dream of decades ago, these days, we live in a multi-display world.

It’s not unimaginable for homes to have 3 or 4 LCD television sets, a couple of laptops, a desktop PC, an iPod and iPad, and a smartphone for every member of the family. Everyone is constantly surrounded by screens of all shapes and sizes.

With so many display screens being used to access websites, it can be a sticky situation for a web developer when designing a site that’s responsive to each type of display. You want your web pages to look fabulous on every screen. But rather than just focusing on one type of display, it’s crucial to design your site so that it appears properly on all screen types and sizes, including mobile devices.

And this is doubly so for the e-commerce experience! With that in mind, here are some tips to making your store’s product pages more responsive – thus more likely to convert.

1. Define the Viewport

Among all the factors you need to consider when it comes to having responsive website, the viewport meta tag ranks pretty high up there. Even the most basic of websites needs to have viewport added to it in order to allow users to have a  hassle-free experience viewing it – regardless of the platform they are using. Your site just won’t work efficiently on a mobile device without it.

So what is a viewport, you ask?

A viewport basically tells the web browser to scale the page to properly fit the screen that it’s being viewed on. It’s the section of the page that the viewer sees. So for example, when viewing a page on a mobile device, whatever is in view is considered the viewport. When the page is zoomed in to the top right of the page, for example, then the viewport has been adjusted to a specific width. Seeing the total width of the page when zoomed out to fit everything on the display means the viewport has been configured to show the entire width of the page.

In order for the viewport to control the page’s display, you’ll need to configure it first. Here is a simple example of a viewport code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

In this case, the width of the viewport is set to be the same as the device that the site is being viewed on. The maximum scale has been set to 100 percent.

By adjusting the values in the viewport tag, you can adjust how mobile devices show your website.

2. Choose a Responsive Design

With internet traffic from mobile devices growing exponentially over the past several years, it only makes sense to have a responsive design that is capable of showing your product pages perfectly on all display screens.

You could focus on specific devices and resolutions, but that’s an unreasonable approach. It would take you all week to list all the phones, resolutions, and platforms available out there. You’d have to come up with a totally new design by the time you’ve gotten through coding for each particular device.

If you check your Google Analytics, you’ll more than likely notice a huge shift in what type of platform your viewers are visiting from in favor of mobile devices.

The optimal – and only – solution is to focus on a responsive design for your site. This basically means developing a single web property that can alter its display based on what device it’s being viewed on. Having a site that shows well on all sorts of devices is definitely a time saver. More and more web developers are catching wind of this, and are building their sites based on responsive design principles.

By incorporating a responsive design into your site, it’s likely you’ll increase conversions, lower bounce rates, build a stronger online presence, increase your site’s page rank, and generally improve your competitive edge.

3. Only Show Navigation That is Crucial

Viewers may have plenty of room to view a website from a desktop screen, but when you’re browsing a site from a smartphone, space is extremely limited. Rather than loading your screen full of links showing all the categories available, consider displaying only the navigation elements that are critical for that particular moment.

Of course, you still want to make sure your visitors have just as positive a shopping experience when using a mobile device as they would on a desktop computer. As such, each section of the website should be easy to get to, but that doesn’t automatically translate into showing everything all at once. Instead, design your website so that the viewer can focus on the important aspect of the page – such as the product you’re selling – after which they can use the navigation as required.

4. Use a Slimmed Down Header

The header is crucial for any website. It’s where you advertise your brand, include important promotions, and provide for navigation links. The header can also include the product categories for your e-commerce site. It shows up on every page, and should ideally remain consistent throughout.

You have the luxury of incorporating a big, navigation-loaded header when viewing the site from a desktop. However, the header really needs to be streamlined quite a bit for viewers visiting your site from a mobile device. Ideally, the header should be slimmed down by as much as 15 percent of the full screen view.

Take this as an example: Whereas on a desktop PC the “Jewelry,” “Brands,” or “Clearance” links may have been presented individually, on a mobile screen they may be condensed to a smaller, more compact navigation icon. Similarly, the “Store Locator” link may be condensed into a small map icon which takes up much less space, yet is just as easy to access.

5. Use Touch-Friendly Navigation

People aren’t clicking a mouse to access various links on your site when they’re visiting from a smartphone. While using a mouse will allow for much more precise clicking from a PC, a fingertip requires a little more slack. Minuscule clicks or hovering over icons may be fine for viewing websites on a desktop, but this is nearly impossible with a mobile device where your fingertip is the cursor.

In this case, you need to consider adopting touch-friendly navigation that makes the web browsing and navigating experience hassle-free.

Ideally, your website should have big, easy-to-touch icons and buttons that don’t send your visitors to the wrong page because they accidentally hovered over an adjacent icon.

Conclusion

It’s never been more critical than now to have a website that is easily accessible and viewable on all types of screens, including mobile devices. Consumer behavior is changing, which means web designers’ mindset also has to change. It’s no surprise that we should be optimizing our websites with a responsive design. Think about all the people perusing the internet from smartphones and tablets all over the world. You have to cater to them!

Don’t leave money behind by neglecting to pay attention to the way more and more people are visiting your website. Your site needs to be responsive from all devices.

These tips should help get your site up to speed, but there may be others I didn’t think of. How do you make your site more responsive to display well across all screen sizes? Feel free to share your thoughts below!

Image source: jiraisurfer, gcaserotti