Successfully reported this slideshow.
Your SlideShare is downloading. ×

05 Mobile CSS

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Intelbloggerday08
Intelbloggerday08
Loading in …3
×

Check these out next

1 of 83 Ad
Advertisement

More Related Content

Advertisement

05 Mobile CSS

  1. 1. Design For The Smaller Screen Monday, October 15, 12
  2. 2. Agenda Viewports Media Queries Mobile Layout CSS Mobile-Related Features CSS Techniques for Mobile Apps Monday, October 15, 12
  3. 3. Tapuz on the iPhone page is “zoomed out” so everything will fit in. Monday, October 15, 12
  4. 4. Viewport Most websites are optimized for 960px, but mobile devices usually have less. How will you show “normal” web sites on mobile ? Monday, October 15, 12
  5. 5. Viewport Determines how many pixels fit on the page Mobile devices “do their best” to fit everything in the viewport - sometimes not optimal This can be controlled with viewports Monday, October 15, 12
  6. 6. Same Page Different Viewport Monday, October 15, 12
  7. 7. Viewport World World Viewport Viewport Device Device Monday, October 15, 12
  8. 8. Viewport use viewport meta tag to prevent zooming <meta name=”viewport” content=”width=device- width, user-scalable=no, initial-scale=1”> Monday, October 15, 12
  9. 9. Viewport Options Directive Example Value Meaning width=320 logical viewport width width=device- width, in pixels width height=480 logical viewport height height=device- height, in pixels height Monday, October 15, 12
  10. 10. Viewport Options Directive Example Value Meaning user- user can zoom user-scalable scalable=no in/out initial zoom initial-scale initial-scale=2.0 factor maximum-scale maximum- min/max zoom minimum-scale scale=2.5 factors Monday, October 15, 12
  11. 11. Viewport Quiz What does the following mean ? What is the recommended value ? initial-scale width user-scalable Monday, October 15, 12
  12. 12. Viewport Quiz What does the following mean ? What is the recommended value ? initial-scale: initial page zoom factor width: width of the viewport. Use device-width user-scalable: Allow user to scale content Monday, October 15, 12
  13. 13. Viewport When Set a viewport when: Writing a Fixed-Pixel Mobile Web App Writing a responsive web app Monday, October 15, 12
  14. 14. Android DPI Monday, October 15, 12
  15. 15. The Problem Same screen size Different resolution Monday, October 15, 12
  16. 16. target-densitydpi= device-dpi Monday, October 15, 12
  17. 17. Android Dpi Android devices support variable dpi devices Use target-densitydpi to control automatic scaling due to dpi differences Default value: 160 (medium density) Monday, October 15, 12
  18. 18. Q&A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Monday, October 15, 12
  19. 19. Responsive Layouts Monday, October 15, 12
  20. 20. The Goal Same website, Different devices Best user experience for each device Monday, October 15, 12
  21. 21. Desktop - Mobile Monday, October 15, 12
  22. 22. Responsive Tools Media Queries Modernizr pxtoem.com Web Developer Extension: http:// chrispederick.com/work/web-developer/ Monday, October 15, 12
  23. 23. Media Queries Mobile devices vary in size and capabilities CSS Media Queries allow us to use different css properties based on the device Monday, October 15, 12
  24. 24. Media Queries The medium density device is delivered a 320x480 image The high density device is delivered a 480x800 image Monday, October 15, 12
  25. 25. Media Queries Example #header { background:url(medium-density-image.png); } @media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); } } @media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); } } Monday, October 15, 12
  26. 26. Media Queries Example It’s also possible to use completely different css files <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /> Monday, October 15, 12
  27. 27. Media Queries Query device density Query device dimensions Query device orientation Query iPad Monday, October 15, 12
  28. 28. Query Device Dimensions Smartphones: portrait & landscape @media only screen and (min-device-width : 320px) and (max-device-width : 480px ) { /* style goes here */ } Monday, October 15, 12
  29. 29. Query Device Dimensions Smartphones: landscape @media only screen and (min-width : 321px) { /* style goes here */ } Monday, October 15, 12
  30. 30. Query Device Dimensions Smartphones: portrait @media only screen and (max-width : 320px) { /* style goes here */ } Monday, October 15, 12
  31. 31. Query Device Dimensions iPads: portraits & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) { /* style goes here */ } Monday, October 15, 12
  32. 32. Query Device Dimensions iPads: landscape @media only screen and (min-device-width : 768px) and (max- device-width : 1024px ) and ( orientation : landscape ) { /* style goes here */ } Monday, October 15, 12
  33. 33. Query Device Dimensions iPads: portrait @media only screen and (min-device-width : 768px) and (max-device- width : 1024px ) and ( orientation : portrait ) { /* style goes here */ } Monday, October 15, 12
  34. 34. More Media Queries Media Query Snippets: http://nmsdvid.com/snippets/# Monday, October 15, 12
  35. 35. Media Queries html5 mobile boilerplate provides a ready made empty css file with all of the above http://html5boilerplate.com/mobile/ Monday, October 15, 12
  36. 36. Other Tools Modernizr pxtoem.com Web Developer Extension: http:// chrispederick.com/work/web-developer/ Monday, October 15, 12
  37. 37. Q&A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Monday, October 15, 12
  38. 38. Mobile Layout newsgeek.co.il mobile optimized one column only vertical scrolling Monday, October 15, 12
  39. 39. Mobile Layout One column Top navigation bar Bottom navigation bar - tabs Monday, October 15, 12
  40. 40. Mobile Layout A nav bar at the bottom Dividing to pages saves bandwidth Monday, October 15, 12
  41. 41. Mobile Layout Facebook keeps a top navigation bar Note the single column flow Monday, October 15, 12
  42. 42. Mobile Layout Yahoo mobile works with the same single column Top navigation bar horizontal scroller “twist” Monday, October 15, 12
  43. 43. Exercise Implement a blog layout Show a snippet from every post Bonus: Have your blog look different on desktop and mobile Monday, October 15, 12
  44. 44. Top Navigation Bar use floated list elements for the horizontal top menu wrap them in a div for the bar Monday, October 15, 12
  45. 45. Keep In Mind word-break: break-all; -webkit-touch-callout: none; Monday, October 15, 12
  46. 46. Design Limitations overflow: scroll ios5 and up, Android 4 and up Consider overthrow or iScroll for polyfills See http://www.quirksmode.org/m/table.html for more info Monday, October 15, 12
  47. 47. Design Limitations animated gif is not supported on Android devices Consider spin.js See http://www.quirksmode.org/m/table.html for more info Monday, October 15, 12
  48. 48. Design Limitations position: fixed is supported on: iOS5 and up Android 3.2 and up See http://www.quirksmode.org/m/table.html for more info Monday, October 15, 12
  49. 49. Q&A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Monday, October 15, 12
  50. 50. CSS Mobile Features Rounded Corners Shadows Gradients Monday, October 15, 12
  51. 51. Rounded Corners use -webkit-border- radius to get the effect No need to use background images Sample use: -webkit-border-radius: 8px; Monday, October 15, 12
  52. 52. Shadows use -webkit-box- shadow to get a shadow effect rgba(0, 0, 0, 0.6) will work as the shadow color Sample Use: -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); Monday, October 15, 12
  53. 53. Gradients CSS 3.0 added support for gradients use them instead of background images to save bandwidth Online gradient generator: http://www.colorzilla.com/ gradient-editor/ Monday, October 15, 12
  54. 54. Small Screen Design Use CSS instead of background images wherever possible Keep navigation elements visible and large Less is More Monday, October 15, 12
  55. 55. Exercise Implement the photo gallery on the right Note black/white gradient top bar Monday, October 15, 12
  56. 56. Q&A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Monday, October 15, 12
  57. 57. CSS Common Techniques Mobile input types Apple style icon Header buttons Transition Effects Monday, October 15, 12
  58. 58. Mobile Input Types input type=”tel” numeric keypad Monday, October 15, 12
  59. 59. Mobile Input Types input type=”number” numbers/special chars keyboard Monday, October 15, 12
  60. 60. Mobile Input Types input type=”url” opens url keypad Monday, October 15, 12
  61. 61. Mobile Input Types input type=”email” email keypad (note the @) Monday, October 15, 12
  62. 62. Apple Style Icons Take any image and create an apple styled icon from it using css This includes: light from top, round corners, shadows Monday, October 15, 12
  63. 63. Apple Style Icons The markup <div class="icon"> <div></div> Android </div> Monday, October 15, 12
  64. 64. Apple Style Icons Style - container div .icon { zoom: 5; display: inline-block; text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px; color: #000; font: bold 11px helvetica; text-align: center; margin: 8px; } Monday, October 15, 12
  65. 65. Apple Style Icons .icon div { -webkit-border-radius: 8px; width: 57px; height: 57px; margin: 0 auto 4px; -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); -wbekit-box-sizing: border-box; background-image: -webkit-gradient(radial, 50% -40, 37, 50% 0, 100, from(rgba(255, 255, 255, 0.75)), color-stop(30%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), url(icon.jpg); -webkit-background-size: auto auto, 100% 100%; } Monday, October 15, 12
  66. 66. Header Buttons position: absolute border radius transparent background gradient styled text Monday, October 15, 12
  67. 67. HTML Markup <body> <div class="view"> <div class="header-wrapper"> <h1>Buttons Example</h1> <a href="#" class="header-button">Edit</a> <a href="#" class="header-button left">Back</a> </div> </div> </body> Monday, October 15, 12
  68. 68. Header Style Uses background: webkit-gradient to create the gradient dynamically height 44 px padding 10 px full code in examples folder Monday, October 15, 12
  69. 69. Header Button Style position: absolute to fix the position to the left or right min-width: 44 px - finger size border radius for the rounded corners full code in examples folder Monday, October 15, 12
  70. 70. CSS Common Techniques Mobile input types Apple style icon Header buttons Transition Effects Monday, October 15, 12
  71. 71. CSS Transition Controls the transition between element states Allows animating transitions Uses 3D acceleration Monday, October 15, 12
  72. 72. Demo - Transitions Each state is represented by a CSS class Clicking the button changes element state Monday, October 15, 12
  73. 73. -webkit-transition transition-property transition-duration transition-timing- function transition-delay Monday, October 15, 12
  74. 74. transition-property Almost any property can be animated Use all to catch everything Full list at: https://developer.mozilla.org/en/css/ css_transitions Monday, October 15, 12
  75. 75. transition-duration How long the property animation should take Use time in seconds or ms (can be < 1s) Monday, October 15, 12
  76. 76. transition-timing- function Determines the timing function for the animation Live demo at: http://www.the-art-of-web.com/css/ timing-function/ Monday, October 15, 12
  77. 77. transition delay Delay between value change and animation start Can be used to coordinate multiple animating objects Monday, October 15, 12
  78. 78. Exercise Implement a yahoo style “top news” section Click next to animate to the next image Click prev to animate to the previous image Hint: 3 divs inside a container, and animate position Monday, October 15, 12
  79. 79. Transition Effects Mobile apps usually have some native animations for changing screens On the web, we can implement these using css transformations Monday, October 15, 12
  80. 80. Slide Effect A slide effect is built of two child divs and a parent with overflow:hidden Sliding is achieved by changing the translate- x of the child divs Monday, October 15, 12
  81. 81. Flip Effect Two divs take the same position, one is rotated 180 deg on the y axis webkit-backface-visibility causes its back to stay hidden A click changes the rotation for both divs Monday, October 15, 12
  82. 82. Q&A Monday, October 15, 12
  83. 83. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com Monday, October 15, 12

×