mobile web and j query mobile
DESCRIPTION
Mobile web and j query mobileTRANSCRIPT
![Page 2: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/2.jpg)
Agenda
• History
• Internet state
• Mobile Web Browser
• Design for mobile
• Media Queries
• jQuery Mobile
![Page 3: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/3.jpg)
Tim Berners-Lee
http://en.wikipedia.org/wiki/Tim_Berners-Lee
![Page 4: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/4.jpg)
Bert Bos
http://en.wikipedia.org/wiki/Bert_Bos
![Page 5: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/5.jpg)
Håkon Wium Lie
http://people.opera.com/howcome/
![Page 6: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/6.jpg)
How about me?
![Page 7: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/7.jpg)
Internet Users State
![Page 8: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/8.jpg)
1.9 bill
ion The number of internet
connections in the world today...
26% of the world’s population at the lastest of 2010 – http://www.internetworldstats.com
![Page 9: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/9.jpg)
6.8 bill
ion The number of people
in the world today...
*2009 estimates put the population around 6.79 billion inhabitants...
![Page 10: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/10.jpg)
3.4 bill
ion The number of people
with mobile devices today...
or roughly ½ the population of the planet.
![Page 11: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/11.jpg)
1.3 bill
ion The number of mobile internet
users today
![Page 12: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/12.jpg)
1/3 number of global internet userswho access the internet only via mobile...
![Page 13: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/13.jpg)
![Page 14: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/14.jpg)
Mobile Browser State
![Page 15: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/15.jpg)
![Page 16: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/16.jpg)
![Page 17: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/17.jpg)
![Page 18: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/18.jpg)
![Page 19: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/19.jpg)
![Page 20: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/20.jpg)
![Page 21: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/21.jpg)
How to design for web
mobile?
![Page 22: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/22.jpg)
Best Practices To Develop Perfect Webs for Mobile Devices...
http://woorkup.com/2010/01/10/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/
![Page 23: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/23.jpg)
![Page 24: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/24.jpg)
![Page 25: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/25.jpg)
CSS3 Media Queries
for Mobile Web
![Page 26: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/26.jpg)
Live Demo
![Page 27: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/27.jpg)
![Page 28: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/28.jpg)
Media Queries code...
Wide page layout CSS rules@media screen and (max-width:999px){Medium page layout CSS rules}@media screen and (max-width:480px){Narrow page layout CSS rules}
![Page 29: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/29.jpg)
If we don’t use CSS3 media queries...
![Page 30: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/30.jpg)
more sites with CSS3
media queries
![Page 32: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/32.jpg)
Colly - http://colly.com/A List Apart
![Page 33: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/33.jpg)
jQuery Mobile
![Page 34: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/34.jpg)
![Page 35: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/35.jpg)
History
• jQuery Mobile Alpha 1
Release on 18-Oct-2010
• jQuery Mobile Alpha 2
Release on 18-Oct-2010
![Page 36: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/36.jpg)
Feature
• Progressive Enhancement(support many mobile OS)
• Graceful Degradation(Best HTML5 and CSS3)
• Accessibility(Mobile, Tablet, Desktop and bayon)
• Simplicity(only make-up no javascript configuration)
• File Size(12KB(js) and 6KB(css))
• Theming(Provide jQuery UI)
![Page 37: Mobile web and j query mobile](https://reader033.vdocuments.us/reader033/viewer/2022051412/54c71d6c4a7959353d8b461d/html5/thumbnails/37.jpg)
more feature...
• List Views
• Select Menu
• Scrolling and Headers/Footers
• Simplicity(only make-up no javascript configuration)
• Navbar Overhauled
• URL Navigation Refactored
• Ajax Form Handling
• jQuery UI Widget Factory
• Dialog
• Media Query Helper
• Event