Mobile Web & jQuery Mobile

Prak Sophy – sophy@web-essentials.asia

http://kooms.info

Agenda

• History

• Internet state

• Mobile Web Browser

• Design for mobile

• Media Queries

• jQuery Mobile

Tim Berners-Lee

http://en.wikipedia.org/wiki/Tim_Berners-Lee

Bert Bos

http://en.wikipedia.org/wiki/Bert_Bos

Håkon Wium Lie

http://people.opera.com/howcome/

How about me?

Internet Users State

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

6.8 bill

ion The number of people

in the world today...

*2009 estimates put the population around 6.79 billion inhabitants...

3.4 bill

ion The number of people

with mobile devices today...

or roughly ½ the population of the planet.

1.3 bill

ion The number of mobile internet

users today

1/3 number of global internet userswho access the internet only via mobile...

Mobile Browser State

How to design for web

mobile?

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/

CSS3 Media Queries

for Mobile Web

Live Demo

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}

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

more sites with CSS3

media queries

Tee Gallery Hicksdesign

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

jQuery Mobile

History

• jQuery Mobile Alpha 1

Release on 18-Oct-2010

• jQuery Mobile Alpha 2

Release on 18-Oct-2010

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)

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