David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

Part 1: Mobility Part 2: HTML5 Part 3: Social Networking Part 4: Cloud Computing

The Modern Web The Rising Dominance of Mobile Devices Native Apps vs. Mobile Web Responsive Web Design Mobile-First & Progressive Enhancement Supporting Touch Using Location Demos: Mobile + HTML5 + Social + Cloud

Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our lifestyle

Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our your customers’ & employees’ lifestyle

RELEVANCE

Front-End Back-End

Front-End

HTML5 Lingua franca for desktop &

mobile web applications

Mobility Tablets and phones

Power More capable

devices & browser h/w acceleration

Experiences Compelling, touch-oriented experiences

Cloud Computing Elastic scale,

consumption-based pricing

Social Social network content, interactions & web identity

CDNs Content Delivery

Networks

Marketplaces App stores, data marketplaces

Back-End

IDC: Mobile web users will outpace computer web users by 2015

Native Apps Targeted device experience Hardware access Platform OS access (e.g. contacts, photos) App Store Multiple implementations, multiple languages / skill sets required

Mobile Web Write once, run anywhere HTML5 Lingua Franca Support desktop, tablets, and phones Adaptive layout Support touch, mouse, keyboard equally well Starting to see HTML5 App Stores

Controversial topic! --but make no mistake: HTML5 mobile apps can be just as good as native apps and are here to stay Check out Angry Birds in HTML5 http://chrome.angrybirds.com Compare Kindle iPad App vs. Kindle Cloud Reader http://read.amazon.com

Traditional Separate implementation for desktop vs. mobile m.mysite.com site Phones in view but not tablets Target relatively small number of mobile devices and form factors Limited user interface Limited mobile app functionality

Modern Single implementation that works across desktop, tablets, and phones Target all modern mobile devices Support any form factor with adaptive layout Compelling user interface Full functionality Devices very capable

Responsive Web Design Ethan Marcotte http://ABookApart.com

http://www.astronautdesigns.com/demo/responsive/

works on tablets

works on phones

Adaptive, fluid layout Use CSS3 Media Queries to determine device dimensions / other characteristics Conditional CSS for phone, tablet, desktop Responsive Text – pragmatic for target device Responsive Images – size to target device Server-side intelligence in rendering appropriate content

Use a fluid grid system (many to choose from) Think proportionally, use percentages Sounds inexact, but can be done well Some mathematical computation (in the book) Let the user control their browser preferences Specify font sizes in em’s to respect user’s settings for font size (e.g. body text 1.0em, header 1.6em)

<link rel="stylesheet" href=“styles.css“ <link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

@media all and (max-width: 800px) { #nav { border: 5px solid #131e31; position: fixed; top: 75px; left: 10px; height: auto; } #main { margin-left: 0px; } .saveSpace { display: none; } }

http://responsive-tours.com

http://outsidetheboxpizza.com

Hide areas of text you want to leave out on smaller screen sizes Use CSS styles and display: none

Old Thinking: Mobile support is a nice-to-have but most of our users use a desktop browser Graceful Degradation: Give things up as you get to a smaller / more limited device Fewer features More limited UI Try to keep the experience from become completely awful

New Thinking: Mobile First: Primary way our web site is accessed Progressive Enhancement: Design a first-class mobile experience, do even more of larger / more capable devices Full feature availability Appropriate UI for each device, not a limited one Compelling experience across the board

Size and resolution of images Degree of animation / transitions Varying amount of text displayed Supplementary content Collapsed content on smaller devices, expanded on larger devices Amount of simultaneous resource use such as multiple videos Use advanced features when available but core experience is not compromised without them

Vital to support touch, mouse, and keyboard equally well Touch is not just for mobile devices “In the future, a screen without touch is a broken screen” Design considerations: making items large enough to be touched as well as clicked

Hugely Important Location freedom: take the web and your apps anywhere on your mobile device Location to make apps relevant to you: use of location for maps, what’s nearby Back end (in the cloud) can route you to the nearest data center Not just for Native Apps! HTML5 Geolocation

DEDICATED BACK END

Web Services

Web Application

IIS

SQL Server DESKTOP

BROWSER

WEB SERVER

Windows Server

DATABASE SERVER

HOMOGENOUS FRONT END

DECENTRALIZED BACK END

Business Services

Application

TABLET

CLOU

D

HETEROGENEOUS FRONT END

DESKTOP BROWSER

PHONE

Identity Services

IP

Data Stores

Platform Services

Directories

Partner Services

PARTNER

Data Stores

The Front End Open Standards

HTML5 CSS JavaScript Modernizr JQuery No plug-ins or proprietary web technologies

The Back End Microsoft Web Platform

IIS, ASP.NET, MVC Microsoft Cloud Platform

Windows Azure Compute Windows Azure Storage SQL Azure Service Bus Access Control Service Cache Service CDN Traffic Manager

“Connected Devices, Continuous Services”

Mobile Web vs. Native App Separate mobile UI (JQuery Mobile) vs. Responsive Web Design How much backward compatibility to provide for older browsers / devices Whether / how much to leverage local storage Whether to support disconnected / offline operation

HTML5 Mobile Social Cloud

8-Part Tutorial on David Pallmann’s Blog davidpallmann.blogspot.com Source code at http://responsivetours.codeplex.com

8-Part Tutorial http://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.html Source Code on CodePlex http://responsivetours.codeplex.com Online Demo http://responsive-tours.com

HTML5 Mobile Social Cloud

Look for upcoming blog series on how this application was built

David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

Thanks!