Mobile Web Design Code
-
Upload
marko-dugonjic -
Category
Design
-
view
1.325 -
download
2
Transcript of Mobile Web Design Code
![Page 1: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/1.jpg)
Mobile Web Design
CODE@markodugonjic
![Page 2: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/2.jpg)
HTML5 CSS3
JavaScript
![Page 3: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/3.jpg)
HTML5
![Page 4: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/4.jpg)
basic structure differences
![Page 5: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/5.jpg)
<!DOCTYPE html>
<meta name="viewport" />
<link rel="stylesheet" media="..." />
![Page 6: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/6.jpg)
video for mobile
![Page 7: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/7.jpg)
<video src="video.m4v" preload controls poster="image.jpg"></video>
![Page 8: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/8.jpg)
<video src="video.m4v"></video>
![Page 9: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/9.jpg)
clever input fields
![Page 10: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/10.jpg)
<input type="email" />
![Page 11: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/11.jpg)
<input type="phone" />
![Page 12: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/12.jpg)
<input type="url" />
![Page 13: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/13.jpg)
<input type="number" />
![Page 14: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/14.jpg)
<input type="email" placeholder="Enter your e-mail" />
![Page 15: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/15.jpg)
<input type="email" required />
![Page 16: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/16.jpg)
http://wufoo.com/html5/http://caniuse.com
http://www.quirksmode.org/html5/inputs_mobile.html
http://mobilehtml5.org
![Page 17: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/17.jpg)
CSS3
![Page 18: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/18.jpg)
media queries
![Page 19: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/19.jpg)
<link rel="stylesheet" href="style.css" media="only screen and (min-width: 768px)"/>
![Page 20: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/20.jpg)
@media only screen and (min-width: 768px) { /* desktop styles */}
![Page 21: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/21.jpg)
(min-width: 321px)
(max-width: 320px)
(min-device-width: 320px)
(max-device-width: 480px)
(orientation: landscape)
(orientation: portrait)
![Page 22: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/22.jpg)
(-webkit-min-device-pixel-ratio: 2)
(min-device-pixel-ratio: 2)
![Page 23: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/23.jpg)
a couple of usefulCSS properties
![Page 24: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/24.jpg)
a couple of usefulCSS properties
useful
![Page 25: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/25.jpg)
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)
![Page 26: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/26.jpg)
-webkit-gradient( linear, 0% 0%, 0% 100%, from(#fff), to(#000))
![Page 27: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/27.jpg)
button { -webkit-appearance: none; }
![Page 28: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/28.jpg)
@media screen and(-webkit-min-device-pixel-ratio: 2) { background: url([email protected]); background-size: 10px 10px;}
![Page 29: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/29.jpg)
keep an eye onUI performance
![Page 30: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/30.jpg)
The responsive workflow#1 general typography#2 vertical rhythm#3 layout and proportions
![Page 31: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/31.jpg)
JavaScript
![Page 32: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/32.jpg)
keep it simple
![Page 33: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/33.jpg)
confirm( 'This service will be charged XY.\ Do you accept?')
alert( 'Your transaction was successful.')
![Page 34: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/34.jpg)
window.onload = function() { setTimeout(function(){ window.scrollTo(0, 1); }, 100);}
![Page 35: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/35.jpg)
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>';
![Page 36: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/36.jpg)
Handy tools
![Page 37: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/37.jpg)
http://www.zambetti.com/projects/liveview/
![Page 38: Mobile Web Design Code](https://reader038.fdocuments.in/reader038/viewer/2022103016/55514f2db4c905f2288b53e1/html5/thumbnails/38.jpg)
http://www.mozilla.org/en-US/mobile/
http://www.opera.com/developer/tools/mobile/