Mobile for web

  • 548 views
Uploaded on

How to implement mobile version for your website.

How to implement mobile version for your website.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
548
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile for Web <?php //from a PHP dev ?>Vo Duy Tuan PHP Developer from Reader.vn Social Network
  • 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. $table_of_content Introduction Detection jQuery Mobile Testing
  • 4. 1 Introduction
  • 5. 1.1. Smartphone Trend
  • 6. 1.2. Mobile Commerce
  • 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. Which is BESTfor your site ?
  • 9. 2 Detection PHP Javascript CSS
  • 10. 2.1. PHP Detection
  • 11. 2.1. PHP Detection (cont.)
  • 12. 2.1. PHP Detection (cont.) Force to desktop Version on mobile device
  • 13. 2.2. Javascript Detection
  • 14. 2.3. CSS Responsive
  • 15. 2.3. CSS Responsive (cont.)
  • 16. 2.3. CSS Responsive (cont.)
  • 17. 3 jQuery Mobile
  • 18. 3.1. Overview
  • 19. 3.2. Usage
  • 20. 3.3. Tips & Tricks Front-end Optimization Resource Preload Disable Advanced CSS HTML Tag ID conflict
  • 21. 3.3.1. Front-end Optimization CSS Sprite CSS/JS Minification Domain Sharding Image Size optimize Caching …
  • 22. 3.3.2. Resource Preload
  • 23. 3.3.2. Resource Preload (cont.)
  • 24. 3.3.3. Disable Advanced CSS
  • 25. 3.3.4. HTML Tag ID Conflict
  • 26. 4 Testing
  • 27. 4.1.Desktop User-Agent Switcher (Chrome Extension) Window Resizer (Chrome Extension)
  • 28. 4.2.Android Emulator
  • 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. 4.2.Android Emulator (cont.)
  • 31. 4.3.iOS Simulator (Xcode)
  • 32. 4.3.iOS Simulator (Xcode) Run on Mac OS Use HOSTS file on your Computer. (/etc/hosts)
  • 33. Thank you!It’s time to query …CONTACTFullname: Vo Duy TuanEmail: tuanmaster2002@yahoo.comPhone: 0938 916 902Website: http://bloghoctap.com