Responsive Ecommerce Sites

Long time ago when only PC and laptops were used for internet browsing, it was fairly easy to create a website that looks good on most screens. But nowadays smartphones, tablets, smartwatches and other wearable devices has significantly complicated this process. That’s why responsive ecommerce site that adapts to various screens is a necessity for many companies.

How to make responsive website

Create several specialized layouts

First of all, you should decide how many layouts do you actually need. For example, if the website has only one column, all you have to do is adapt it to screens with various resolution. But if the website uses more complex structure, you’ve got to have several layouts that take into account space availability on screens of various size. For example here’s how website design from our portfolio looks on desktop computers:

Responsive design for news website

But when you are viewing it on smartphone, a more simple layout is displayed which is more suitable for small screens:

Mobile responsive design for news website

You might have noticed that PC version has a horizontal menu while on the mobile site its elements are hidden in the sandwich menu. It’s a good practice for mobile sites since on small screens navigation takes over too much of valuable space distracting user from the important website content.

Think about load speed

Today people are rarely away from their mobile devices and you have to pay attention to page load speed since they can access the website from high-speed Wi-Fi, 3G or slower EDGE networks. Remove those heavy images from mobile version and don’t load videos automatically. For example on the background of website for our Code’n’Cofee IT event we used video that is played automatically. But visitors viewing it on mobile devices will see photo instead:

Website for conference or IT event

Another way to make page download faster is to use special signs instead of images for simple forms, such as stars in ranking systems (★ и ☆).

Use viewport and media query

HTML5 introduced new viewport element for controlling scaling and page size. Here is an example code:

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

width=device-width indicates that page width should correspond to the width of the device screen.

initial-scale=1.0 specifies scaling level used after the page has loaded.

To make the website adaptive you should use viewpoint element.

CSS3 has introduced @media rule that allows you to use specified CSS parameters only when a certain condition is true:

@media only screen and (max-width: 500px) { body { width: 100%; } }

And here’s how you can load different styles for different types of devices:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="newsheet.css">

Specify size in relative units

To make the website adaptive you should specify all sizes in relative units (such as percents). For example, when you state that the size of the column equals 50%, it will always occupy exactly half of the screen. This approach is used in grid-view concept that divides the screen into 12 columns with overall width of 100%. When we are resizing the page grid-view and elements it contains are adapting to the new size. For example, here’s how website design we’ve created for our client KeepSnap looks like on wide-angle screens:

Responsive website for photographers and their clients

And here’s the same page with hamburger menu on a smaller screen:

Responsive website for photographers and their clients with hamburger menu

As you can see, page adapts to the size of the screen of iPhone, iPad, Android devices. Here’s how KeepSnap looks like on a smartphone screen:

Mobile responsive website for photographers and their clients

Use vector and adaptive images

When to use vector and when to stick to bitmap images? The answer is simple here: if the icons on the website are simple enough and don’t have a lot of details, use SVG images or special icon fonts. In this case icons will look good even on a very big screens. But it’s not as easy to implement for bitmap images. For them to look good on most screens you need to use JavaScript or PHP for generating and showing images that are meant for a particular screen size.

These were the basics of adaptive website development. Now, let’s take a look at several examples.

Adaptive design ecommerce sites examples

Here’s a website we’ve made for Radialka shop selling products for camping and hiking:

Responsive website for shop selling camping and sports gear

Here’s the same website on a smaller screen:

Website for shop with camping and sports gear adapting to the screen website

You might have noticed that on a smaller screen two boxes that were earlier in the center are now placed one above the other. Search field is also placed just above the menu.

Here are some more adaptive websites examples. Online shop selling e-books:

Responsive webdesign for book store

iOS/OS X game site:

Responsive website for video game

Shop selling watches:

Responsive website for accessories shop

Mobile adaptive site examples

And here are several examples of adaptive sites for smartphones. Hotel group:

Mobile responsive website for hotel group

Shop selling ties:

Mobile responsive website for accessories shop

Company selling interior and exterior paint:

Mobile responsive website selling house paint

Finally, we’d like to say that developing a responsive site is definitely a great way to make your online store more appealing to customers viewing it on different devices.

We, studio stfalcon.com, are passionate about responsive webdesign and will be happy to help your site go responsive.

About author

Front End Developer
Ruslan is responsible for HTML, CSS and JavaScript coding of studio projects.

Related posts

Return to list Return to list