sua mobile development
DESCRIPTION
My presentation to the Web Standards group at the University of Minnesota on mobile web development and mobile development frameworks.TRANSCRIPT
Tony Thomas - Student Unions & Activities
Mobile Web Development
Tuesday, October 25, 11
Tuesday, October 25, 11
iOS, Android, Blackberry, Windows Mobile and othersWell...not webOS anymore.
320 X 240
MotorolaHTCBlackberry
240 X 320
BlackberryHTC
480 X 800
MotorolaHTC
240 X 260
Blackberry
360 X 480
Blackberry 480 X 320
Blackberry
480 X 360
Blackberry
360 X 400
Blackberry
800 X 480
HTC
Tuesday, October 25, 11
320x480 - iPhone 3, Motorola and HTC Handsets640x960 - iPhone4480x800 - HTC, Motorola480x854 - MotorolaPlus a whole variety of other screen dimensionsAND many of those also work in landscape mode
Browsers
Tuesday, October 25, 11
On top of all that, there is a variety of browsersSafari MobileWebkitBlackberryOperaFirefoxand yes, IE Mobile
Standards Compliant
Tuesday, October 25, 11
Good news. Most of the popular mobile browsers have very good support for web standards
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.
~90% of Mobile Browsers == Webkit
Webkit
Mobile
Tuesday, October 25, 11
Analytics from homecoming.umn.edu
24% of Desktop Browsers are IE 6 or 7
IE 6 & 7
Desktop
Tuesday, October 25, 11
Desktop analytics for homecoming.umn.edu
Source: ITU, Mark Lipacis, Morgan Stanley Research
PC: 100,000,000 Users in 1993
Tuesday, October 25, 11
PC: 100M - 1993
Source: ITU, Mark Lipacis, Morgan Stanley Research
Desktop Internet: 1,000,000,000 in 2005
Tuesday, October 25, 11
PC: 100M - 1993Desktop Internet 1B - 2005
Mobile Internet: 10,000,000,000 by 2020
Source: ITU, Mark Lipacis, Morgan Stanley Research
Tuesday, October 25, 11
PC: 100M - 1993Desktop Internet 1B - 2005Mobile Internet 10B - 2020
Smartphones are More Affordable Than Ever
Tuesday, October 25, 11
They’re cheap. Sometimes free w/ new or renewed plans.
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?
Responsive Web Designwww.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.
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.
“It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.”
alistapart.com/articles/dao/
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.
Responsive Web Design
Tuesday, October 25, 11
One responsive design to rule them all. Page changes according to the dimensions of the screen.
Content For Mobile
Photo: Dani Ihtathoflickr.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?
springjam.umn.eduTuesday, October 25, 11
Spring Jam has an award-winning design. Built w/ desktop in mind.Large images.
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.
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.
Media QueriesEven 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
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
Mobile Detection
detectmobilebrowsers.com
Tuesday, October 25, 11
$redirect = '/mobile/';
if (!empty($_GET))
{
preg_match('/\?.*/i', $_SERVER['REQUEST_URI'], $get_string);
$redirect .= $get_string[0];
}
Mobile Detection
Tuesday, October 25, 11
Considerations
Fluid Layouts
font-size: 100%
Proportional margins and padding
Fluid images
Tuesday, October 25, 11
Fluid images?
320 X 480
iPhone 3(GS)MotorolaHTC
640 X 960
iPhone 4
360 X 400
Blackberry
480 X 800
HTCMotorola
480 X 854
Motorola
800 X 480
HTC
320 X 240
MotorolaHTCBlackberry
240 X 320
BlackberryHTC
480 X 800
MotorolaHTC
240 X 260
Blackberry
360 X 480
Blackberry
480 X 320
Blackberry
480 X 360
Blackberry
Tuesday, October 25, 11
Images that scale so design can respond to all these various screen resolutions. More specifics to come.
Offline StorageConnectivity/RealtimeMultimediaGraphics & 3D EffectsDevice AccessPerformance & IntegrationSemanticsCSS3/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.
springjam.umn.eduTuesday, October 25, 11
No framework. Markup is pared down and with fewer images and less JavaScript.
Tuesday, October 25, 11
Spring Jam
Fluid layout
JQuery
Mobile Detection
Fluid Header Image
JavaScript to Provide User Feedback
Tuesday, October 25, 11
JQuery
Not officially supported in Mobile Safari
Extra Overhead for the Small Amount of Functionality Needed
Only 89 KB
Tuesday, October 25, 11
JavaScriptheight = screen.height;
Tuesday, October 25, 11
JavaScript: height = screen.height;Used height because of the landscape issue.
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
Screen Heights
$('a#header-home-link').html('<img src="/sj-images/mobile/' + directory + '/header.png" alt="Student Unions & Activities logo." id="sua-logo" class="logos" />');
Tuesday, October 25, 11
Responsive Images
adaptive-images.com
z.umn.edu/responsiveimages
Tuesday, October 25, 11
Two techniques that look interestingI haven’t had a chance to try them yet
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
User Feedback
function send(url){ window.location = url;}
Tuesday, October 25, 11
Then used a simple redirect
Phone Numbers
Tuesday, October 25, 11
Touching “Call Student Unions & Activities” opens phone app
Phone Numbers
<a href="tel:612-624-4636">Call Student Unions & Activities</a>
Tuesday, October 25, 11
Homecoming
Tuesday, October 25, 11
• Audience focused research
• Used JQuery Mobile Framework
Homecoming
Tuesday, October 25, 11
JQuery Mobile
jquerymobile.com
Official JQuery framework
Large Community
Broad Browser Support
Easy
Tuesday, October 25, 11
JQuery Mobile
Useful but constraining
Markup could be more semantic
Cookie cutter websites
Slight case of “classitis”
Tuesday, October 25, 11
JQuery Mobile Requirements
HTML5
JQuery
JQuery Mobile Library
JQuery Mobile Stylesheet
Tuesday, October 25, 11
HTML5 data
data-role=”page”
Tuesday, October 25, 11
<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
<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
Built-in Themes
data-theme=”a”
Tuesday, October 25, 11
Themes a,b,c,d & eDefine and style your own theme
Built-in Themes
Tuesday, October 25, 11
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
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
Testing
iPhone & Android SDK’s
springbox.com/mobilizer/
Safari Developer Menu (iPhone User Agent String)
Tuesday, October 25, 11
Recommendationsuse 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
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