Design of Mobile Web Apps
“ Always remember the  80/20 law : 80% of your desktop site will not be useful to mobile users. Therefore, you need to res...
Mobilizing, not Minimizing <ul>Desktop version  http://www.downtownpittsburgh.com/ </ul>Mobile version  http://m.downtownp...
Mobilizing, not Minimizing <ul>Minimizing –  displaying the same content on a </ul>smaller screen. <ul>Mobilizing –  offer...
Elements of mobile design Layout Context Message Color Typography Graphics Look and Feel
Layout
List-Based Layout Every mobile web document has a few identified zones:
Horizontal List Design Pattern
Horizontal lists have limited use on the mobile web as they can be difficult to read once they begin to wrap
A common use of this design pattern  is for breadcrumbs  and for top navigation menus.
Breadcrumbs are typically short and rendered in a small font which minimizes wrapping
if the list is being used as high level navigation use  a background colour to visually separate the list (or list element...
Accordion Menu Design Pattern makes good use of the display space available to the user without compromising on the ease o...
NewFordOffers expands to show the sub-menus while others are collapsed
When NewPeugeotOffers is selected, the previous selected item NerFordOffers collpases to make space for the latter to expa...
to find out more Mobile Dessign Patterns and Design Tips visit our  blog http://designformobile.wordpress.com/
Typography
achieving cross-browser compatibility for custom fonts
@font-face CSS3 rule
@font-face  {  font-family: 'DroidSansRegular'; src: url('DroidSans-webfont.eot'); } Basic syntax
To achieve cross-browser compatibility just include multiple versions of the font so that it works on all browsers
@font-face {   font-family: 'DroidSansRegular';   src: url('DroidSans-webfont.eot');   src: local('☺'), url('DroidSans-web...
Where to find all these different versions of the custom font? download for free all  @font-face kits  that you need http:...
http://designformobile.wordpress.com/
Upcoming SlideShare
Loading in …5
×

Design for Mobile

1,045 views
1,017 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,045
On SlideShare
0
From Embeds
0
Number of Embeds
363
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design for Mobile

  1. 1. Design of Mobile Web Apps
  2. 2. “ Always remember the 80/20 law : 80% of your desktop site will not be useful to mobile users. Therefore, you need to research the 20% you should be focusing on.” Maximiliano Firtman
  3. 3. Mobilizing, not Minimizing <ul>Desktop version http://www.downtownpittsburgh.com/ </ul>Mobile version http://m.downtownpittsburgh.com/
  4. 4. Mobilizing, not Minimizing <ul>Minimizing – displaying the same content on a </ul>smaller screen. <ul>Mobilizing – offering your services and content in a manner that is useful and allows for quick access by the user </ul>
  5. 5. Elements of mobile design Layout Context Message Color Typography Graphics Look and Feel
  6. 6. Layout
  7. 7. List-Based Layout Every mobile web document has a few identified zones:
  8. 8. Horizontal List Design Pattern
  9. 9. Horizontal lists have limited use on the mobile web as they can be difficult to read once they begin to wrap
  10. 10. A common use of this design pattern is for breadcrumbs and for top navigation menus.
  11. 11. Breadcrumbs are typically short and rendered in a small font which minimizes wrapping
  12. 12. if the list is being used as high level navigation use a background colour to visually separate the list (or list elements) from other elements on the page.
  13. 13. Accordion Menu Design Pattern makes good use of the display space available to the user without compromising on the ease of use and look/feel aspect of the web page
  14. 14. NewFordOffers expands to show the sub-menus while others are collapsed
  15. 15. When NewPeugeotOffers is selected, the previous selected item NerFordOffers collpases to make space for the latter to expand it's sub-menus
  16. 16. to find out more Mobile Dessign Patterns and Design Tips visit our blog http://designformobile.wordpress.com/
  17. 17. Typography
  18. 18. achieving cross-browser compatibility for custom fonts
  19. 19. @font-face CSS3 rule
  20. 20. @font-face { font-family: 'DroidSansRegular'; src: url('DroidSans-webfont.eot'); } Basic syntax
  21. 21. To achieve cross-browser compatibility just include multiple versions of the font so that it works on all browsers
  22. 22. @font-face { font-family: 'DroidSansRegular'; src: url('DroidSans-webfont.eot'); src: local('☺'), url('DroidSans-webfont.woff') format('woff'), url('DroidSans-webfont.ttf') format('truetype'), url('DroidSans-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; }
  23. 23. Where to find all these different versions of the custom font? download for free all @font-face kits that you need http://www.fontsquirrel.com/fontface use @font-face kit generator automatically convert the custom font to all the necessary file types http://www.fontsquirrel.com/fontface /generator
  24. 24. http://designformobile.wordpress.com/

×