Published on

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

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  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 ( Sixrevisions ( designs/)3. Paul Boag Smashing eBook#1 ( ebook-series-1-professional-web-design.html)4. (