SUA Mobile Development

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 &amp; 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 &amp; 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