Mobile web development without developing a mobile site

691 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
691
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile web development without developing a mobile site

  1. 1. Mobile web development... ...without developing a mobile site Daniel Davis, Opera Software (@ourmaninjapan)
  2. 2. Arguments against mobile sites Difficult to create & maintain Too many devices to support Mobile browsers are good enough
  3. 3. Mobile Web Best Practiceswww.w3.org/TR/mobile-bp
  4. 4. 1. Overall Behavior“There are some general principles that underliedelivery to mobile devices.”
  5. 5. Consistency across devices Test on actual devices
  6. 6. 2. Navigation and Links“...care should be exercised indefining the structure and thenavigation model of a Web site.”
  7. 7. Keep URLs short Minimal navigation at top of pageBalance number of links and clicks Access keys for links Descriptive link text No pop-ups or JavaScript redirectsReduce linked resources
  8. 8. 3. Page Layout and Content“…design, the language used […] and the spatial relationship between constituent components.”
  9. 9. Clear & simple language Show what the user requests Control page size Most relevant info first Use graphics sensibly Use sufficient contrast
  10. 10. 4. Page definition
  11. 11. No framesUse valid, efficient markup Avoid tables unless necessary Include text alternatives Dont embed objects Use relative measures (%, em) Informative error messages
  12. 12. 5. User input“…mobile devices may lack pointing devicesand often do not have a standard keyboard for text entry.”
  13. 13. Keep keystrokes to a minimum Avoid free text input Pre-selected defaults Logical tab order Use form labels
  14. 14. CSS3www.w3.org/TR/css3-roadmap
  15. 15. border-radius: 30px;
  16. 16. box-shadow: 0 10px 20px black;
  17. 17. transform: rotate(315deg);
  18. 18. img { transition-duration: 0.5s;}img:hover { transform: rotate(315deg);}
  19. 19. CSS3 advantages
  20. 20. 1. Reduces need for JavaScript: lighter pages
  21. 21. 2. If supported, less load on device
  22. 22. 3. If unsupported, no error message
  23. 23. CSS3 Media Querieswww.w3.org/TR/css3-mediaqueries
  24. 24. Tried and tested: screen, print, handheldNew hotness: resolution, density, orientation
  25. 25. Media Queries = if statements for CSS@media screen and (max-width: 480px) { /* regular CSS goes here */ #unimportant-box { display:none; }}
  26. 26. bit.ly/mqexample
  27. 27. TakeawayUse Mobile Web Best Practices for guidance Use CSS3 for styling Use Media Queries for flexibility
  28. 28. Thank you bit.ly/operadanielwww.opera.com/developer/tools
  29. 29. Credits No mobile phones: http://www.openclipart.org/detail/15417 Van: http://www.publicdomainpictures.net/view-image.php?image=2811 Lotus Elise: http://www.flickr.com/photos/36824782@N00/162517249 Mitsubishi Evolution: http://www.flickr.com/photos/jason_burmeister/2350518471 Mobile phone: http://www.publicdomainpictures.net/view-image.php?image=692 Signpost: http://www.publicdomainpictures.net/view-image.php?image=1666 Page design: http://www.openclipart.org/detail/3245 Keypad: http://commons.wikimedia.org/wiki/File:Telephone-keypad.png Spacewalk:http://commons.wikimedia.org/wiki/File:Michael_Gernhardt_in_space_during_STS-69_in_1995.jpg Guitar: http://www.openclipart.org/detail/23984 Checkmark: http://www.openclipart.org/detail/19804 Hot air balloon: http://commons.wikimedia.org/wiki/File:Hotair.balloon.1.750pix.jpg Pulling an elephant: http://commons.wikimedia.org/wiki/File:Pulling_an_elephant.jpg Warning notification: http://www.openclipart.org/detail/3743 Vintlys Hand font: http://www.dafont.com/vintlys-hand.font Neuropol font: http://www.dafont.com/neuropol.font Remaining images by me.

×