My presentation to the Web Standards group at the University of Minnesota on mobile web development and mobile development frameworks.

1. Mobile Web
Development
Tony Thomas - Student Unions & Activities
Tuesday, October 25, 11

2. Tuesday, October 25, 11
iOS, Android, Blackberry, Windows Mobile and others
Well...not webOS anymore.

3. 320 X 240 480 X 800 240 X 260 800 X 480
Motorola
HTC Motorola Blackberry HTC
Blackberry HTC
360 X 480 240 X 320
Blackberry Blackberry
480 X 320 HTC
360 X 400
Blackberry
Blackberry
480 X 360
Blackberry
Tuesday, October 25, 11
320x480 - iPhone 3, Motorola and HTC Handsets
640x960 - iPhone4
480x800 - HTC, Motorola
480x854 - Motorola
Plus a whole variety of other screen dimensions
AND many of those also work in landscape mode

4. Browsers
Tuesday, October 25, 11
On top of all that, there is a variety of browsers
Safari Mobile
Webkit
Blackberry
Opera
Firefox
and yes, IE Mobile

5. Standards Compliant
Tuesday, October 25, 11
Good news. Most of the popular mobile browsers have very good support for web standards

6. Source: gs.statcounter.com/#mobile_browser-US-monthly-200812-201108
Tuesday, October 25, 11
In fact, lumping these standards-compliant browsers together, you can see that almost 80%
of the mobile browsers out there support web standards.

7. ~90% of Mobile
Browsers == Webkit
Mobile
Webkit
Tuesday, October 25, 11
Analytics from homecoming.umn.edu

8. 24% of Desktop
Browsers are IE 6 or 7
Desktop
IE 6 & 7
Tuesday, October 25, 11
Desktop analytics for homecoming.umn.edu

9. PC: 100,000,000 Users
in 1993
Source: ITU, Mark Lipacis, Morgan Stanley Research
Tuesday, October 25, 11
PC: 100M - 1993

10. Desktop Internet:
1,000,000,000 in 2005
Source: ITU, Mark Lipacis, Morgan Stanley Research
Tuesday, October 25, 11
PC: 100M - 1993
Desktop Internet 1B - 2005

11. Mobile Internet:
10,000,000,000 by 2020
Source: ITU, Mark Lipacis, Morgan Stanley Research
Tuesday, October 25, 11
PC: 100M - 1993
Desktop Internet 1B - 2005
Mobile Internet 10B - 2020

12. Smartphones are More
Affordable Than Ever
Tuesday, October 25, 11
They’re cheap. Sometimes free w/ new or renewed plans.

13. Increase in Mobile
Traffic
Tuesday, October 25, 11
Mobile devices accessing homecoming.umn.edu 8/2010 compared to 8/2011 is up 669%.
So how do we deal with all these devices and browsers?

14. Responsive Web Design
www.alistapart.com/articles/responsive-web-design/
Tuesday, October 25, 11
Ethan Marcotte introduced responsive design last year. Inspired by responsive architecture.
Buildings change shape in response to their environment.

15. Responsive
Architecture
If a building could change its posture, tighten its
muscles and brace itself against the wind, its
structural mass could literally be cut in half. -
Guy Nordenson
Tuesday, October 25, 11
If you think of image sizes, server requests and file sizes as “structural mass,” this concept
begins to make sense for mobile web design.

16. alistapart.com/articles/dao/
“It’s time to throw out the
rituals of the printed page,
and to engage the medium
of the web and its own
nature.”
Tuesday, October 25, 11
Responsive design requires a change in how we think about design for the web. Ethan
Marcotte referenced this article written in 2000.

17. Responsive Web Design
Tuesday, October 25, 11
One responsive design to rule them all. Page changes according to the dimensions of the
screen.

18. Content For Mobile
Photo: Dani Ihtatho
flickr.com/people/ihtatho/
Tuesday, October 25, 11
Mobile design requires tightening the focus of your content as well.
Pare it down, simplify.
New projects should be built with this in mind. What about taking an existing site and making
it more mobile-friendly?

19. springjam.umn.edu
Tuesday, October 25, 11
Spring Jam has an award-winning design. Built w/ desktop in mind.
Large images.

20. Traffic Focused On
Event
Spring Jam Mobile Traffic 4/1/10 - 4/1/11
Tuesday, October 25, 11
Immediacy. The three points in this spike in mobile traffic for Spring Jam are the days of the
event itself.
We focused on events.

21. Media Queries
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Tuesday, October 25, 11
Allow you to write styles based on a range of screen widths.

22. Media Queries
Even though, things like header images could be set
to display:none, the image still loads
JavaScript files not required in the mobile version
Adding yet another style sheet to overwrite the
desktop style sheet added overhead
The markup and content needed to be pared down
for mobile
Screen resolutions a moving target
Tuesday, October 25, 11
Mobile bandwidth concerns

23. Mobile Detection
detectmobilebrowsers.com
xkcd.com/869/
Tuesday, October 25, 11
As usual xkcd hits the nail on the head. separate site w/ redirect.
Redirect on first visit and set a cookie so if they want to go to “full site”, they’re no longer
redirected

24. Mobile Detection
detectmobilebrowsers.com
Tuesday, October 25, 11

25. Mobile Detection
$redirect = '/mobile/';
if (!empty($_GET))
{
preg_match('/?.*/i',
$_SERVER['REQUEST_URI'], $get_string);
$redirect .= $get_string[0];
}
Tuesday, October 25, 11

26. Considerations
Fluid Layouts
font-size: 100%
Proportional margins and padding
Fluid images
Tuesday, October 25, 11
Fluid images?

27. 640 X 960 480 X 854 480 X 800 480 X 320
iPhone 4 Motorola HTC Blackberry
Motorola
480 X 360
Blackberry
320 X 480
320 X 240
800 X 480
Motorola iPhone 3(GS)
HTC Motorola
480 X 800 360 X 480 Blackberry HTC HTC
360 X 400
Motorola Blackberry
HTC
Blackberry
240 X 320 240 X 260
Blackberry Blackberry
HTC
Tuesday, October 25, 11
Images that scale so design can respond to all these various screen resolutions. More
specifics to come.

28. Offline Storage
Connectivity/Realtime
Multimedia
Graphics & 3D Effects
Device Access
Performance &
Integration
Semantics
CSS3/Styling
Tuesday, October 25, 11
A note on HTML5: Don’t believe the hype. It’s not magic. Features and API’s lumped into
HTML5.
These things are brands. HTML5 has useful semantics and support for data, but it’s markup.
It’s not connectivity, multimedia, 3D, device access, semantics or CSS3. It’s a W3C
specification.

29. springjam.umn.edu
Tuesday, October 25, 11
No framework. Markup is pared down and with fewer images and less JavaScript.

30. Tuesday, October 25, 11

31. Spring Jam
Fluid layout
JQuery
Mobile Detection
Fluid Header Image
JavaScript to Provide User Feedback
Tuesday, October 25, 11

32. JQuery
Not officially supported in Mobile Safari
Extra Overhead for the Small Amount of
Functionality Needed
Only 89 KB
Tuesday, October 25, 11

33. JavaScript
height = screen.height;
Tuesday, October 25, 11
JavaScript: height = screen.height;
Used height because of the landscape issue.

34. Screen Heights
• 320
• 800
• 960
• #header width: 100%
Tuesday, October 25, 11
Looked at handset data to come group screen heights into three rough groups

35. Screen Heights
$('a#header-home-link').html('<img src="/sj-
images/mobile/' + directory + '/header.png"
alt="Student Unions &amp; Activities logo."
id="sua-logo" class="logos" />');
Tuesday, October 25, 11

36. Responsive Images
adaptive-images.com
z.umn.edu/responsiveimages
Tuesday, October 25, 11
Two techniques that look interesting
I haven’t had a chance to try them yet

37. User Feedback
$('a').bind('click', function()
{
$('.active').removeClass('active');
$(this).addClass('active');
href = $(this).attr('href');
window.setTimeout('send(href)', 300);
return false
});
Tuesday, October 25, 11
Active state was inconsistent. Set 300 millisecond delay w/ active CSS class to ensure user
feedback

38. User Feedback
function send(url)
{
window.location = url;
}
Tuesday, October 25, 11
Then used a simple redirect

39. Phone Numbers
Tuesday, October 25, 11
Touching “Call Student Unions & Activities” opens phone app

40. Phone Numbers
<a href="tel:612-624-4636">Call
Student Unions &amp; Activities</a>
Tuesday, October 25, 11

41. Homecoming
Tuesday, October 25, 11

42. Homecoming
• Audience focused research
• Used JQuery Mobile Framework
Tuesday, October 25, 11

43. JQuery Mobile
jquerymobile.com
Official JQuery framework
Large Community
Broad Browser Support
Easy
Tuesday, October 25, 11

44. JQuery Mobile
Useful but constraining
Markup could be more semantic
Cookie cutter websites
Slight case of “classitis”
Tuesday, October 25, 11

45. JQuery Mobile
Requirements
HTML5
JQuery
JQuery Mobile Library
JQuery Mobile Stylesheet
Tuesday, October 25, 11

46. HTML5 data
data-role=”page”
Tuesday, October 25, 11

47. <div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Tuesday, October 25, 11
Example for body from JQuery mobile website

48. <div data-role="page">
<header data-role="header">
<h1>Page Title</h1>
</header><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<footer data-role="footer">
<h4>Page Footer</h4>
</footer><!-- /footer -->
</div><!-- /page -->
Tuesday, October 25, 11
Same page, better semantics

49. Built-in Themes
data-theme=”a”
Tuesday, October 25, 11
Themes a,b,c,d & e
Define and style your own theme

50. Built-in Themes
Tuesday, October 25, 11

51. Heavy Lifting
Links to AJAX Page Loads
Fancy Page Transitions
Updated Browser History (Back Button)
Styling
Long Titles Truncated w/ Ellipses
Tuesday, October 25, 11

52. Classitis
<html lang="en" class="ui-mobile landscape
min-width-320px min-width-480px min-
width-768px min-width-1024px">
Tuesday, October 25, 11
This is valid, but messy and not very semantic

53. Testing
iPhone & Android SDK’s
springbox.com/mobilizer/
Safari Developer Menu (iPhone User Agent
String)
Tuesday, October 25, 11

54. Recommendations
use analytics to inform your decisions
use responsive design in new sites
focus content & pare it down
use responsive techniques
don’t be afraid of mobile detection
use frameworks when they’re helpful
use HTML5 if you like
Tuesday, October 25, 11

55. What are your questions?
adaptive-images.com
z.umn.edu/responsiveimages
lukew.com (@lukew)
jquerymobile.com
z.umn.edu/smartphonematrices
detectmobilebrowser.com
springbox.com/mobilizer/
Tuesday, October 25, 11