TECHBLOCKS WHITEPAPER
Modern
Mobile-First
Strategy
Mobile apps have become the official
channel to drive content and services to
consumers.
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
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
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
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
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
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
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
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.

Your Guide to a Modern Mobile-First Web Strategy

  • 1.
    TECHBLOCKS WHITEPAPER Modern Mobile-First Strategy Mobile appshave become the official channel to drive content and services to consumers.
  • 2.
    TECHBLOCKS WHITEPAPER2 Modern Mobile-FirstStrategy 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 Whenpeople 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 MadeEasier 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 theMobile-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 websitedesign 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 aMarketing 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 theUser 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 shifthas 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.