Your SlideShare is downloading. ×
0
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Designing for mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for mobile

2,272

Published on

Presentation for FlashTent in Hawaii

Presentation for FlashTent in Hawaii

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,272
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
50
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Designing for Mobile
  • 2. Dee Sadler Adobe Community Professional Adobe Certified Expert / Instructor Adobe Freelancer Program and... am a UI strategist for Sprint Dreamweaver and Fireworks video presentercurrently doing a Designing for mobile video title, and a Dreamweaver book@DeeSadler
  • 3. Areas of mobile design1. Mobile web or mobile app?2. Does size really matter?3. Human Interaction - what?4. Wireframing/prototyping5. Choices, choices..
  • 4. Mobile web, or app?
  • 5. Media Queries /* Smartphones (portrait and landscape) ----------- */ /* iPads (landscape) ----------- */@media only screen @media only screenand (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 screenand (min-device-width : 768px) From Hard Boiled Web Design, by Andy Clarkeand (max-device-width : 1024px) {/* Styles */}
  • 6. 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");    }}
  • 7. 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 changesthechromeColor property.You can use this same technique to completely replace the default skin withyour own platform-specific skin.
  • 8. 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
  • 9. 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
  • 10. If you are going to bother making a web app, consider theexperience
  • 11. http://pttrns.com
  • 12. Decide things like,How is the user going to navigate?
  • 13. SizeDoes it matter?
  • 14. Pixel Density/Screen sizeTo get 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 highDensity-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. Theconversion 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 usedp units when defining your applications UI, to ensure proper display of your UI on screens with different densities.http://developer.android.com/guide/practices/screens_support.html
  • 15. So much for easy 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.
  • 16. Device Screen res (height x width)iPhone - 320 x 480iPhone 4 - 320 x 480 (scaled up by a factor of 2)Nokia N97 - 360 x 640HTC Legend - 320 x 480LG eXpo - 480 x 800Apple Human Interface Guidelines recommends ahit target no less than 44 X 44px
  • 17. Pixel Screen Densities. Bad above, and good below
  • 18. From Apple’s guidelines
  • 19. Fingers, where to go
  • 20. Gesturesby Steven Hoober
  • 21. Human Interactioin Guidelines
  • 22. Be aware of orientationAdd detail and depthTypography is just as importantThink twice before you designa standard control!Create a great brand experience
  • 23. Think top downWhere is their hand going to be?Make usage easy and logicalDesign using physicality and realismAlways work at a higher resolutionthan you need.
  • 24. Where to gohttp://developer.android.com/guide/practices/screens_support.htmlhttp://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556-CH1-SW1http://www.adobe.com/devnet/devices/articles/designing-blackberry-playbook.html
  • 25. Wireframing/prototyping
  • 26. Fireworks Android template
  • 27. Vector or Raster? Vector is fine for simple shapes If it is complex... rasterize it! Think in terms of render times
  • 28. Wireframes Balsamiq Axure Fireworks OmnigraffleEightShapes for InDesign iMockups for iPad SketchyPad for iPadKeynotopia for Keynote Many, many more
  • 29. Using FireworksPages/Master Pages
  • 30. Why I use Fireworks Canvas size Vectors vs bitmaps Layers, sublayers Master pages States and sharing to layers slices 9-alice scaling guides symbols orientation and resizing
  • 31. Choices and more choices!Flex 4.5.x (design view has improved!)Fireworks: Great for wireframing, is a vector web graphics too, has 9-slice scaling, masterpages, great export options, symbols, drag and drop to Flash for continued functionality.States, click throughs, and more.Photoshop: pixel-level controlIllustrator:Visuals, Flash integration, SVGAfter Effects: High-fidelity prototyping, transitionsFlash Pro: Interactive design, High-fidelity prototypes, AIR applications, export for mobile,works great with Flash BuilderFlash Catalyst: Great for wireframing, prototyping click-through and transitions
  • 32. Thanks!http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/anatomy-of-a-html5-mobile-apphttp://www.unitymobile.com/http://www.modernizr.com/http://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://help.adobe.com/en_US/flex/mobileapps/WSe11993ea1bd776e514f77f1212a431f2a35-8000.htmlwww.androidpatterns.com and www.pttrns.comhttp://developer.apple.com/library/ios/navigation/http://developer.android.com/guide/index.htmlhttp://www.usercentric.com/news/2009/08/26/best-practices-designing-mobile-applicationshttp://www.smashingmagazine.com/guidelines-for-mobile-web-development/http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html
  • 33. The Mobile Design Processhttp://mobile.tutsplus.com/tutorials/mobile-design-tutorials/the-mobile-...MobileTutshttp://mobile.tutsplus.com/jQuery Touch-Optimized Web Framework for Smartphones & Tabletshttp://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/The Dos and Do Nots of Mobile Applicationshttp://www.getelastic.com/mobile-app-dos-donts/iPad Apps Dos and Dontshttp://www.uxbooth.com/blog/ipad-app-dos-and-donts/Considerations for Mobile Designhttp://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/Best sites ti get mobile resourceshttp://www.ekoob.com/best-sites-to-get-mobile-resources-4523/Smartphone Infographichttp://rww.readwriteweb.netdna-cdn.com/assets_c/2011/06/the-intellegent-...14 Differences Between Mobile Search & Desktop Search Resultshttp://searchengineland.com/14-differences-between-smartphone-search-des...Best Practices for Designing Mobile Touch Screen Applicationshttp://www.usercentric.com/news/2011/06/15/best-practices-designing-mobi...Stencils and UI Elementshttp://designmodo.com/30-free-web-mobile-ui-element-kits-and-stencils-fo...Wireframe Tools and Kitshttp://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wirefram...

×