The Modern Web, Part 1: Mobility

David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann

Part 1: MobilityPart 2: HTML5Part 3: Social NetworkingPart 4: Cloud Computing

The Modern WebThe Rising Dominance of Mobile DevicesNative Apps vs. Mobile WebResponsive Web DesignMobile-First & Progressive EnhancementSupporting TouchUsing LocationDemos: Mobile + HTML5 + Social + Cloud

Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our lifestyle

Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our your customers’ & employees’ lifestyle RELEVANCE

Front-End Back-End

HTML5Lingua franca Mobilityfor desktop & Front-End Tablets and mobile web phones applications Power ExperiencesMore capable Compelling, devices & touch-orientedbrowser h/w experiences acceleration

SocialCloud Computing Social network Elastic scale, Back-End content, consumption- interactions & based pricing web identity CDNs Marketplaces Content App stores, Delivery data Networks marketplaces

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

Native Apps Mobile WebTargeted device Write once, run anywhereexperience HTML5 Lingua FrancaHardware access Support desktop, tablets,Platform OS access (e.g. and phonescontacts, photos) Adaptive layoutApp Store Support touch, mouse,Multiple keyboard equally wellimplementations, Starting to see HTML5multiple languages / skill App Storessets required

Controversial topic! --but make no mistake:HTML5 mobile apps can be just as good asnative apps and are here to stayCheck out Angry Birds in HTML5http://chrome.angrybirds.comCompare Kindle iPad App vs. Kindle CloudReader http://read.amazon.com

Traditional ModernSeparate implementation Single implementationfor desktop vs. mobile that works acrossm.mysite.com site desktop, tablets, andPhones in view but not phonestablets Target all modern mobileTarget relatively small devicesnumber of mobile devices Support any form factorand form factors with adaptive layoutLimited user interface Compelling user interfaceLimited mobile app Full functionalityfunctionality Devices very capable

Responsive Web DesignEthan Marcottehttp://ABookApart.com

works on phones works on tabletshttp://www.astronautdesigns.com/demo/responsive/

Adaptive, fluid layoutUse CSS3 Media Queries to determine devicedimensions / other characteristicsConditional CSS for phone, tablet, desktopResponsive Text – pragmatic for target deviceResponsive Images – size to target deviceServer-side intelligence in rendering appropriatecontent

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

@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 onsmaller screen sizesUse CSS styles and display: none

Old Thinking: New Thinking:Mobile support is a nice-to- Mobile First: Primary way ourhave but most of our users use web site is accesseda desktop browser Progressive Enhancement:Graceful Degradation: Design a first-class mobileGive things up as you get to a experience, do even more ofsmaller / more limited device larger / more capable devicesFewer features Full feature availabilityMore limited UI Appropriate UI for each device,Try to keep the experience from not a limited onebecome completely awful Compelling experience across the board

Size and resolution of imagesDegree of animation / transitionsVarying amount of text displayedSupplementary contentCollapsed content on smaller devices, expandedon larger devicesAmount of simultaneous resource use such asmultiple videosUse advanced features when available but coreexperience is not compromised without them

Vital to support touch, mouse, and keyboardequally wellTouch is not just for mobile devices“In the future, a screen without touch is abroken screen”Design considerations: making items largeenough to be touched as well as clicked

Hugely ImportantLocation freedom: take the web and your appsanywhere on your mobile deviceLocation to make apps relevant to you:use of location for maps, what’s nearbyBack end (in the cloud) can route you to thenearest data centerNot just for Native Apps! HTML5 Geolocation

HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application SQL DESKTOP Web Services Server BROWSER IIS Windows Server

HETEROGENEOUS FRONT END DECENTRALIZED BACK END Platform DESKTOP Application Services BROWSER CLOUD Business Data Stores Services TABLET Identity IP Directories Services PHONE PARTNER Partner Data Stores Services

“Connected Devices, Continuous Services” The Front End The Back EndOpen Standards Microsoft Web Platform HTML5 IIS, ASP.NET, MVC CSS Microsoft Cloud Platform JavaScript Windows Azure Compute Modernizr Windows Azure Storage JQuery SQL Azure No plug-ins or proprietary Service Bus web technologies Access Control Service Cache Service CDN Traffic Manager

Mobile Web vs. Native AppSeparate mobile UI (JQuery Mobile) vs.Responsive Web DesignHow much backward compatibility to providefor older browsers / devicesWhether / how much to leverage local storageWhether to support disconnected / offlineoperation

HTML5 Mobile Social Cloud8-Part Tutorial on DavidPallmann’s Blogdavidpallmann.blogspot.comSource code athttp://responsivetours.codeplex.com

8-Part Tutorialhttp://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.htmlSource Code on CodePlexhttp://responsivetours.codeplex.comOnline Demohttp://responsive-tours.com

HTML5 Mobile Social CloudLook for upcoming blogseries on how thisapplication was built

Thanks!David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann

http://davidpallmann.blogspot.com	715
http://www.scoop.it	63
http://davidpallmann.blogspot.in	53
http://davidpallmann.blogspot.co.uk	14
http://davidpallmann.blogspot.de	10
http://davidpallmann.blogspot.com.au	10
http://www.davidpallmann.blogspot.com	9
http://davidpallmann.blogspot.com.es	6
http://davidpallmann.blogspot.com.br	6
http://davidpallmann.blogspot.fr	4
http://davidpallmann.blogspot.mx	4
http://davidpallmann.blogspot.jp	4
http://davidpallmann.blogspot.se	3
http://davidpallmann.blogspot.ca	2
http://davidpallmann.blogspot.co.nz	2
http://davidpallmann.blogspot.pt	1
http://www.blogger.com	1

The Modern Web, Part 1: Mobility

by David Pallmann on Feb 23, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

17 Embeds 907

Statistics

The Modern Web, Part 1: Mobility — Presentation Transcript