1. Design For The
Smaller Screen
Monday, October 15, 12

2. Agenda
Viewports
Media Queries
Mobile Layout
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12

3. Tapuz on the iPhone
page is “zoomed out”
so everything will fit in.
Monday, October 15, 12

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. 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. Same Page
Different Viewport
Monday, October 15, 12

7. Viewport
World
World
Viewport Viewport
Device Device
Monday, October 15, 12

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. 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. 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. Viewport Quiz
What does the following mean ? What is the
recommended value ?
initial-scale
width
user-scalable
Monday, October 15, 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. Viewport When
Set a viewport when:
Writing a Fixed-Pixel Mobile Web App
Writing a responsive web app
Monday, October 15, 12

14. Android DPI
Monday, October 15, 12

15. The Problem
Same screen size
Different resolution
Monday, October 15, 12

16. target-densitydpi=
device-dpi
Monday, October 15, 12

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. Q&A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12

19. Responsive Layouts
Monday, October 15, 12

20. The Goal
Same website, Different devices
Best user experience for each device
Monday, October 15, 12

21. Desktop - Mobile
Monday, October 15, 12

22. Responsive Tools
Media Queries
Modernizr
pxtoem.com
Web Developer Extension: http://
chrispederick.com/work/web-developer/
Monday, October 15, 12

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. 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. 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. 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. Media Queries
Query device density
Query device dimensions
Query device orientation
Query iPad
Monday, October 15, 12

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. Query Device
Dimensions
Smartphones: landscape
@media only screen and (min-width : 321px) {
/* style goes here */
}
Monday, October 15, 12

30. Query Device
Dimensions
Smartphones: portrait
@media only screen and (max-width : 320px) {
/* style goes here */
}
Monday, October 15, 12

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. 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. 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. More Media Queries
Media Query Snippets:
http://nmsdvid.com/snippets/#
Monday, October 15, 12

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. Other Tools
Modernizr
pxtoem.com
Web Developer Extension: http://
chrispederick.com/work/web-developer/
Monday, October 15, 12

37. Q&A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12

38. Mobile Layout
newsgeek.co.il
mobile optimized
one column
only vertical scrolling
Monday, October 15, 12

39. Mobile Layout
One column
Top navigation bar
Bottom navigation bar - tabs
Monday, October 15, 12

40. Mobile Layout
A nav bar at the
bottom
Dividing to pages
saves bandwidth
Monday, October 15, 12

41. Mobile Layout
Facebook keeps a top
navigation bar
Note the single column
flow
Monday, October 15, 12

42. Mobile Layout
Yahoo mobile works
with the same single
column
Top navigation bar
horizontal scroller
“twist”
Monday, October 15, 12

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. 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. Keep In Mind
word-break: break-all;
-webkit-touch-callout:
none;
Monday, October 15, 12

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. 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. 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. Q&A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12

50. CSS Mobile Features
Rounded Corners
Shadows
Gradients
Monday, October 15, 12

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. 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. 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. 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. Exercise
Implement the photo
gallery on the right
Note black/white
gradient top bar
Monday, October 15, 12

56. Q&A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12

57. CSS Common
Techniques
Mobile input types
Apple style icon
Header buttons
Transition Effects
Monday, October 15, 12

58. Mobile Input Types
input type=”tel”
numeric keypad
Monday, October 15, 12

59. Mobile Input Types
input type=”number”
numbers/special chars
keyboard
Monday, October 15, 12

60. Mobile Input Types
input type=”url”
opens url keypad
Monday, October 15, 12

61. Mobile Input Types
input type=”email”
email keypad (note the
@)
Monday, October 15, 12

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. Apple Style Icons
The markup <div class="icon">
<div></div>
Android
</div>
Monday, October 15, 12

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. 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. Header Buttons
position: absolute
border radius
transparent
background gradient
styled text
Monday, October 15, 12

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. 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. 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. CSS Common
Techniques
Mobile input types
Apple style icon
Header buttons
Transition Effects
Monday, October 15, 12

71. CSS Transition
Controls the transition between element states
Allows animating transitions
Uses 3D acceleration
Monday, October 15, 12

72. Demo - Transitions
Each state is
represented by a CSS
class
Clicking the button
changes element state
Monday, October 15, 12

73. -webkit-transition
transition-property
transition-duration
transition-timing-
function
transition-delay
Monday, October 15, 12

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. transition-duration
How long the property animation should take
Use time in seconds or ms (can be < 1s)
Monday, October 15, 12

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. transition delay
Delay between value change and animation start
Can be used to coordinate multiple animating
objects
Monday, October 15, 12

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. 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. 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. 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. Q&A
Monday, October 15, 12

83. Thank You
Ynon Perek
ynonperek@yahoo.com
ynonperek.com
Monday, October 15, 12