The Modern Web, Part 1: Mobility
Upcoming SlideShare
Loading in...5

The Modern Web, Part 1: Mobility



David Pallmann's public webcast series on The Modern Web. Part 1 deals with Mobility, one of the four pillars (along with HTML5, Social,and Cloud)

David Pallmann's public webcast series on The Modern Web. Part 1 deals with Mobility, one of the four pillars (along with HTML5, Social,and Cloud)



Total Views
Views on SlideShare
Embed Views



24 Embeds 1,024 775 69 64 16 15 14 9 9 9 8 6 6 4 4 4 3 2 1 1 1 1 1 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

The Modern Web, Part 1: Mobility The Modern Web, Part 1: Mobility Presentation Transcript

  • David PallmannGM Custom App Dev, Neudesic
  • 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
  • Traditional ModernSeparate implementation Single implementationfor desktop vs. mobile that works 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 Marcotte
  • works on phones works on tablets
  • 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)
  • <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; }}
  • 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
  • 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 at
  • 8-Part Tutorial Code on CodePlexhttp://responsivetours.codeplex.comOnline Demo
  • HTML5 Mobile Social CloudLook for upcoming blogseries on how thisapplication was built
  • Thanks!David PallmannGM Custom App Dev, Neudesic