Downloaded 54 times
Uploaded byDee Sadler
Designing for mobile
The document provides an overview of key considerations for designing mobile applications and websites. It discusses whether to build a mobile web or native app, addresses issues of screen size and resolution including pixel density, and emphasizes the importance of usability testing through wireframing and prototyping. Design decisions like whether to use vectors or raster images and how to handle orientation are covered. The document lists resources for mobile design patterns, guidelines and tools to use for wireframing prototypes.
More Related Content
Designing for mobile
- 1.
- 2. Dee Sadler Adobe Community Professional Adobe Certified Expert / Instructor Adobe Freelancer Program and... am a UI strategist for Sprint Dreamweaver and Fireworks video presenter currently doing a Designing for mobile video title, and a Dreamweaver book @DeeSadler
- 3. Areas of mobiledesign 1. Mobile web or mobile app? 2. Does size really matter? 3. Human Interaction - what? 4. Wireframing/prototyping 5. Choices, choices..
- 6. Mobile web, orapp?
- 8. Media Queries /* Smartphones (portrait and landscape) ----------- */ /* iPads (landscape) ----------- */ @media only screen @media only screen and (min-device-width : 320px) and (min-device-width : 768px) and (max-device-width : 480px) { and (max-device-width : 1024px) /* Styles */ and (orientation : landscape) { } /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen /* iPads (portrait) ----------- */ and (min-width : 321px) { @media only screen /* Styles */ and (min-device-width : 768px) } and (max-device-width : 1024px) and (orientation : portrait) { /* Smartphones (portrait) ----------- */ /* Styles */ @media only screen } and (max-width : 320px) { /* Styles */ /* Desktops and laptops ----------- */ } @media only screen and (min-width : 1224px) { /* iPads (portrait and landscape) ----------- */ /* Styles */ @media only screen and (min-device-width : 768px) From Hard Boiled Web Design, by Andy Clarke and (max-device-width : 1024px) { /* Styles */ }
- 9. Example for iPhone .myImage { height: 40px; width: 100px; -webkit-background-size: 100px 40px; background: url("images/myImage.jpg"); } @media screen and (-webkit-device-pixel-ratio: 2) { .myImage { background: url("images/myImage@2x.jpg"); } }
- 10. Flex media queries ActionBar { chromeColor: #000000; } @media (os-platform: "Android") { ActionBar { chromeColor: #999999; /* dark gray */ } } @media (os-platform: "IOS") { ActionBar { chromeColor: #6DA482; /* blue */ } } This example code uses the default ActionBarSkin skin class from the Mobile theme and changes thechromeColor property.You can use this same technique to completely replace the default skin with your own platform-specific skin.
- 11. Choices using themes • Create your own build scripts • Manually change the arguments per platform • Refactor your project into multiple projects that share the same base project and/or libraries
- 12. Design for.. • latency • segment your content (provide your own app structure and navigation • pixel denisty and screen size • use true full screen for video • reinforce spation relationships with motion
- 22. If you aregoing to bother making a web app, consider the experience
- 23.
- 31. Decide things like, Howis the user going to navigate?
- 32.
- 33. Pixel Density/Screen size Toget the ppi, you first need to find out how many pixels there are diagonally. This is the square root of each side squared, added together (from a2 + b2 = c2) Android densities: low, medium, high and extra high Density-independent pixel (dp) A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels.You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities. http://developer.android.com/guide/practices/screens_support.html
- 34. So much foreasy Resolution The total number of physical pixels on a screen. • Screen density The quantity of pixels within a physical area of the screen, usually referred to as DPI (dots per inch). • Density-independent pixel (DP) This is a virtual pixel unit that you would use when defining a layout’s UI in order to express the layout’s dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 DPI screen, which is the baseline density assumed by the system of a “medium”-density screen. At runtime, the system transparently handles any scaling of the DP units as necessary, based on the actual density of the screen in use. The conversion of DP units to screen pixels is simple: pixels = DP * (DPI / 160). For example, on a 240 DPI screen, 1 DP equals 1.5 physical pixels. Always use DP units when defining your application’s UI to ensure that the UI displays properly on screens with different densities.
- 35. Device Screen res(height x width) iPhone - 320 x 480 iPhone 4 - 320 x 480 (scaled up by a factor of 2) Nokia N97 - 360 x 640 HTC Legend - 320 x 480 LG eXpo - 480 x 800 Apple Human Interface Guidelines recommends a hit target no less than 44 X 44px
- 36. Pixel Screen Densities.Bad above, and good below
- 37.
- 38.
- 40.
- 41.
- 42. Be aware oforientation Add detail and depth Typography is just as important Think twice before you design a standard control! Create a great brand experience
- 43. Think top down Whereis their hand going to be? Make usage easy and logical Design using physicality and realism Always work at a higher resolution than you need.
- 45.
- 46.
- 50.
- 55. Vector or Raster? Vector is fine for simple shapes If it is complex... rasterize it! Think in terms of render times
- 56. Wireframes Balsamiq Axure Fireworks Omnigraffle EightShapes for InDesign iMockups for iPad SketchyPad for iPad Keynotopia for Keynote Many, many more
- 57.
- 58. Why I useFireworks Canvas size Vectors vs bitmaps Layers, sublayers Master pages States and sharing to layers slices 9-alice scaling guides symbols orientation and resizing
- 59. Choices and morechoices! Flex 4.5.x (design view has improved!) Fireworks: Great for wireframing, is a vector web graphics too, has 9-slice scaling, master pages, great export options, symbols, drag and drop to Flash for continued functionality. States, click throughs, and more. Photoshop: pixel-level control Illustrator:Visuals, Flash integration, SVG After Effects: High-fidelity prototyping, transitions Flash Pro: Interactive design, High-fidelity prototypes, AIR applications, export for mobile, works great with Flash Builder Flash Catalyst: Great for wireframing, prototyping click-through and transitions
- 63.
- 64. The Mobile DesignProcess http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/the-mobile-... MobileTuts http://mobile.tutsplus.com/ jQuery Touch-Optimized Web Framework for Smartphones & Tablets http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/ The Dos and Do Nots of Mobile Applications http://www.getelastic.com/mobile-app-dos-donts/ iPad Apps Dos and Don'ts http://www.uxbooth.com/blog/ipad-app-dos-and-donts/ Considerations for Mobile Design http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/ Best sites ti get mobile resources http://www.ekoob.com/best-sites-to-get-mobile-resources-4523/ Smartphone Infographic http://rww.readwriteweb.netdna-cdn.com/assets_c/2011/06/the-intellegent-... 14 Differences Between Mobile Search & Desktop Search Results http://searchengineland.com/14-differences-between-smartphone-search-des... Best Practices for Designing Mobile Touch Screen Applications http://www.usercentric.com/news/2011/06/15/best-practices-designing-mobi... Stencils and UI Elements http://designmodo.com/30-free-web-mobile-ui-element-kits-and-stencils-fo... Wireframe Tools and Kits http://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wirefram...