Entertainment:
goal is to provide helpful information goal is to engage and entertain
and guidance e.g. games, music, video
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
Context
- Physical context: Where are they? Location awareness can provide contextually relevant information.
- Temporal context: When are they interacting? Time of day/week influences user goals and attention levels.
- Social context: Who are they with? Alone or with others impacts privacy, sharing and collaboration needs.
- Technological context: What device are they using? Screen size, input methods and connectivity shape the experience.
-
Mobile Trends 2008 - America's Emerging Mobile WebMarta Strickland
What is the Mobile Web really? This study looks into how mobile has taken off in other countries compared to the US, and where the American mobile web story is headed. It explores emerging trends and how it relates to 4 mobile personas. Who are the mobile web users, and how/where do you reach them?
3.3 Billion active mobile accounts worldwide. That’s 1 phone for every 2 people on the planet. Broadband, “real” web browsing, widgets, social extensions, and streaming television are changing the marketplace, requiring us to write new best practices.
The past, present, and future outlook of Mobility. This presentation tracks everything from the first transistor created in 1947, through the exabytes of data created every month.
As a follow-up to "Meet the Screens," published last year, which outlines how people engage with different screen devices, BBDO partnered with Collective to commission and analyze data from Nielsen, and looked to best...
Ericsson ConsumerLab: Bridging the Digital DivideEricsson
http://www.ericsson.com/thinkingahead/consumerlab
Ericsson has released its first regional consumer insight report focusing on trends and analysis of the mobile ecosystem in Sub-Saharan Africa.
Netpop | Pocket: Growing The Mobile Marketplace PreviewNetpop Research
Summary of Netpop Research's 2009 Growing the Mobile Marketplace report. For more information about the full report, go to http://netpopresearch.com/node/26589
I spoke about “Transparent Tech Trends of 2012” for the Indiana Library Federation’s Reference Division Conference (with its conference theme of Tech Trends in Libraries: Seeing the Forest for the Trees.) on August 7, 2012 at the Noblesville Branch of the Hamilton East Public Library in Indianapolis, Indiana.
Mobile Trends 2008 - America's Emerging Mobile WebMarta Strickland
What is the Mobile Web really? This study looks into how mobile has taken off in other countries compared to the US, and where the American mobile web story is headed. It explores emerging trends and how it relates to 4 mobile personas. Who are the mobile web users, and how/where do you reach them?
3.3 Billion active mobile accounts worldwide. That’s 1 phone for every 2 people on the planet. Broadband, “real” web browsing, widgets, social extensions, and streaming television are changing the marketplace, requiring us to write new best practices.
The past, present, and future outlook of Mobility. This presentation tracks everything from the first transistor created in 1947, through the exabytes of data created every month.
As a follow-up to "Meet the Screens," published last year, which outlines how people engage with different screen devices, BBDO partnered with Collective to commission and analyze data from Nielsen, and looked to best...
Ericsson ConsumerLab: Bridging the Digital DivideEricsson
http://www.ericsson.com/thinkingahead/consumerlab
Ericsson has released its first regional consumer insight report focusing on trends and analysis of the mobile ecosystem in Sub-Saharan Africa.
Netpop | Pocket: Growing The Mobile Marketplace PreviewNetpop Research
Summary of Netpop Research's 2009 Growing the Mobile Marketplace report. For more information about the full report, go to http://netpopresearch.com/node/26589
I spoke about “Transparent Tech Trends of 2012” for the Indiana Library Federation’s Reference Division Conference (with its conference theme of Tech Trends in Libraries: Seeing the Forest for the Trees.) on August 7, 2012 at the Noblesville Branch of the Hamilton East Public Library in Indianapolis, Indiana.
A Posteriori Perusal of Mobile ComputingEditor IJCATR
The breakthrough in wireless networking has prompted a new concept of computing, called mobile computing in which users tote
portable
devices have
access to a shared infrastructure, independent of their physical location. Mobile computing is becoming increasingly vital du
e to the
increase in the number of portable computers and the aspiration to have continuous network connectivity to the Internet i
rrespective of the physical
location of the node.
Mobile computing systems
are computing systems that may be readily moved physically and whose computing ability may be
used while they are being moved. Mobile computing has rapidly become a vital new examp
le in today's real world of networked computing systems. It
includes software, hardware and mobile communication. Ranging from wireless laptops to cellular phones and WiFi/Bluetooth
-
enabled PDA‟s to
wireless sensor networks; mobile computing has become ub
iquitous in its influence on our quotidian lives. In this paper various types of mobile
devices are talking and they are inquiring into in details and existing operation systems that are most famed for mentioned d
evices are talking. Another
aim of this pa
per is to point out some of the characteristics, applications, limitations, and issues of mobile computing
Presentation by Amy Gahran to the Knight Digital Media Center's Mobile Symposium, held April 2011 at the journalism schools of the Univ. of Nebraska (Lincoln) and the Univ. of Montana (Missoula).
Audience: editors, managers, and staff of news organizations from around each state, and faculty from the communications schools (journalism and advertising) at both universities.
+ Overview of MOBILE EVOLUTION AND DEVELOPMENT OF THE INTERNET.
+ MOBILE INTERNET: TRENDS AND GROWTH
+ BENEFITS OF THE MOBILE INTERNET
+ CHALLENGES OF THE MOBILE INTERNET
+ SOLUTIONS
The rapid rise of portable technology has forever changed the world we live in. The mobile phone is the world’s largest Internet, computing and communications platform with 2.3bn users; Laptops have overtaken desktops as the PC of choice; the iPod has sold 100m units and a whole wealth of mobile media technologies such as portable
video players are on the cusp of going mass market.
The emergence of these portable platforms has happened in tandem with the massive growth in social media, creating a proliferation of content such as video clips, digital photos, games, podcasts and
vodcasts that can be downloaded or transferred to portable devices and consumed in an out-of-home environment.
A Platform for Mobile Enterprise Management: Build, Run and Manage Your Mobil...Antenna Software
To offer a truly differentiated mobile experience, businesses need to consider the full spectrum of what mobility has to offer. AMPchroma provides the overarching paradigm for achieving mobility excellence and is the only mobile cloud platform that enables you to deliver on this promise.
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...Wayne Chen
My third academic lecture on mobile and technology at the American University. Thanks to the students for having me to speak in their global economics class led by Dr. Leroy Miller, professor of marketing.
Social networking and the next generation of handheld devices will improve business decision-making through efficient, unified communications and location awareness.
The mobile is moving well beyond its role as a communication device, becoming an enabler for a wide range of experiences from TV viewing to shopping to banking. And mobile connectivity is disrupting industries from retail to auto to finance and beyond. The consensus is that change is occurring at an astonishing scale and speed.
In this report, JWTIntelligence outlines key trends in evidence at the GSMA’s Mobile World Congress, held in Barcelona in late February, along with examples that illustrate these developments and implications for brands. The report also incorporates insights from interviews with several mobile experts and influencers.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
2. 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
3. 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
7. Feature phone era: 1998 -
2008
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
8. Smart phones: 2002 -
present
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
9. Some early mobile web browsers
Text
NetHopper for Apple Pocket Internet Explorer Opera Mini
Newton 3.0
http://www.phonearena.com/news/Evolution-of-mobile-web-browsing_id9059 9
11. 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
13. 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
predicted growth of mobile web access
than have access to Internet
connected desktop computers.
13
14. “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/
14
15. Worldwide, the share of Internet pageviews originating from
mobile devices increased 148% in the year to December ’09
http://www.quantcast.com/docs/display/info/Mobile+Report 15
17. Worldwide, the share of Internet pageviews originating from
mobile devices increased 148% in the year to December ’09
http://www.quantcast.com/docs/display/info/Mobile+Report 17
20. Browser share of mobile web by region - Africa
http://gs.statcounter.com 20
21. Browser share of mobile web by region - South America
http://gs.statcounter.com 21
22. Browser share of mobile web by region - Asia
http://gs.statcounter.com 22
23. Browser share of mobile web by region - Japan
http://gs.statcounter.com 23
24. Browser share of mobile web by region - Europe
http://gs.statcounter.com 24
25. Browser share of mobile web by region - North America
http://gs.statcounter.com 25
26. Browser share of mobile web by region - Oceania
http://gs.statcounter.com 26
27. 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
28. 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.
29. 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
http://blog.nielsen.com/nielsenwire/global/australia-getting-more-social-
online-as-facebook-leads-and-twitter-grows/ 29
30. Mobile internet usage in Australia 2010
96% of Australian
consumers own a
mobile phone
of these 41% use it to
access the internet (up
from 26% last year)
http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/
30
31. Mobile internet usage in Australia 2010
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).
http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/
31
32. Mobile internet usage in Australia 2010
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.
http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/
32
33. 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.
34. Context
Mobile 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)
35. Context
Wikitude eRuv: A Street History in Semacode
36. Context
Who 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
37. Application context
utility: informative:
short, task-based scenarios only goal is to provide information.
Importance is on providing relevant
minimal input, at-a-glance information information up front.
e.g. calculator, clock, weather e.g. news sites, google reader,
forecast wikipedia
locale: productivity:
use geolocation data to add context heavily task-based content and
to information - e.g. find restaurants services.
close to me.
e.g. ebay, banking
e.g. google maps, foursquare
immersive:
designed to consume the user’s
attention.
often for entertainment purposes.
e.g. games, video, google street-view
38. Application context
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
39. 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.
40. Advantages of Mobile
Devices
Popularity
Personal and personalisable
Portable
Constant connectivity, always on and always with you
At the point of creative impulse
Built-in payment channel
Captures social context of media consumption/
production
Can interact with their environment
41. Mobile devices can interact
with their environment
clock
camera
calendar
microphone
telephony
thermometer
messaging
geolocation
ambient light
altitude
compass
42. Mobile is a usage scenario more than a
form factor
mobile users are mobile
they expect applications to adapt to their
(unpredictable) surroundings
44. Mobile Device Design Constraints
Input
Limited keypad, small keys
Pointing device? Touch? D-pad?
Affects navigation
Bandwidth & Cost
Speed and latency issues, especially for lengthy
content or content that requires a lot of navigation
between pages
45. Mobile Device Design Constraints
Hardware limitations
Processing 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 compliance
Limited implementations of html, css and JavaScript
46. Mobile Device Design Constraints
Device fragmentation
Proprietary browsers
The 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.
47. Implementation options for
mobile applications
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
48. 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
49. Native mobile application
Pros Cons
Offer best user experience, Cannot be easily ported to
leveraging all device features. other mobile platforms -
multiple device support is
Built in revenue model (app
costly.
stores)
Require certification and
distribution from a third party
that you have no control over.
Require you to share revenue
with the one or more third
parties.
49
50. Mobile web application
Pros Cons
Easy to create, using Can be challenging (but
basic HTML, CSS, and not impossible) to support
JavaScript knowledge. across multiple devices.
Simple to deploy across They don’t always
multiple handsets. support native application
features, like offline mode,
Content is accessible on
location lookup,
any mobile web browser.
filesystem access,
camera, etc.
50
51. W3C Mobile Web Best Practices 1.0
http://www.w3.org/TR/mobile-bp
52. Mobile browser capabilities
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
53. Main Mobile Browser Engines
Webkit Presto Gecko Trident
Safari
Chrome
Mobile Safari Firefox
Opera Internet Explorer
Android Browser Firefox Mobile
Opera Mobile IE Mobile
Blackberry (Fennec)
Palm
Kindle
53
54. 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.
54
55. HTML 5 to the rescue.
HTML 5, and the current climate of New functionality allowed by HTML
intense development around 5 includes:
optimising both desktop and
native support for audio and
mobile browsers for web
video (without plugin)
applications are quickly closing the
gap between web and native canvas element for drawing /
applications, especially in the animation
mobile domain.
document editing
http://html5demos.com/
offline storage (keep working
http:// without internet connection)
www.chromeexperiments.com/
drag and drop
http://www.apple.com/html5/
geolocation
55
57. CSS 3
allows 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/
57
60. 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. Native application vs web application -
the narrowing gap.
http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-devfest09
62. Native application vs web application?
either way the implementation may differ, the design
principles are very much the same
63.
64. 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
66. 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. 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.
70. 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.
72. 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.
76. Navigation - desktop vs mobile
Typical desktop webpage
layout with horizontal primary
navigation and secondary
sidebar navigation does not
map well to the mobile
77. 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. Navigation - mobile
The 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-paradigms
79. 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.
81. Don’t reinvent the wheel
Often (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/
82. 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. Progressive enhancement / graceful
degradation
from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
84. Keep content, logic and presentation separate
Model-View-Controller Framework
e.g. Template Views
e.g. Wordpress Controller
e.g. MySQL Database Model
85. Keep content, logic and presentation separate
Desktop
e.g. Template Mobile Views
Views
e.g. Wordpress Controller
e.g. MySQL Database Model
86. Wordpress Mobile Pack Plugin
http://wordpress.org/extend/plugins/wordpress-mobile-
pack/
Selects themes based on the type of user visiting the site.
87. 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. 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/
91. Modernizr
Modernizr is a small JavaScript library that detects the
availability of native implementations for next-generation Web
Technologies.
http://www.modernizr.com/
92. Desktop Web to Mobile Web
What 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. Desktop Web to Mobile Web
Desktop
Shared functionality,
different presentation
Extended/enhanced
functionality
Mobile
96. 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. Option 1 - Do Nothing
Desktop version of site is served to mobile devices un-
altered
98. Option 2 - Multi-Serve
Same page content delivered to mobile and desktop
devices, but CSS and resources (e.g. images) are
tailored to the smaller form factor
99. Option 3 - Mobile-Specific
Mobile-specific content is created and served to mobile
devices.
101. 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. 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. 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. Other speed optimisations
Keep 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. 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. 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. 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. Functional Testing
Tests if your implementation is functional - the features/
mechanics of your site.
109. Contextual Testing
Tests 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. Testing mobile websites -
Desktop testing
User agent switcher extension for
Firefox - http://chrispederick.com/
work/user-agent-switcher/
112. Testing mobile websites -
Simulators and Emulators
dotMobi emulator - http://mtld.mobi/emulator.php
113. Mobile Emulators & Simulators
Model 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. Testing mobile websites -
Remote Access to Real Devices
Device Anywhere - http://www.deviceanywhere.com/
116. Research the Field
Feasibility analysis
Current device capabilities and
future trends
Market saturation
Web mobile usage statistics
Different delivery approaches:
native application vs mobile web
browser
120. 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’ building
Messaging
129. And the cycle continues
User Testing
Feedback
Workshops
Design
Develop
130. 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…