0
Design For The                  Smaller ScreenMonday, October 15, 12
Agenda                   Viewports                   Media Queries                   Mobile Layout                   CSS M...
Tapuz on the iPhone                   page is “zoomed out”                   so everything will fit in.Monday, October 15, 12
Viewport                   Most websites are optimized for 960px, but mobile                   devices usually have less. ...
Viewport                   Determines how many pixels fit on the page                   Mobile devices “do their best” to fi...
Same Page                  Different ViewportMonday, October 15, 12
Viewport                          World                                     World                         Viewport   Viewp...
Viewport                   use viewport meta tag to prevent zooming                   <meta name=”viewport” content=”width...
Viewport Options                  Directive   Example Value Meaning                              width=320                ...
Viewport Options                   Directive       Example Value Meaning                                   user-          ...
Viewport Quiz                   What does the following mean ? What is the                   recommended value ?          ...
Viewport Quiz                   What does the following mean ? What is the                   recommended value ?          ...
Viewport When                   Set a viewport when:                         Writing a Fixed-Pixel Mobile Web App         ...
Android DPIMonday, October 15, 12
The Problem                   Same screen size                   Different resolutionMonday, October 15, 12
target-densitydpi=                     device-dpiMonday, October 15, 12
Android Dpi                   Android devices support variable dpi devices                   Use target-densitydpi to cont...
Q&A                   Viewports                   Media Queries                   Mobile Layout Options                   ...
Responsive LayoutsMonday, October 15, 12
The Goal                   Same website, Different devices                   Best user experience for each deviceMonday, Oc...
Desktop - MobileMonday, October 15, 12
Responsive Tools                   Media Queries                   Modernizr                   pxtoem.com                 ...
Media Queries                   Mobile devices vary in size and capabilities                   CSS Media Queries allow us ...
Media Queries                   The medium density                   device is delivered a                   320x480 image...
Media Queries Example                   #header {                       background:url(medium-density-image.png);         ...
Media Queries Example                   It’s also possible to use completely different css                   files          ...
Media Queries                   Query device density                   Query device dimensions                   Query dev...
Query Device                  Dimensions                   Smartphones: portrait & landscape                     @media on...
Query Device                  Dimensions                   Smartphones: landscape                     @media only screen a...
Query Device                  Dimensions                   Smartphones: portrait                     @media only screen an...
Query Device                  Dimensions                   iPads: portraits & landscape                     @media only sc...
Query Device                  Dimensions                   iPads: landscape                    @media only screen and (min...
Query Device                  Dimensions                   iPads: portrait                   @media only screen and (min-d...
More Media Queries                   Media Query Snippets:                   http://nmsdvid.com/snippets/#Monday, October ...
Media Queries                   html5 mobile boilerplate provides a ready made                   empty css file with all of...
Other Tools                   Modernizr                   pxtoem.com                   Web Developer Extension: http://   ...
Q&A                   Viewports                   Media Queries                   Mobile Layout Options                   ...
Mobile Layout                   newsgeek.co.il                   mobile optimized                   one column            ...
Mobile Layout                   One column                   Top navigation bar                   Bottom navigation bar - ...
Mobile Layout                   A nav bar at the                   bottom                   Dividing to pages             ...
Mobile Layout                   Facebook keeps a top                   navigation bar                   Note the single co...
Mobile Layout                   Yahoo mobile works                   with the same single                   column        ...
Exercise                   Implement a blog                   layout                   Show a snippet from                ...
Top Navigation Bar                   use floated list                   elements for the                   horizontal top m...
Keep In Mind                   word-break: break-all;                   -webkit-touch-callout:                   none;Mond...
Design Limitations                         overflow: scroll ios5 and up, Android 4 and up                         Consider ...
Design Limitations                         animated gif is not supported on Android                         devices       ...
Design Limitations                         position: fixed is supported on:                                iOS5 and up     ...
Q&A                   Viewports                   Media Queries                   Mobile Layout Options                   ...
CSS Mobile Features                   Rounded Corners                   Shadows                   GradientsMonday, October...
Rounded Corners                   use -webkit-border-                   radius to get the effect                   No need ...
Shadows                   use -webkit-box-                   shadow to get a                   shadow effect               ...
Gradients                   CSS 3.0 added                   support for gradients                   use them instead of   ...
Small Screen Design                   Use CSS instead of background images wherever                   possible            ...
Exercise                   Implement the photo                   gallery on the right                   Note black/white  ...
Q&A                   Viewports                   Media Queries                   Mobile Layout Options                   ...
CSS Common                  Techniques                   Mobile input types                   Apple style icon            ...
Mobile Input Types                   input type=”tel”                   numeric keypadMonday, October 15, 12
Mobile Input Types                   input type=”number”                   numbers/special chars                   keyboar...
Mobile Input Types                   input type=”url”                   opens url keypadMonday, October 15, 12
Mobile Input Types                   input type=”email”                   email keypad (note the                   @)Monda...
Apple Style Icons                   Take any image and                   create an apple styled                   icon fro...
Apple Style Icons                    The markup   <div class="icon">                                          <div></div> ...
Apple Style Icons                         Style - container div                     .icon {                          zoom:...
Apple Style Icons                         .icon div {                               -webkit-border-radius: 8px;           ...
Header Buttons                   position: absolute                   border radius                   transparent         ...
HTML Markup                         <body>                             <div class="view">                                 ...
Header Style                   Uses background: webkit-gradient to create the                   gradient dynamically      ...
Header Button Style                   position: absolute to fix the position to the left or                   right        ...
CSS Common                  Techniques                   Mobile input types                   Apple style icon            ...
CSS Transition                   Controls the transition between element states                   Allows animating transit...
Demo - Transitions                   Each state is                   represented by a CSS                   class         ...
-webkit-transition                   transition-property                   transition-duration                   transitio...
transition-property                   Almost any property can be animated                   Use all to catch everything   ...
transition-duration                   How long the property animation should take                   Use time in seconds or...
transition-timing-                  function                   Determines the timing function for the animation           ...
transition delay                   Delay between value change and animation start                   Can be used to coordin...
Exercise                   Implement a yahoo style                   “top news” section                   Click next to an...
Transition Effects                   Mobile apps usually have some native animations                   for changing screen...
Slide Effect                   A slide effect is built of                   two child divs and a                   parent w...
Flip Effect                   Two divs take the same position, one is rotated                   180 deg on the y axis     ...
Q&AMonday, October 15, 12
Thank You                   Ynon Perek                   ynonperek@yahoo.com                   ynonperek.comMonday, Octobe...
Upcoming SlideShare
Loading in...5
×

05 Mobile CSS

2,703

Published on

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

No Downloads
Views
Total Views
2,703
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
80
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "05 Mobile CSS"

  1. 1. Design For The Smaller ScreenMonday, October 15, 12
  2. 2. Agenda Viewports Media Queries Mobile Layout CSS Mobile-Related Features CSS Techniques for Mobile AppsMonday, 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 viewportsMonday, October 15, 12
  6. 6. Same Page Different ViewportMonday, October 15, 12
  7. 7. Viewport World World Viewport Viewport Device DeviceMonday, 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 heightMonday, 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 factorsMonday, October 15, 12
  11. 11. Viewport Quiz What does the following mean ? What is the recommended value ? initial-scale width user-scalableMonday, 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 contentMonday, October 15, 12
  13. 13. Viewport When Set a viewport when: Writing a Fixed-Pixel Mobile Web App Writing a responsive web appMonday, October 15, 12
  14. 14. Android DPIMonday, October 15, 12
  15. 15. The Problem Same screen size Different resolutionMonday, October 15, 12
  16. 16. target-densitydpi= device-dpiMonday, 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 AppsMonday, October 15, 12
  19. 19. Responsive LayoutsMonday, October 15, 12
  20. 20. The Goal Same website, Different devices Best user experience for each deviceMonday, October 15, 12
  21. 21. Desktop - MobileMonday, 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 deviceMonday, October 15, 12
  24. 24. Media Queries The medium density device is delivered a 320x480 image The high density device is delivered a 480x800 imageMonday, 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 iPadMonday, 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 AppsMonday, October 15, 12
  38. 38. Mobile Layout newsgeek.co.il mobile optimized one column only vertical scrollingMonday, October 15, 12
  39. 39. Mobile Layout One column Top navigation bar Bottom navigation bar - tabsMonday, October 15, 12
  40. 40. Mobile Layout A nav bar at the bottom Dividing to pages saves bandwidthMonday, October 15, 12
  41. 41. Mobile Layout Facebook keeps a top navigation bar Note the single column flowMonday, 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 mobileMonday, October 15, 12
  44. 44. Top Navigation Bar use floated list elements for the horizontal top menu wrap them in a div for the barMonday, 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 infoMonday, 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 infoMonday, 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 infoMonday, October 15, 12
  49. 49. Q&A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile AppsMonday, October 15, 12
  50. 50. CSS Mobile Features Rounded Corners Shadows GradientsMonday, 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 MoreMonday, October 15, 12
  55. 55. Exercise Implement the photo gallery on the right Note black/white gradient top barMonday, October 15, 12
  56. 56. Q&A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile AppsMonday, October 15, 12
  57. 57. CSS Common Techniques Mobile input types Apple style icon Header buttons Transition EffectsMonday, October 15, 12
  58. 58. Mobile Input Types input type=”tel” numeric keypadMonday, October 15, 12
  59. 59. Mobile Input Types input type=”number” numbers/special chars keyboardMonday, October 15, 12
  60. 60. Mobile Input Types input type=”url” opens url keypadMonday, 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, shadowsMonday, 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 textMonday, 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 folderMonday, 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 folderMonday, October 15, 12
  70. 70. CSS Common Techniques Mobile input types Apple style icon Header buttons Transition EffectsMonday, October 15, 12
  71. 71. CSS Transition Controls the transition between element states Allows animating transitions Uses 3D accelerationMonday, October 15, 12
  72. 72. Demo - Transitions Each state is represented by a CSS class Clicking the button changes element stateMonday, October 15, 12
  73. 73. -webkit-transition transition-property transition-duration transition-timing- function transition-delayMonday, 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_transitionsMonday, 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 objectsMonday, 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 positionMonday, 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 transformationsMonday, 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 divsMonday, 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 divsMonday, October 15, 12
  82. 82. Q&AMonday, October 15, 12
  83. 83. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.comMonday, October 15, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×