05 Mobile CSS

Design For The Smaller Screen

Monday, October 15, 12

Agenda

Viewports

Media Queries

Mobile Layout

CSS Mobile-Related Features

CSS Techniques for Mobile Apps


Tapuz on the iPhone

page is “zoomed out” so everything will fit in.


Viewport

Most websites are optimized for 960px, but mobile devices usually have less.

How will you show “normal” web sites on mobile ?


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


Same PageDifferent Viewport


Viewport

Device

World

Device

World

Viewport Viewport


Viewport

use viewport meta tag to prevent zooming

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1”>


Viewport Options

Directive Example Value Meaning

widthwidth=320width=device-width

logical viewport width, in pixels

heightheight=480height=device-height

logical viewport height, in pixels


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


Viewport Quiz

What does the following mean ? What is the recommended value ?

initial-scale

width

user-scalable


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


Viewport When

Set a viewport when:

Writing a Fixed-Pixel Mobile Web App

Writing a responsive web app


Android DPI


The Problem

Same screen size

Different resolution


target-densitydpi= device-dpi


Android Dpi

Android devices support variable dpi devices

Use target-densitydpi to control automatic scaling due to dpi differences

Default value: 160 (medium density)


Q & A

Viewports

Media Queries

Mobile Layout Options




Responsive Layouts


The Goal

Same website, Different devices

Best user experience for each device


Desktop - Mobile


Responsive Tools

Media Queries

Modernizr

pxtoem.com

Web Developer Extension: http://chrispederick.com/work/web-developer/


http://chrispederick.com/work/web-developer/




Media Queries

Mobile devices vary in size and capabilities

CSS Media Queries allow us to use different css properties based on the device


Media Queries

The medium density device is delivered a 320x480 image

The high density device is delivered a 480x800 image


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); }}


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" />


Media Queries

Query device density

Query device dimensions

Query device orientation

Query iPad


Query Device Dimensions

Smartphones: portrait & landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 480px ) {

/* style goes here */

}



Smartphones: landscape

@media only screen and (min-width : 321px) {


}



Smartphones: portrait

@media only screen and (max-width : 320px) {


}



iPads: portraits & landscape@media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) {


}



iPads: landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) and ( orientation : landscape ) {


}



iPads: portrait

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) and ( orientation : portrait ) {


}


More Media Queries

Media Query Snippets:http://nmsdvid.com/snippets/#


http://nmsdvid.com/snippets/#

http://nmsdvid.com/snippets/#

Media Queries

html5 mobile boilerplate provides a ready made empty css file with all of the above

http://html5boilerplate.com/mobile/




Other Tools

Modernizr

pxtoem.com

Web Developer Extension: http://chrispederick.com/work/web-developer/






Q & A

Viewports

Media Queries





Mobile Layout

newsgeek.co.il

mobile optimized

one column

only vertical scrolling


Mobile Layout

One column

Top navigation bar

Bottom navigation bar - tabs


Mobile Layout

A nav bar at the bottom

Dividing to pages saves bandwidth


Mobile Layout

Facebook keeps a top navigation bar

Note the single column flow


Mobile Layout

Yahoo mobile works with the same single column

Top navigation bar

horizontal scroller “twist”


Exercise

Implement a blog layout

Show a snippet from every post

Bonus: Have your blog look different on desktop and mobile


Top Navigation Bar

use floated list elements for the horizontal top menu

wrap them in a div for the bar


Keep In Mind

word-break: break-all;

-webkit-touch-callout: none;


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


http://www.quirksmode.org/m/table.html


Design Limitations

animated gif is not supported on Android devices

Consider spin.jsSee http://www.quirksmode.org/m/table.html for more info




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




Q & A

Viewports

Media Queries





CSS Mobile Features

Rounded Corners

Shadows

Gradients


Rounded Corners

use -webkit-border-radius to get the effect

No need to use background images

Sample use:-webkit-border-radius: 8px;


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);


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/


http://www.colorzilla.com/gradient-editor/




Small Screen Design

Use CSS instead of background images wherever possible

Keep navigation elements visible and large

Less is More


Exercise

Implement the photo gallery on the right

Note black/white gradient top bar


Q & A

Viewports

Media Queries





CSS Common Techniques

Mobile input types

Apple style icon

Header buttons

Transition Effects


Mobile Input Types

input type=”tel”

numeric keypad


Mobile Input Types

input type=”number”

numbers/special chars keyboard


Mobile Input Types

input type=”url”

opens url keypad


Mobile Input Types

input type=”email”

email keypad (note the @)


Apple Style Icons

Take any image and create an apple styled icon from it using css

This includes: light from top, round corners, shadows


Apple Style Icons

The markup <div class="icon">

<div></div>

Android

</div>


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;

}


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%;

}


Header Buttons

position: absolute

border radius

transparent background gradient

styled text


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>


Header Style

Uses background: webkit-gradient to create the gradient dynamically

height 44 px

padding 10 px

full code in examples folder


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


CSS Common Techniques

Mobile input types

Apple style icon

Header buttons

Transition Effects


CSS Transition

Controls the transition between element states

Allows animating transitions

Uses 3D acceleration


Demo - Transitions

Each state is represented by a CSS class

Clicking the button changes element state


-webkit-transition

transition-property

transition-duration

transition-timing-function

transition-delay


transition-property

Almost any property can be animated

Use all to catch everything

Full list at: https://developer.mozilla.org/en/css/css_transitions


https://developer.mozilla.org/en/css/css_transitions




transition-duration

How long the property animation should take

Use time in seconds or ms (can be < 1s)


transition-timing-functionDetermines the timing function for the animation

Live demo at: http://www.the-art-of-web.com/css/timing-function/


http://www.the-art-of-web.com/css/timing-function/




transition delay

Delay between value change and animation start

Can be used to coordinate multiple animating objects


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


Transition Effects

Mobile apps usually have some native animations for changing screens

On the web, we can implement these using css transformations


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


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


Q & A


Thank You

Ynon Perek

[email protected]

ynonperek.com


mailto:[email protected]

mailto:[email protected]

http://www.ynonperek.com

http://www.ynonperek.com

05 Mobile CSS

Technology

Transcript of 05 Mobile CSS