Mobile Web Design Code

Mobile Web Design
CODE
@markodugonjic

<!DOCTYPE html>

<meta name="viewport" />

<link rel="stylesheet" media="..." />

http://wufoo.com/html5/
http://caniuse.com
http://www.quirksmode.org/html5/
inputs_mobile.html
http://mobilehtml5.org

@media only screen and (min-width: 768px)
{
/* desktop styles */
}

(min-width: 321px)

(max-width: 320px)

(min-device-width: 320px)

(max-device-width: 480px)

(orientation: landscape)

(orientation: portrait)

(-webkit-min-device-pixel-ratio: 2)

(min-device-pixel-ratio: 2)

a couple of useful
CSS properties

box-shadow:
0 2px 2px 0 rgba(0,0,0,.5),
inset 0 -2px 2px 0 rgba(255,255,255,.5)

linear-gradient(#fff, #000)

border-radius: 10px/50px
(+ height: 20px; width: 100px)

text-shadow: 0 1px 0 rgba(0,0,0,.5)

-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#fff),
to(#000)
)

button { -webkit-appearance: none; }

@media screen and
(-webkit-min-device-pixel-ratio: 2) {
background: url(image@2x.png);
background-size: 10px 10px;
}

The responsive workflow
#1 general typography
#2 vertical rhythm
#3 layout and proportions

confirm(
'This service will be charged XY.
Do you accept?'
)

alert(
'Your transaction was successful.'
)

window.onload = function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
}

document.getElementById('nav').innerHTML
= '<select
onchange="document.location=this.value;"
<option value="#">Home</option>
<option value="#">Work</option>
<option value="#">Clients</option>
<option value="#">Contact</option>
</select>';

http://www.zambetti.com/projects/liveview/

http://www.mozilla.org/en-US/mobile/

http://www.opera.com/developer/tools/mobile/

Back to Work!

@markodugonjic

Mobile Web Design Code

More Related Content

Viewers also liked

Similar to Mobile Web Design Code

Recently uploaded

Mobile Web Design Code