site to mobile conversion

38
Conversion AUGUST 12, 2012 michael stowe Site2Mobile

Upload: michael-stowe

Post on 15-Jan-2015

2.049 views

Category:

Technology


0 download

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

Conversion

AUGUST 12, 2012

michael stowe

Site2Mobile

Page 2: Site to Mobile Conversion

• 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

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

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

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

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

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

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 9: Site to Mobile Conversion

Image © StudioPress.com | Article

Page 10: Site to Mobile Conversion

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

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

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

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

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

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

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

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

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

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

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

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

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

<?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

<?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

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

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

<?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

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

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

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

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

<?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

<?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

<?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

FRAMEWORKS

Some of the more popular frameworks out there

include:

• Zend Framework

• CakePHP

• CodeIgnighter

• Symphony

• Yii

Page 36: Site to Mobile Conversion

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

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

THANK YOU. @mikegstowe

visit mikestowe.com/slides for more on Mobile and PHP