mobile for web
DESCRIPTION
How to implement mobile version for your website.TRANSCRIPT
Mobile for Web<?php //from a PHP dev ?>
PHP Developer from Reader.vn Social NetworkVo Duy Tuan
$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
$table_of_content
Introduction Detection jQuery Mobile Testing
Introduction1
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
Installed App Native Controls (UI) HTML5 Webview HTML5 Webview + Native Features (Phonegap) Hybrid (Native Controls + HTML5 Webview)
Which isBEST
for your site?
Which isBEST
for your site?
PHP
Javascript
CSS
Detection2
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.)
jQuery Mobile3
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
Testing4
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.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.
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)
It’s time to query …
CONTACT
Fullname: Vo Duy Tuan
Email: [email protected]
Phone: 0938 916 902
Website: http://bloghoctap.com
Thank you!