[WEBINAR] Optimize Your Responsive Investment

webinar_600

 

Get the Webinar Recap

Join Branding Brand CEO Chris Mason and Forrester Analyst Peter Sheldon as they explore the tactics that leading retailers are employing to optimize their responsive web investments.

Thursday, August 6; 1PM EDT

You're considering responsive for your site, or you've already launched your responsive solution, but what now? Responsive isn't just a project; it's a long-term investment that requires continuous enhancements to ensure optimal usability, performance, and experience for all web users, regardless of device preference. 

 
Key Takeaways:
    • What leading retailers are doing to differentiate their user experience
    • Why using cookie cutter templates from your e-commerce platform vendor may not suffice
    • Why some retailers are layering adaptive mobile experiences into their responsive architecture
    • How to get smart about site change management
    • Why site testing is more important than ever
    • How to optimize your responsive site to deliver the best customer experience

Get the Webinar Recap  

Topics: Trends Recap Company Webinar

What Really Happens When Smartphone Users Encounter Site Errors

29% of smartphone shoppers will find another site that works better on a smartphone when they encounter site errors, according to Google.

Site issues come in all shapes and sizes: slow loading speed, missing images, unplayable video, faulty redirects, and more.

According to Google's Consumer Barometer Survery, 44% of smartphone shoppers reported they encounter site issues "often" or "sometimes." So, how do users act when they come across an error? 

  • 18% continue to use the same site on a smartphone
  • 23% try to use the same site via a smartphone again at a later time
  • 49% use the same site on another device
  • 29% find another site that works better on a smartphone
  • 10% call or visit the store

Learn more about common site errors:

Learn how to approach common site issues:

Topics: Trends

This Week at Branding Brand: July 18-24

Our VP of Finance & Business Operations Allen Lu modeled for the camera, and Branders began collecting items for the Homeless Children's Education Fund.



Topics: Company

[INFOGRAPHIC] The Majority of Top E-Commerce Sites Use Separate Smartphone Sites

Although the best way to design a website is hotly debated, the most common ways are adaptive, responsive, and separate.

Adaptive

  • Also known as dynamic, adaptive design uses the same URL as the desktop site but detects the type of device and serves mobile-only assets when necessary.

Responsive

  • Responsive design uses the same URL and assets as the desktop site but resizes and reorganizes content and images fluidly to adapt to screen size.

Separate

  • Commonly called m-dot or t-dot, separate design resides on a different URL than the desktop site and serves mobile-only assets.

To gain an unbiased insight into how the biggest online retailers are designing their sites, we analyzed the top e-commerce sites in the world to discover:

  • Type of design implemented
  • Average page load time
  • Mobile page weight compared to desktop page weight

 

 66% of the top 50 e-commerce sites use separate sites for smartphones and 72% use responsive design for tablets.

Key Takeaways:

  • 66% of the top 50 e-commerce sites designed separately for smartphones and 72% designed responsively for tablets.
  • Although separate mobile sites are typically smaller than adaptive mobile sites, redirects increase page load time slightly for separate sites.
  • Mobile site speed is almost identical for websites using separate and adaptive design.

No matter how you design your site, make sure you follow our best practices for a fast mobile site. If you're going responsive, here are 4 tips for designing a successful responsive site.

Download our Benchmarking Mobile Performance: Page Load Time report to discover more about measuring your digital performance with site speed.

Get Your Free Report

Topics: Trends Report Solutions

Case Study: Increasing Conversion on a Responsive Site

When one of our clients decided to replatform their desktop site to make their website responsive, they realized their mobile conversion was much lower than the industry average and decided to bring Branding Brand in to identify and solve their mobile performance issues.

After launching their new optimized site, our client experienced major increases in their KPIs:

A Branding Brand client experienced massive increases in mobile KPIs after optimizing its responsive website.

We were able to achieve this by identifying the problem, optimizing the site, launching it in a 50/50 multivariate test, and analyzing the results.

Identifying the problem:
With the help of our analysts and optimization experts, we were able to identify the most opportunities of optimization on product index pages and checkout.

For an initial analysis, our analysts identified pages with high bounce and exit rates and low add-to-cart rates. Then, they analyzed the funnel conversion rate to identify checkout pages that had low continuation rate.

With our extensive list of multivariate tests and results from working with over 200 of the world’s leading retailers, our optimization experts were able to pinpoint changes and enhancements based on past experience and successful test results. 

Optimizing the site:
For product index pages, we implemented updates for the header, search bar, banner, filtering, and product images.  

Branding Brand optimized a responsive site's product index pages and increased mobile site pageviews by 123%.

1. Header

  • Before: Users couldn’t navigate to a different category directly. They had to go back to the homepage and start over.

  • After: A menu button that allows users to navigate any category from any page on the site.

2. Search

  • Before: The search bar wasn’t very intuitive or placed well on the fully-responsive site. It blended in with the “Shop” link.

  • After: The search bar is independent of all other assets. The words “Search” and a magnifying glass are inside the field to clearly indicate its functionality.

3. Banner

  • Before: The page was dull and did not encourage users to shop the page.

  • After: A relevant promotional banner displays at the top of the page, which adds color and interest.

4. Filter

  • Before: Users weren’t able to filter the product index page results, which forced them to scroll through all available products.

    After: Filter options pull dynamically from the desktop site.

5. Product Images

  • Before: Large product images created a mass-scrolling page and only displayed one product at a time.

  • After: Resized images display in a grid, which shows two products across.

In checkout, we updated the status bar, payment methods, credit card input, "Continue" button, and promo code.Updates to a responsive site's checkout page helped increase mobile site conversion by 37%.1. Status Bar

  • Before: Initially, the site offered no indication of where the user was in the checkout process.

  • After: A status bar clearly identifies the number of steps in checkout as well as the current step.

2. Payment Methods

  • Before: Users were forced to scroll to find the gift card payment.

  • After: Gift cards are able to be easily selected from the listed payment methods.

3. Credit Card Input

  • Before: After typing in the credit card numbers, the type of credit card also had to be selected.

  • After: The credit card number automatically detects the card type.

4. "Continue" Button

  • Before: The button was not a clear call-to-action and was placed at the top of the page.

  • After: The button appears at the bottom of the form, and an arrow indicates that the user would move on to the next step.

5. Promo Code

  • Before: The promo code was a link that was located at the top of the page and was not a useful call-to-action.

  • After: The promo code is now a field and is in an accordion.

Launching the Optimized Site:
To test out the changes, the site was launched as an A/B test with 50% of traffic going to the fully-responsive site and 50% of traffic going to the channel-responsive site.

 Analyzing the Results:
The changes made show incredible increases in key performance indicators. After making changes to the navigation and updating the product index pages, total pageviews increased 123%. Visitors viewed approximately 7 pages per visit (PPV) on the optimized site compared to 3 pages on the responsive site, a 113% increase in PPV.

As more pages were viewed, orders increased 44% and conversion increased 37%More orders and higher conversion increased revenue by 29% and revenue per visit by 23%.

 What's the Takeaway?
Our client expected responsive to solve all of their problems, but the truth is that there’s a lot more that goes into a successful mobile site. It’s not good enough to have a mobile site. You need to engage your customers with an amazing experience and serve them before someone else does. The best mobile websites are always improving.

In this case, our channel-responsive site used the best qualities from responsive design without limiting the overall experience and offered the following benefits:

  • It didn't compromise the brand by trying to fit all of its unique features into a one-size-fits-all template.
  • The design provided a unified experience with endless possibilities, which continues to keep the company as a front-runner in the competitive mobile market.
  • Channel-responsive design allowed for flexible, independent design between the desktop and mobile sites.

In the longrun, the unique benefits in having a channel-responsive site are:

  • Mobile solutions can have a separate roadmap for success from the desktop site.
  • A/B tests are possible without changing anything on the desktop site.

If you're currently looking to design a responsive site, follow our responsive design best practices to give your customers the experience they deserve.

Did you miss our "How to Optimize Your Responsive Solution" webinar with Forrester?

Get the Webinar Recap

Topics: Trends Report Solutions

Fast Mobile Sites Encourage Shoppers to Browse and Buy

Customers often browse and compare options online before making a purchase. The more pages they visit, the more likely they are to buy. A study of 60 of our clients' mobile sites reveals that the average mobile shopper views 5 pages per visitThat's not a lot when you consider a typical conversion path, which may include the homepage, one or more category pages, one or more product pages, the cart page, and checkout.

How can you get customers to stay on your site longer? One easy way is to make your mobile site faster. 

Page load time is a major factor in user experience because it directly impacts pageviews as well as exit and bounce ratesMobile customers view fewer pages per visit (PPV) and ultimately abandon sites when mobile sites are slow. 

According to a deep-dive analysis into 100 of Branding Brand’s mobile sites, conversion is at its best when customers view 6 or more pages on a mobile site. When mobile shoppers view six pages instead of five, smartphone site conversion increases 64%; tablet site conversion increases 55%Tweet This

When mobile shoppers view six pages instead of five, smartphone site conversion increases 64%; tablet site conversion increases 55%.

 

Download our Benchmarking Mobile Performance: Page Load Time report to discover more about measuring your digital performance with site speed.

Get Your Free Report  

Topics: Trends Report

4 Easy Tips to Make Your Mobile Site Faster

Branding Brand engineers are always finding ways to optimize our clients’ sites. We have implemented and tested many different methods to improve site speed, and we’ve developed a list of best practices to help you get started. 

Here are four tips to help decrease load time: 

Compress JavaScript and CSS to downsize and remove excess files.

 

Use sprite sheets instead of separate images to reduce the number of downloadable items.

 

Store content temporarily to reduce the number of files downloaded.

 

Use the Web Symbols font in place of simple graphics because it is scalable and loads faster than images
 

Why is site speed so important? Learn more about how slow mobile site speed negatively impacts pageviews.

Topics: Trends

4 Steps to Design a Successful Responsive Site

ResponsiveDesign

The word “responsive” means different things to different people, and sites can have varying degrees of responsiveness. In this article, we define responsive design as the approach of creating websites that adapt to a range of devices, including smartphones, tablets, and desktops, to improve user experience.

If you decide that responsive web design is the best solution for you, follow these four steps: 


Develop your strategy
Before you start designing, creating content, or developing your site: 

  • Analyze your current solution(s).
  • Identify the goals of your new site.
  • Determine improvements that will help you achieve your goals and increase conversion across all devices.

Designing a responsive site must be approached with thoughtful consideration. Build the proper foundation for responsive design by taking the extra time upfront to communicate with all stakeholders. It will help set realistic expectations and build out a logical implementation roadmap to create a successful responsive site.


Design for mobile first
Once you have your strategy, designing for responsive should begin with mobile in mind. Consider smaller viewports first to ensure designs aren’t constrained by content and vice versa.

Build out your responsive vision by starting with wireframes. Use data from your current solution(s) to influence hierarchical decisions, and customize content per device.

When moving on to visual design for smartphones and tablets, consider tappable space (44px by 44px @1x), optimized images, usable gestures, and font sizes.

If the viewport is small, it doesn’t mean the text has to be tiny, too. Users must be able to read easily, and they should never be tempted to pinch-and-zoom.

Place calls-to-action above the fold, condense copy into tabs or accordions, and keep content in the same general location and order to provide a consistent experience. Your best customers will likely visit your site from a variety of devices.

For example, if a customer frequently visits your site on a desktop computer and is accustomed to navigating five categories within the header, moving those categories to the footer or rearranging the order when viewed on smartphone would provide a poor user experience.

Certain information is important to desktop users, but that doesn’t necessarily mean it makes sense for smartphone customers. Make the most of your space and prioritize content for smaller screens.


Collaborate with your developer
Projects are often constricted by timelines, so it’s very important to consistently communicate with the developer who is implementing your vision. Establish an agile process with scheduled reviews during each project phase and understand development timelines to prioritize critical features and functionality. 

Slow mobile sites force users to abandon the experience, so be flexible and willing to tweak designs if the user experience will ultimately suffer. 

Even if it looks great in Photoshop, it doesn’t mean it works well in reality. Limit the use of layouts that require JavaScript, which can increase page load time and have a negative impact on conversion.


Never stop optimizing
After launching your new site, it’s important to continuously optimize your responsive site. Compare pre- and post-launch data — paying special attention to the checkout funnel — to ensure lift is occurring in the new solution, and perform multivariate tests to discover what works best for your site.

Did you miss our webinar about optimizing your responsive investment?

Get the Webinar Recap

Topics: Design Trends Solutions

Slow Mobile Site Speed Negatively Impacts Pageviews

We’ve already discovered how longer page load time leads to higher exit and bounce rates on mobile sites, but did you know slow mobile site speed directly impacts pageviews, too?

Pageviews steadily decrease across mobile sites as page load time increases. A study of 30 sampled Branding Brand clients revealed that smartphone users view almost three fewer pages per visit, and tablet users view almost four fewer pages per visit if a page doesn’t load within five seconds. Tweet This

Smartphone users have the highest drop-off rate between 5-7 seconds when a page is loading, while tablet users begin to drop off just after 2 seconds. Tweet This

When loading a site, smartphone users have the highest drop-off rate between 5-7 seconds, while tablet users drop off just after 2 seconds.

Smartphone Sites

Load Time
(seconds)*
Drop Off per Second
(pages)
0 - 4.9 -0.4
5 - 6.9 -1
7 - 9.9 -0.2
10 - 29.9 -0.1

*After 30 seconds, there is no significant increase in pages viewed on smartphones.
 

Tablet Sites

Load Time
(seconds)**
Drop Off per Second
(pages)
0 - 3.9 -0.9 
4 - 6.9 -0.4 
7 - 19.9 -0.1 

**After 20 seconds, there is no significant increase in pages viewed on tablets. 

Download our Benchmarking Mobile Performance: Page Load Time report to discover more about measuring your digital performance with site speed.

Get Your Free Report

 
Related resources: 
Topics: Trends

Q2 REPORT: 52% of All Smartphone Shoppers Use iOS 8

52% of all smartphone shoppers used iOS 8 in Q2 2015.

We've consistently seen more smartphone shoppers using iOS devices than Android, but now, a single operating system version is the leading source of smartphone visits. In Q2 2015, 52% of all smartphone shoppers used iOS 8, according to new data from the Branding Brand Mobile Commerce Index. iOS 8 also generated 56% of all smartphone revenue in Q2 2015. (Tweet This)

The Q2 Quarterly Mobile Trends report analyzes data from a sample of 100 mobile sites running on Branding Brand's platform from April 1 - June 30, 2015. The report reveals more smartphone users are adopting Android's latest OS version Lollipop. In Q2 2015, Lollipop accounted for 12% of all smartphone visits and 32% of Android visits, up 225% quarter-over-quarter.

View full report

Catch up on the Q2 monthly trends:
Topics: Trends Report

Mobile Site Speed Directly Affects Exit and Bounce Rates

Mobile site speed can make or break the user experience. Slow sites typically have much higher bounce and exit rates than fast sites.

First, let’s distinguish what bouncing versus exiting means.

  • Bounce: the user visits one page then leaves the site
  • Exit: the user visits two or more pages then leaves the site

There are two types of people who bounce: users who never intended to enter your site and potential customers who want to be on your site but leave because the experience is frustrating.

Ensuring your site is running quickly is one of the best ways to improve the user experience. Smartphone and tablet users who bounce experience almost twice the load time as users who continue shopping on the site, according to a sample of 30 clients. Exit rates (which include bounces) steadily increase on smartphone and tablet sites as page load time increases.

If a page doesn’t load within 5 seconds, smartphone site exit rate increases 10%; tablet site exit rate increases 5%.
If a page doesn’t load within 5 seconds, smartphone site exit rate increases 10%, and tablet site exit rate increases 5%. 
Tweet This  
 

Smartphone Sites
Load Time
(seconds)*
Exit Rate Increase
(per additional second)
0 - 3.9 +1.1%
4 - 5.9 +3.7%
6 - 6.9 +3.2%
7 - 9.9 +1.3%
10 - 29.9 +0.4%
 
Tablet Sites 
Load Time
(seconds)*
Exit Rate Increase
(per additional second)
0 - 3.9 +1.5%
4 - 6.9 +0.9%
7 - 9.9 +1.3%
10 - 29.9 +0.4%

*After 30 seconds, there is no significant increase in pages viewed on smartphones or tablets.


Download our Benchmarking Mobile Performance: Page Load Time report to discover more about measuring your digital performance with site speed.

Get Your Free Report



Related resources: 
Topics: Trends

June Mobile Commerce Index Report Is Live

14% of all online revenue was generated by smartphones last month, according to the Branding Brand Mobile Commerce Index for June. Last month, smartphone's share of total online revenue increased 40% year-over-year, from 10% in June 2014 to 14% in June 2015, while desktop's share decreased 5%. Mobile Revenue June 2015

Additionally, smartphone conversion continued to rise. In June 2015, average smartphone conversion was 1.20%, a 12% year-over-year increase.

The report samples 50 U.S. retailer mobile sites running on Branding Brand's platform. Click the link below to view the full report.

View Full Report

Topics: Trends Report