Advanced Mobile Marketing

Section 10—Mobile Website

Lesson 1—Responsive Design
Explain why responsive design is needed
 Hype List

Include the following on your hype list:

Wearables Real-time bidding (RTB) Mobiles Responsive Design

 Responsive Design—Definition

It is a development strategy for developing a flexible, fluid, and adaptive web experience
across digital media properties, such as:

Personal Computer Phones Tablets Phablets

Email Smart TVs Wearable Devices

 Why Was Responsive Design Conceived?

Ethan Marcotte, the creator of responsive design, stated the following:

The control which designers know in the print medium and often desire in the web medium is
simply a function of the limitation of the printed page.

We should embrace the fact that the web doesn’t have the same constraints and design for
this flexibility. But first, we much “accept the ebb and flow of things.”
 Why Should You Use Responsive Design?

• To establish a solid “customer first” presence via the web, email, or hybrid apps
that provides the visitors with a great experience
• To provide your campaign with widespread reach
• To accomplish mobile or social media engagement or advertising
• To track your customer’s journey across different platforms easily
• To define the core content for your site

Google may penalize the marketer if the product does not have the
“optimized mobile-first” experience.
 Why Shouldn’t You Use Responsive Design?

• Data may not be warranted

• You may not have enough visitors
• You may not have enough budget
• You may be afraid of technology/lingo
• The decision maker may not be seeing the big picture
• There is no advantage of leveraging the performance and
capabilities of a native app
• Your pages can be data heavy
 Why Shouldn’t You Use Responsive Design? (Contd.)

• You offer the same experience to all platforms,

not taking advantage of the uniqueness of each
device platform.
• Designers may need a shift in thinking.
• Initial setup cost is high.
• There are alternatives such as building a mobile-
specific site apart from your main site.
 What’s the Controversy?

• It is not as easy and clear to execute as it is portrayed

• It is not a standard yet and has a lot of unknown elements
• Lack of “Customer First” mindset
 What Should You Do?

Remember, it is about your customer’s/prospect’s needs. You need to:

• Watch out for industry trends. • Consider “Analytics and Measurement by

• Leverage your local power position. Design.”
• Start with an informed business strategy. • Avoid implementing your entire brand
• Develop measurable objectives. experience
• Plan to collect data. • Keep it simple and do your homework
• Get approval from your team on objectives. • Remember that it does not need to be
• Decide a timeline for executing your strategy. expensive
• Iterate your strategy, and review data once a
quarter
 Action Plan

Plan and execute in the following order:

Responsive Responsive
Hybrid App
Design Website Design Email

Native Mobile Native Apps

Web
Responsive design is an approach, not a panacea. It is a development strategy for developing a
flexible, fluid, and adaptive web experience across digital media properties.

Responsive design can be used to establish a solid “customer-first” presence. This is very beneficial
to your customers and provides a hassle free experience.
QUIZ
What is a reason for NOT using responsive design?
1

a. Frequent device updates

b. Lack of adequate traffic

c. Failure of responsive design for most websites

d. Less expensive dedicated sites

QUIZ
Who coined the term responsive web design?
2

a. Evan Marconi

b. Eddie Macroletti

c. Ethan Marcotte

d. Ed Murray
QUIZ
Which of the following screens can a responsive design impact?
3

a. Desktop

b. Mobile

c. Tablet

d. All of the above

QUIZ
A result of successful implementation of responsive design includes __________.
4

a. Reach

b. Less loading time

c. Easy implementation

d. Content adaptation
Lesson 2—Converting Non-mobile Websites
Describe various Mobile Website development options

List the do’s of responsive design

 User Expectations

Mobile users expect brands to be on mobile devices

Mobile users’ needs and expectations are vastly

different
 Mobile Web Presence

To have a mobile web presence:

Be strategic besides being tactical

Take important decisions

Take necessary actions

 Types of Websites

1. Simple Landing Page: Built to

deliver one page worth of
information such as location and
store hours

2. Promotional Site: Built to be tied to

a product, event, or short-time
promotion

3. Permanent Site: Built to be a relied-

upon destination for businesses with
frequent traffic
 Essential Elements of a Website

• Mobile-friendly information
• Quick and efficient site rendering on all devices
• Uniform branding across all marketing materials
• Appearance of important things on top
• Search optimization
• Visual appeal
• Interactive, given the popularity of touchscreens
• Efficient updating
• Integrated social media
 Website Cost—Factors

Website cost can range from free to expensive. The

cost can include the expenses made on:
• Strategy, development, and execution
• Website promotions

There are a couple of “Do it yourself” sites that are free. Example: Wix
 Mobile Website Development Options

Fully hosted Reverse proxy Cloud platform

CMS-led Responsive design

Mobile Website Development Options—Fully Hosted

Vendor-heavy option where a business delivers content and a vendor

builds and hosts simple and templated sites

Some well-known fully hosted vendors:

Google: https://developers.google.com/webmasters/smartphone-sites/)

Yahoo: https://smallbusiness.yahoo.com/webhosting/mobile
Mobile Website Development Options—Fully Hosted (Contd.)

Google supported configurations

Responsive Design: Serves the same HTML for a URL and uses CSS media queries
to determine content rendering on the client site.

Dynamic Serving: Serves different HTML for a URL depending on the user agent
and uses http reader to indicate this

Separate Mobile Site: Redirects users to different URLs depending on the user
agent and uses bidirectional links to indicate the relation between two URLs for
search engines
Mobile Website Development Options—Fully Hosted (Contd.)

Google provides recommendations and advise on:

• Commonly made mistakes
• Redirects and user-agent detection
• JavaScript usage
• Building websites for tablets
• Considerations for feature phones
• Insights into mobile-optimized websites
• Ways to improve
Mobile Website Development Options—Reverse Proxy

• Used by a vendor to repurpose existing desktop sites after detecting a

mobile-page request

• Expensive as it has higher level of customization

• SAP provides more in-depth explanations:

https://help.sap.com/saphelp_mdocs10/helpdata/en/c1/ebbe9a8a99
4942af9e7c7691ab769b/content.htm?frameset=/en/3e/5c132acd004
558ae619788e8379bcf/frameset.html
 Mobile Website Development Options—Cloud Platform

• Advanced approach and creates content with HTML5, JavaScript, and CSS3
• The vendor detects the mobile users and their devices
• Provides more control over URL structure for SEO
• For more details, refer the following platforms:
o Google: https://cloud.google.com/solutions/mobile
o Kinvey
o SAP: https://www.sap.com/pc/tech/cloud/software/hana-cloud-platform-as-a-
service/index.html
 Mobile Website Development Options—CMS-led

It fits the needs of CMS platform users. The benefits include:

• Centralized content management
• Control over both URL structure and SEO

Review and seek more information:

• Gartner’s Magic Quadrant
• Citrix:
http://deliver.citrix.com/WWSEM0114XMGARTMQ.html?gclid=CJ3Cvl3V8bwC
FU5efgodllcA0w
• WordPress, Wapple, and Squarespace
Mobile Website Development Options—Responsive Design

Responsive Design is an execution strategy and approach for developing a flexible,

fluid, and adaptive web experience across digital media properties such as:

Personal Computer Phones, Tablets, Phablets Email

Smart TVs Wearable Devices

 Why Do You Use Responsive Design?

Deciding factors:
• Development –In-house/Agency
• Revamping – Entire Program/Some Portions
• Content Creation

Benefits:
• Establishes solid “Customer First”
experience across devices
• Provides broadest reach—sustained
presence and campaigns
• Effective for mobile and social media
engagements
 Google Supports Responsive Design

Google supports Responsive Design by:

• Easily tracking a customer’s journey across
different platforms
• Forcing to concentrate on defining the core
content of the site
• Penalizing if the optimization of “mobile-first”
experience is not met
 Factors Against Responsive Design

• Data (site traffic) does not demand it

• Budget is insufficient
• Users fear technology/lingo
• Decision makers don’t see the big picture
• They don’t take advantage of leveraging capabilities of a native application
• Website could be data heavy, resulting in slowing down the site
• Experience is the same across platforms, not taking advantage of the uniqueness of
each device
• Designers and brands need a shift in thinking
• Initial set-up costs are high
• There are alternatives you can choose to build a mobile-specific site parallel to your
main site
 Do’s of Responsive Design

Consider these when going for a Responsive Design:

• Choose a large player or create a responsively designed site on your own.
Example: Squarespace
• Select pre-made responsive themes (free and paid between $30 and $100)
for WordPress sites
• Map out mobile web presence by:
• Determining your needs and resources
• Making choices; for example, GoDaddy (Business and Business Plus)
with Premium Service that includes SEO and Twitter integration
 Actionable Steps

• Study the best example (Smarties Awards –Mobile Marketing Association site)
• Start with an informed business strategy
• Develop measurable objectives
o Not more than three with specific timelines and KPIs
• Plan for collecting data
• Keep it simple—no need to implement the entire brand experience
Developing a mobile site is an important aspect of a business.

Responsive design is a useful approach to give your customers a great and flawless experience.
However, you can choose to consider other options based on your strategy and plan.

It is important to conduct an analysis on the needs of the customer before you start developing
your site or plan a strategy.
QUIZ
Which of the following is NOT an element of a good mobile website?
1

a. Pages load between 5 and 8 seconds.

b. Content fits actual screen size.

c. Information is mobile-friendly.

d. Important content is “above the fold.”

QUIZ
What is the definition of “fully hosted”?
2

a. All the work is done in-house.

b. Some of the work is done in-house.

c. All the work is done by a third party.

d. None of the above.

QUIZ
Which of the following is a benefit of a CMS-led mobile site?
3

a. Centralized content management

b. Control over URL structure

c. Control over SEO

d. All of the above

QUIZ
A responsive site is ____________.
4

a. Rigid

b. Fluid

c. Flexible

d. Adaptive
Thank You