Your SlideShare is downloading. ×
Mobile for web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile for web

566
views

Published on

How to implement mobile version for your website.

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
566
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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