Slide 1

Slide 1 text

Think Small Use HTML and CSS to design for small screen Sunday, October 9, 2011

Slide 2

Slide 2 text

Agenda Viewports Media Queries Mobile Layout CSS Mobile-Related Features CSS Techniques for Mobile Apps Sunday, October 9, 2011

Slide 3

Slide 3 text

Ynet on the iPhone page is “zoomed out” so everything will ﬁt in. Sunday, October 9, 2011

Slide 4

Slide 4 text

Viewport Most websites are optimized for 960px, but mobile devices usually have less. How will you show “normal” web sites on mobile ? Sunday, October 9, 2011

Slide 5

Slide 5 text

Viewport Determines how many pixels ﬁt on the page Mobile devices “do their best” to ﬁt everything in the viewport - sometimes not optimal This can be controlled with viewports Sunday, October 9, 2011

Slide 6

Slide 6 text

Same Page Different Viewport Sunday, October 9, 2011

Slide 7

Slide 7 text

Viewport use viewport meta tag to prevent zooming Sunday, October 9, 2011

Slide 8

Slide 8 text

Viewport Device World Device World Viewport Viewport Sunday, October 9, 2011

Slide 9

Slide 9 text

Viewport Options Directive Example Value Meaning width width=320 width=device- width logical viewport width, in pixels height height=480 height=device- height logical viewport height, in pixels Sunday, October 9, 2011

Slide 10

Slide 10 text

Viewport Options Directive Example Value Meaning user-scalable user- scalable=no user can zoom in/out initial-scale initial-scale=2.0 initial zoom factor maximum-scale minimum-scale maximum- scale=2.5 min/max zoom factors Sunday, October 9, 2011

Slide 11

Slide 11 text

Viewport When should you use viewport ? Use on desktop optimized sites with ﬂuid layout Use on mobile optimized site or app No need on desktop optimized site with ﬁxed layout Sunday, October 9, 2011

Slide 12

Slide 12 text

Viewport Quiz What does the following mean ? What is the recommended value ? initial-scale width user-scalable Sunday, October 9, 2011

Slide 13

Slide 13 text

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 Sunday, October 9, 2011

Slide 14

Slide 14 text

Android DPI Sunday, October 9, 2011

Slide 15

Slide 15 text

The Problem Same screen size Different resolution Sunday, October 9, 2011

Slide 16

Slide 16 text

target-densitydpi= device-dpi Sunday, October 9, 2011

Slide 17

Slide 17 text

Android Dpi Android devices support variable dpi devices Use target-densitydpi to control automatic scaling due to dpi differences Default value: 160 (medium density) Sunday, October 9, 2011

Slide 18

Slide 18 text

Q & A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Sunday, October 9, 2011

Slide 19

Slide 19 text

Media Queries Mobile devices vary in size and capabilities CSS Media Queries allow us to use different css properties based on the device Sunday, October 9, 2011

Slide 20

Slide 20 text

Media Queries The medium density device is delivered a 320x480 image The high density device is delivered a 480x800 image Sunday, October 9, 2011

Slide 21

Slide 21 text

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); } } Sunday, October 9, 2011

Slide 22

Slide 22 text

Media Queries Example It’s also possible to use completely different css ﬁles Sunday, October 9, 2011

Slide 23

Slide 23 text

Media Queries Query device density Query device dimensions Query device orientation Query iPad Sunday, October 9, 2011

Slide 24

Slide 24 text

Query Device Dimensions Smartphones: portrait & landscape @media only screen and (min-device-width : 320px) and (max-device-width : 569px ) { /* style goes here */ } Sunday, October 9, 2011

Slide 25

Slide 25 text

Query Device Dimensions Smartphones: landscape @media only screen and (min-width : 321px) and (max- device-width : 569px ) { /* style goes here */ } Sunday, October 9, 2011

Slide 26

Slide 26 text

Query Device Dimensions Smartphones: portrait @media only screen and (max-width : 320px) { /* style goes here */ } Sunday, October 9, 2011

Slide 27

Slide 27 text

Query Device Dimensions iPads: portraits & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) { /* style goes here */ } Sunday, October 9, 2011

Slide 28

Slide 28 text

Query Device Dimensions iPads: landscape @media only screen and (min-device-width : 768px) and (max- device-width : 1024px ) and ( orientation : landscape ) { /* style goes here */ } Sunday, October 9, 2011

Slide 29

Slide 29 text

Query Device Dimensions iPads: portrait @media only screen and (min-device-width : 768px) and (max-device- width : 1024px ) and ( orientation : portrait ) { /* style goes here */ } Sunday, October 9, 2011

Slide 30

Slide 30 text

Media Queries html5 mobile boilerplate provides a ready made empty css ﬁle with all of the above http://html5boilerplate.com/mobile/ Sunday, October 9, 2011

Slide 31

Slide 31 text

Q & A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Sunday, October 9, 2011

Slide 32

Slide 32 text

Mobile Layout newsgeek.co.il mobile optimized one column only vertical scrolling Sunday, October 9, 2011

Slide 33

Slide 33 text

Mobile Layout One column Top navigation bar Bottom navigation bar - tabs Sunday, October 9, 2011

Slide 34

Slide 34 text

Mobile Layout A nav bar at the bottom Dividing to pages saves bandwidth Sunday, October 9, 2011

Slide 35

Slide 35 text

Mobile Layout Facebook keeps a top navigation bar Note the single column ﬂow Sunday, October 9, 2011

Slide 36

Slide 36 text

Mobile Layout Yahoo mobile works with the same single column Top navigation bar vertical scroller “twist” Sunday, October 9, 2011

Slide 37

Slide 37 text

Exercise Implement a blog layout Show a snippet from every post Bonus: Have your blog look different on desktop and mobile Sunday, October 9, 2011

Slide 38

Slide 38 text

Top Navigation Bar use ﬂoated list elements for the horizontal top menu wrap them in a div for the bar Sunday, October 9, 2011

Slide 39

Slide 39 text

Design Limitations overﬂow: scroll is not supported on iPhone & Android devices. animated gif is not supported on Android devices position: ﬁxed is not supported on iPhone & Android devices. See http://www.quirksmode.org/m/table.html for more info Sunday, October 9, 2011

Slide 40

Slide 40 text

Q & A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Sunday, October 9, 2011

Slide 41

Slide 41 text

CSS Mobile Features Rounded Corners Shadows Gradients Sunday, October 9, 2011

Slide 42

Slide 42 text

Rounded Corners use -webkit-border- radius to get the effect No need to use background images Sample use: -webkit-border-radius: 8px; Sunday, October 9, 2011

Slide 43

Slide 43 text

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); Sunday, October 9, 2011

Slide 44

Slide 44 text

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/ Sunday, October 9, 2011

Slide 45

Slide 45 text

Small Screen Design Use CSS instead of background images wherever possible Keep navigation elements visible and large Less is More Sunday, October 9, 2011

Slide 46

Slide 46 text

Exercise Implement the photo gallery on the right Note black/white gradient top bar Sunday, October 9, 2011

Slide 47

Slide 47 text

Q & A Viewports Media Queries Mobile Layout Options CSS Mobile-Related Features CSS Techniques for Mobile Apps Sunday, October 9, 2011

Slide 48

Slide 48 text

CSS Common Techniques Mobile input types Apple style icon Header buttons Transition Effects Sunday, October 9, 2011

Slide 49

Slide 49 text

Mobile Input Types input type=”tel” numeric keypad Sunday, October 9, 2011

Slide 50

Slide 50 text

Mobile Input Types input type=”number” numbers/special chars keyboard Sunday, October 9, 2011

Slide 51

Slide 51 text

Mobile Input Types input type=”url” opens url keypad Sunday, October 9, 2011

Slide 52

Slide 52 text

Mobile Input Types input type=”email” email keypad (note the @) Sunday, October 9, 2011

Slide 53

Slide 53 text

Apple Style Icons Take any image and create an apple styled icon from it using css This includes: light from top, round corners, shadows Sunday, October 9, 2011

Slide 54

Slide 54 text

Apple Style Icons The markup

Android

Sunday, October 9, 2011

Slide 55

Slide 55 text

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; } Sunday, October 9, 2011

Slide 56

Slide 56 text

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%; } Sunday, October 9, 2011

Slide 57

Slide 57 text

Header Buttons position: absolute border radius transparent background gradient styled text Sunday, October 9, 2011

Slide 58

Slide 58 text

HTML Markup

Buttons Example

Edit Back

Sunday, October 9, 2011

Slide 59

Slide 59 text

Header Style Uses background: webkit-gradient to create the gradient dynamically height 44 px padding 10 px full code in examples folder Sunday, October 9, 2011

Slide 60

Slide 60 text

Header Button Style position: absolute to ﬁx the position to the left or right min-width: 44 px - ﬁnger size border radius for the rounded corners full code in examples folder Sunday, October 9, 2011

Slide 61

Slide 61 text

CSS Common Techniques Mobile input types Apple style icon Header buttons Transition Effects Sunday, October 9, 2011

Slide 62

Slide 62 text

CSS Transition Controls the transition between element states Allows animating transitions Uses 3D acceleration Sunday, October 9, 2011

Slide 63

Slide 63 text

Demo - Transitions Each state is represented by a CSS class Clicking the button changes element state Sunday, October 9, 2011

Slide 64

Slide 64 text

-webkit-transition transition-property transition-duration transition-timing- function transition-delay Sunday, October 9, 2011

Slide 65

Slide 65 text

transition-property Almost any property can be animated Use all to catch everything Full list at: https://developer.mozilla.org/en/css/ css_transitions Sunday, October 9, 2011

Slide 66

Slide 66 text

transition-duration How long the property animation should take Use time in seconds or ms (can be < 1s) Sunday, October 9, 2011

Slide 67

Slide 67 text

transition-timing- function Determines the timing function for the animation Live demo at: http://www.the-art-of-web.com/css/ timing-function/ Sunday, October 9, 2011

Slide 68

Slide 68 text

transition delay Delay between value change and animation start Can be used to coordinate multiple animating objects Sunday, October 9, 2011

Slide 69

Slide 69 text

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: use a wide background image, animating background- position Sunday, October 9, 2011

Slide 70

Slide 70 text

Transition Effects Mobile apps usually have some native animations for changing screens On the web, we can implement these using css transformations Sunday, October 9, 2011

Slide 71

Slide 71 text

Slide Effect A slide effect is built of two child divs and a parent with overﬂow:hidden Sliding is achieved by changing the translate- x of the child divs Sunday, October 9, 2011

Slide 72

Slide 72 text

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 Sunday, October 9, 2011

Slide 73

Slide 73 text

Q & A Sunday, October 9, 2011

Slide 74

Slide 74 text

Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com Sunday, October 9, 2011