Mobile web and j query mobile

1. Mobile Web & jQuery Mobile
Prak Sophy – sophy@web-essentials.asia
http://kooms.info

2. Agenda
• History
• Internet state
• Mobile Web Browser
• Design for mobile
• Media Queries
• jQuery Mobile

3. Tim Berners-Lee
http://en.wikipedia.org/wiki/Tim_Berners-Lee

4. Bert Bos
http://en.wikipedia.org/wiki/Bert_Bos

5. Håkon Wium Lie
http://people.opera.com/howcome/

6. How about me?

7. Internet Users State

8. 1.9 The number of internet
billion
connections in the world today...
26% of the world’s population at the lastest of 2010 – http://www.internetworldstats.com

9. 6.8 The number of people
billion
in the world today...
*2009 estimates put the population around 6.79 billion inhabitants...

10. 3.4 The number of people
billion
with mobile devices today...
or roughly ½ the population of the planet.

11. 1.3 billion
The number of mobile internet
users today

12. 1/3 number of global internet users
who access the internet
only via mobile...

14. Mobile Browser State

21. How to design for web
mobile?

22. 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/

25. CSS3 Media Queries
for Mobile Web

26. Live Demo

28. 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
}

29. If we don’t use CSS3 media queries...

30. more sites with CSS3
media queries

31. Tee Gallery Hicksdesign

32. A List Apart Colly - http://colly.com/

33. jQuery Mobile

35. History
• jQuery Mobile Alpha 1
Release on 18-Oct-2010
• jQuery Mobile Alpha 2
Release on 18-Oct-2010

36. 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)

37. 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