clear as mud: explaining web apps, mobile apps, cloud computing and design "types"

Clear As Mud: Design “Types”, Web Apps, Mobile Apps and Cloud Computing Explained

Shannon LewisPrincipal – Operations

Panoptic Development, Inc.www.panopticdev.com

Responsive WebsiteMobile Application

Saas (Software as a Service)Mobile Website

Web Application

What Does This Mean?

Cloud Computing

Adaptive Website

“Traditional” Website

“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

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)

Traditional Website

www.aspca.com

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.

Mobile Website

www.llbean.com (desktop)

m.llbean.com (mobile)

www.llbean.com (tablet) m.llbean.com (desktop)

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.

Responsive Design

www.bostonglobe.com

“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

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.

Responsive WebsiteMobile Application

SaaS (Software as a Service)Mobile Website

Web Application

What Does This Mean?

Adaptive Website

Desktop Application

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

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

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

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.

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

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

Web App/SaaS Desktop App Mobile AppEnd 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 MaybeFull Features Depends, SaaS often

less than desktopYes Depends vs desktop

or web appData Stored Server Usually Desktop, but

could be serverMobile device and/or server

Examples Word Online (free)Office 365 (paid)

Microsoft Office Microsoft Office Mobile

Compare and Contrast

Web App/SaaS Desktop App Mobile AppCost 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

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

• Contact us at:– contact@panopticdev.com

• Follow us at:– www.panopticdev.com– panopticdev– https://www.facebook.com/Panopticdev