• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design for Mobile

Design for Mobile






Total Views
Views on SlideShare
Embed Views



3 Embeds 322

http://designformobile.wordpress.com 320
http://static.slidesharecdn.com 1
https://designformobile.wordpress.com 1



Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Design for Mobile Design for Mobile Presentation Transcript

    • 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 research the 20% you should be focusing on.” Maximiliano Firtman
    • Mobilizing, not Minimizing
        Desktop version http://www.downtownpittsburgh.com/
      Mobile version http://m.downtownpittsburgh.com/
    • Mobilizing, not Minimizing
        Minimizing – displaying the same content on a
      smaller screen.
        Mobilizing – offering your services and content in a manner that is useful and allows for quick access by the user
    • 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 elements) from other elements on the page.
    • 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
    • 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 expand it's sub-menus
    • 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-webfont.woff') format('woff'), url('DroidSans-webfont.ttf') format('truetype'), url('DroidSans-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; }
    • 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
    • http://designformobile.wordpress.com/