your guide to a modern mobile-first web strategy

TECHBLOCKS WHITEPAPER

Modern Mobile-First Strategy

Mobile apps have become the o�icial channel to drive content and services to consumers.

TECHBLOCKS WHITEPAPER2Modern Mobile-First Strategy

Creating the Modern Mobile-First Strategy

There are many benefits of a mobile-first website strategy, with the primary one being that companies are simply responding to customer expectations. But what do we mean exactly by a “mobile-first” strategy? It’s a companywide shi� that puts emphasis on mobile-friendly websites and mobile applications as core channels for customer interactions and purchasing. In a procedural sense, it means that instead of designing a desktop site to be mobile responsive, the website is designed for smartphones first, and then the tablet and desktop-optimized sites are designed second. It’s a strategy that recognizes the dominance of mobile device usage, and proactively takes advantage of it instead of thinking of the trend as an a�erthought.

According to 2014 data from Gartner, by 2017, mobile apps will be downloaded more than 268 billion times, generating revenue of more than $77 billion.1 This will make apps one of the most o�en-used computing tools. An analyst at Gartner said “Mobile apps have become the o�icial channel to drive content and services to consumers. From entertainment content to productivity services, from quantified-self to home automation, there is an app for practically anything a connected consumer may want to achieve.” Companies that devote minimal resources to mobile o�erings do so at their peril. Most consumers are on their electronic devices a considerable amount of time, and they

want interactions with brands to always be achievable through their devices. Companies that fully embrace a mobile-first approach can e�ectively provide what their customers’ want, which is fundamentally what business is all about. Let’s go over some of the benefits.

3

Benefits of the Mobile-First ApproachCustomer Segmentation OptionsWhen people use apps on their phone to perform di�erent functions, data is created. And where there’s data, companies can uncover insights. Armed with information from users’ phone actions, brands can o�er more targeted and timely promotions, adapt to customer preferences, and ensure a higher overall ROI.

Understanding consumer trends (in real-time) gives marketers a chance to alter their strategies to best serve customer needs and drive the most spending. For instance, mobile phones provide geographic location, a data set that is being used by marketers to o�er promotions based on location. Companies are becoming smarter about cross-selling as well, by taking a closer look at mobile-initiated purchases and then correlating that purchase to a higher chance of selling another product. Armed with this data, companies can proactively suggest a promo on a new product, before the consumer even realizes that it’s the perfect choice.

Shoppers in traditional retail stores are o�en confronted by the large amount of avail-able products and the shortage of on-site sales sta� that can provide assistance. Brick and mortar stores have very lean margins, so sta�ing has to be minimal, and sometimes inadequate compared to needs. An aid to this situation is for the retailer to create mobile-friendly websites and applications that function as sales assistants. Such tools will enable shoppers to search for desired products within the store (ideally showing them stock location), as well as provide them with information about the products (videos, manuals, reviews, etc.).

O�ering such tools isn’t a novel idea for consumers, since 75% of consumers are already using their mobile devices while shopping in a store.2

Tracking within the application or the site also provides the retailers with a wealth of data that can be used to provide real-time updates or suggestions. This allows retailers to potentially enrich and alter the shopping experience while the consumer is still in the retail store.

Providing an Omnichannel Customer Experience

MODERN MOBILE-FIRST STRATEGY

CRM a Solutions – a TechBlocks Buyer’s Guide

Payments are Made EasierElectronic wallets are certainly becoming the more popular way to process and receive payments. Adoption of mobile payments by more companies and overwhelming demand by consumers is accelerating the pace of e-wallets. A mobile-first design strategy should include a seamless and secure mobile payment solution that is tightly integrated into the site and application design. Providing customers with engaging content, reviews, and real-time promos is great, but all of that e�ort can be wasted if the actual purchase isn’t easy to complete. A single click or swipe should be enough for any mobile-based transaction.

Visual Appeal – Comparing Mobile-First to Responsive DesignsDesigning a site for the desktop, and then converting it to a responsive design does not typically work. To picture responsive design, imagine looking at a page on your desktop browser, and then shrinking the browser window to a size that approximates a smartphone screen. The smaller screen simply cannot handle so many menus and options, it just isn’t designed to have so much content. Designers building a desktop site have more space to fill (sometimes they go overboard) which doesn’t lend itself to a small screen where real estate is at a premium. With responsive design, the desktop site is still the baseline. But mobile usage is eclipsing desktop usage, so a newer model of design is necessary.

With the mobile-first design, the content comes first. There isn’t any unnecessary clutter, because the designer is working within the “frame” of the mobile device screen. The best mobile sites are clean and make use of white space, even given the small screen sizes. They also possesses very clear navigation, with a minimal number of options, so users are presented with the information they need quickly. Companies that strive towards a mobile-first strategy will be able to create sites and applications that enhance the user experience, instead of hampering it.

4 TECHBLOCKS WHITEPAPER


Challenges of the Mobile-First Strategy

5

One persistent challenge of mobile-first design is matching the expectations of consumers without the technical limitation of mobile devices. Many consumers are still used to full-featured desktop sites, and might expect a certain level of function with the mobile site. The trick for developers, marketing, and design is to create a mobile site that is so easy to use and allows consumers to complete actions quickly, that the few missing advanced functions are rendered unim-portant. And then the company uses a native application to provide additional functionality and speed. Other challenges include:

Space constraints. Mobile-first design means “starting small”, and reducing content to the mobile screen size can be challenging. It’s especially di�icult for companies that o�er many types of products and services, or a complex and interactive site.

Maintenance issues. Mobile-first design means managing multiple URLs and redirects, which requires additional SEO work, and other maintenance tasks that come with handling di�erent sites.



Beginning the website design with mobile is a good approach that designers can use to develop visually appealing, uncluttered, and impactful designs. Developers should first understand that smartphones do not always support the same types of content or special features that are well suited to traditional desktop browsers.

A methodology known as “graceful degradation” where a desktop website is essentially broken down to its core elements, and only those pieces that will function well on mobile are included. This approach is undertaken when a company has a current site or application that is desktop based, and they want a truncated version available for web users. An alternative is known as “progressive enhancement” and is where the simpler mobile-first site designed for basic phones is altered to match the capabilities of advanced smartphones, tablets, laptops, and desktops. In either case, the key for developers is to focus on the user experience – to make it as seamless and productive as possible.

Developing the Mobile Strategy

6 TECHBLOCKS WHITEPAPER


3. Create a Marketing Plan (With a Splash of Social)Every company investment should include a marketing/rollout plan, and the mobile-first strategy is no exception. If your company is entering a new market with the app and site, then consider SEO tactics, viral marketing, and possibly free user trials of your new tools. In the early stages high app store rankings and reviews are supremely important.

No marketing plan can ignore social media, so ensure your new app and site circulates on your social networking sites. Consider giving social users a “beta test” of the applica-tion (a�er you are sure it works flawlessly), giving them the chance to o�er suggestions or compliments. Social sites and mobile browsing go hand-in-hand, so be sure users can easily access their favorite sites while engaging with your content. This market-ing/social plan should be in place well before development begins.

4. Explore the Revenue Model

The business model is set, and now is the time to consider revenue. The type of revenue model used with the app or mobile site will depend largely on the type of business and the company’s goals. Is it reasonable to charge users for your app? If so, then it better o�er considerable value that is readily apparent to the user base. If the app or site itself is driving purchases, upgrades, and other activities that directly produce revenue, then the revenue model is pretty clear. If the app is mainly informational, then you can con-sider an ad-supported revenue model, and o�er an upgraded version without ads. Carefully consider the possible annoyance that comes with ads compared to the possi-ble revenue. For example, if your application is providing consumers with information and videos about very high-priced items, is the presence of in-app ads worth losing customers?

7

Moving Forward – From Design to Launch

Transforming a company to a mobile-first mindset requires a few necessary steps:

1. Do the Benefits CalculationCompanies that do not have a mobile presence, or want to revamp their outdated e�orts, should first perform a standard benefits review. What is the brand trying to accomplish, enhance, or fix through a mobile site and application? This review requires looking critically at the desktop site and considering what can be done better and faster on mobile. And companies must review if consumers will indeed use the mobile site for certain transactions. Does it lend itself to the type of industry?

2. Pick the Right Vehicle for the Right GoalsOnce the goals are established, it’s time to match them up to either a mobile site or an application. A mobile site is o�en ideal for the delivery of content, simple information (store hours, directions, and contact info) and to provide positive branding information. The application is suited for purchasing, product manuals/information, and other tasks that involve greater interaction. Companies that truly are mobile-first will use both tools, keeping in mind that applications require frequent maintenance and updating, and sites are typically easier to refresh.



8

5. Design the User ExperienceBuilding a smooth mobile site or application requires the classic blend of “art and science”, with the art being the look and feel, and the science focusing on e�iciency and user data.

A primary design concern is regarding screen sizes. You want a responsive mobile design that e�ortlessly fits to di�erent mobile device screens, presenting a new layout that will automatically adjust. If you expect users to manually resize sites to your screen, then you’ve already lost their attention. They’ve already moved on.

Interactions with other applications have to be intuitive and fast. Does the user want to make a purchase? One click should take them to a simple checkout. Do they want to share a product’s features on Twitter? A simple swipe should capture the product info in 140 characters or less.

6. Put the Design into ActionA�er a design is completed and approved, it comes time to actually build the app or site. When creating the site, work with IT to ensure load times are as short as possible, even if that means scrapping some desired (but not essential) functions. Avoid plug-ins and other features that simply won’t be supported within a mobile browser. Remember the key features are ease-of-use, speed, and a clean design. People engaging with a company via mobile are o�en literally “mobile”, so be understanding of their limited time and attention spans.

Talk to the developers throughout the process to be sure the site or app looks and flows as expected.

7. Complete Testing 1, 2, 3...and 4, 5, 6Before testing the application and site, consider the expectations of today’s modern mobile user. They want to be able to access the desired information with the minimal amount of action. This information should be presented quickly, without extraneous steps or data. There also shouldn’t be any bugs, glitches, or other problems that cause the customer to not proceed from A to B.

Testing the application and site across various operating systems and browsers is essential. Beta testing amongst internal sta� (and some social followers) is crucial to help find the bugs and to propose areas for streamlining. Pay special attention to comments about slow loading times, and navigation that isn’t e�icient or sensible. Also, people don’t like giving up their time for free, so strongly consider o�ering testers a

9

Moving Forward to Mobile FirstA consumer shi� has already occurred, with a notable occurrence happening in early 2014 when internet tra�ic from mobile devices for the first time was greater than desktop-based tra�ic.3 This trend will only continue to curve towards mobile, and companies that aren’t ready with well-designed sites and applications will find themselves on the wrong side of history. By following several best practices, companies can stay ahead by making mobile a focal point of their business, one that brings in customers and revenue.



Sources1. “Gartner Says by 2017, Mobile Users Will Provide Personalized Data Streams to More Than

100 Apps and Services Every Day,” Gartner, January, 2014.

2. “75% of store shoppers use their mobile devices in-store,” Internet Retailer, April, 2015.

3. “Mobile Now Exceeds PC: The Biggest Shi� Since the Internet Began,” Search Engine Watch, July, 2014.