Download - Mobile Web Design & Development 2012 Lecture
![Page 1: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/1.jpg)
Mobile Web Design & Development121
![Page 2: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/2.jpg)
In the mobile telecommunications industry, the technology is represented by two separate, yet equally important groups: the mobile devices, and the cellular networks that connect them. (These are their stories...)
2
2
![Page 3: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/3.jpg)
Evolution of cell networks
1G, 2G, 3G, 4G...
generations of cellular network technology that describe the maturity and capabilities of cellular networks
most obvious trend is speed/bandwidth increase
3
3
![Page 4: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/4.jpg)
Evolution of mobile devices
4
4
![Page 5: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/5.jpg)
Brick era: 1973 - 1988
5Motorola DynaTAC
5
![Page 6: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/6.jpg)
Candybar era: 1988 - 1998
6
Critical mass. Mainstream.
SMS (first non-voice communication)
6
![Page 7: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/7.jpg)
Feature phone era: 1998 - 2008
7
cameras
addition of packet-switched data services to networks allowed first use of the Internet on a phone.
little real innovation and inconsistent interpretation of agreed upon standards.
WAP 1.0 and WML provided a “dumbed down” version of the web
stifled by network operators who focussed on providing downloadable ringtones, wallpapers, themes etc they could sell through network portals.
poor adoption of mobile web by consumers
Motorola RAZR
7
![Page 8: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/8.jpg)
Smart phones: 2002 - present
8
some overlap between what is considered a feature phone and a smart phone.
use a common operating system, a larger screen size, a QWERTY keyboard or stylus for input, and Wi-Fi or another form of high-speed wireless connectivity.
consistent frameworks for creating applications and services, and a reusable infrastructure to innovate
WAP 2.0 specified use of cut down versions of XHTML (XHTML-MP) and CSS, bringing development back in line with the desktop web.
Though standards compliance is still poor.
8
![Page 9: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/9.jpg)
Some early mobile web browsers
9
Text
NetHopper for Apple Newton Pocket Internet Explorer 3.0 Opera Mini
http://www.phonearena.com/news/Evolution-of-mobile-web-browsing_id9059
9
![Page 10: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/10.jpg)
10
10
![Page 11: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/11.jpg)
Touch phone era: January 9, 2007 - present
Though the majority of the technology in the original iPhone had already been available from other manufacturers, what was notable about the iPhone was how it changed every-day perceptions of what mobile technology can do.
It made using the mobile web worth while from a consumer standpoint.
http://bits.blogs.nytimes.com/2008/03/18/iphone-users-are-mobile-web-junkies/
It made developing for the mobile web worth while from a content provider and developer standpoint.
Standards compliant web browsers that use the same rendering engines as their desktop counterparts.
11
11
![Page 12: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/12.jpg)
12
12
![Page 13: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/13.jpg)
Why mobile?Of the 6 Billion people on Earth, 3.6 Billion people own or have access to mobile devices.
Of those 1.6 Billion (and growing rapidly) have access to the web through a mobile device.
Thats 500 million more people than have access to Internet connected desktop computers.
13
predicted growth of mobile web access
13
![Page 14: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/14.jpg)
“The [mobile] phone is bigger in its reach than the car (800 million), TV (1.5 billion), or Internet (1.1 billion). It will make bigger changes in the next decade than any of these did. The [mobile] phone adds the combined utility of the fixed telephone, Internet, computer, credit card, and TV. The phone will impact your life in more ways than we can imagine, because of its multi-functionality aspect, and its reach.” - Tomi Ahonen
http://fora.tv/2009/09/24/Mobile_Phones_The_Next_4_Billion_with_Tomi_Ahonen
14
14
![Page 15: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/15.jpg)
15http://www.quantcast.com/docs/display/info/Mobile+Report
Worldwide, the share of Internet pageviews originating from mobile devices increased 148% in the year to December ’09
15
![Page 16: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/16.jpg)
Global population vs Mobile population
16
16
![Page 17: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/17.jpg)
17http://www.quantcast.com/docs/display/info/Mobile+Report
Worldwide, the share of Internet pageviews originating from mobile devices increased 148% in the year to December ’09
17
![Page 18: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/18.jpg)
18http://gs.statcounter.com
Operating System share of mobile web
18
![Page 19: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/19.jpg)
19
Browser share of mobile web
http://gs.statcounter.com
19
![Page 20: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/20.jpg)
20
Browser share of mobile web by region - Africa
http://gs.statcounter.com
20
![Page 21: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/21.jpg)
21
Browser share of mobile web by region - South America
http://gs.statcounter.com
21
![Page 22: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/22.jpg)
22
Browser share of mobile web by region - Asia
http://gs.statcounter.com
22
![Page 23: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/23.jpg)
23
Browser share of mobile web by region - Japan
http://gs.statcounter.com
23
![Page 24: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/24.jpg)
24
Browser share of mobile web by region - Europe
http://gs.statcounter.com
24
![Page 25: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/25.jpg)
25
Browser share of mobile web by region - North America
http://gs.statcounter.com
25
![Page 26: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/26.jpg)
26
Browser share of mobile web by region - Oceania
http://gs.statcounter.com
26
![Page 27: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/27.jpg)
Identifying target market
The global mobile device market is especially fragmented. Usage trends rarely map neatly across geography or demographics such as age, wealth, gender, education, profession etc.
It is therefore critical more-so than ever to identify and profile your target users’ needs and capabilities.
27
27
![Page 28: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/28.jpg)
How do people use the mobile web?
Most common content segments are news, email, weather, sports, city guides, and social networks
Mobile users tend to perform quick, task based behaviours, often whilst in-between other tasks or multi-tasking.
28
![Page 29: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/29.jpg)
Mobile usage in Australia 2009
43% of online Australians now own a smartphone
26% of social network users participated in mobile social networking in the past year.
66% of mobile social networkers are under 35 years of age
29
http://blog.nielsen.com/nielsenwire/global/australia-getting-more-social-online-as-facebook-leads-and-twitter-grows/
29
![Page 30: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/30.jpg)
Mobile internet usage in Australia 2010
30http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/
96% of Australian consumers own a mobile phone
of these 41% use it to access the internet (up from 26% last year)
30
![Page 31: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/31.jpg)
Mobile internet usage in Australia 2010
31http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/
Accessing information was a key use of internet on mobile phones, with looking for maps, weather and news the top applications.
Social networking was also a highly used application; on par with people looking for information on products and services (56% each).
31
![Page 32: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/32.jpg)
Mobile internet usage in Australia 2010
32http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/
Australians are not just using the internet on their mobile phones when other methods of connection are not available. The most frequently nominated places for Australians to use the internet on their mobile phones was at home or work (42%), regardless of the fact that they were likely to have other methods to connect to the internet at either of these locations.
32
![Page 33: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/33.jpg)
Developing a mobile strategy
1. Define the users’ context.
2. Determine users’ goals and how they are altered by context.
3. Determine the tasks the users want to perform to achieve goals.
4. Filter content by context, such as location, media, and model.
33
![Page 34: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/34.jpg)
ContextMobile devices have an unparalleled ability to leverage the context in which information is consumed (and produced)
Context refers to the surroundings, circumstances, environment, background, or settings which determine, specify, or clarify meaning - a mental model to establish understanding.
physical context (e.g. location)
media context (what device is being used to access the content)
modal context (user’s state of mind)
34
![Page 35: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/35.jpg)
eRuv: A Street History in SemacodeWikitude
Context
35
![Page 36: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/36.jpg)
ContextWho are your users? What do you know about them? What type of behaviour can you assume or predict?
What is happening? What are the circumstances in which they will best absorb the content you intend to present?
When will they interact? When they are home and have large amounts of time? At work, where they have short periods of focus? During idle periods, while waiting for a train?
Where are they? Are they in a public space or a private space? Are they inside or outside? Is it day or is it night?
Why will they use your app? What value will they gain from your content or services in their present situation?
How are they using their mobile devices? Are they held in the hand or in the pocket? How are they holding it? Open or closed? Portrait or landscape?
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
36
![Page 37: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/37.jpg)
Application contextutility:
short, task-based scenarios
minimal input, at-a-glance information
e.g. calculator, clock, weather forecast
locale:
use geolocation data to add context to information - e.g. find restaurants close to me.
e.g. google maps, foursquare
informative:
only goal is to provide information. Importance is on providing relevant information up front.
e.g. news sites, google reader, wikipedia
productivity:
heavily task-based content and services.
e.g. ebay, banking
immersive:
designed to consume the user’s attention.
often for entertainment purposes.
e.g. games, video, google street-view37
![Page 38: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/38.jpg)
Application context
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
38
![Page 39: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/39.jpg)
Sovereign vs Transient application
sovereign application monopolises the user's attention for long periods of time (e.g. wordprocessor)
transient application comes and goes, presenting a single, high-relief function with a tightly restricted set of accompanying controls. The program is called when needed, it appears and performs its job, then it quickly leaves (e.g. instant messaging/SMS application)
desktop applications tend to be sovereign while mobile applications tend to be transient.
39
![Page 40: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/40.jpg)
Advantages of Mobile Devices
PopularityPersonal and personalisablePortableConstant connectivity, always on and always with youAt the point of creative impulseBuilt-in payment channelCaptures social context of media consumption/productionCan interact with their environment
40
![Page 41: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/41.jpg)
Mobile devices can interact with their environment
clockcalendartelephonymessagingambient lightcompass
cameramicrophonethermometergeolocationaltitude
41
![Page 42: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/42.jpg)
Mobile is a usage scenario more than a form factor
mobile users are mobile
they expect applications to adapt to their (unpredictable) surroundings
42
![Page 43: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/43.jpg)
Mobile Device Design ConstraintsPresentation Issues
Screen size, resolution, colour reproduction
http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html43
![Page 44: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/44.jpg)
Mobile Device Design Constraints
InputLimited keypad, small keysPointing device? Touch? D-pad?Affects navigation
Bandwidth & CostSpeed and latency issues, especially for lengthy content or content that requires a lot of navigation between pages
44
![Page 45: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/45.jpg)
Mobile Device Design Constraints
Hardware limitationsProcessing power, memory, battery life etc.
Usage environment is unpredictable and changing (e.g. lighting conditions)User Goals
more immediate and goal-directed intentions than desktop web users
Limited, adhoc or no standards complianceLimited implementations of html, css and JavaScript
45
![Page 46: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/46.jpg)
Mobile Device Design ConstraintsDevice fragmentation
Proprietary browsersThe range of device and browser capabilities is much, much more varied than on the desktop
Taming the madness - databases like Device Atlas and WURFL which contain data on thousands of mobile devices.
46
![Page 47: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/47.jpg)
Implementation options for mobile applications
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
47
![Page 48: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/48.jpg)
Native application vs web application?
http://www.alistapart.com/articles/apps-vs-the-web/
http://www.readwriteweb.com/archives/will_mobile_web_apps_eventually_replace_native_apps.php
http://mobileanalyticssimplified.com/post/439404358/the-future-is-the-mobile-web-not-the-mobile-app
48
![Page 49: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/49.jpg)
Native mobile application
49
Pros
Offer best user experience, leveraging all device features.
Built in revenue model (app stores)
Cons
Cannot be easily ported to other mobile platforms - multiple device support is costly.
Require certification and distribution from a third party that you have no control over.
Require you to share revenue with one or more third parties.
49
![Page 50: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/50.jpg)
Mobile web application
50
Pros
Easy to create, using basic HTML, CSS, and JavaScript knowledge.
Simple to deploy across multiple handsets.
Content is accessible on any mobile web browser.
Cons
Can be challenging (but not impossible) to support across multiple devices.
They don’t always support native application features, like offline mode, location lookup, filesystem access, camera, etc.
50
![Page 51: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/51.jpg)
Multiple phone web based application frameworks
Allow you to write your application using HTML/CSS/Javascript, but then package it as a native application for multiple mobile platforms.
http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework
51
51
![Page 52: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/52.jpg)
W3C Mobile Web Best Practices 1.0
http://www.w3.org/TR/mobile-bp
52
![Page 53: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/53.jpg)
Mobile browser capabilities
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
53
![Page 54: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/54.jpg)
Main Mobile Browser Engines
54
Webkit Presto Gecko Trident
SafariChrome
Mobile SafariAndroid Browser
BlackberryPalmKindle
OperaOpera Mobile
FirefoxFirefox Mobile
(Fennec)
Internet ExplorerIE Mobile
54
![Page 55: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/55.jpg)
Webkit
Same rendering engine as used in Safari and Chrome on the desktop - capable of rendering the “real web” on mobile.
Standards compliant.
Used in mobile browsers by Apple, Android and Nokia, which together account for by far the largest chunk of of the mobile internet market.
Influencing other browsers to catch up fast.
55
55
![Page 56: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/56.jpg)
HTML 5 to the rescue.HTML 5, and the current climate of intense development around optimising both desktop and mobile browsers for web applications are quickly closing the gap between web and native applications, especially in the mobile domain.
http://html5demos.com/
http://www.chromeexperiments.com/
http://www.apple.com/html5/
New functionality allowed by HTML 5 includes:
native support for audio and video (without plugin)
canvas element for drawing / animation
document editing
offline storage (keep working without internet connection)
drag and drop
geolocation
56
56
![Page 57: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/57.jpg)
Geolocationhttp://dev.w3.org/geo/api/spec-source.html
http://diveintohtml5.org/geolocation.html
http://mobile.tutsplus.com/tutorials/html5/html5-geolocation/
https://student.ci.qut.edu.au/~sade/geo/geo-watch-example.html
57
57
![Page 58: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/58.jpg)
CSS 3allows for creating more complex designs using the minimum of images, making it ideal for mobile design
gradients
transitions
animations
custom typography
http://www.css3.info/preview/
58
58
![Page 59: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/59.jpg)
JavascriptDHTML
AJAX
event handling (e.g. multi-touch events)
http://tlrobinson.net/blog/2008/07/11/multitouch-javascript-virtual-light-table-on-iphone-v20/
http://jquerymobile.com/
59
59
![Page 60: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/60.jpg)
Full-screen web apps
60
<meta content="width=device-width, user-scalable=no, initial-scale=1.0" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/myappicon.png"/>
<link rel="apple-touch-startup-image" href="images/startup.png"/>
http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
60
![Page 61: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/61.jpg)
Trends towards the future...The trends are towards even more “native” feel.
persistence
push
more APIs for accessing phone features (telephony, address book, location, camera, media, filesystem etc.)
embedded web (pervasive throughout phone os)
http://www.slideshare.net/pgolding/mobile-web-evolution-rich-mobile-applications-and-realtime-web-ux
http://www.slideshare.net/ricferraro/evolution-of-mobile-web-ric-ferraro-presentation
61
![Page 62: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/62.jpg)
Native application vs web application - the narrowing gap.
http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-devfest0962
![Page 63: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/63.jpg)
Native application vs web application?
either way the implementation may differ, the design principles are very much the same
63
![Page 64: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/64.jpg)
64
![Page 65: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/65.jpg)
Designing for multiple screen sizes and orientations
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
65
![Page 66: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/66.jpg)
Average screen size is increasing.
66
![Page 67: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/67.jpg)
Pixel density
physical screen size and resolution do not map as neatly on mobile as they do on desktop
pixel density is increasing faster than physical screen size (fingers remain largely the same)
67
![Page 68: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/68.jpg)
Designing for multiple screen sizes and orientations
Decide early on which screen sizes you will design for (needs analysis).
Write semantic code that communicates without the addition of complex visuals.
Where possible use flexible layouts that automatically adapt/scale to screen width. (Modern, touch browsers are good at doing this themselves with pinch-zoom, tap-zoom and auto-orientation)
Responsive web design with CSS media queries - http://www.alistapart.com/articles/responsive-web-design/
Define rules for content adaption across screen sizes.
68
![Page 69: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/69.jpg)
Viewport meta tags
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width=device-width" />
69
![Page 70: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/70.jpg)
Viewport meta tags
With Without70
![Page 71: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/71.jpg)
Information architecture - Navigation
Most make or break component of mobile interface design. Users will quickly get frustrated with poor navigation and go elsewhere / give up.
Affected by both display and input and compounded by the network latency.
71
![Page 72: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/72.jpg)
Navigation - inputScroll Touch
72
![Page 73: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/73.jpg)
Design touch friendly web pages
Finger tips are typically around 10mm in size
Space elements far enough apart to avoid overlaps between touch targets.
A stylus can easily be used on an interface designed for touch, but not the other way round.
Take advantage of multi-touch gestures
use sensors, local storage, contextual form inputs etc to reduce required manual input.
73
![Page 74: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/74.jpg)
Contextual HTML5 form inputs
74
74
![Page 75: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/75.jpg)
Contextual HTML5 form inputs
75
75
![Page 76: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/76.jpg)
Mobile contextual links<a href="tel:0412345678">Call Me</a>
<a href="sms:0412345678">SMS Me</a>
76
76
![Page 77: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/77.jpg)
Navigation - desktop vs mobile
Typical desktop webpage layout with horizontal primary navigation and secondary sidebar navigation does not map well to the mobile
77
![Page 78: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/78.jpg)
Navigation - desktop vs mobile
Typical mobile webpage layout
Design for vertical scrolling
The most contextual information at the top
Content consumes majority of the screen
Exit points at the bottom
78
![Page 79: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/79.jpg)
Navigation - mobileThe most common method of creating mobile navigation schemes is to use a simple vertical list of options, often assigning and listing the corresponding numbers (0–9) to the accesskeys for keypad navigation.
Showing multiple levels of navigation within your list usually doesn’t work well because it gives users too many options and consumes valuable screen area. A better way is to show only the options related to the page they’re viewing.
http://mobiforge.com/book/mobile-web-navigation-paradigms79
![Page 80: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/80.jpg)
Putting contextually relevant information above the fold
The area of a page that is viewable without scrolling (known as “above the fold”) is much smaller on a mobile screen.
The most contextually relevant information should appear above the fold.
80
![Page 81: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/81.jpg)
Use top-aligned labels for forms
81
![Page 82: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/82.jpg)
Don’t reinvent the wheelOften (but not always) common design problem patterns have common solutions. Take advantage of the research and expertise of others.
http://patterns.design4mobile.com/index.php/Main_Page#Design_Patterns
http://patterntap.com/
http://www.mobileawesomeness.com/
http://www.smashingmagazine.com/2009/01/13/mobile-
82
![Page 83: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/83.jpg)
Designing for different mobile browser capabilities
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
83
![Page 84: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/84.jpg)
Progressive enhancement / graceful degradation
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
84
![Page 85: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/85.jpg)
Keep content, logic and presentation separate
Model
Controller
Views
e.g. MySQL Database
e.g. Wordpress
e.g. Template
Model-View-Controller Framework
85
![Page 86: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/86.jpg)
Model
Controller
Desktop Views Mobile Views
Keep content, logic and presentation separate
e.g. MySQL Database
e.g. Wordpress
e.g. Template
86
![Page 87: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/87.jpg)
Wordpress Mobile Pack Pluginhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/
Selects themes based on the type of user visiting the site.
87
![Page 88: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/88.jpg)
XSLT (Extensible Stylesheet Language Transformations)
Content is defined as XML and then XSLT is used, along with multiple markup languages like HTML, XHTML, WML, XHTML Basic, XHTML-MP, and so on, to provide the proper rendering markup for the viewing context
http://www.w3schools.com/xsl/
http://en.wikipedia.org/wiki/XSLT
88
![Page 89: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/89.jpg)
Device Independent Authoring Language (DIAL)
Working draft standard for a markup language for the filtering and presentation of Web page content available across different delivery contexts.
intended XML language profile of XHTML2 (also a draft)
http://www.w3.org/TR/dial/
89
![Page 90: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/90.jpg)
CSS media queries
http://css-tricks.com/6731-css-media-queries/
http://www.w3.org/TR/css3-mediaqueries/
90
![Page 91: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/91.jpg)
Detect client capabilities with Javascript
mo
http://diveintohtml5.org/detect.html#geolocation91
![Page 92: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/92.jpg)
ModernizrModernizr is a small JavaScript library that detects the availability of native implementations for next-generation Web Technologies.
http://www.modernizr.com/92
![Page 93: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/93.jpg)
Desktop Web to Mobile WebWhat content/functionality from my desktop web site will be useful on a mobile device?
How will it need to be re-presented so that it works in a mobile context?Will it still be familiar to the user once it is re-presented?
What content/functionality will I leave out of the mobile website?
Will it break?What extra or enhanced functionality can a mobile website offer my users that the desktop version does not?
93
![Page 94: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/94.jpg)
Desktop Web to Mobile WebDesktop
Mobile
Shared functionality, different presentation
Extended/enhanced functionality
94
![Page 95: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/95.jpg)
Cipher Cities Desktop Vs Mobile
95
![Page 96: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/96.jpg)
Cipher Cities Desktop Vs Mobile
96
![Page 97: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/97.jpg)
What are the range of device capabilities my mobile website will target?
What devices do my prospective users have?What devices are capable of providing the functionality my users will want?Trade-off of functionality vs. risk of alienating users with incapable devices
97
![Page 98: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/98.jpg)
Option 1 - Do Nothing
Desktop version of site is served to mobile devices un-altered
98
![Page 99: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/99.jpg)
Option 2 - Multi-ServeSame page content delivered to mobile and desktop devices, but CSS and resources (e.g. images) are tailored to the smaller form factor
99
![Page 100: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/100.jpg)
Option 3 - Mobile-Specific
Mobile-specific content is created and served to mobile devices.
100
![Page 101: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/101.jpg)
SPEEED!
101
![Page 102: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/102.jpg)
In practical terms...
A single 500KB webpage will take a minute to download over a GSM connection.
This is the best case scenario - cell networks almost never operate near theoretical maximum speeds and this doesn’t take into account typically high cell network latency and slow browser rendering speed on low-powered mobile devices.
The same page could be downloaded and rendered in under a second on a modern desktop browser over a wifi connection.
102
![Page 103: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/103.jpg)
Users won’t see what they can’t be bothered to wait for to display
Most uses find wait times more than a few seconds unacceptable. Tolerance is even less if page refreshes are frequent or the context is that of an application where perceived lag will be compared with native apps.
103
![Page 104: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/104.jpg)
A picture isn’t always worth a thousand words.
It takes roughly the same amount of space to store a character as a pixel. Therefore a 70px x 70px image takes as long to download as 1000 words of text.
Compress your images (duh).
Resolution and colour depth both affect image size. Find out what the display capabilities of your target devices are and only serve images of the required dimensions and colour depth.
Many older browsers give the option (often by default) to view pages without images, so make sure to code your HTML semantically so it makes sense without them (e.g. include alt-text)
104
![Page 105: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/105.jpg)
Other speed optimisationsKeep it simple. If it’s not necessary, don’t include it. This includes content (text/image/audio/video etc.) styles, javascript etc.
This applies to download and rendering speed. Complex stylesheets and javascript require more CPU time and as a result adversely affect battery life.
Avoid over-pagination. Due to network latency, it may take longer to refresh the page twice than to load double the content.
Text can be compressed just like images. Always use minified versions of code libraries and serve compressed HTML/CSS/Javscript if the browser supports it.
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
105
![Page 106: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/106.jpg)
Testing mobile websites -Desktop testing
A good deal of your testing can be done on a desktop web browser. In the case of modern, webkit mobile browsers they should effectively render the same.
In the least case you can verify and validate the majority of HTML, CSS and Javascript and do some functional testing.
http://validator.w3.org/mobile/
You can use iframes to simulate mobile viewports
106
![Page 107: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/107.jpg)
Testing mobile websites
In an ideal world you would have one of every device your are targeting to test on.
Try and at least test on one real device that is indicative of your main target market.
If you can’t afford one, borrow, or even test on demo devices in store.
Get the users to test for you with their own devices - provide an easy method for users to give feedback.
107
![Page 108: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/108.jpg)
Usability Testing
Test with real users in real contexts.
Active - go to the users. Conduct workshops, trials etc.
Passive - provide a way for users to send you feedback.
108
![Page 109: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/109.jpg)
Functional Testing
Tests if your implementation is functional - the features/mechanics of your site.
109
![Page 110: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/110.jpg)
Contextual TestingTests if your design has successfully solved the design problem.
How does the user experience render on the device?
Does it load quickly, correctly? Progress indicators? On wi-fi, 3G, 2G?
Do the physical features of the device work correctly? (keys, orientation change etc.)
What happens if the device loses its connection? Can it work in offline mode and recover once connection is re-established.
Does geolocation provide an acceptable level of accuracy in different environments?
etc.
110
![Page 111: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/111.jpg)
Testing mobile websites -Desktop testing
User agent switcher extension for Firefox - http://chrispederick.com/work/user-agent-switcher/
111
![Page 112: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/112.jpg)
Testing mobile websites -Desktop testing
Opera’s small-screen view
112
![Page 113: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/113.jpg)
Testing mobile websites -Simulators and Emulators
dotMobi emulator - http://mtld.mobi/emulator.php113
![Page 114: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/114.jpg)
Mobile Emulators & SimulatorsModel Official Platform Type Browser testing Compatibility
Apple iOS Official iOS Simulator Safari Mac
Google Android Official Android Emulator Android Win, Mac, Unix
Nokia Symbian Official Symbian Emulator S60 Browser Win
Windows Phone 7 Official Windows Phone Emulator Internet Explorer Win
BlackBerry Official RIM OS Emulator RIM Browser Win
HP webOS Official webOS Virtual Machine webOS Win, Mac, Unix
Opera Mobile Official multi-platform Simulator Opera Mobile Win, Mac, Unix
Opera Mini Official multi-platform Online Emulator Opera Mini Win, Mac, Unix
Firefox for Mobile Official multi-platform Simulator Firefox Mobile Win, Mac, Unix
https://github.com/shichuan/mobile-html5-boilerplate/wiki/Mobile-Emulators-%26-Simulators
114
![Page 115: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/115.jpg)
Testing mobile websites -Remote Access to Real Devices
Device Anywhere - http://www.deviceanywhere.com/115
![Page 116: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/116.jpg)
The Cipher Cities Mobile Web Design Process...
116
![Page 117: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/117.jpg)
Research the FieldFeasibility analysis
Current device capabilities and future trends Market saturationWeb mobile usage statisticsDifferent delivery approaches: native application vs mobile web browser
117
![Page 118: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/118.jpg)
Research the Field
http://www.mobileawesomeness.com/118
![Page 119: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/119.jpg)
Workshop Design Ideas and User Case Scenarios
119
![Page 120: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/120.jpg)
Digital Mockups
120
![Page 121: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/121.jpg)
So what did we decide?Enhanced Play
ability to search and join games on the move start and stop games access game descriptions and information
Build tools that took advantage of ‘on site’ buildingMessaging
121
![Page 122: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/122.jpg)
So what did we decide?
122
![Page 123: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/123.jpg)
Login
123
![Page 124: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/124.jpg)
Home
124
![Page 125: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/125.jpg)
Game Details / Game Poster
125
![Page 126: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/126.jpg)
Play
126
![Page 127: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/127.jpg)
Builder
127
![Page 128: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/128.jpg)
Messaging
128
![Page 129: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/129.jpg)
Categorisation & Navigation
129
![Page 130: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/130.jpg)
And the cycle continues
User Testing
Feedback
Workshops
Design
Develop
130
![Page 131: Mobile Web Design & Development 2012 Lecture](https://reader031.vdocuments.site/reader031/viewer/2022012918/54c7cef94a79590b498b460b/html5/thumbnails/131.jpg)
In Conclusion...Always design for the users
They provide the context for the application of theoretical design principles
Interface development is an iterative and ongoing process.Interface design never goes from idea to resolution in one step…
131