The document discusses different approaches to mobile development: responsive websites, dedicated mobile websites, native apps, and hybrid apps. Responsive websites use fluid grids and media queries to adapt to different screens, providing a consistent experience at a low cost. Dedicated mobile sites are separate from desktop sites but may not be as consistent. Native apps have best performance and access to device features but require platform-specific development. Hybrid apps use web technologies to work across platforms at a lower cost than native but with reduced performance. The best approach depends on factors like content, usage patterns, and development skills. An effective mobile strategy aligns business goals with users and technologies.
Basically, a semester presentation on Mobile User Experience, where things such as
1. Mobile UX
2. Mobile UX Design
3. Why UX matters?
4. Influences of UX
5. How to improve Mobile UX
6. Mobile UX Practices
7. Examples of Good UX Designs
are discussed. Hopefully, these will come in handy for someone.
User Experience Design - Week 1 (CS4830 at Weber State University). Covers why design matters, the industry, the future of design, and an intro to user interface and user experience.
UX design is not a step in the process, it's in everything we do. More than anything it is a project philosophy, not just a set of tools, methods and deliverables.
In this presentation we explain how you can differentiate through design, why user experience design matters as well as share our knowledge around all the activities that helps ensure a great UX/UI design.
Mobile UX Design Best Practices for AdvertisingBrant Nesbitt
As we transition from desktop to mobile devices, our behaviors evolve and we adapt to accomplish tasks quicker than ever before. With such a finite amount of screen space, yet infinite possibilities, it is time to evolve the way we present content, thus ensuring a pleasant user experience.
Good “Fingertip Legibility” is the result of ads that provide concise messaging and beautiful product imagery, thus allowing users to make split second decisions and take action.
First presented at Growth Hacking Asia - Thailand monthly meetup on Sep 25, 2015 at The Hive, Bangkok. The presentation aims to give an idea of what UX really is and how it (should) differ from UI. Not that hiring someone for both UX/UI is wrong but if the concept of UX & UI is clearly understood, it would make more sense to have different people do UX & UI.
Source:
Basically, a semester presentation on Mobile User Experience, where things such as
1. Mobile UX
2. Mobile UX Design
3. Why UX matters?
4. Influences of UX
5. How to improve Mobile UX
6. Mobile UX Practices
7. Examples of Good UX Designs
are discussed. Hopefully, these will come in handy for someone.
User Experience Design - Week 1 (CS4830 at Weber State University). Covers why design matters, the industry, the future of design, and an intro to user interface and user experience.
UX design is not a step in the process, it's in everything we do. More than anything it is a project philosophy, not just a set of tools, methods and deliverables.
In this presentation we explain how you can differentiate through design, why user experience design matters as well as share our knowledge around all the activities that helps ensure a great UX/UI design.
Mobile UX Design Best Practices for AdvertisingBrant Nesbitt
As we transition from desktop to mobile devices, our behaviors evolve and we adapt to accomplish tasks quicker than ever before. With such a finite amount of screen space, yet infinite possibilities, it is time to evolve the way we present content, thus ensuring a pleasant user experience.
Good “Fingertip Legibility” is the result of ads that provide concise messaging and beautiful product imagery, thus allowing users to make split second decisions and take action.
First presented at Growth Hacking Asia - Thailand monthly meetup on Sep 25, 2015 at The Hive, Bangkok. The presentation aims to give an idea of what UX really is and how it (should) differ from UI. Not that hiring someone for both UX/UI is wrong but if the concept of UX & UI is clearly understood, it would make more sense to have different people do UX & UI.
Source:
Learn about the 4 P's of Content Strategy (Planning, Production, Publication and Promotion) in an Agile methodology to make sure your content creation is effective.
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenAdam Stephensen
Video available here:
https://www.youtube.com/watch?v=jdssa77dA5s&feature=youtu.be
Bots- the Next UI Revolution - Adam Stephensen
Bots are the new UI frontier. Siri, Google Assistant and Alexa started the trend, but no-UI is the future of UI. Users are going to expect to be able to have conversations with companies and organisations in the client that they have on hand. Don't believe me? Gartner predicts that by 2020 30% of HTTP requests will be via bots.
In this session, we will explore how the Microsoft Bot Framework makes it easy to build and connect intelligent bots to interact with users and services. Take your existing applications, your FAQ or a great new idea you have and build a bot that will run from your website or from Cortana, Skype, a phone call, text message, Teams, Slack, Facebook Messenger, Skype for Business and more.
If you missed the mobile revolution - why not lead in the bot wars?
Managing Responsive - eduWeb Digital Summit 2012 – BostonRebekah Walker
Managing a Responsive Design Website Redesign Project
August 1, 2012
eduWeb Digital Summit
Rebekah Godshall, Director of Project Management, NewCity
The typical waterfall approach to website redesigns falls
short when redesigning a site with responsive design. Learn
to develop and manage a more agile process.
Monsoonfish is one of the leading UI UX design studio in India. We design exceptional digital experiences to deliver real business outcomes. Our customised UX design service is tailored to convey the desired message transparently. Your website will be mobile responsive as well.
Visit us: https://monsoonfish.com/
This Evaluation Report was created to provide guideline and recommendations on
- How to build in house UX practice
- What to align your UX goals with business goals
- What kind of skills are needed in the team and how to hire
- What is mobile First, and how to approach responsive design
Designing for Mobile - Hileman Group Lunch & Learn SeriesHileman Group
The mobile web is no longer a concept – it's a mainstream reality that will impact any organization that aims to communicate with target audiences online.
Web development trends are evolving faster. Online marketing will help companies to interact with their audiences and learn more about them and their needs.
Good designing is also an act of communication between the user and designer and the user. Gets here all the important tips and techniques of user experience design by our expert.
Learn about the 4 P's of Content Strategy (Planning, Production, Publication and Promotion) in an Agile methodology to make sure your content creation is effective.
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenAdam Stephensen
Video available here:
https://www.youtube.com/watch?v=jdssa77dA5s&feature=youtu.be
Bots- the Next UI Revolution - Adam Stephensen
Bots are the new UI frontier. Siri, Google Assistant and Alexa started the trend, but no-UI is the future of UI. Users are going to expect to be able to have conversations with companies and organisations in the client that they have on hand. Don't believe me? Gartner predicts that by 2020 30% of HTTP requests will be via bots.
In this session, we will explore how the Microsoft Bot Framework makes it easy to build and connect intelligent bots to interact with users and services. Take your existing applications, your FAQ or a great new idea you have and build a bot that will run from your website or from Cortana, Skype, a phone call, text message, Teams, Slack, Facebook Messenger, Skype for Business and more.
If you missed the mobile revolution - why not lead in the bot wars?
Managing Responsive - eduWeb Digital Summit 2012 – BostonRebekah Walker
Managing a Responsive Design Website Redesign Project
August 1, 2012
eduWeb Digital Summit
Rebekah Godshall, Director of Project Management, NewCity
The typical waterfall approach to website redesigns falls
short when redesigning a site with responsive design. Learn
to develop and manage a more agile process.
Monsoonfish is one of the leading UI UX design studio in India. We design exceptional digital experiences to deliver real business outcomes. Our customised UX design service is tailored to convey the desired message transparently. Your website will be mobile responsive as well.
Visit us: https://monsoonfish.com/
This Evaluation Report was created to provide guideline and recommendations on
- How to build in house UX practice
- What to align your UX goals with business goals
- What kind of skills are needed in the team and how to hire
- What is mobile First, and how to approach responsive design
Designing for Mobile - Hileman Group Lunch & Learn SeriesHileman Group
The mobile web is no longer a concept – it's a mainstream reality that will impact any organization that aims to communicate with target audiences online.
Web development trends are evolving faster. Online marketing will help companies to interact with their audiences and learn more about them and their needs.
Good designing is also an act of communication between the user and designer and the user. Gets here all the important tips and techniques of user experience design by our expert.
C2iS Keynote - Quelle stratégie "web mobile" en 2013 ? C2iS
Quelle stratégie adopter pour être présent sur le mobile (et les tablettes) en 2013 ?
Quel contenu diffuser aux consommateurs ?
Mettre en place des outils cross-canaux ?
Une webapp ou une application native ou encore un site en responsive design ?
Quelques pistes de réponse dans ce document.
Développer une stratégie mobile pour mieux fidéliser votre clientèle et augme...RevSquare
Pourquoi avoir une stratégie mobile ?
Comment planifier sa stratégie mobile ?
Quels sont les enjeux technologiques de la mobilité ?
Comment mettre en marché sa stratégie mobile ?
Comment définir et mesurer la performance de sa stratégie mobile ?
Web vs. Mobile Apps Complete Guide, Pros, Cons & Key Insights.pdfShanSmith11
Explore the complete guide to web and mobile applications, including advantages, challenges, comparisons, pros, and cons. Stay informed and make the best choices.
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Jack Zheng
For the most recent version please visit:
https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview
I have developed the mobile web development course and modules for some courses in KSU/SPSU. This is overview module to introduce the whole field. Topics include choices of mobile application development and delivery, basic principles and best practices of mobile friendly web sites and web applications, and major tools and frameworks.
Native, hybrid, or pw as – choose the best for your businessMarkovate
In a world full of technologies, where mobile devices account for around half of worldwide internet traffic, it is overwhelming to see the impeccable opportunities for businesses to hop on the mobile bandwagon and get ahead of the competition by offering one-of-a-kind mobile experiences to their audience.
Web Based Vs Cloud Based Apps Complete Comparison (2).pdfchristiemarie4
While web & cloud apps are quite similar, both have noticeable distinctions. Read the blog to know the differences between web based vs cloud based apps.
TrendyAppBuilder is making mobile apps & mobile websites simple and affordable for businesses of all sizes. Easy mobile app builder for Android iPhone iPad & HTML5.
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...Sencha
Andrew will share the experience he and his team have gotten from using Ext JS 6 for cross-platform app development on mobile and desktop devices. Having released Ext JS 6 apps for industries including utilities, oil & gas, construction, and transport, Andrew has learned the common pitfalls and gotchas you need to know. Using examples from recent projects, he provides tips for those who aren't yet familiar or experienced with mobile development. By the end of the session, you will know how to think like a mobile developer, develop apps with mobile user experience in mind, make the move from Ext JS 5 or Sencha Touch to Ext JS 6, deploy native apps with Cordova, and manage data on devices with limited resources.
Confused about Native vs Hybrid vs Cross-Platform ?Rosalie Lauren
Here's everything you need to know about Native vs Hybrid vs Cross-Platform? It can be tricky to choose the right development approach for your project. Native apps offer great performance and reliability, while hybrid apps are cheaper and easier to maintain. Cross platform solutions can save you time by allowing you to write code once and deploy it across multiple platforms. Check out this helpful document for more information about Native vs. Hybrid vs. Cross Platform options.
Importance of Mobile App Architecture For Mobile App DevelopmentHelios Solutions
Enterprise mobility is the new necessity when it comes to the corporate world. Many organizations have started to embrace mobility to enhance the efficiency of their workforce, increase productivity, reduce operational cost, deliver customer delight, and more.
HTML5 vs. Native Apps: Demystifying the Decision Making ProcessiTexico
It’s now clear that mobile is the path consumer markets are leaning towards to utilizing mobile apps as their preferred way to conduct e-commerce. According to a study by Gartner, 70% of customer interactions will originate from a mobile device by 2015. More and more organizations are realizing that mobile can significantly impact their core business operations and are transitioning to a mobile-based strategy. Therefore, iTexico partnered with Propelics to deliver a webinar: "HTML5 vs Native Apps: Demystifying The Decision Making Process" Here we present the slides from the last webinar.
Cross-platform technologies, which allow app developers to create a shared solution for several platforms via hybrid mobile application development, will see the most promising improvements.
This presentation will help you understand the entire cost estimation process and discuss the best ways to hire a professional web app development business based on your needs without spending a fortune.
The trend of Web Development is evolving every year with an immense amount of speed. New technologies are being discovered on a daily basis as developers exploring new technologies with a new way of innovation.
if you are a businessman who uses digital marketing ( web development), it’s important for you to see these changes and apply them- so that you can be in the competition and attract more of the customer’s to your business.
Mobile first - one key important aspect in digitalisation
User Focus 2014 - Choosing The Right Mobile Approach
1. Choosing the Right Mobile
Approach
Responsive, Dedicated, Native, or Hybrid?
Jasper Liu
Sr. UX Architect, ICF International
User Focus 2014
2. 2
A Strong Mobile Presence Is A Must-Have
1.75 billion people around the world have a smartphone
(Google, September 2014)
90% of American adults have a cell phone
58% of American adults have a smartphone
42% of American adults have a tablet
(Pew Internet, January 2014)
Mobile internet usage in the US had increased by 73% over the
last 12 months
(StatCounter, August 2014)
5. 5
Mobile Websites
• Universally accessible through a mobile browser
in any platform/device
• No installation required
• High discoverability
• Built with standard web technologies
6. 6
Responsive Websites
• Responsive websites adapt layouts to the viewing environment by using fluid
grids, flexible images, CSS3 media queries, and JavaScript.
Source: http://www.dtelepathy.com/blog/design/responsive-design-great-ux
7. 7
Responsive Websites - Pros
• One website optimized for all devices
• Cross-channel consistency
• Low maintenance cost
• Focused marketing efforts
• Consolidated analytics
8. 8
Responsive Websites - Pros
• Good responsive web design is device-agnostic, and provides a future-friendly
solution for new devices.
iPhone 5
320 x 568 pt
iPhone 6
375 x 667 pt
iPhone 6 Plus
414 x 736 pt
7.9” iPad Mini
1024x768 pt
9. 9
Responsive Websites - Cons
• Without optimization, a responsive mobile website can be slow, as it loads all
content and scripts of the page for every device, even when they are set to be
hidden on smaller screens.
• If milliseconds mean money to your business, you have to be cautious about
the responsive design approach.
?
10. 10
Responsive Websites
The Search Agency evaluated the mobile sites of top 100 retailers in the US in
October 2013.
11. 11
Responsive Websites
The Search Agency evaluated the mobile sites of top 100 retailers in the US in
October 2013.
12. 12
Dedicated Mobile Websites or Web Apps
A separate website is created for small screens. The site detects users are using
a mobile device and redirects them to the mobile site.
www.bankofamerica.mobile.walmart.com com/mobile/ m.cancer.gov
13. 13
Dedicated Mobile Websites/Apps - Pros
• Fast
• Simple and focused
• Quick and inexpensive to build if the mobile site/app focuses on a small
portion of the full website
• Allows a different mobile web experience independent of the full site
14. 14
Dedicated Mobile Websites/Apps - Cons
• The experience may not be consistent in different channels.
15. 15
Dedicated Mobile Websites/Apps - Cons
• Time-consuming to maintain and update two separate websites if they often
change.
• Usually a binary solution that is not always optimized for a wide variety of
internet-connected devices.
16. 16
Dedicated Mobile Websites/Apps - Cons
• Usually presents only a portion of the full website.
• May still need to provide a link to the full site which usually does not offer
an excellent mobile experience.
17. 17
The Advancement of Mobile Websites
Responsive Websites
One site to rule them all
Client-side
optimization
18. 18
The Advancement of Mobile Websites
Responsive Websites
One site to rule them all
Dedicated Mobile Sites
Faster performance;
device detection
Merge the best
of each
RESS
Responsive Design
+
Server Side Components
Client-side
optimization
19. 19
Responsive Design + Server Side Components
• One site, single URL
• Server sends device-specific code for the key page components
21. 21
Some High Profile Websites Have Shifted to
Responsive Design
m.dominos.com
22. 22
Some High Profile Websites Have Shifted to
Responsive Design
m.samsung.com www.samsung.com
23. 23
Some High Profile Websites Have Shifted to
Responsive Design
24. 24
Mobile Websites Summary
• A mobile optimized site is a must-have.
• The evolving responsive design with client-side and server-side optimization
is the preferred approach, especially in the long term.
• If you need the fastest website or have limited flexibility to change your
existing website, a separate mobile site can be an interim solution to consider.
26. 26
Mobile Apps Dominate Mobile Usage
Source: http://mobilemarketingstand.com/2014/04/15/mobile-as-the-future-marketing-
platform
27. 27
On Average, People Don’t Use More Than 30
Apps A Month
Source: http://www.nielsen.com/us/en/insights/news/2014/smartphones-so-many-apps--so-much-time.html
28. 28
20% of Mobile Apps Are Used Only Once
Source: http://info.localytics.com/blog/app-retention-improves
29. 29
Native Apps
Native apps are specific to a mobile platform (e.g.
iOS, Android, Windows Phone, etc.) using the
development tools and languages that the
respective platform supports.
Pros
• Best performance
• Superior user experience
• Easy to access after initial installation
• Personalized tools for regular use
30. 30
Native Apps - Pros
Fast graphics and fluid animations.
Sources:
http://capptivate.co/
31. 31
Native Apps - Pros
Take full advantage of all native device features, such as:
• GPS
• Accelerometer
• Compass
• Camera
• Advanced device gestures
• Push notifications
• Offline use
• Access contacts, calendar, emails, text messages, and even health data.
32. 32
Native Apps - Cons
• Compared with mobile websites, native apps have
lower discoverability and require installation.
• App updates needs to be downloaded by users. It can
become difficult to maintain and provide support for
users on different versions.
• Supporting multiple platforms results in higher costs in
development, maintenance, pushing out updates, etc. $
33. 34
Hybrid Apps
Hybrid apps bridge the middle ground between native apps and mobile websites.
They are built using web technologies, like HTML5 and JavaScript, and then
wrapped in a platform-specific shell allowing them to be installed like native apps.
34. 35
Hybrid Apps - Pros
Cost-effective, as it allows code reuse across platforms.
Use standard web technologies.
Access most device features. Below are the features supported by PhoneGap.
35. 36
Hybrid Apps - Pros
• Leverage the existing website to power the app.
Amazon.com Amazon app
36. 37
Hybrid Apps - Cons
• The performance and graphics can’t match the native apps. Hybrid apps are
executed by the platform’s Web engine, which adds another layer of operation
between the user and the app.
“Facebook tried HTML5 for years. When they
switched to native code, they were able to improve
performance by 200% and increase their average
user rating from two stars to four stars.”
(source: http://www.smashingmagazine.com/2012/11/07/
succeed-with-your-app/).
37. 38
Hybrid Apps - Cons
• It may be more expensive to build a hybrid app that can deliver as-good-as-native
experience.
Xero, an accounting software company, abandoned hybrid
and went native, because:
“And the lesson we’ve learnt over the last 12 months has
been that the cost in time, effort and testing to bring an
HTML5 application to a native level of performance seems
to be far greater than if the application was built with native
technologies from the get-go.”
(source: https://www.xero.com/blog/2013/03/making-mobile-work/).
38. 39
The Advancement of Mobile Apps
Native Apps
Best performance and visuals
Hybrid Apps
Cross-platform solution
Improving
performance
Adaptive
layout
Responsive Native Apps?
40. 41
Responsive
Sites
Dedicate
Sites
Native
Apps
Hybrid
Apps
Use Case Occasional use Frequent use
Content/Features Full Focused Focused
Installation No Required
Discoverability High Low
Performance Good
(if optimized)
Good Excellent Good
(if optimized)
Visuals, Animations OK Excellent OK
Device Features Some All Most
Development Skills Standard Platform
specific
Standard
Maintenance Cost Low Medium High Medium
Development Cost Depends (You get what you pay for)
41. 42
Mobile Strategy Is the Key
• The key to mobile success is building a strategy that continually aligns
business goals, user needs, and evolving mobile technologies.
Business
Mobile
Strategy
Technologies Users
42. 43
Thank you!
Jasper Liu
Senior User Experience Architect
ICF International
jasper.liu@icfi.com
www.linkedin.com/in/jasperlz
www.pinterest.com/jasper1084