clear as mud: explaining web apps, mobile apps, cloud computing and design "types"
TRANSCRIPT
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:– [email protected]
• Follow us at:– www.panopticdev.com– panopticdev– https://www.facebook.com/Panopticdev