Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Site to Mobile Conversion


Published on

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.

Published in: Technology
  • Be the first to comment

Site to Mobile Conversion

  1. 1. Site2MobileConversionmichael stowe AUGUST 12, 2012
  2. 2. MIKESTOWE .com• 10+ years experience hacking PHP• Published Author, Speaker, and Consultant• Developed applications used by the medical field and law enforcement• Software Engineer at (half a million visitors every day)• Zend Certified PHP 5.3 Software Engineer@mikegstowe
  3. 3. SO YOU WANT TO GO MOBILEYou have a fantastic desktop version of your website thatabsolutely 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 $$$ forthat fancy iPhone, don’t expect the same for this project.Budget is everything.
  4. 4. THE GOOD NEWSNo matter what your site looks like, as long as youfollowed at least SOME standards and conventions…we can make a mobile version of it!
  5. 5. THE BAD NEWSSome ways are a lot easier than others… and if youdidn’t follow at least some conventions, well… yourboss isn’t going to be very happy budget or timewise.
  6. 6. DESIGN HELPERSFor developing a mobile version of your site, youmay find the following libraries to be useful:• jQuery Mobile• jQTouch• Sencha Touch
  7. 7. RESPONSIVE DESIGNResponsive design can be a quick and fairly easy wayto make your site more friendly for mobile users. Byusing media queries you can setup rules for how theCSS is rendered by the browser.
  8. 8. 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>
  9. 9. Image © | Article
  10. 10. RESPONSIVE DESIGNHowever, if you don’t utilize CSS to handle thetemplating of your site, or if you use things liketables or flash, you’re going to run into big problems.Also, size matters, big images and excess code canmake for unpleasant loading times and experiences.
  11. 11. RESPONSIVE DESIGNOh yeah, and this is a PHP Conference, so we’re notgoing to focus on this solution.However, (advertising alert), you can learn moreabout Responsive Design and Media Queries from myMobile Presentations available at
  12. 12. RESPONSIVE DESIGN + SERVER SIDEResponsive Design + Server Side, or RESS utilizesResponsive Design for templating, but also relies onback-end modifications for mobile users.RESS can be a great solution, but requires access tothe back-end code of the application, and mayrequire you to go in and make tweaks/ hacks tomake certain pages mobile friendly.
  13. 13. A PHP SKIMMERSo let’s say you have a fairly large website, or even asmall website… but you don’t have access to thedatabase/ API layer, or worse- it’s a static site writtenin HTML!As long as you followed some uniform codestandards for your pages, you can utilize theDOMDocument class to grab the content.
  14. 14. A PHP SKIMMERWith the DOMDocument class we can use theloadHTML(), loadHTMLFile(),getElementsByTagName(), andgetElementById() methods to load a HTML fileand access it’s elements.
  15. 15. 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>
  16. 16. 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;
  17. 17. 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;
  18. 18. A PHP SKIMMERUnfortunately, DOMDocument doesn’t allow us tolocate elements by class name, nor does it formatthe content for mobile devices (ie resizing images).Fortunately, there is an pre-existing script based onDOMDocument and designed for mobileimplementation that does both (and also performsCaching) – DomRipper.Download DomRipper at
  19. 19. 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
  20. 20. SIMPLE TEMPLATINGOne of the easiest ways (especially for informationalsites or CSS driven sites) is to simply switch out theheader and footer.This is usually the FASTEST solution, as long as yourheader and footer files are used across the platformand you do not use a lot of fancy features (drag anddrop JavaScript is bad).
  21. 21. 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
  22. 22. DATABASE/ API LAYEROf course, if we have a database driven site, and wehave access to the database/ API layer, this providesus with an even more efficient and flexible solution.
  23. 23. DATABASE/ API LAYER BASIC <?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>Data can be pulled in through a simple JSON call and requires no work on themobile platform other than decoding
  24. 24. DATABASE/ API LAYER <?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>Initial data is called in, but the ApiLayer has the ability to continuing grabbinginformation from the host, and requires access to the necessary classes.
  25. 25. DATABASE/ API LAYERA properly designed API layer will provide yourmobile platform with all of the data necessary toperform the same functionality as your desktopversion.While setting up the API Layer initially takes moretime, it provides incredible flexibility and allows forincreased efficiency.
  26. 26. TRANSLATION ENGINEFor sites that offer multiple languages/ translations,having a centralized translation engine that allows formobile translations (which may differ from desktoptranslations) may be beneficial.If you already have a database with key, language,and translation columns, you may want to add acolumn for “platform.”
  27. 27. TRANSLATION ENGINE <?php<?phpfunction 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);
  28. 28. TRANSLATION ENGINEThe mobile translation engine can be setup either onthe mobile platform, or it can be setup on the hostAPI platform, allowing for any future changes to thetranslations system to be modified all at once.The translation engine would then be made availableto the mobile platform through the API Layer.
  29. 29. FRAMEWORKSMany popular frameworks allow not only for rapidapplication development, but also provide the abilityto modify the view layer.This allows your site to operate under the samecode, but with a separate interface for your users.
  30. 30. FRAMEWORKSBecause you are using the same code for youractions, but have the ability to set unique templates,views, pull in or remove scripts, etc; Frameworksallow for the greatest flexibility while beingtremendously efficient.
  31. 31. FRAMEWORKSTechniques:• Modify the Template (choose a mobile template)• Modify the View (change the file used for the view)• Modify the Context-Type (ie return JSON).
  32. 32. FRAMEWORK CONTROLLER VIEW <?php <?php class MyController extends MyControllerAbstract { public function myAction() { parent::handleMobile(); /** Controller Contents **/ } }Example for ZendFramework 1
  33. 33. FRAMEWORK ABSTRACT FOR VIEW <?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); } } }Example for ZendFramework 1
  34. 34. FRAMEWORK CONTEXT SWITCHER <?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; } }Example for ZendFramework 2
  35. 35. FRAMEWORKSSome of the more popular frameworks out thereinclude:• Zend Framework• CakePHP• CodeIgnighter• Symphony• Yii
  36. 36. OVERVIEW OF SOLUTIONS Platform User Tactic Efficiency Flexibility Tie-In FriendlyResponsive DesignRESSSkimmerSimple TemplateAPI LayerFramework Good So-So Poor
  37. 37. IN SUMMARYIn the end, the best solution is the one that fits yourcurrent infrastructure, your capabilities, yourtimeline, and your budget.While some solutions certainly provide greaterefficiency, flexibility, and the best user experience - ifit isn’t feasible something is usually better thannothing.
  38. 38. THANK YOU. @mikegstowevisit for more on Mobile and PHP