How to design mobile sites and apps without getting buried in technology. Choosing what platforms to support, tradeoffs between mobile sites and native apps, design considerations for small screens and touchscreens.
Call Girls Service Mukherjee Nagar @9999965857 Delhi ๐ซฆ No Advance VVIP ๐ SER...
ย
Beyond the Desktop: Sites and Apps for Phones and Tablets
1. Beyond the
Desktop
Sites and Apps for Phones &
michael@webvanta.com 888.670.6793
2. Questions?
โข Ask at any time! We want to know
what youโre wondering about.
โข Just enter your question in the chat
box.
โข We will address as many questions
as we can in the webinar and the
remainder via email afterwards.
3. Agenda
โข Why mobile?
โข Web sites, web apps, and native apps
โข Example: MI Energy Core
โข Small-screen and touchscreen design
โข Design for tablets
โข Design process
4. Presenters
Michael Slater
CEO, Webvanta
Patrick Schutte
Business Development Consultant,
MI Windows & Doors
5. Why Mobile?
โข Smartphone sales to exceed PC sales in
2012
โข 750,000 iOS+Android devices activated
every day
โข ~10% of web traffic and growing rapidly
โฃ > 1 billion people with mobile data plans
โข > $4 billion/year in mobile commerce
โข The primary web platform in many countries
6. Mobile is Different
โข Small screen
โข Touchscreen
โข Always with you
โข Always connected
โข New app platforms and distribution
systems
โข New sensors (camera, GPS, compass,
accelerometer)
15. Native App
Advantages
โข Best performance
โข Access to non-web-standard
devices
โฃ Camera, GPS, accelerometer
โฃ Multitouch
โข App Store distribution channel
16. Native App
Disadvantages
โข Each platform has its own native
apps
โฃ Each has its own tools and languages
โข Substantial programming skills
required
โฃ Unless you use simple site-builders
โข Users must install your app
18. Creating Cross-
Platform Native
โข Third-party frameworks
create apps on multiple
platforms
โข PhoneGap best for simpler
apps, encapsulating web
content
โข Titanium good for more
complex apps
19. Web Apps
โข There is a (partial) way out of the
multi-platform nightmare!
โฃ Choose the web as the platform
โฃ HTML5, CSS3, JavaScript
โข Limited access to devices and sensors
โข No presence in app store
โข No icon on phone, unless user creates
one
20. Whereโs the Data?
โข Phones and tablets donโt Database
always have connectivity (content
repository)
โข Websites and webapps
dependent on web access
โฃ Some offline features are Website
available in browsers
โข App can receive new
content from an online Browser App
source
21. Example:
MI Windows &
โข Provide product
information to
consumers, dealers,
Text
and installers
โข Desktop website Presenter:
โข Mobile website Patrick Schutte
MI Windows & Doors
โข Tablet app
22.
23.
24.
25. Small-Screen
Design
โข Minimal
navigation
โข No sidebars or
multi-column
layouts
โข Pare down to the
essentials
26.
27. Small
Screen
โข Topnav must be
kept simple, no
dropdowns
โข Footer menu can
provide additional
items
28. Mobile & Desktop
Pages
โข Separate pages allow Database
delivery of different
HTML
โฃ Otherwise limited to CSS
Mobile
& JS techniques Pages Desktop
Pages
โข Database-driven
content allows two sets
of pages to be driven by
29. Responsive Design
โข A technique for avoiding having separate
pages for desktop and mobile
โข Change page by delivering different CSS for
different screen sizes (using media queries)
โข Page contents (HTML) remains the same
โข Images scaled by the browser
โฃ Can use JS to deliver small image ๏ฌrst, then
larger one if a desktop browser
30.
31.
32.
33. Design for
On-the-Go Users
โข Action-oriented
โข Impatient
โข One-handed
โข Speci๏ฌc needs
โฃ Whatโs the phone number?
โฃ How do I get there?
โฃ Can I get a reservation?
34. Design for
Touchscreens
โข No hover (tooltips, dropdowns)
โข Use large touch targets
โฃ Apple rec. min. 29 px wide x 44 px
tall
โฃ Leave space between touch targets
โข Support ๏ฌexible layout
โฃ Size, orientation
36. Mobile Forms
โข Much tougher environment for user to be
๏ฌlling out forms
โฃ Number of ๏ฌelds must be ruthlessly
minimized
โข Form widgets are provided by the browser
โฃ Some quite different on Android vs. iOS
โข New HTML5 input types help usability
โฃ Show the best keyboard for the task
37. Tablets are
Like Phones
โข Run mobile browsers
โข Touchscreen
interface
โข Use a mobile OS
โข Sometimes used in
mobile setting
38. Tablets are
Like Desktops
โข Not generally used
one-handed
โข More likely to be
used in the evening
โข Moderately large screen
โฃ Makes mobile site version
inappropriate
โฃ Can use desktop site if design takes
39. Design Process
1. Understand user needs and business
goals
2. Choose target devices
3. Choose native app or web site/app
4. Mock up in Photoshop or tool of choice
5. Get it built
6. See how it works for real people
7. Design improvements and go to #4
40. Development Skills
โข Design is more critical than ever:
mobile, even more than desktop,
needs good design and deep
understanding user
โข Mobile sites require a modest
extension of HTML/CSS/JS skills
โข Mobile webapps require more JS
skills
41. Getting It Built
โข Doing it all yourself not practical
unless you are technically focused
(or building very simple apps)
โข Development shops offer best
assurance of quality and
predictability
โข Freelancers typically less expensive
and can be great if you get the right
42. Webvantaโs Services
โข Web engineering services for
designers and marketing teams
โข Database-driven websites at lower
cost
โข Phone and tablet apps designed to
match business goals and integrate
with websites