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!
Top Related