Is Your eСommerce Site Responsive to All Users and Devices? 17 Points to Verify

Things that you lose having mobile-unfriendly design

Design optimization measures

  1. Make sure that your texts are readable across platforms. That’s the obvious one, which can be easily revealed after failing the mobile-friendly test by Google. Don’t make your users zoom or peer into a screen. Also be aware of line spacing and fonts, trying to avoid serifs.
  2. Avoid horizontal scrolling. Unless you have an image carousel, don’t bother users with horizontal swipes to see a full image or a content section. That’s annoying.
  3. Think convenient placement for your tap targets. The average pad size of an adult is 10 mm wide; so Android UI guidelines, for instance, recommend making tap targets (buttons, links, etc.) cover at least 48 CSS pixels or 7 mm. If the tap target is smaller, the spacing between it and other elements should take at least 32 CSS pixels or 5 mm.
  4. Don’t hesitate to hide some sections. A number of sections and elements grow useless on mobile phone screens. These can be landscape-oriented images that just wouldn’t fit or menu links. The latter has been long hidden under a hamburger button on many websites.
  5. Make use of category search. Generic search is quite limited for smartphones as users can see only a handful of results before they must scroll down a page. A simple and elegant solution is to design an approachable search by department and category to narrow the results and increase specificity. Amazon is an excellent example here. Not only do they sort items by department, they also provide drop-down menus with subcategories to refine results even more.
  6. Provide a predictive search bar. Even though mobile keyboards are becoming increasingly advanced, it’s still quite challenging to type an entire query. A predictive search bar that has a drop-down menu with matching items will allow users to type 2–4 letters and then see the desired product. It also may show the options that a user hasn’t even thought of.
  7. Implement a guest checkout option. Filling in all registry forms or trying to reset your password is a painful and cumbersome experience on mobile devices. So, don’t forget to allow your users to check out as guests. In terms of mobile revenue, guest checkouts bring 13 percent higher results.
  8. Create only “reasonable” pop-ups. On January 10th 2017, Google is planning to roll out another ranking change to their search engine, which will combat “intrusive interstitials” on mobile. But how do you differentiate intrusive pop-ups from “reasonable” ones?
  • Those that fade the main content making it inaccessible. They can either close after some time or wait until a user finds and carefully taps a tiny X.
  • Those that entirely cover a screen.
  • The layouts that have above-the-fold content that merely looks like a pop-up. These aren’t really pop-ups but they require users to scroll down to reach the main page contents.
  • Those that warn about cookie usage.
  • Those that ask for age verification.
  • Login dialogs providing access to private content or the content stored behind a paywall.
  • Small banners that consume a third or less of screen space.

Performance optimization measures

  1. Don’t use Flash. Again, starting with the obvious one. All software engineers have switched to the iframe method of embedding videos. It’s an up-to-date and acknowledged standard. However, if your website has been around for quite a while, it may be reasonable to investigate all its dusty, old corners for outdated video software. Apparently, old YouTube videos were embedded with <object> tags, those of Flash Player. The Google guidelines don’t recommend sticking with Flash due to performance and mobile compatibility reasons.
  2. Optimize images. Images are the bulkiest part of your website contents. On average, 65 percent of the web content is occupied by images, according to the latest HTTP archive report. So with low connection speeds, your website performance is mostly jeopardized by images. To ensure that your trump-card image hits the target on a mobile phone as well, you basically have two options. You either go for various image-optimization approaches or you simply render smaller images on mobile screens. There’s a pitfall to be aware of. If you just swap a bigger image for a smaller one using display: none in CSS, both images will get downloaded. This will increase the loading time even more. Instead, use the background image style via a DIV to load the only image for mobile. Check how your images are loaded by using Chrome DevTools right in your browser.
  3. If you can get along without jQuery, do it. OK, jQuery is indeed the best-fit library to do JavaScript code; its interface is consistent and unifying. The drawback here: It’s heavy, 30 KB to 200 KB if uncompressed. So, it’s reasonable to reconsider using jQuery for lighter options like Sprint (17 KB) or Zeptojs (5 KB) and boost your mobile performance.
  4. Employ browser caching for rarely-changing elements. Using browsing caching may work if a user visits a page more than once. Instead of repetitively loading the same images, JS or CSS, a phone or tablet will retrieve these elements from its memory and increase performance. This approach comes in handy only if you have unchanging and large libraries that must be loaded on users’ devices.
  5. GIFs are great, but it’s time for something faster. GIF animations are dated and there are faster options around. For short, animated videos, you can utilize HTML5 video or convert your GIF to Imgur’s GIFV format. This will reduce size by 10 or more percent.

Advanced measures

  1. Prioritize above-the-fold content. Think of the things your users see first once they access your site before even scrolling a page deeper and optimize that. You can load styling and JavaScript logics later. If you manage to fit into the 3-second loading deadline, you can reduce the bounce rate by about 50 percent! So, make sure that the initial experience is smooth.
  2. Reconsider the value your server requests deliver. On average, each mobile page makes 214 server requests. And the number will silently grow like mold as you gradually upgrade a website with numerous analytics trackers or ads. Every new request adds to the loading lag. Perhaps it’s time to review those requests and ask yourself whether all of them are that valuable.
  3. Adopt omnichannel shopping. Not all your customers are ready to complete a purchase immediately via their phones. Some of them use mobile phones to make decisions and compare prices while the final shopping happens at home on a desktop computer. That’s why omnichannel shopping is an emerging trend in eCommerce. It suggests that your customers can start their purchase journey on a phone, probably add some items to a shopping cart, and check out later via another device. However, we haven’t yet seen any detailed and convincing examples of implementing omnichannel shopping. So, you may be an omnichannel trailblazer.
  4. Embrace accessibility. There are more than a billion people in the world who live with either temporary or permanent disabilities. And these people are your audience too. Unfortunately, a lot of design solutions that we see today are far from being accessible and easy to navigate for this large category of users. To make your mobile design accessible, it’s worth studying W3C standards on mobile accessibility that cover both mobile web and design for apps. A thought-provoking analysis of the topic was also written by Jesse Hausler, an accessibility specialist at Salesforce. We highly recommend a deeper exploration of those recommendations. Here’re some best practices:
  • Don’t make color the only means of conveying information; use icons and texts to support your message.
  • Texts should be contrasted sufficiently to be readable for people with color blindness and low vision.
  • Label all forms to let users understand what kind of information is required.
  • Try to limit the number of forms where typing is necessary.
  • Avoid vague descriptions to links, making the target of each link clear.
  • Create concise and simple texts.

A controversial question on m. subdomains

A simple rule: Put the user before the technology.

--

--

Being a Technology & Solution Consulting company, AltexSoft co-builds technology products to help companies accelerate growth.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AltexSoft Inc

AltexSoft Inc

Being a Technology & Solution Consulting company, AltexSoft co-builds technology products to help companies accelerate growth.