Mobile for web

881 views
787 views

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
881
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
28
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

×