SUA Mobile Development

Tony Thomas - Student Unions & Activities

Mobile Web Development

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


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


On top of all that, there is a variety of browsersSafari MobileWebkitBlackberryOperaFirefoxand yes, IE Mobile

Standards Compliant


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


In fact, lumping these standards-compliant browsers together, you can see that almost 80% of the mobile browsers out there support web standards.

http://gs.statcounter.com/#

http://gs.statcounter.com/#

~90% of Mobile Browsers == Webkit

Webkit

Mobile


Analytics from homecoming.umn.edu

24% of Desktop Browsers are IE 6 or 7

IE 6 & 7

Desktop


Desktop analytics for homecoming.umn.edu

Source: ITU, Mark Lipacis, Morgan Stanley Research

PC: 100,000,000 Users in 1993


PC: 100M - 1993


Desktop Internet: 1,000,000,000 in 2005


PC: 100M - 1993Desktop Internet 1B - 2005

Mobile Internet: 10,000,000,000 by 2020



PC: 100M - 1993Desktop Internet 1B - 2005Mobile Internet 10B - 2020

Smartphones are More Affordable Than Ever


They’re cheap. Sometimes free w/ new or renewed plans.

Increase in Mobile Traffic


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/


Ethan Marcotte introduced responsive design last year. Inspired by responsive architecture. Buildings change shape in response to their environment.

http://www.alistapart.com/articles/responsive-web-design/

http://www.alistapart.com/articles/responsive-web-design/

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


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/


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


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/


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


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 */}


Allow you to write styles based on a range of screen widths.

http://twitter.com/media

http://twitter.com/media

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


Mobile bandwidth concerns

Mobile Detection

detectmobilebrowsers.com

xkcd.com/869/


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

http://xkcd.com/869/

http://xkcd.com/869/

Mobile Detection

detectmobilebrowsers.com


$redirect = '/mobile/';

if (!empty($_GET))

{

preg_match('/\?.*/i', $_SERVER['REQUEST_URI'], $get_string);

$redirect .= $get_string[0];

}

Mobile Detection


Considerations

Fluid Layouts

font-size: 100%

Proportional margins and padding

Fluid images


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


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


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.


Spring Jam

Fluid layout

JQuery

Mobile Detection

Fluid Header Image

JavaScript to Provide User Feedback


JQuery

Not officially supported in Mobile Safari

Extra Overhead for the Small Amount of Functionality Needed

Only 89 KB


JavaScriptheight = screen.height;


JavaScript: height = screen.height;Used height because of the landscape issue.

Screen Heights

• 320

• 800

• 960

• #header width: 100%


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" />');


Responsive Images

adaptive-images.com

z.umn.edu/responsiveimages


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

});


Active state was inconsistent. Set 300 millisecond delay w/ active CSS class to ensure user feedback

User Feedback

function send(url){ window.location = url;}


Then used a simple redirect

Phone Numbers


Touching “Call Student Unions & Activities” opens phone app

Phone Numbers

<a href="tel:612-624-4636">Call Student Unions & Activities</a>


Homecoming


• Audience focused research

• Used JQuery Mobile Framework

Homecoming


JQuery Mobile

jquerymobile.com

Official JQuery framework

Large Community

Broad Browser Support

Easy


JQuery Mobile

Useful but constraining

Markup could be more semantic

Cookie cutter websites

Slight case of “classitis”


JQuery Mobile Requirements

HTML5

JQuery

JQuery Mobile Library

JQuery Mobile Stylesheet


HTML5 data

data-role=”page”


<div data-role="page">

<div data-role="header">

<h1>Page Title</h1>

</div>

<div data-role="content">

<p>Page content goes here.</p>

</div>

<div data-role="footer">

<h4>Page Footer</h4>

</div>

</div>


Example for body from JQuery mobile website

<div data-role="page">

<header data-role="header">

<h1>Page Title</h1>

</header>

<div data-role="content">

<p>Page content goes here.</p>

</div>

<footer data-role="footer">

<h4>Page Footer</h4>

</footer>

</div>


Same page, better semantics

Built-in Themes

data-theme=”a”


Themes a,b,c,d & eDefine and style your own theme

Built-in Themes


Heavy Lifting

Links to AJAX Page Loads

Fancy Page Transitions

Updated Browser History (Back Button)

Styling

Long Titles Truncated w/ Ellipses


Classitis

<html lang="en" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px">


This is valid, but messy and not very semantic

Testing

iPhone & Android SDK’s

springbox.com/mobilizer/

Safari Developer Menu (iPhone User Agent String)


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


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/

SUA Mobile Development

Technology

mobile design

mobile internet

mobile web design

mobile devices

mobile photo

windows mobile

mobile traffic

mobile versionadding