Mobile Web Design for Any Device

Mobile Web
Development
Tony Thomas - Student Unions & Activities

Tuesday, October 25, 11


iOS, Android, Blackberry, Windows Mobile and others
Well...not webOS anymore.

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


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

Browsers


On top of all that, there is a variety of browsers
Safari Mobile
Webkit
Blackberry
Opera
Firefox
and 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.

~90% of Mobile
Browsers == Webkit
Mobile
Webkit


Analytics from homecoming.umn.edu

24% of Desktop
Browsers are IE 6 or 7
Desktop
IE 6 & 7


Desktop analytics for homecoming.umn.edu

PC: 100,000,000 Users
in 1993

Source: ITU, Mark Lipacis, Morgan Stanley Research

PC: 100M - 1993

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


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

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


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

Smartphones are More
Affordable Than Ever


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

Increase in Mobile
Trafﬁc


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 Design
www.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.

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 ﬁle sizes as “structural mass,” this concept
begins to make sense for mobile web design.

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


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 Ihtatho
ﬂickr.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.edu

Spring Jam has an award-winning design. Built w/ desktop in mind.
Large images.

Trafﬁc Focused On
Event

Spring Jam Mobile Trafﬁc 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.

Media Queries
Even though, things like header images could be set
to display:none, the image still loads
JavaScript ﬁles 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 ﬁrst visit and set a cookie so if they want to go to “full site”, they’re no longer
redirected

Mobile Detection

detectmobilebrowsers.com


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


Considerations

Fluid Layouts
font-size: 100%
Proportional margins and padding
Fluid images


Fluid images?

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


Images that scale so design can respond to all these various screen resolutions. More
speciﬁcs to come.

Ofﬂine Storage
Connectivity/Realtime
Multimedia
Graphics & 3D Effects
Device Access
Performance &
Integration
Semantics
CSS3/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
speciﬁcation.

springjam.umn.edu

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 ofﬁcially supported in Mobile Safari
Extra Overhead for the Small Amount of
Functionality Needed
Only 89 KB


JavaScript
height = 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 interesting
I 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


Homecoming

• Audience focused research
• Used JQuery Mobile Framework


JQuery Mobile
jquerymobile.com
Ofﬁcial 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 & e
Deﬁne 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)


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


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/


Mobile Web Design for Any Device

Recommandé

Recommandé

Contenu connexe

Similaire à Mobile Web Design for Any Device

Similaire à Mobile Web Design for Any Device (20)

Dernier

Dernier (20)

Mobile Web Design for Any Device