site to mobile conversion
DESCRIPTION
A brief overview of some of the different options available for converting your desktop site into a mobile site quickly and with a small budget.TRANSCRIPT
![Page 1: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/1.jpg)
Conversion
AUGUST 12, 2012
michael stowe
Site2Mobile
![Page 2: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/2.jpg)
• 10+ years experience hacking PHP
• Published Author, Speaker, and Consultant
• Developed applications used by the medical field and law enforcement
• Software Engineer at CaringBridge.org (half a million visitors every day)
• Zend Certified PHP 5.3 Software Engineer
.com
@mikegstowe
MIKESTOWE
![Page 3: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/3.jpg)
SO YOU WANT TO GO MOBILE
You have a fantastic desktop version of your website that
absolutely rocks! But your boss just bought an iPhone,
and now your boss wants a “mobile” version of the site…
tomorrow!
Oh yeah, and just because your boss shelled out $$$ for
that fancy iPhone, don’t expect the same for this project.
Budget is everything.
![Page 4: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/4.jpg)
THE GOOD NEWS
No matter what your site looks like, as long as you
followed at least SOME standards and conventions…
we can make a mobile version of it!
![Page 5: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/5.jpg)
THE BAD NEWS
Some ways are a lot easier than others… and if you
didn’t follow at least some conventions, well… your
boss isn’t going to be very happy budget or time
wise.
![Page 6: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/6.jpg)
DESIGN HELPERS
For developing a mobile version of your site, you
may find the following libraries to be useful:
• jQuery Mobile
• jQTouch
• Sencha Touch
![Page 7: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/7.jpg)
RESPONSIVE DESIGN
Responsive design can be a quick and fairly easy way
to make your site more friendly for mobile users. By
using media queries you can setup rules for how the
CSS is rendered by the browser.
![Page 8: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/8.jpg)
RESPONSIVE DESIGN CSS
<html> <head> <!-- Using Link HREF --> <link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.css"> <!-- Using CSS --> <style type="text/css"> /* Using Import */ @import url(example.css) screen and (max-width: 1024px) /** Not as Ideal **/ @media screen and (max-width: 320px) { /** ... **/ } </style> </head> </html>
![Page 10: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/10.jpg)
RESPONSIVE DESIGN
However, if you don’t utilize CSS to handle the
templating of your site, or if you use things like
tables or flash, you’re going to run into big problems.
Also, size matters, big images and excess code can
make for unpleasant loading times and experiences.
![Page 11: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/11.jpg)
RESPONSIVE DESIGN
Oh yeah, and this is a PHP Conference, so we’re not
going to focus on this solution.
However, (advertising alert), you can learn more
about Responsive Design and Media Queries from my
Mobile Presentations available at
http://www.mikestowe.com/slides
![Page 12: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/12.jpg)
RESPONSIVE DESIGN + SERVER SIDE
Responsive Design + Server Side, or RESS utilizes
Responsive Design for templating, but also relies on
back-end modifications for mobile users.
RESS can be a great solution, but requires access to
the back-end code of the application, and may
require you to go in and make tweaks/ hacks to
make certain pages mobile friendly.
![Page 13: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/13.jpg)
A PHP SKIMMER
So let’s say you have a fairly large website, or even a
small website… but you don’t have access to the
database/ API layer, or worse- it’s a static site written
in HTML!
As long as you followed some uniform code
standards for your pages, you can utilize the
DOMDocument class to grab the content.
![Page 14: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/14.jpg)
A PHP SKIMMER
With the DOMDocument class we can use the
loadHTML(), loadHTMLFile(),
getElementsByTagName(), and
getElementById() methods to load a HTML file
and access it’s elements.
![Page 15: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/15.jpg)
A PHP SKIMMER HTML
<html> <head> <title>Sample Site</title> </head> <body> <header>Header Text</header> <div id="menu">Menu Items</div> <div id="content"> <p>Hello World</p> </div> <footer>Footer Text</footer> </body> </html>
![Page 16: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/16.jpg)
A PHP SKIMMER – BY ID <?php
<?php $content = ''; $dom = new DOMDocument(); $dom->loadHTMLFile('index.html'); $elem = $dom->getElementById('content'); $children = $elem->childNodes; foreach ($children as $child) { $tmp_doc = new DOMDocument(); $tmp_doc->appendChild($tmp_doc->importNode($child,true)); $content .= $tmp_doc->saveHTML(); } // echos "<p>Hello World</p>" echo $content;
![Page 17: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/17.jpg)
A PHP SKIMMER – BY TAG <?php
<?php $content = ''; $dom = new DOMDocument(); $dom->loadHTMLFile('index.html'); $elements = $this->DOM->getElementsByTagName('header'); $elem = $elements[0]; // First Element $children = $elem->childNodes; foreach ($children as $child) { $tmp_doc = new DOMDocument(); $tmp_doc->appendChild($tmp_doc->importNode($child,true)); $content .= $tmp_doc->saveHTML(); } // echos "Header Text" echo $content;
![Page 18: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/18.jpg)
A PHP SKIMMER
Unfortunately, DOMDocument doesn’t allow us to
locate elements by class name, nor does it format
the content for mobile devices (ie resizing images).
Fortunately, there is an pre-existing script based on
DOMDocument and designed for mobile
implementation that does both (and also performs
Caching) – DomRipper.
Download DomRipper at github.com/mikestowe.com/DomRipper
![Page 19: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/19.jpg)
A PHP SKIMMER – DOMRIPPER <?php
<?php $dom = new DomRipper(); // echos "Header Text" echo $doc->fetch('index.html','header', 'tag'); // echos "<p>Hello World</p>" echo $doc->fetch('index.html','content');
Download DomRipper at github.com/mikestowe.com/DomRipper
![Page 20: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/20.jpg)
SIMPLE TEMPLATING
One of the easiest ways (especially for informational
sites or CSS driven sites) is to simply switch out the
header and footer.
This is usually the FASTEST solution, as long as your
header and footer files are used across the platform
and you do not use a lot of fancy features (drag and
drop JavaScript is bad).
![Page 21: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/21.jpg)
SIMPLE TEMPLATING <?php
<?php // Header File $mobile = new MobileCheck(); if ($mobile->isMobile()) { require_once('mobile_header.php'); } else { // Header contents moved to a new file require_once('desktop_header.php'); }
Download DomRipper at github.com/mikestowe.com/DomRipper
![Page 22: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/22.jpg)
DATABASE/ API LAYER
Of course, if we have a database driven site, and we
have access to the database/ API layer, this provides
us with an even more efficient and flexible solution.
![Page 23: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/23.jpg)
<?php
<?php $api = new ApiLayer('/path/to/file'); ?> <html> <!-- Mobile Header --> Name: <?php echo $api->user->name; ?><br /> Email: <?php echo $api->user->email; ?> <br /><br /> <strong>Sites:</strong><br /> <?php foreach ($api->user->sites as $site) { echo $site->siteName . '<br />'; } ?> <!-- Mobile Footer --> </html>
DATABASE/ API LAYER BASIC
Data can be pulled in through a simple JSON call and requires no work on the mobile platform other than decoding
![Page 24: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/24.jpg)
<?php
<?php $api = new ApiLayer(); ?> <html> <!-- Mobile Header --> Name: <?php echo $api->user()->name; ?><br /> Email: <?php echo $api->user()->email; ?> <br /><br /> <strong>Sites:</strong><br /> <?php foreach ($api->user()->getSites() as $site) { echo $site->siteName . '<br />'; } ?> <!-- Mobile Footer --> </html>
DATABASE/ API LAYER
Initial data is called in, but the ApiLayer has the ability to continuing grabbing information from the host, and requires access to the necessary classes.
![Page 25: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/25.jpg)
DATABASE/ API LAYER
A properly designed API layer will provide your
mobile platform with all of the data necessary to
perform the same functionality as your desktop
version.
While setting up the API Layer initially takes more
time, it provides incredible flexibility and allows for
increased efficiency.
![Page 26: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/26.jpg)
TRANSLATION ENGINE
For sites that offer multiple languages/ translations,
having a centralized translation engine that allows for
mobile translations (which may differ from desktop
translations) may be beneficial.
If you already have a database with key, language,
and translation columns, you may want to add a
column for “platform.”
![Page 27: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/27.jpg)
<?php
<?php function getMobileTranslation($key, $language) { $db = new Database(); $query = 'SELECT `translation` FROM translations WHERE key = ? AND language = ? AND platform = ?'; $row = $db->fetch($query, $key, $language, 'mobile'); if (!$row) { $row = $db->fetch($query, $key, $language, 'desktop'); } return $row; } echo getMobileTranslation('welcomeText', 'en');
TRANSLATION ENGINE
![Page 28: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/28.jpg)
TRANSLATION ENGINE
The mobile translation engine can be setup either on
the mobile platform, or it can be setup on the host
API platform, allowing for any future changes to the
translations system to be modified all at once.
The translation engine would then be made available
to the mobile platform through the API Layer.
![Page 29: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/29.jpg)
FRAMEWORKS
Many popular frameworks allow not only for rapid
application development, but also provide the ability
to modify the view layer.
This allows your site to operate under the same
code, but with a separate interface for your users.
![Page 30: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/30.jpg)
FRAMEWORKS
Because you are using the same code for your
actions, but have the ability to set unique templates,
views, pull in or remove scripts, etc; Frameworks
allow for the greatest flexibility while being
tremendously efficient.
![Page 31: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/31.jpg)
FRAMEWORKS
Techniques:
• Modify the Template (choose a mobile template)
• Modify the View (change the file used for the view)
• Modify the Context-Type (ie return JSON).
![Page 32: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/32.jpg)
<?php
<?php class MyController extends MyControllerAbstract { public function myAction() { parent::handleMobile(); /** Controller Contents **/ } }
FRAMEWORK CONTROLLER VIEW
Example for ZendFramework 1
![Page 33: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/33.jpg)
<?php
<?php abstract class myControllerAbstract extends ZendControllerAbstract { protected function handleMobile($altView = null, $altTemplate = null) { $mobile = new MobileHandler(); // new class we created if($mobile->isMobile()) { if ($altView) { $this->view->render($altView); } $template = $altTemplate ? $altTemplate : 'mobile.html'; $this->_helper->_layout->setLayoutetLayout($template); } } }
FRAMEWORK ABSTRACT FOR VIEW
Example for ZendFramework 1
![Page 34: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/34.jpg)
<?php
<?php class MyController extends MyControllerAbstract { public function myAction() { $viewVariables = array('item1' => 'hello', 'item2' => 'world'); if ($this -> params() -> fromQuery('context') == 'json') { $result = new JsonModel(); $result -> setTerminal(true); $result -> setVariables($viewVariables); return $result; } return $viewVariables; } }
FRAMEWORK CONTEXT SWITCHER
Example for ZendFramework 2
![Page 35: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/35.jpg)
FRAMEWORKS
Some of the more popular frameworks out there
include:
• Zend Framework
• CakePHP
• CodeIgnighter
• Symphony
• Yii
![Page 36: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/36.jpg)
OVERVIEW OF SOLUTIONS
Tactic Platform
Tie-In Efficiency Flexibility
User Friendly
Responsive Design
RESS
Skimmer
Simple Template
API Layer
Framework
Good So-So Poor
![Page 37: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/37.jpg)
IN SUMMARY
In the end, the best solution is the one that fits your
current infrastructure, your capabilities, your
timeline, and your budget.
While some solutions certainly provide greater
efficiency, flexibility, and the best user experience - if
it isn’t feasible something is usually better than
nothing.
![Page 38: Site to Mobile Conversion](https://reader033.vdocuments.net/reader033/viewer/2022051514/54b738574a795929568b458d/html5/thumbnails/38.jpg)
THANK YOU. @mikegstowe
visit mikestowe.com/slides for more on Mobile and PHP