05 mobile css
TRANSCRIPT
Design For The Smaller Screen
Monday, October 15, 12
Agenda
Viewports
Media Queries
Mobile Layout
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
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.
How will you show “normal” web sites on mobile ?
Monday, October 15, 12
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
Same PageDifferent Viewport
Monday, October 15, 12
Viewport
Device
World
Device
World
Viewport Viewport
Monday, October 15, 12
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
Viewport Options
Directive Example Value Meaning
widthwidth=320width=device-width
logical viewport width, in pixels
heightheight=480height=device-height
logical viewport height, in pixels
Monday, October 15, 12
Viewport Options
Directive Example Value Meaning
user-scalableuser-scalable=no user can zoom
in/out
initial-scale initial-scale=2.0 initial zoom factor
maximum-scaleminimum-scale
maximum-scale=2.5
min/max zoom factors
Monday, October 15, 12
Viewport Quiz
What does the following mean ? What is the recommended value ?
initial-scale
width
user-scalable
Monday, October 15, 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
Viewport When
Set a viewport when:
Writing a Fixed-Pixel Mobile Web App
Writing a responsive web app
Monday, October 15, 12
Android DPI
Monday, October 15, 12
The Problem
Same screen size
Different resolution
Monday, October 15, 12
target-densitydpi= device-dpi
Monday, October 15, 12
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
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
Responsive Layouts
Monday, October 15, 12
The Goal
Same website, Different devices
Best user experience for each device
Monday, October 15, 12
Desktop - Mobile
Monday, October 15, 12
Responsive Tools
Media Queries
Modernizr
pxtoem.com
Web Developer Extension: http://chrispederick.com/work/web-developer/
Monday, October 15, 12
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
Media Queries
The medium density device is delivered a 320x480 image
The high density device is delivered a 480x800 image
Monday, October 15, 12
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
Media Queries ExampleIt’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
Media Queries
Query device density
Query device dimensions
Query device orientation
Query iPad
Monday, October 15, 12
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
Query Device Dimensions
Smartphones: landscape
@media only screen and (min-width : 321px) {
/* style goes here */
}
Monday, October 15, 12
Query Device Dimensions
Smartphones: portrait
@media only screen and (max-width : 320px) {
/* style goes here */
}
Monday, October 15, 12
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
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
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
More Media Queries
Media Query Snippets:http://nmsdvid.com/snippets/#
Monday, October 15, 12
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
Other Tools
Modernizr
pxtoem.com
Web Developer Extension: http://chrispederick.com/work/web-developer/
Monday, October 15, 12
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
Mobile Layout
newsgeek.co.il
mobile optimized
one column
only vertical scrolling
Monday, October 15, 12
Mobile Layout
One column
Top navigation bar
Bottom navigation bar - tabs
Monday, October 15, 12
Mobile Layout
A nav bar at the bottom
Dividing to pages saves bandwidth
Monday, October 15, 12
Mobile Layout
Facebook keeps a top navigation bar
Note the single column flow
Monday, October 15, 12
Mobile Layout
Yahoo mobile works with the same single column
Top navigation bar
horizontal scroller “twist”
Monday, October 15, 12
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
Top Navigation Bar
use floated list elements for the horizontal top menu
wrap them in a div for the bar
Monday, October 15, 12
Keep In Mind
word-break: break-all;
-webkit-touch-callout: none;
Monday, October 15, 12
Design Limitations
overflow: scroll ios5 and up, Android 4 and up
Consider overthrow or iScroll for polyfillsSee http://www.quirksmode.org/m/table.html for more info
Monday, October 15, 12
Design Limitations
animated gif is not supported on Android devices
Consider spin.jsSee http://www.quirksmode.org/m/table.html for more info
Monday, October 15, 12
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
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
CSS Mobile Features
Rounded Corners
Shadows
Gradients
Monday, October 15, 12
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
Shadowsuse -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
GradientsCSS 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
Small Screen Design
Use CSS instead of background images wherever possible
Keep navigation elements visible and large
Less is More
Monday, October 15, 12
Exercise
Implement the photo gallery on the right
Note black/white gradient top bar
Monday, October 15, 12
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
CSS Common Techniques
Mobile input types
Apple style icon
Header buttons
Transition Effects
Monday, October 15, 12
Mobile Input Types
input type=”tel”
numeric keypad
Monday, October 15, 12
Mobile Input Types
input type=”number”
numbers/special chars keyboard
Monday, October 15, 12
Mobile Input Types
input type=”url”
opens url keypad
Monday, October 15, 12
Mobile Input Types
input type=”email”
email keypad (note the @)
Monday, October 15, 12
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
Apple Style Icons
The markup <div class="icon">
<div></div>
Android
</div>
Monday, October 15, 12
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
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
Header Buttons
position: absolute
border radius
transparent background gradient
styled text
Monday, October 15, 12
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
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
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
CSS Common Techniques
Mobile input types
Apple style icon
Header buttons
Transition Effects
Monday, October 15, 12
CSS Transition
Controls the transition between element states
Allows animating transitions
Uses 3D acceleration
Monday, October 15, 12
Demo - Transitions
Each state is represented by a CSS class
Clicking the button changes element state
Monday, October 15, 12
-webkit-transition
transition-property
transition-duration
transition-timing-function
transition-delay
Monday, October 15, 12
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
transition-duration
How long the property animation should take
Use time in seconds or ms (can be < 1s)
Monday, October 15, 12
transition-timing-functionDetermines the timing function for the animation
Live demo at: http://www.the-art-of-web.com/css/timing-function/
Monday, October 15, 12
transition delay
Delay between value change and animation start
Can be used to coordinate multiple animating objects
Monday, October 15, 12
ExerciseImplement 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
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
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
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
Q & A
Monday, October 15, 12
Thank You
Ynon Perek
ynonperek.com
Monday, October 15, 12