Mobile for Web                          <?php //from a PHP dev ?>Vo Duy Tuan   PHP Developer from Reader.vn Social Network
$who_am_I?   My Name is Võ Duy Tuấn   PHP 5 Zend Certified Engineer   Interests: PHP, Social Network, Optimize Web,    ...
$table_of_content   Introduction   Detection   jQuery Mobile   Testing
1   Introduction
1.1. Smartphone Trend
1.2. Mobile Commerce
1.3. Mobile version   Web App       New Sub-domain for mobile access       Responsive Design for current webpage   Ins...
Which is    BESTfor your site      ?
2   Detection    PHP    Javascript    CSS
2.1. PHP Detection
2.1. PHP Detection (cont.)
2.1. PHP Detection (cont.)   Force to desktop Version on mobile device
2.2. Javascript Detection
2.3. CSS Responsive
2.3. CSS Responsive (cont.)
2.3. CSS Responsive (cont.)
3   jQuery Mobile
3.1. Overview
3.2. Usage
3.3. Tips & Tricks   Front-end Optimization   Resource Preload   Disable Advanced CSS   HTML Tag ID conflict
3.3.1. Front-end Optimization   CSS Sprite   CSS/JS Minification   Domain Sharding   Image Size optimize   Caching   …
3.3.2. Resource Preload
3.3.2. Resource Preload (cont.)
3.3.3. Disable Advanced CSS
3.3.4. HTML Tag ID Conflict
4   Testing
4.1.Desktop   User-Agent Switcher (Chrome Extension)   Window Resizer (Chrome Extension)
4.2.Android Emulator
4.2.Android Emulator (cont.)   IP Address of localhost is: 10.0.2.2, access the    localhost file is at:       http://10...
4.2.Android Emulator (cont.)
4.3.iOS Simulator (Xcode)
4.3.iOS Simulator (Xcode)   Run on Mac OS   Use HOSTS file on your Computer.    (/etc/hosts)
Thank you!It’s time to query …CONTACTFullname: Vo Duy TuanEmail: tuanmaster2002@yahoo.comPhone: 0938 916 902Website: http:...
Upcoming SlideShare
Loading in...5
×

Mobile for web

617

Published on

How to implement mobile version for your website.

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

No Downloads
Views
Total Views
617
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile for web

  1. 1. Mobile for Web <?php //from a PHP dev ?>Vo Duy Tuan PHP Developer from Reader.vn Social Network
  2. 2. $who_am_I? My Name is Võ Duy Tuấn PHP 5 Zend Certified Engineer Interests: PHP, Social Network, Optimize Web, Mobile, UI/UX Works:  Dienmay.com  Reader.vn  Freelancer: Designer, Developer
  3. 3. $table_of_content Introduction Detection jQuery Mobile Testing
  4. 4. 1 Introduction
  5. 5. 1.1. Smartphone Trend
  6. 6. 1.2. Mobile Commerce
  7. 7. 1.3. Mobile version Web App  New Sub-domain for mobile access  Responsive Design for current webpage Installed App  Native Controls (UI)  HTML5 Webview  HTML5 Webview + Native Features (Phonegap)  Hybrid (Native Controls + HTML5 Webview)
  8. 8. Which is BESTfor your site ?
  9. 9. 2 Detection PHP Javascript CSS
  10. 10. 2.1. PHP Detection
  11. 11. 2.1. PHP Detection (cont.)
  12. 12. 2.1. PHP Detection (cont.) Force to desktop Version on mobile device
  13. 13. 2.2. Javascript Detection
  14. 14. 2.3. CSS Responsive
  15. 15. 2.3. CSS Responsive (cont.)
  16. 16. 2.3. CSS Responsive (cont.)
  17. 17. 3 jQuery Mobile
  18. 18. 3.1. Overview
  19. 19. 3.2. Usage
  20. 20. 3.3. Tips & Tricks Front-end Optimization Resource Preload Disable Advanced CSS HTML Tag ID conflict
  21. 21. 3.3.1. Front-end Optimization CSS Sprite CSS/JS Minification Domain Sharding Image Size optimize Caching …
  22. 22. 3.3.2. Resource Preload
  23. 23. 3.3.2. Resource Preload (cont.)
  24. 24. 3.3.3. Disable Advanced CSS
  25. 25. 3.3.4. HTML Tag ID Conflict
  26. 26. 4 Testing
  27. 27. 4.1.Desktop User-Agent Switcher (Chrome Extension) Window Resizer (Chrome Extension)
  28. 28. 4.2.Android Emulator
  29. 29. 4.2.Android Emulator (cont.) IP Address of localhost is: 10.0.2.2, access the localhost file is at:  http://10.0.2.2/ (not http://localhost/) Edit HOSTS file on emulator (to test virtual host with domain):  Step 1: Root Emulator  Step 2: Edit HOSTS file  Step 3: Upload back to emulator & Overwrite HOSTS file.
  30. 30. 4.2.Android Emulator (cont.)
  31. 31. 4.3.iOS Simulator (Xcode)
  32. 32. 4.3.iOS Simulator (Xcode) Run on Mac OS Use HOSTS file on your Computer. (/etc/hosts)
  33. 33. Thank you!It’s time to query …CONTACTFullname: Vo Duy TuanEmail: tuanmaster2002@yahoo.comPhone: 0938 916 902Website: http://bloghoctap.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×