Speed up your ecommerce website and improve website performance - Yottaa logo

Headed to eTail East?

If you will be attending eTail East in Boston on August 19-21, stop by the Yottaa booth for a free website performance evaluation.

Retailers such as Carter's, The Container Store, Lands' End, and many more have been able to improve site performance up to 60% and increase online conversions up to 20% using Yottaa.

Click the button below to schedule your free site performance evaluation at eTail East!

Schedule Evaluation

The Yottaa Ecommerce Blog

Last updated on December 29th, 2015

Mobile OptimizationLast week we blogged about “mobile first” and how it’s a bit more nuanced of a concept than you might think. While we covered project strategy and overview, there’s one big area we left out of our discussion of mobile optimization: specific design considerations.

Designers and marketers have been thinking about how their apps appear on mobile for years. But it’s only recently that has the tide shifted so far toward mobile consumption that mobile presentation now unequivocally deserves equal, if not greater, attentionOur own study, albeit small in scope, finds that retailers saw an average of 47% of traffic from mobile devices over the recent holiday season.  Other reports found nearly the same figure, while some individual retailers reported much higher mobile traffic through the end of 2014.

So what what are some specific things can designers and marketers do to make sure their “mobile first” ideology comes through with a successful design?  Here are three tactics to get started.

3 Mobile Optimization Tips for UX Design

1. Make sure that all text is at a readable level.

This advice seems obvious, yes, but it’s not yet been adopted by a surprising number of sites, even blogs and news sites where reading text is the primary activity.  For instance, on the bus this morning I struggled to see the tiny body text of an article on Salon.com, a site that I imagine gets a ton of mobile traffic from users in situations exactly like the one I was in. They seem to have eschewed a mobile-optimized site, however, in favor of building a native phone app. In the commuting context I was not about to download a new app just so that I could have an easier time of reading one article, especially when my connection was spotty. I squinted through half the article before clicking back to Twitter.

Google is in the process of rolling out a new mobile-friendly categorization for its results pages that is dependent in part on criteria that targets this exact problem. Google’s advice, and ours, is that you should show the user the right size body text right away, no matter what device.  That means the user should not be required to pinch/zoom or double-tap to achieve a readable text size — and certainly should not be required to exit the page to go to an app store.

That’s because demanding any actions of your user beyond whats absolutely necessary is an invitation for errors and lost attention. Plus, users are now savvy enough to understand that options may be hiding in a panel or behind an icon, so there’s no reason to make the user navigate distractions in order to achieve a text-only view. Your marketing team or writers worked really hard on the copy — make the text star of the mobile page!

P.S. — For examples of text layout for mobile done right, visit an article on Grantland.com or BostonGlobe.com. They are both excellent responsive web design apps that size body text appropriately and offer a largely distraction-free reading experience.

2. Use SVGs for icons so they are not pixelated on a mobile phone when scaled.

Not long ago, scalable vector graphics (SVGs) were stuck in the margins of the web thanks to poor browser compatibility. Today, the format has reached nearly universal compatibility as older versions of browsers like IE are fading from relevance.

As its name suggests this format is scalable, meaning SVG graphics work with any size screen and any resolution. That’s because they are not comprised of thousands of individual “dots,” as bitmapped image formats like PNG and JPG are — instead the graphics are generated and displayed by the browser according to XML instructions. This makes the format perfect for icons, most of which are based on vector graphics anyhow.

3. Place calls to action above the fold in the hero section.

If you go by the maxim of placing a call to action above the fold on your desktop site, why would you abandon the practice for mobile?

Often when sites are not created mobile first, a large header/hero area becomes overly elongated, thus pushing important content down and out of view. That’s not always the case, but if it is, fixing it is step one. For instance, if you have an RWD site you could use contextual optimization to dynamically replace the large hero image with a smaller, mobile optimized image just for phone users.

On the other hand if you don’t subscribe to the notion of putting a CTA above the fold — and there’s legitimate debate around this — consider what we’ve said about how mobile users behave. In the error-prone mobile environment, your goal should be to minimize the actions and time required to put someone on a path to your most desirable conversion scenario, whether that’s to read your material, call your number, or convert on a purchase.  Studies have proven that desktop users don’t really mind being forced to scroll, but mobile users are a whole new kettle of fish.

Yottaa Ebook A Designer's Guide to Web Performance Download

Let's speed up your ecommerce site, and enhance your user experience.

Fill out the form below to find out how Yottaa can benefit your organization.