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

Design for Mobile

on

  • 987 views

 

Statistics

Views

Total Views
987
Views on SlideShare
665
Embed Views
322

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 322

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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/