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

Viewport Viewport

Viewport

use viewport meta tag to prevent zooming

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

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)

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/

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

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

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/

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

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

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/

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

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

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>

<h1>Buttons Example</h1>

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

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/

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

Thank You

Ynon Perek

ynonperek@yahoo.com

ynonperek.com

05 mobile css

Technology

css (kelompok 05)

mobile development with html, css and js

css in mobile apps

anatomy of an app html, css, jquery, jquery mobile cis 136...

getting started css with - adobe inc. · 2020-05-05 ·...

html5, css3, javascript for mobile web - universitas...

lecture 05 the web (html, cgis, & css) -...

css stuff‐1 -...

css 3 (05-22-12)

12 css for mobile devices

phonegap: mobile applications with html, css and javascript

05 mobile office

welcome to css mobile apps1

1-05: css for text and backgrounds

05. session 05 introducing css

css mobile apps

optimizing car dealership inventory€¦ · bootstrap,...

css home « w3schools home next chapter - fadel k · css...

tutorial para desenvolvimento mobile usando html css e...

chapter 6. css 레이아웃과 애니메이션 -...