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.

• Contact us at:– contact@panopticdev.com

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