If you're not mobile, you're not in business. So why are the majority of businesses putting mobile second in their web design strategy? In this guide we look at how the recent shift toward a mobile-first web design approach can transform your business through tailored content and an enhanced customer experience. Your Guide Includes: - A Review of Mobile First vs. Mobile Responsive - The Benefits of a Mobile-First Approach - Common Challenges of Going Mobile First - A Step-by-Step Implementation Guide

1. TECHBLOCKS WHITEPAPER
Modern
Mobile-First
Strategy
Mobile apps have become the official
channel to drive content and services to
consumers.

2. TECHBLOCKS WHITEPAPER2
Modern Mobile-First Strategy
CreatingtheModern
Mobile-FirstStrategy
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 shift 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 afterthought.
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 often-used computing tools. An analyst at Gartner said “Mobile apps have become the
official 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 offerings 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 effectively provide what their customers’
want, which is fundamentally what business is all about. Let’s go over some of the
benefits.

3. 3
Benefitsofthe
Mobile-FirstApproach
Customer Segmentation Options
When people use apps on their phone to perform different functions, data is created.
And where there’s data, companies can uncover insights. Armed with information from
users’ phone actions, brands can offer 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 offer 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 often confronted by the large amount of avail-
able products and the shortage of on-site sales staff that can provide assistance. Brick
and mortar stores have very lean margins, so staffing 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.).
Offering 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

4. Payments are Made Easier
Electronic 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 effort 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 Designs
Designing 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
Modern Mobile-First Strategy

5. 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 difficult for companies that offer 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 different sites.
TECHBLOCKS WHITEPAPER
Modern Mobile-First Strategy

6. 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
Modern Mobile-First Strategy

7. 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 (after you are sure it works flawlessly), giving them the chance to offer 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
offer 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 offer 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
MovingForward–
FromDesigntoLaunch
Transforming a company to a mobile-first mindset requires a few necessary steps:
1. Do the Benefits Calculation
Companies that do not have a mobile presence, or want to revamp their outdated efforts,
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 Goals
Once the goals are established, it’s time to match them up to either a mobile site or an
application. A mobile site is often 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.
TECHBLOCKS WHITEPAPER
Modern Mobile-First Strategy

8. 8
5. Design the User Experience
Building 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 efficiency and user data.
A primary design concern is regarding screen sizes. You want a responsive mobile design that
effortlessly fits to different 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 Action
After 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 often
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, 6
Before 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 staff (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 efficient or sensible. Also,
people don’t like giving up their time for free, so strongly consider offering testers a

9. 9
MovingForwardto
MobileFirst
A consumer shift has already occurred, with a notable occurrence happening in early 2014
when internet traffic from mobile devices for the first time was greater than desktop-based
traffic.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.
TECHBLOCKS WHITEPAPER
Modern Mobile-First Strategy
Sources
1. “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 Shift Since the Internet Began,” Search Engine Watch,
July, 2014.