The growing size of the mobile market is a clear indication that you won’t be able to ignore it for long. It’s a whole additional marketing channel through which potential customers can find your business and make purchases. These purchases can happen anywhere, at any time.
What’s not to like?
When it comes to selling on mobile, you will need to prepare your mobile website first. You can’t count on your users’ goodwill and understanding if you offer a website that simply doesn’t look good or is difficult to use on mobile. Sometimes, you will have only 2 seconds to get someone interested so make it count!
With attention spans so short, you need to make sure that your mobile website is working like a well-oiled engine. Without any UX hiccups or design mistakes.
Why mobile website design is so important in ecommerce
Mobile sales have recently overtook the ‘normal’ desktop sales. More and more customers go for their phone or tablet instead of laptop or PC whenever they want to buy something. The sheer size of this market should give you a clear signal that it’s not just another fad and it’s here to stay.
Just think about it. Wouldn’t you prefer to have instant access to your favorite shop instead of having to go to your PC, boot it up and only then be able to shop for something? Your phone is always with you. It’s always on. Accessing a mobile ecommerce website is a matter of few actions. Buying something is a few more actions on top of that. That allows for a lot of impulse buying, which means a lot of extra revenue for your business.
A few takes on mobile design: responsive, subdomains and apps
When it comes to preparing your mobile website, there’s a couple of ways you can go about it.
Depending on your resources, knowledge and the time you have available, you can go for a responsive website, a subdomain for mobile users and/or a dedicated mobile app for your shop. Each of those options works well in different circumstances.
Responsive mobile design
A mobile website that has been prepared with responsive design in mind will look good on mobile devices as well as PCs/laptops. It’s a way of preparing both versions of the site using the same code. Whenever someone accesses the website from a mobile device, the website ‘scales’ appropriately. You are generally able to keep a similar look without having to prepare two separate versions of the same website.
The main benefit of running a responsive mobile website is the fact that you keep one set of code for all versions of the website. You also don’t have to think about adjusting the look of the website for each device separately. The code is written in a way that will automatically adjust the page to make it look good on all devices.
Most of the copy and resources you use on your normal website can also be used on the mobile version.
Finally, the navigation scheme and the general feeling of the website stays the same.
Responsive design requires a bit of consideration whenever you introduce a new element to the website. You need to keep in mind the fact that it will affect the look of your site on all devices. So a huge background graphic may look good on your desktop, but it can look out of place on a mobile device.
If your current website is prepared in a way that makes responsive design really hard to implement, you might want to go for another option: a subdomain of your website dedicated to mobile use.
Think of all the pages you know that start with “m.” whenever you access them from your phone. These are subdomains of the main website prepared to look good on mobile devices.
The mobile subdomain requires considerably more work than a responsive design in the long run. Even though it may be easier to prepare a subdomain with different code and look, you will need to update two code bases instead of one. Every time you add something new to your main website, you will also have to add it on the subdomain.
This can be very time-consuming if you update your website frequently. For example, if you tend to add large batches of new products every week, a subdomain would probably be not the best choice for you.
Dedicated mobile app
Preparing and launching a mobile app for you ecommerce business is another way of reaching your mobile audience.
It’s a completely separate channel that doesn’t necessarily bring a lot of traffic to your website. However, it can be used to bring in additional revenue as customers usually can make purchases directly in the app.
Since the app has to be downloaded by a customer first, it would be probably best if you introduced it to your most loyal and returning customers. You can boost that effect by adding some kind of a loyalty program into the app.
You should treat a mobile ecommerce app more like an addition to an already working mobile website instead of seeing it as an alternative.
Mobile design tips for your ecommerce website
There are a couple of aspects of a mobile implementation that can make or brake it. Here’s what you should look out for and how you can make sure that your mobile ecommerce website is a success.
Clear call to action
Customers can make very quick decisions when browsing through a mobile website. You should make sure that they always know what is the next step before they lose interest and leave and never come back.
No matter which part of your website a user is browsing, you should always have a clear call to action (CTA) available. It should not only be easily noticeable but also should clearly state what will happen if a customer takes the action.
For example, when browsing through a catalog of your products, a customer should always be able to easily locate the ‘add to cart’ button.
Be aware of space constraints
Apart from having very little time to get the attention of a customer, you also don’t have a lot of space to work with. You will constantly have to check if the copy or the graphics you’ve chosen for your website fit in the mobile design.
The less is more maxim is especially true in the case of mobile websites. You have way less space to work with so you need to make certain concessions. You will need to come up with ways to simplify the content on your website to make it feel less cramped.
For example, if you have several paragraphs of copy written for your main page, you probably will need to shorten it to a few sentences.
Don’t you just hate it when you browse through a mobile website and there’s a popup with a ‘close’ button so small that you will miss?
Since your mobile customers will control everything using fingers (or, in particular, their thumbs) you need to make everything big enough so that it’s easily accessible.
If you don’t want for your customers to get frustrated and leave your website, all the elements of your page that require an action – all buttons, links, CTAs and photos – should be big enough that customers don’t have a difficult time pressing them with their fingers.
Testing mobile design on multiple devices and browsers
Whenever you add something to your website or you make any design changes, make sure to always test it by accessing the page from different devices.
A photo that may look good on a big screen can turn out to be really ugly on a smartphone screen. Testing will help you catch those situations and deal with them before releasing new pages.
The extreme way to do this is to own several, most popular devices and check how the affected page looks on all of them. Since it can be a bit pricey to get every new device that comes out, you can go for the alternative and use a software that emulates different devices and screen sizes. For example, you can use BrowserStack to check how a website look like on phones, tablets and also desktop browsers.
Since the window of attention you get from an average customer will be fairly small, you can’t have situations where your mobile page takes ages to load.
The speed of connection of many users will be a fairly limiting factor. If you place a lot of high-res graphics on your website, it will definitely look nice. However, it will also take way more time to load. It may not be a problem on desktop where we have cable connections but on mobile it’s a whole another story.
Load times are crucial. If your page doesn’t eat up much the customer’s connection, they will love you for it. You can use tools like Smush it or ImageOptim to keep the size of your website graphics low for optimal mobile performance.
How is your mobile design doing
Preparing a mobile design for your website may seem like a lot of work, but if you start right and keep track of certain limitations, creating a mobile website will require minimal work and maintenance.
Have you already decided to create a mobile design for your website? How did it go? Feel free to share your experiences in the comment section.
Do you like our posts? You might also like our product.
Give LiveChat a go during a free, 14-day trial.