CP3401/5636

Mobile Presence

JCU CP3401/5636 1
Case Discussion 1
Building a Mobile Presence

• What are the key differences between user experience

on a Web site and on a mobile device?
• Why would a mobile Web site or app from the same
merchant need different content or functionality?
• In which cases would a merchant want to develop a
mobile app over a mobile Web site?

JCU CP3401/5636 2
Mobile First Web Design

• Instead of creating a full-featured design for a desktop

Web site that then needs to be scaled back, mobile
first design focuses on creating the best possible
experience given mobile platform constraints and then
adding back elements for the desktop platform,
progressively enhancing the the functionality of the
site.

• What are the advantages for this approach ?

JCU CP3401/5636 3
Mobile First Web Design

• What are the advantages for this approach ?

• forces designers to focus on what is most important

• helps create a lean and efficient mobile design

• Cons
• more difficult for designers who are more comfortable with
the more traditional process (Byers, 2013).

JCU CP3401/5636 4
Responsive Web Design

• three key design principles involve using flexible grid-

based layouts, flexible images and media, and media
queries.

• Same HTML code and design for each device,

• Use CSS to adjust the layout and display to the screen’s
form factor.

• offering a consistent experience

• can plan holistically for all devices with a single web
development team
JCU CP3401/5636 5
Responsive Web Design

Pros Cons
• One URL for all • Careful planning
content required, could be a
• A streamlined user costly activity to
experience redesign the
traditional website to
• Flexible orientation responsible mobile
• No redirects version

JCU CP3401/5636 6
Responsive Web Design

• Common mistake:
• Data bloat / Page bloat refers the ever increasing size
of modern web pages.
• You do have to have mobile users download full-size
images meant for big screens and fast speeds.
• Try to reduce HTTP requests and minimize CSS and
JavaScript. Load visible content first and defer
everything else.

JCU CP3401/5636 7
Adaptive Web Design
(Dynamic Serving)
• the server detects the attributes of the
• using predefined templates based on device screen
size along with CSS and JavaScript,
• loads a version of the site that is optimized for the
device.

• Dynamic serving is a resource-intensive solution

JCU CP3401/5636 8
Adaptive Web Design
(Dynamic Serving)
Pros Cons
• A custom user • Content forking.
experience
• Easier changes
• Faster loading
• Single URL

JCU CP3401/5636 9
Adaptive Web Design
(Dynamic Serving)
• Common mistakes:
• Faulty device detection, script fail to recognize the
device

• Changing experience, multiple sites and they appear

radically different

JCU CP3401/5636 10
Mobile Web App
(separate to the desktop version)
• Your system detects mobile visitors and redirects them
to your mobile-optimized site (often using a sub-
domain like m.yourname.com).
• Only mobile users will see the separate mobile site.

• Businesses that for any reason need to manage their

mobile site independently.

• For instance, some businesses may want to use a

different vendor for mobile, or may want a mobile
structure that simply wouldn’t be possible with RWD.
JCU CP3401/5636 11
Mobile Web App
(separate to the desktop version)
Pros Cons
• A custom user • Multiple URLs
experience • Content forking.
• Easier changes
• support multiple
platform and lower
cost to develop than
native apps

JCU CP3401/5636 12
Mobile Web App
(separate to the desktop version)
Common mistakes:
• Faulty redirects.
• Missing annotations.
• Inconsistent user experience.

JCU CP3401/5636 13
Mobile Web App
(separate to the desktop version)

JCU CP3401/5636 14
Web App / Native app / Hybrid
App

JCU CP3401/5636 15
Native App

• A native app is an application designed specifically to

operate using the mobile device’s hardware and
operating system.

• These stand-alone programs can connect to the

Internet to download and upload data, and can operate
on this data even when not connected to the Internet.

• Native apps are ideal for games, complex interactions,

on-the-fly calculations, graphic manipulations, and rich
media advertising.
JCU CP3401/5636 16
Native App

Pros Cons
• Native Low-level and • No one size fits all
high-level APIs solutions, there are
• Can work offline various types of
mobile OS, need to
• Native app develop for different
performance is the platform.
fastest among all
other solutions
• Different approval
process for different
apps stores
JCU CP3401/5636 17
Native App

JCU CP3401/5636 18
Hybrid App

• A hybrid app has many of the features of both a native

app and a mobile Web app.

• Run inside a native container on the mobile device and

has access to the device’s APIs, enabling it to take
advantage of many of the device’s features, such as a
gyroscope, that are normally not accessible by a
mobile Web app.

JCU CP3401/5636 19
Hybrid app

Pros Cons
• Cross-platform • Some features may
• Some access to not work offline
native API when
required
• Easy update without
go through
submission approval
for apps store again

JCU CP3401/5636 20
Web App / Native app / Hybrid
App

JCU CP3401/5636 21