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)

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

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

3. 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

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

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

7. Front-End Back-End

8. HTML5
Lingua franca Mobility
for desktop & Front-End Tablets and
mobile web phones
applications
Power
Experiences
More capable
Compelling,
devices &
touch-oriented
browser h/w
experiences
acceleration

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

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

12. Native Apps Mobile Web
Targeted device Write once, run anywhere
experience HTML5 Lingua Franca
Hardware access Support desktop, tablets,
Platform OS access (e.g. and phones
contacts, photos) Adaptive layout
App Store Support touch, mouse,
Multiple keyboard equally well
implementations, Starting to see HTML5
multiple languages / skill App Stores
sets required

13. 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

14. Traditional Modern
Separate implementation Single implementation
for desktop vs. mobile that works across
m.mysite.com site desktop, tablets, and
Phones in view but not phones
tablets Target all modern mobile
Target relatively small devices
number of mobile devices Support any form factor
and form factors with adaptive layout
Limited user interface Compelling user interface
Limited mobile app Full functionality
functionality Devices very capable

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

16. works on phones
works on tablets
http://www.astronautdesigns.com/demo/responsive/

17. 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

18. 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)

19. <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)">

20. @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;
}
}

21. http://responsive-tours.com

22. http://outsidetheboxpizza.com

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

27. Old Thinking: New Thinking:
Mobile support is a nice-to- Mobile First: Primary way our
have but most of our users use web site is accessed
a desktop browser Progressive Enhancement:
Graceful Degradation: Design a first-class mobile
Give things up as you get to a experience, do even more of
smaller / more limited device larger / more capable devices
Fewer features Full feature availability
More limited UI Appropriate UI for each device,
Try to keep the experience from not a limited one
become completely awful Compelling experience across
the board

28. 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

29. 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

31. 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

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

34. 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

35. “Connected Devices, Continuous Services”
The Front End The Back End
Open 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

36. 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

37. HTML5
Mobile
Social
Cloud
8-Part Tutorial on David
Pallmann’s Blog
davidpallmann.blogspot.com
Source code at
http://responsivetours.code
plex.com

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

39. HTML5
Mobile
Social
Cloud
Look for upcoming blog
series on how this
application was built

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