This is part 1 of a two part series Clear As Mud. This presentation series provides clarity on confusing terms such as: Web Apps, Mobile Apps, Adaptive Websites, Mobile Websites etc. Part One focus on the different types of websites. Part two focuses on the different types of apps. Here's link to a video of this presentation: https://youtu.be/GzUOLE_qPRI

1. Clear As Mud: Design “Types”,
Web Apps, Mobile Apps and
Cloud Computing Explained
Shannon Lewis
Principal – Operations
Panoptic Development, Inc.
www.panopticdev.com

2. Responsive Website
Mobile Application
Saas (Software as a Service)
Mobile Website
Web Application
What Does This Mean?
Cloud Computing
Adaptive Website
“Traditional” Website

3. “Types” of Websites
• Websites that have the same user experience
regardless of the device used (desktop, tablet,
mobile)
– “Traditional” website
– Mobile website*
• Websites that detect the device accessing the
page and provides an optimal experience for
that device
– Responsive website
– Adaptive website

4. Traditional Website
• Single website to build and maintain
• Does not adjust for the type of device
accessing it.
• Least expensive to build and maintain
• Same user experience regardless device
(desktop, tablet, mobile)

5. Traditional Website
www.aspca.com

6. Mobile Site
• Main site detects the mobile device and
redirects to a mobile friendly site
• Separate URL m.website.com or
mobile.website.com
• Must maintain two websites (two code bases)
• ecommere sites commonly use mobile sites
• Mobile site usually has the option to enter the
full site
• Fun Hack: You might not know you have been
redirected to a mobile site. Touch the
browser’s address bar to see.

7. Mobile Website
www.llbean.com (desktop)
m.llbean.com (mobile)
www.llbean.com (tablet) m.llbean.com (desktop)

8. Responsive/Adaptive Site
• Detects the screen size/resolution and
provides the optimal experience
• Single code base, single site
• Main difference between the two:
– Adaptive: Multiple static layouts for each for a
different screen resolution (server side)
– Responsive: Dynamically adjusts to screen
resolution (client side, slower)
• Fun Hack: Adjust your browser size, if the
screen changes then it’s a responsive site.

9. Responsive Design
www.bostonglobe.com

10. “Traditional” Mobile Site Responsive Adaptive
# of websites 1 (single URL) 2 (two URLs) 1 (single URL) 1 (single URL)
User Experience Optimized for
desktop
2 sites each
optimized
Optimize for
screen
resolution
Optimize for
screen
resolution
Analytics (data
gathering)/SEO
Excellent, single
URL for tracking
Not Optimal –
Two URLs
Excellent, single
URL for tracking
(Google’s
preference)
Single URL for
tracking;
possible
different
content same
URL
Keywords Can not
differentiate
between “user
types”
Can have
keywords
specific to
mobile users
Can not
differentiate
between “user
types”
Can have
keywords
specific to
mobile users
Cost (build
&maintain)
Least expensive More Expensive
than
Responsive?
More Expensive
than Mobile?
Most Expensive?
Compare and Contrast

11. When to Use?
• Google recommends Responsive. Penalizing
non-mobile friendly sites.
• Know your audience, what percentage of
visitors are desktop, tablet or mobile?
• What is your budget? Can you afford to
maintain two sites? Can you afford the extra
expense of building a responsive or adaptive
design?
• Responsive sites have longer load time, is your
site image heavy? This is why a lot of
ecommerce sites are not responsive.

12. • Contact us at:
– contact@panopticdev.com
• Follow us at:
– www.panopticdev.com
– panopticdev
– https://www.facebook.com/Panopticdev