Instant RESS Implementation How-to: Take your responsive websites to the next level with server-side components

To get our development environment going, we will be installing Aptana Studio 3 for our IDE and XAMPP for our web server environment. Both of these packages exist for Windows, Mac, and Linux, so no matter what your OS of choice is, you will be able to follow along. Also, they both are free.

First, we will install XAMPP.

XAMPP is a full-blown web server package. It includes Apache, PHP, MySQL, Tomcat, Perl, phpMyAdmin, and more.

The first thing we need to do is download XAMPP. You can find the installation file for your operating system at http://www.apachefriends.org/en/xampp.html. I recommend using the installer for Windows, instead of using the Zip file method.

This installation is pretty straightforward.

For Windows, follow these steps:

For installation on Mac OS, simply download the .DMG file, open it up, and drag the folder into the Applications directory. After this, open up the XAMPP Control Panel (from the Applications folder of XAMPP) and start Apache, MySQL, and ProFTPD. You may have to do this each time you restart your Mac.

To verify that everything was installed correctly and is working, open up your web browser and go to http://localhost. You should see a screen similar to the following screenshot:

Congratulations, you now have a fully functional web server installed with PHP support! If you do not see this screen, make sure you've started the Apache service and followed all the installation steps correctly.

Now, we will install Aptana Studio.

Aptana Studio 3 can be downloaded from http://www.aptana.com/products/studio3/download. Currently, there exists Aptana Studio 2 and 3. We will be using Aptana Studio 3 for this book, so be sure that is the one you download.

For Windows, follow these steps:

For Mac users, again download the .DMG file, open it, then drag it into the Applications folder.

After you have it installed, go ahead and open it. The first thing you will be presented with is a screen asking you to set up your default workspace directory. Go ahead and set this to the htdocs folder of your XAMPP installation. For Windows users, this is c:\xampp\htdocs (provided you kept the default directory) and for Mac is /Applications/XAMPP/htdocs. This way, by default, all of our projects are in the Apache web server documents directory and can be easily tested without having to move files back and forth.

That's it. You are now ready to learn RESS!

By performing the previous steps, we have set up a full-blown web server on our development environment that will allow us faster development time by not having to upload to a remote server each time we wish to test.

There are several other PHP IDEs out there, such as Zend Studio, PHP Storm, and a host of others. If you already use Eclipse for other purposes, Aptana Studio can be downloaded as an Eclipse plugin (requires Eclipse 3.5 or higher). For the purposes of this book, we will be using the stand-alone version of the software.

Go ahead and open up Aptana Studio if it is not already open.

Follow these steps:

Now, I'll explain the folders we just created:

Create a new project in Aptana Studio; call it whatever you wish. I recommend using the Web Project template this time instead of the PHP Project template we used previously.

Once you have created the project, it should have created a template for you, index.html. Go ahead and add two more files named mobile.css and desktop.css. These two files will hold our design information.

Okay, now that we have our project and files set up, it's time to start writing some code. To do so, follow these steps:

Let's take a look at the code:

There are several options you can check for in a media query. In this very basic example, we just checked the device width; you can also check orientation, aspect ratio, resolution, and much more. You can see what all you can check with media queries on the CSS section of the W3C website at http://www.w3.org/TR/css3-mediaqueries/.

Go ahead and create a new Web Project in Aptana Studio. Once it is set up, go ahead and add a new folder to the project named js.

Next thing we need to do is to download the Development Version of Mondernizr from the Modernizr download page (http://modernizr.com/download/). You will see options to build your own package. The development version will do until you are ready for production use. As of this writing, the latest version is 2.6.2 and that will be the version we use.

Place the downloaded file into the js folder.

Follow these steps:

What did we just do? Well, let's break it down:

<script src="js/modernizr-latest.js" type="text/javascript"></script>

Here, we are calling in our Modernizr library that we downloaded previously. Once you do that, Modernizr does some things to your page. It will redo your opening <html> tag to something like the following (from Google Chrome):

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

This is all the features your browser supports that Modernizr was able to detect.

Next up we have our <canvas> element:

<canvas id="canvastest" width="200" height="100" style="border:1px solid #000000">Your browser does not support the HTML5 canvas tag.</canvas>

Here, we are just forming a basic canvas that is 200 x 100 with a black border going around it.

Now for the good stuff in our canvas.js file, follow this code snippet:

    <script>
        if (Modernizr.canvas) 
        {
alert("We can use the Canvas element!");
        var c=document.getElementById("canvastest");
        var ctx=c.getContext("2d");
        
        // Create gradient
        var grd=ctx.createRadialGradient(75,50,5,90,60,100);
        grd.addColorStop(0,"black");
        grd.addColorStop(1,"white");
        
        // Fill with gradient
        ctx.fillStyle=grd;
        ctx.fillRect(10,10,150,80);
        
        }
        else
        {
          alert("Canvas Element Not Supported");
        }
    </script>

In the first part of this snippet, we used an if statement to see if the browser supports the Canvas element. If it does support canvas, then we are displaying a JavaScript alert and then filling our canvas element with a black gradient. After that, we have our else statement that will alert the user that canvas is not supported on their browser. They will also see the Your browser does not support the HTML5 canvas tag message.

That wasn't so bad, was it?

I highly recommend reading over the documentation on the Modernizr website so that you can see all the feature tests you can do with this library. We will do a few more practice examples with Modernizr, and of course, it will be a big component of our RESS project later on in the book.

Create a new Web Project in Aptana Studio. If you do not get the index.html file automatically created, please create it now. Copy over the js folder from the previous project, as we will be using the Modernizr library again.

Follow these steps:

Let's take a look at our code; some of this code repeats from the previous section, so we'll just look at the new stuff:

      function findMe() 
      {
        if (Modernizr.geolocation) {
          alert("Geolocation supported!!!");
          navigator.geolocation.getCurrentPosition(showCurrentLocation, errorHandler, {
            enableHighAccuracy : true
          });
        } else {
          alert("Your Browser does not support Geolocation.");
        }
      }

This piece is in a JavaScript function, which means we can reuse our JavaScript code. First thing we do is assign the navigator.geolocation value to a JavaScript variable for later use. We are still checking Modernizr for the geolocation feature. If that returns true, then we are displaying our alert, getting the current position through the geolocation API, passing it the showCurrentLocation function, and then assigning an error handler. The enableHighAccuracy parameter assures that we get the most accurate coordinates for the user. And, finally, we are displaying our alert stating that this browser does not support geolocation.

function showCurrentLocation(position) 
{
  document.getElementById("curlocation").innerHTML = "Current Latitude : " + position.coords.latitude + " , Current Longitude : " + position.coords.longitude;
}

This function will display our current location on the screen and is called in our main findMe() function.

function errorHandler(error) 
{     alert("Error while retrieving current position. Error code: " + error.code + ",Message: " + error.message);
}

Here, we are doing our error handling. The three main possible values here are as follows:

You should be sure to account for this in your code, so you can handle these errors gracefully.

Geolocation is a great tool we can use on websites and in web applications. You could tailor particular pieces of information to people based on their location; this could be news, ads, and so on. Just be aware that some people don't like to be tracked, so if they are required to submit their location, you might have just lost a user.

Make a new Web Project in Aptana Studio, make sure you have an index.html file, and copy over the js folder that we used in the previous topics.

Type the following into index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webstorage Support Test</title>
    <script src="js/modernizr-latest.js" type="text/javascript"></script>
  </head>
  <body>
    <textarea id="storedtext" width="300" height="300">
      
    </textarea>
    <script>
      if (Modernizr.localstorage) 
      {
        alert("Web Storage found");
        var savedtext = document.getElementById("storedtext");
        savedtext.value = localStorage.getItem("webStoreTest") || "";
        savedtext.addEventListener("keyup", function () {
          localStorage.setItem("webStoreText", storedtext.value);
        },false)
      } 
      else 
      {
        alert("Browser does not allow web storage");
      }

    </script>
  </body>
</html>

So, this example looks extremely short. The truth is web storage is easy! In my opinion, it is one of the easiest and most powerful features of HTML5. Go ahead and open it up in your browser, and you will see a textarea control on the page. Type as much information as you want. Now close the page and reopen it. The text you typed should still be there. If not, double-check your code.

Now let's take a look at our code:

<script>
      if (Modernizr.localstorage) 
      {
        alert("Web Storage found");

Again we are doing our Modernizr check for localstorage (note that it is localstorage and not webstorage). Also note that, the JavaScript object is localStorage, so be sure to keep the two separate. JavaScript is case-sensitive, so it will give an error if you try to use localstorage.getItem ("myText").

var savedtext = document.getElementById("storedtext");
        savedtext.value = localStorage.getItem("webStoreTest") || "";

After our Modernizr check, we establish a few JavaScript variables we will need and assign the textarea control to those variables. We then load into those variables anything saved in our web storage field webStoreTest so that the initial text of the textarea control will equal that field. If nothing exists in webStoreTest, then we are assigning it an empty string ("").

savedtext.addEventListener("keyup", function () {
          localStorage.setItem("webStoreTest", storedtext.value);
        },false)
      } 

After we check it for any text stored in web storage, we start our text-saving function. We are doing that by adding a listener that will detect our keystrokes and save them into our web storage field webStoreText. This saving happens automatically with no intervening on our parts.

      else 
      {
        alert("Browser does not allow web storage");
      }

And in our final piece, we display our alert that we do not have web storage functionality in this browser.

As mentioned earlier, you can also use this for storing session and cookie information. I highly recommend reading up on how you can do this and implement it in your future projects.

We will be using ScientiaMobile's cloud version of the WURFL library. You can create a free account at https://www.scientiamobile.com/cloud. This free account will suffice for this book, however, for a production environment, you will need a higher tiered account.

Follow along at http://www.scientiamobile.com/wurflCloud/gettingStarted/ to get your account set up. Once you get your account created and API key generated, go to the Capabilities page at https://www.scientiamobile.com/wurflCloud/accountCapabilities and drag over device_os and device_os_version to the Your Capabilities section of the page. This will allow you to check these two capabilities for this topic. Make sure you download the PHP client from the Download Client Code link on the account page.

After you get the code downloaded, create a new PHP Project in Aptana Studio and add the downloaded files to the directory of the newly created project.

Follow these steps:

Let's take a look at the code and see what we did:

// Include the WURFL Cloud Client 
// You'll need to edit this path 
require_once 'Client/Client.php';
 
// Create a configuration object  
$config = new WurflCloud_Client_Config();  
Here we are loading in the WURFL Cloud Client library and creating the initial config file.
// Set your WURFL Cloud API Key  
$config->api_key = 'xxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';   
 
// Create the WURFL Cloud Client  
$client = new WurflCloud_Client_Client($config);  

Here, we assigned your API key to the config class' api_key property. We then instantiated the Client class, passing it our config object.

// Detect your device  
$client->detectDevice();  
 
// Use the capabilities  
echo "Operating System: " . $client->getDeviceCapability('device_os') . "<br />";
echo "Operating System Version: " . $client->getDeviceCapability('device_os_version') . "<br />";

Now we are at the meat of the example. Here, we are executing the Client method detectDevice() to start the WURFL querying process. Next, we are echoing back to the screen, that is, the results of our capability query for device_os and device_os_version. Pretty simple and straightforward, isn't it?

With the free cloud account, we are limited to only looking at two device capabilities at a time. The good news is, we can change those out when we move to the next section. Again, if you plan on using this in a production environment, upgrade to one of the higher tiers, so you will have access to more capabilities and overall detections.

The first thing we need to do is go back to our ScientiaMobile Cloud account and change the device capabilities we are going to use for this topic. Once you log on to your account, go to the Capabilities page and follow these directions:

Now that we have the capabilities we want to use, let's start writing some code. Create a new PHP Project in Aptana Studio to use.

Follow these steps:

Pretty nifty, isn't it? Clicking this banner will take the visitor straight to your app in the App Store, or they can simply click on the X to close the banner.

The first part of the code is the same code we used to load our WURFL config and client objects, so let's skip to the next piece:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width" />
<title>iOS Detection</title>
<body>
  <?php
    if ($client->getDeviceCapability('brand_name')=='Apple')
    {
      echo "<meta name='apple-itunes-app' content='app-id=375380948'>";
    }
    else 
    {
      echo "You're not using an iOS device";  
    }
  ?>
</body>
</html>

The first part of this snippet is just standard HTML you would find on most pages; in the <body> statement, we have another PHP block. This if statement executes a device query to see if brand_name equals Apple. This covers the iPhone, iPod Touch, and iPad lines. Now <meta name='apple-itunes-app' content='app-id=375380948'> may look new. This is a meta tag the Safari on all iOS devices running iOS 6 or higher understands and uses it to show the smart banner that we generated.

What if you have an app for the iPhone and a different app for the iPad? This is where the model_name capability we added comes into play. You can expand your if statement to do a check such as getDeviceCapability('model_name')=='iPad' and then change <meta name='apple-itunes-app'…> to reflect a different app for both the iPhone and iPad.

Open the Aptana Studio project we created in the second topic; we will use it for the rest of the book and expand on it as we go.

We need to do a few things to get our project:

In the next section, we will look at the CSS files and what they contain. Also, we will be adding more to these folders and files, as we continue on to seeing RESS in action.

We are not really doing anything here that should be new to you. We are simply separating out some of our PHP code, so it is easier to manage. We are keeping our WURFL code in its own file so that it looks cleaner, and if we need to use it on multiple pages, it's best to have it in one file and simply include it in.

We will use the same Aptana Studio project we worked with in the last section.

The first thing we need to do is set up our CSS files. We will have three files: mobile.css for our phones, tablet.css for our tablet devices, and then main.css for desktop/laptop devices. We will also have a fourth CSS file that will handle our colors and is universal across all the devices; this file will be named style.css. Follow these steps:

Now, if you view the site on a mobile device, you should see a mobile version and then the tablet, and desktop/laptop version should look almost the same, except for the image, which will be dealt with in the next section.

Refer to the following code snippet:

if($client->getDeviceCapability('is_tablet'))
{
  $stylesheet = "tablet.css";
  
}
elseif($client->getDeviceCapability('is_mobile'))
{
  $stylesheet = "mobile.css";
}  
else 
{
  $stylesheet = "main.css";
}

We are performing a WURFL device query to see if our device is first a tablet, and then if it is a mobile device and if neither are true, we load our default .css file. One note here: we are checking for the tablet device first, because it is technically a mobile device as well. So, if we do our mobile check first, it will be true and then load the mobile.css file, which, of course, won't look right on our tablet.

You could also check the device width and gear your CSS files towards that. You will notice that on this basic example, there is no support for different device orientations, only portrait. You would add this in as well. It is a great learning exercise!

Open the Aptana Studio project we have been using for the last few sections. Copy over the image folder from the code download, so you will have the new header images; you should have three total images: acme.png, acme-320.png, and acme-768.png.

Follow these steps:

Now if you look at our progress so far, you will see a properly formatted header image displaying correctly on whatever device you use.

The lines, $logo = "acme-320.png", in each one of our device queries and assigns the filename of the proper header image that is sized correctly for the particular device. We then make sure that the image gets displayed by using the following code:

<img src="images/<?php echo $logo; ?>" alt="ACME Code Consultants" name="logo" style="max-width:100%"/>

It just a normal HTML img call, but we have the src attribute that is equal to the assigned PHP variable.

If performance isn't that much of a concern and you'd rather use PHP's ImageMagick or GD libraries to dynamically resize the images, please feel free to do so. I do, however, recommend ImageMagick over GD, and due to this, I use fewer server resources. The downfall though is that you may not find as many examples and documentation online to get up and going.

If it is closed, open up your Aptana Studio project. We will need to modify our header.inc file again as well as create two new files. One will hold the mobile version of our form and the other will hold the full version of the form (which will also fit the tablet version pretty well). We will have two versions of the form, one with labels for our tablet/non-mobile devices and then one that does not use labels but instead uses the HTML5 form element of the placeholder.

Follow these steps:

Was that simple enough? Now check your devices, and you should see the form displayed; it appears different on your phone and desktop/laptop.

We are using the same functionality we previously used to load in the form dynamically:

$form = "form_normal.html";

We are assigning the form filename to the device through our WURFL code blocks just like we did in the header image and then in the CSS file.

<?php include ($form); ?>

Here, we are just using the standard PHP include function to load in our form based on the variable.

This was a great example to show how you can use RESS ideas to load in content based on the device. You could have advertising on your main site, but when it is seen on a mobile device, you might load in advertising that looks more like what mobile users see in apps.

You could also use this to load in Flash content that wouldn't work on a mobile website but works perfectly on the main website. Again, all this is served through one URL.

We have already done this before when we were getting started with Modernizr, but let's take it step by step again. Open up your Aptana Studio project one last time.

Follow these steps:

Now when you go to the site, you should see the pop up telling the user the reason for tracking the location.

Again this is the same code we previously used; the only difference this time is as follows:

<body onLoad="findMe()">

As soon as the page loads, this executes our JavaScript function findMe() to prompt the user about the tracking and to get the actual location. We would then write this to a server log or database, so we could run metrics on where our visitors are coming from.

Well, that's it. Our pages should look like the following screenshot on our computer:

And on a phone, it will look like the following screenshot:

Thank you for following along, and I hope you had as much fun reading this as I did writing it!