Category: Mobile

smartphone

Why You Need to Optimize Your E-Commerce Website for Tablets in 2014

Top 3 Reasons Why You Need a Tablet Website in 2014

Here’s a bold prediction: 2014 will go down in Internet retailer history as the year tablet commerce becomes mainstream.

OK, maybe it’s not that bold. For starters, tablets were one of the top selling gadgets this past holiday season; Walmart reports that tablet sales on Black Friday doubled between 2012 and 2013. And with tablet traffic climbing steadily month-on-month, more retailers are seeing tablets become an integral part of their e-commerce growth.

If you, like many other e-commerce executives, are considering if and how to prioritize your tablet commerce strategy in 2014, consider the following three facts.

Reason 1. Tablets Adoption Rates Are Growing Faster Than You Think

Gartner research predicts over 265 million tablets will ship in 2014. Just how many is that? To put this number in perspective, the number of tablets that will ship in this year alone is equivalent to 2/3 of the population of the US.

That’s a lot of tablets, and their adoption is increasing at the expense of desktop computers.

Over the next three years, Gartner expects a 10% decrease in the number of desktop computers manufactured. With more people adopting tablets, it’s likely that we will see the number of the tablets made and sold increase by 40% by 2017.

The trend of tablet replacing desktop is also happening on the individual consumer level. Google reports that desktop usage drops over 75% once a person buys a tablet. More than 50% of these people say they prefer to shop on on tablet over a PC.

When you consider the convenience of using a tablet to browse the web over firing up a laptop, it makes sense that customers are choosing the mobile alternative to access the web.

Reason 2. A Standard Desktop Website is Not Ideal for Converting Tablet Customers

Some tablets may only be a few inches smaller than a desktop screen, but the way that visitors interact with them could not be more different.

Chances are you own a tablet yourself or are even reading this post on one right now. Think about the way you hold a tablet and how you make purchases.

With desktop you rely on the precision of your mouse to scroll and click through products but with tablet you tap, pinch and swipe the screen to move through the shopping journey.

Serving up the desktop website to a tablet screen is not good enough. Buttons need to be bigger, product images should be better quality to take advantage of Retina screens and all interactions must be touch-friendly.

Failing to make these simple optimizations just makes it harder for your tablet visitors to purchase products and increases the likelihood they will turn to another site. Studies show that user-experience on mobile devices is critical for e-commerce conversion rates; 40% have turned to a competitor’s site after a bad mobile experience.

With all signs pointing to tablet, you can safely bet that many of your competitors are already accounting for tablet in their web strategy.

Reason 3. Customers Are Spending More on Tablets

The 2013 holiday season revealed that consumers use smartphones to browse and tablets to check-out. IBM reported that almost 20% of all online sales happened on tablets, which is double the amount of sales that occurred on smartphones.

Typical tablet users have more money and spend more per order overall. On average, tablet shoppers spend 20% more per purchase than regular desktop customers and 72% say that they make purchases once a week from their tablets.

Let’s Recap

The strong adoption rates, purchasing habits, and relative wealth of tablet customers, are already driving up tablet conversion rates, average order value, and other e-commerce metrics.

Starting this year, tablets will emerge as the shopping device of choice for consumers, who, in turn, will use their tablets to browse the web — and buy your products.

It goes without saying that if you want to capture the most e-commerce dollars online, a tablet website will need to be part of your mobile strategy in 2014.

(more...)

Design

Advanced Mobile Web Design Techniques

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before

Until recently, creating mobile web designs that look and feel like native apps
has pretty much been an impossible dream. There are plenty of
creative workarounds to try
and bring that native ‘feel’ to mobile web browsing, but so far we’ve struggled
to bridge the gap between native and the web.

However, a slew of new, high-powered smartphones is allowing designers to
finally unleash complex, performant, native-feeling smartphone UI patterns —
designed and built for the web. These patterns are blurring the lines between
native apps and the web.

Take Style.com — their new adaptive website is an
interesting example of how to provide a great user experience at different screen-sizes,
while also targeting different device capabilities. This has led to some truly
advanced mobile designs that work extremely well on recent devices.

In this post, you’ll find five awesome design patterns from Style.com that
you’ve likely never seen before while browsing the web on a smartphone.

1. A New Kind of Calendar

Web-based calendars on mobile devices have always been a pretty terrible
experience. This is why most designers avoid calendars like the plague, opting
instead for a different design pattern like a simple list of dates.

However, by getting a little creative with carousels and some JavaScript magic,
you can create very usable calendars for users on mobile.

Double carousel calendars

On Style.com, the fashion show calendar was created by binding two carousels
together to help users easily browse through dates and events. That’s right:
double carousels.

2. Dynamic Content in Off-Canvas Flyouts

Off-canvas flyouts are areas of the page that live out of the viewport until a
user taps or swipes the appropriate area. They have become a primary navigation
pattern for mobile in both native and web apps, and you can even find them on a
handful of desktop websites too.

Most web pages use off-canvas flyouts to simply hide menus and other static
content, but it’s possible to use them to display a whole host of other dynamic
content too.

On Style.com, both static and dynamic content are placed off-canvas. Primary
navigation is hidden within an off-canvas menu on the right-hand side, while on
the left-hand side of the header a secondary off-canvas flyout reveals a user’s
recent history on the site.

A user's history on style.com
A users’ history on Style.com

style.com with no menus open
Off-canvas flyouts closed

static navigation menu
Static navigation menu

The recent history includes pages, as well as individual slides from fashion
shows. Seeing as Style.com is a fairly
content-heavy website,
it’s a great feature for users who want to review their favourite content after
browsing through the site.

This technique uses the WebKit
localStorage paired
with the off-canvas system Mobify developed in-house, called
Pikabu. There are a bunch of off-canvas libraries
available, you can also check out David Bushell‘s
Responsive Off-Canvas Menu,
and Christopher Yee‘s Pushy.

3. Pinch to Zoom in Galleries

Pinching to zoom text is generally regarded as the sign of poorly formatted
content — but images are a different case entirely.

Just like with native maps and images in apps, users frequently want to zoom
into pictures on the web to see more detail.

Style.com has progressively enhanced their many image galleries so that users
can zoom into any slide and view the image in finer detail. However, they’ve
done so in a way that does not zoom into the viewport — just the
container that the image is in.

style.com inline pinch to zoom for images
style.com zoomed in images

Since this feature requires a fair amount of processing power, it has only been
enabled for users with Retina iOS smartphones. Remember, it’s important to
treat performance as a design feature, so make sure that complex features are
only turned on for devices that can support them in a performant way!

At Mobify, we use a device’s pixel density (among other factors) to estimate how
powerful the device is. This allows us to ensure that we provide an experience
that works wonderfully on devices that can handle it — without worrying
about breaking the experience on older devices.

To replicate this viewport-constrained, pinch to zoom image functionality, check
out the popular hammer.js library.

4. Huge Image Carousels

There are two main reasons why large image carousels are a pain to implement on
mobile: performance and navigation.

But if you overcome both of these challenges, you can create a very native-feeling
image browsing experience to really take advantage of all those wonderful high
DPI screens out there.

Challenge #1: Performance

The first challenge is a performance one: devices are not usually powerful enough
to render many objects in a row.

Imagine an image that is as big as a device’s screen (or twice as big if it’s a
Retina device). Now, since it’s an image carousel, imagine a few dozen or even
hundreds of those kind of images next to each other in a row. How wide will
it be?

On Style.com, one particular image carousel came in at more than 80,000px
wide. Yikes.

Most mobile browsers crash just trying to render that many elements on page —
even if they are just empty placeholders with no media content.

To get around this, Style.com has optimized image carousels so that inactive
slides take no space on the page. Using the DOM rewriting properties of
Mobify.js, images are requested on-demand only, and thus the
amount of CPU resources required for their rendering is significantly lower.

In some cases this made the mobile gallery up to 10x smaller (from 6.2MB down
to 650kB on one page).

Challenge #2: Navigation

The second challenge was around navigation. If you have all of these beautiful
images in a long row, how can you quickly move between them?

Native alphabet scroller vs. Style.com alphabet scroller

The answer lay in creating a grid view from the carousel HTML. This can be done
relatively easily by changing the image sources and CSS.

5. Native-Like Alphabetical Lists

An alphabetical index is a great way to help users scroll through long lists of
items. Apple provides one to help users select contacts and music in iOS, but
it’s proven to be pretty difficult to bring this functionality to the web in a
way that works as well as its native counterparts.

Native alphabet scroller
Native alphabet scroller

Style.com alphabet scroller
Style.com alphabet scroller

On Style.com, this design technique been achieved using a double carousel (just
like the calendar!) and iscroll.js. And, with a
new spin on it, the alphabetical list only exists within the list’s container,
so other content on the page isn’t affected!

Conclusion

Until recently, the difference between browsing the web and using a native app
has been clear to anyone who uses a smartphone.

But as devices become more powerful, and responsive and adaptive techniques
become more sophisticated, it’s increasingly possible to blur the boundaries
between native and web. Style.com is one such example of how you can use
adaptive techniques to create some really interesting features that otherwise
wouldn’t have been possible to bring to users on mobile.

So with more and more people progressively enhancing the web to take advantage
of the capabilities of modern devices in this manner, it’s likely that we’re
about to see an explosion of truly advanced and noteworthy mobile web
designs. Exciting!

The techniques in this post were developed by the Style.com team and Anton
Bielousov, one of Mobify’s engineers. If you have any questions about them,
feel free leave a comment or reach out to Anton
directly @bielousov.

And if you’ve recently used a mobile or responsive website featuring some cool
design patterns that felt completely native, let me know in the comments!

(more...)

smartphone

Weekly Web & Mobile Creativity

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week. You may also like to browse…

(more...)

smartphone

How To Simplify Mobile App Data With Google Analytics And Tag Manager

Information about customers has never been available on the scale it is today. Businesses are learning new ways to leverage data to improve themselves on a daily basis. They’re realizing that data collection and data analysis have a measurable return on investment, and decision-makers are asking to see them. As […]

(more...)