Mobile Web Apps Design   DESIGNING GOOD WEB APP
The Mobile web     The Mobile Web refers to the use of Internet-connected    applications, or browser-based access to the...
The mobile Web When phones first started to browse the web, the experience was  bad, but it was an exciting idea. Smartph...
Mobiles & the Modern Web The adoption of HTML5 and CSS3 reduced the load of the  graphics to achieve some of the same bea...
Good Mobile Web designAspects taken into consideration when designing a mobile Web app: User-focused content just like in...
Good Mobile Web designUser TestingDesign is subjective: The way we respond to a design is influenced by culture, gender, ...
Good Mobile Web designUsing Rich Media Effectively Mobile devices are capable of displaying multimedia content.  You can ...
Good Mobile Web designUsing Rich Media Effectively Simplicity equates to usability. Mobile users don’t have acces to  the...
Good Mobile Web designUser Interaction Make input as simple as possible. Use buttons or selection methods as much as pos...
Designing content for the Mobile WebUser-focused Content on the mobile web must be user-focused just like in traditional ...
Designing content for the Mobile WebUnderstanding How Mobile Devices Work With so many users accessing the mobile web fro...
User ExperienceEmpower Users with Freedom and Flexibility Give the user more freedom and control over their actions. The ...
Easy Mobile DevelopmentJQTouch – Quick and easy Mobile Development JQTouch is a plugin for jQuery that allows you to buil...
Mobile Web Apps LimitsMobile pitfalls Most mobile devices dont support Flash yet, notably the iPhone, so mobile    websit...
Mobile Web Apps Limits Small screen size Lack of multiple windows Not being able to use a mouselike pointer Speed Cos...
Mobile Web Apps Design DevelopmentReferences1.   Wikipedia (http://en.wikipedia.org/wiki/Mobile_Web)2.   Sixrevisions (htt...
Upcoming SlideShare
Loading in...5
×

MobileWebAppsDesign

704

Published on

features necessary for Web applications to run on mobile devices, user experience and user interaction

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
704
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "MobileWebAppsDesign"

  1. 1. Mobile Web Apps Design DESIGNING GOOD WEB APP
  2. 2. The Mobile web The Mobile Web refers to the use of Internet-connected applications, or browser-based access to the Internet from a mobile device, such as a Smartphone or tablet computer, connected to a wireless network.
  3. 3. The mobile Web When phones first started to browse the web, the experience was bad, but it was an exciting idea. Smartphones came along improving the experience. The apples iPhone Web browser was actually usable.The iPhone bridged the gap between the mobile web and the desktop web we wanted on our phones
  4. 4. Mobiles & the Modern Web The adoption of HTML5 and CSS3 reduced the load of the graphics to achieve some of the same beautiful interfaces and enhanced browsing speed. HTML5 also meant offline capabilities, something native apps held over web apps for a long time, and to some extent still do.
  5. 5. Good Mobile Web designAspects taken into consideration when designing a mobile Web app: User-focused content just like in traditional web design; Esential elements should be brought over the mobile web (Users’ needs have to be met quickly)
  6. 6. Good Mobile Web designUser TestingDesign is subjective: The way we respond to a design is influenced by culture, gender, age and even physical conditions (such as color blindness). Is important that design decisions be informed by user testing rather than personal experience.
  7. 7. Good Mobile Web designUsing Rich Media Effectively Mobile devices are capable of displaying multimedia content. You can watch YouTube videos that are posted on Facebook, but take into account the technology limitations and internet conectivity by keeping rich multimedia to the barest minimum.
  8. 8. Good Mobile Web designUsing Rich Media Effectively Simplicity equates to usability. Mobile users don’t have acces to the traditional keyboard and mouse , so a simple design is critical to be able to move around the app.
  9. 9. Good Mobile Web designUser Interaction Make input as simple as possible. Use buttons or selection methods as much as possible. Use textboxes only when necessary and have auto-complete/auto-suggest features to reduce errors. Shortcuts to common and repetitive site tasks are necessary.
  10. 10. Designing content for the Mobile WebUser-focused Content on the mobile web must be user-focused just like in traditional web design. Essential elements should be brought over, mobile users don’t want to have to search or scroll multiple pages to find what they are looking for. Make use of features of newer mobile devices. Many of them have support for the Geolocation API in HTML5, you can use their current location to present them with more relevant information.
  11. 11. Designing content for the Mobile WebUnderstanding How Mobile Devices Work With so many users accessing the mobile web from many different and disparate devices, Understanding and prioritizing your target devices is paramount in creating unique and effective browsing experiences. Knowing the users’ devices help web designers create content and experiences specifically for that device.
  12. 12. User ExperienceEmpower Users with Freedom and Flexibility Give the user more freedom and control over their actions. The user should be able to personalize their working screen, backgrounds to turn on or off whatever controls that they desire.
  13. 13. Easy Mobile DevelopmentJQTouch – Quick and easy Mobile Development JQTouch is a plugin for jQuery that allows you to build mobile websites for the iPhone and iPod Touch. There are plans to also support Google Android and Paml WebOS browsers in the future. Is completely open source and MIT licensed. Page history management and CSS3 page transitions, including 3d flip. The power of jQuery to build AJAX applications.
  14. 14. Mobile Web Apps LimitsMobile pitfalls Most mobile devices dont support Flash yet, notably the iPhone, so mobile websites should avoid this Its possible to crash a mobile browser by loading in too many images or running too much JavaScript so it’s important to keep file sisez down.
  15. 15. Mobile Web Apps Limits Small screen size Lack of multiple windows Not being able to use a mouselike pointer Speed Cost Types of pages that can be accesible
  16. 16. Mobile Web Apps Design DevelopmentReferences1. Wikipedia (http://en.wikipedia.org/wiki/Mobile_Web)2. Sixrevisions (http://sixrevisions.com/user-interface/a-quick-look-at-mobile-web- designs/)3. Paul Boag Smashing eBook#1 (https://shop.smashingmagazine.com/smashing- ebook-series-1-professional-web-design.html)4. Doctype.tv (http://doctype.tv/mobile)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×