Your SlideShare is downloading. ×
Mobile Web Design Code
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mobile Web Design Code

1,298
views

Published on

Published in: Design, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,298
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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