There are so many confusing terms out there: Responsive design, mobile sites, Web Apps, Mobile App, SaaS, Cloud Computing. This presentation helps to bring some clarity to these topics. This is the full version of this presentation. I have also broken this up into two parts. Part 1 goes over the different types of websites, Part 2 discusses the different types of applications.

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. Responsive Website
Mobile Application
SaaS (Software as a Service)
Mobile Website
Web Application
What Does This Mean?
Adaptive Website
Desktop Application

13. Desktop Application
• This is your “traditional” software application
• You purchase the CD (or download file)
• You install it on your computer
• You have the rights to use forever
• Can only run on the computer it was installed
on
• Examples: Microsoft Office, TurboTax

14. Web Application
• At a very high level, a web application (web
app) is a software application that is
accessible over the internet or intranet.
• Users do not need to install any software on
their computer in order to access the
application – just need a browser.
• Examples: ecommerce sites, internal company
applications (custom); google
• Website = informational
• Web app = interactive

15. Software as a Service (SaaS)
• A SaaS application has a few special
characteristics:
– Typically a subscription based pricing model*
– Data is stored on the vendor’s servers
– Personalization
– Ability to scale up/down easily
– Self serve signup
– Runs in the Cloud
– Multi-Tenancy
• Examples: salesforce.com, quickbooksonline

16. Mobile Application
• A mobile application (Mobile app or app) is a
software application that runs on a
smartphone, or tablet.
• The user needs to download and install the
application before being able to use it.
• Once downloaded you may or may not need a
data connection in order to use the
application.

17. Working Hand in Hand
• Nike+ Running app – I run with my Nike+
running mobile app
• After the run, the app syncs with the web app
• I can then log into nikeplus.com to review my
run in greater detail

18. Working Hand in Hand
• Edit a document with Microsoft Word on your
desktop
• Save it in the cloud
• Edit it with Microsoft Office mobile app
• Save it in the cloud
• Edit with Microsoft Online via your browser

19. Web App/SaaS Desktop App Mobile App
End User Software
Installed
NA Must be installed on
the computer
Must be installed on
the mobile device
Internet Connection
Required
Yes No Depends
How To Access URL/Web Browser Icon On Desktop Icon on Mobile
Device
Access to new
features/bug fixes
No Action needed by
user – auto updates
User Must Update User Must Update
Cross Platform Yes Maybe Maybe
Full Features Depends, SaaS often
less than desktop
Yes Depends vs desktop
or web app
Data Stored Server Usually Desktop, but
could be server
Mobile device and/or
server
Examples Word Online (free)
Office 365 (paid)
Microsoft Office Microsoft Office
Mobile
Compare and Contrast

20. Web App/SaaS Desktop App Mobile App
Cost Free -> Monthly Fee
(fraction of the
desktop cost)
One time cost Free -> One time cost
Update Fee, New
Version Fee
Included in monthly
fee
Must pay for
upgrades or new
versions
Free -> One time fee
Tied to your device No, just need a
browser
Yes, need computer
software is installed
Yes, need device
software is installed
Can Leverage Device
specific features
No Yes Yes
Compare and Contrast

21. As Business Owner Food for Thought
• No control over rolling out of new features.
Can cause training issues or issues if
something “breaks”
• No internet connection= no work
• Slow connection = slow work
• What happens to the data if the SaaS goes
under?
• How secure is our company data?
• How easy is it to export the data?
• Easy to budget no surprise upgrade fees

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