It seems these days that everyone is doing Responsive Web Design with HTML5 and CSS3, so here are some things to get you started.

Responsive Web Design (http://en.wikipedia.org/wiki/Responsive_Web_Design) is getting a lot of buzz and having a website that is as attractive on the small screen of a smart phone as it is on a wide screen desktop is certainly getting a lot of focus from clients. While there are plenty of books available on HTML5/CSS3, the best I have found on this topic is Responsive Web Design with HTML5 and CSS3 by Ben Frain (Packt Publishing Ltd, 2012, ISBN 978-1-84969-318-9).

[And before anyone says anything – Yes, I know currently (as of 2012Jul18) this site is HTML4. I should have updated it while converting to Joomla 2.5, but I’m busy; I will get around to it. 🙂 ]

These Firefox Extensions will help

My main development environment is on Windows, so to provide Apache and MySQL I am using XAMPP (http://www.apachefriends.org/en/xampp-windows.html).

As most of my web development is using either WordPress or Joomla the Zend PHP Development Tools (http://www.zend.com/en/community/pdt/) are the obvious place to start. Download the “All-in-one” build (http://www.zend.com/community/pdt/downloads) and install.

For version control I am using Subversion and Subclipse by Tigris (http://subclipse.tigris.org/) is the standard interface.

The Smarty Template Engine (http://www.smarty.net/) helps to separate control and presentation logic within a PHP application. There is a Smarty PDT Eclipse plugin that provides colour highlighting and code completion for Template files. Just follow the instructions (http://code.google.com/p/smartypdt/wiki/InstallSmartyPDT). Don’t forget to un-tick ‘Group Items by Category’ or you won’t see the plugin.

I like LESS (http://en.wikipedia.org/wiki/Less_css) as it makes coding CSS much easier. Installing in Windows can be a bit tricky though (http://blog.dotsmart.net/2010/11/26/running-the-less-js-command-line-compiler-on-windows/). Firstly you will need to install a lessc command for Windows (https://github.com/duncansmart/less.js-windows). Then install the Eclipse plugin for LESS (http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html). The author’s instructions are based on the Eclipse Java EE package, rather than the PDT build. I found for PDT the steps were:

I have been using the W3C Default style sheet for HTML4 (http://www.w3.org/TR/CSS2/sample.html) as a starting point for some time, so it was an easy step to use the HTML5 Boilerplate (http://html5boilerplate.com/) instead. The Bones WordPress Theme (http://themble.com/bones/) is based on this; so is the Cambridge Software HTML5 Joomla Template (http://cambridgesoftware.co.uk/blog/item/64-free-future-proof-html5-joomla-template-for-responsive-web-design).

Happy coding!

8 views

Need help? Let me take of your IT issues.

Share this page

Close Menu