Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Designing responsive product pages

Saturday, October 11th, 2014 by Servage

On e-commerce, offering responsive design for sake of mobile experiences is a daunting task in itself. If we fragmented designing tasks smartly, we can justify them well. Therefore, in this post I have covered product page designing only where thin header, CTA, images, IA, navigation, and touch friendly experiences matter more.

Designing Responsive E-Commerce Product Pages

We are living in mobile era where web is ubiquitous, but available on various kinds of devices. Thus, fragmentation on hardware and software is great. However, responsive web designing is an ultimate solution of all these fragmentation related problems. Seasoned and smart web designers take benefits of latest technologies and tools to do high quality responsive web designing.

Since today, e-commerce websites are hardly small size and do plenty of interactions in technical terms. Dynamic and personalization are common traits of modern online storefronts. Therefore, designing a responsive e-commerce is an intricate challenge for modern web designers and it demands certainly a big team of web designers and web programmers.

Therefore, I have decided to introduce you to various responsive web design aspects in a clustered manner, not as a whole. Thus, today I have covered only product page designing aspects in this post.


Header in Responsive Designing

If we see closely the main functions of header in the e-commerce store, we will find that it is a brand identity at first place, at other hand, it is offering global navigation/main menu, and it offers attention grabbing key promotion areas. As far as some minor functions are concerning it provides space for in-site search feature, miniature of shopping cart and relate info, and in present days space for social media icons if pull on the top of the site instead of footer.


Unfortunately, this header is appearing consistently on each page so its design demands care and minimalist approaches in responsive designing. On desktop, we have enough room to expand the header, but in mobile devices, we have to slash the space considerable and can’t go over 15% of total screen space. Recent trends in responsive design indicates the usage of icons instead of navigation buttons. Navigation menu itself hide in horizontal lining icons in standard way. Links, search feature, and shopping carts miniature, etc. are hidden in icons and making header thin enough to remove the distractions.


CTA in Responsive Designing

Generally, we place CTA links and buttons at two or more places on the product page if page is bigger. In case of small page with little description, we prefer to have CTA, either at the top or bottom of the page. It is good to have CTA at the top of the page in big screen as we can read description as well as see highlighted CTA simultaneously.


Unfortunately, that is not happening in mobile devices, and only CTA becomes visible on the screen. If we wish to convince the visitors through product description, we need to place CTA at the bottom in hierarchy. Thus, your visitors won’t get any frustration and go smoothly on your product page on any screen.


Feature Images in Responsive Designing

Often we forget that we put feature images on the website to grab immediate attentions of the visitors. If we resize those feature images and make them tiny or of smaller size on mobile devices, we committing a big mistake. Therefore, we shouldn’t resize features images, whether not at all or if we resize, just at small percentage so we won’t lost the marketing purpose at all.
References & More Reading
Recipe for Responsive Ecommerce Product Pages in 2014
Aritzia site

Designing responsive product pages, 5.0 out of 5 based on 3 ratings
Categories: Business

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.