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
- ColorZilla (http://www.colorzilla.com/)
- Firebug (http://getfirebug.com/)
- Firesizer (https://addons.mozilla.org/en-US/firefox/addon/firesizer/)
- Web Developer (http://chrispederick.com/work/web-developer/)
My main development environment is on Windows, so to provide Apache and MySQL I am using XAMPP (https://www.apachefriends.org/index.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:
- Go to Install New Software
- Go to Available Software Sites
- Add Eclipse Indigo update site (http://download.eclipse.org/releases/indigo/)
- Add Xtext (http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/)
- Add LESS update (http://www.normalesup.org/~simonet/soft/ow/update/)
- On Available Software, Work with LESS update
- Select LESS
- Tick ‘Contact all updates sites during install to find required software’
- Follow ‘Next>’ and install
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!