Mobile for web
Upcoming SlideShare
Loading in...5
×
 

Mobile for web

on

  • 780 views

How to implement mobile version for your website.

How to implement mobile version for your website.

Statistics

Views

Total Views
780
Views on SlideShare
780
Embed Views
0

Actions

Likes
2
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile for web Mobile for web Presentation Transcript

  • 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, Mobile, UI/UX Works:  Dienmay.com  Reader.vn  Freelancer: Designer, Developer
  • $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 Installed App  Native Controls (UI)  HTML5 Webview  HTML5 Webview + Native Features (Phonegap)  Hybrid (Native Controls + HTML5 Webview)
  • 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.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)
  • Thank you!It’s time to query …CONTACTFullname: Vo Duy TuanEmail: tuanmaster2002@yahoo.comPhone: 0938 916 902Website: http://bloghoctap.com