Responsive Images with PHP and jQuery

Responsive Web Design is quite a hot topic at the moment and I'm only just starting to dip my toe in the area. It started gaining popularity with the Responsive Web Design article from A List Apart Article by Ethan Marcotte who has a book pending on the subject by A Book Apart. I'll definitely pick up a copy when it's released on the 7th June as the other books in the publishing series are useful and great to have on the shelf.

The main crux of Responsive Web Design is using CSS media queries to switch the layout depending on the screen size. A site can be optimized and look great on a mobile device, a tablet and on a PC without affecting content or by crazily creating subdomains for mobile only versions of the site. In this article I'm going to go whizz through the topic and concentrate on responsive images and the solutions currently in place and finally go through my own custom solution using PHP and jQuery.

Introducing Request a Feature

The latest script I've created to put on CodeCanyon enables visitors to request a feature on your website or web application. Users can then vote up that feature so that priority features can be implemented before others. The voting is done using Ajax with the jQuery library and has some basic IP based protection so that users can't just spam a feature and keep voting it up.

For an online demo click here and try requesting a feature and let me know what you think.

Ajax Store Locator

Finally getting round to writing a post on the Ajax Store Locator I created to put on CodeCanyon. It's doing relatively well and thought I'd share.

For an online demo click here and try searching on the map.

Introducing FilmDB

After creating the TVDB script I immediately began work on a Film version where you could download high quality Film posters and backdrops for use in your websites and applications. This script uses the fantastic themoviedb.org to grab the images.

For an online demo click here and try adding some of your favorite Films.

Introducing TVDB

Combining my love of TV Shows and being a nerd I've created a PHP script that will download high quality poster and fanart images from the superb thetvdb.com and store them locally for you to use or integrate with your website or application.

For an online demo click here and try adding some of your favorite TV shows.

Start Using FirePHP

I've known about FirePHP for a while now and never really had the inclination to install and use it. Although I've been using FireBug for quite some time to debug the client-side and HTML/CSS issues I didn't really think that it could benefit me that much.

Finally I've managed to install and use FirePHP (it's quick and easy) and boy am I glad that I did. For any PHP developer out there I totally recommend spending the short amount of time it takes to get it up and running.

Basically include the FirePHP class file in your Project, use the OOP or procedural way of doing things and then start logging and displaying information to the FireBug console. It really couldn't be easier.

One of the main areas in which it really shines is in Ajax development. You can output variables to the console during an Ajax request and see what exactly is going on without having to output anything to screen and will really aid development and cut programming time.

I'm not going to go through how to install and use FirePHP because it's been very well documented by the offical website and there are a few really good tutorials out there (links can be found below).

Main Links

• http://www.firephp.org/
• http://www.firephp.org/Wiki/Reference/Tutorials

Tutorials

• http://yensdesign.com/2008/10/how-to-debug-php-code/
• http://sixrevisions.com/web-development/how-to-debug-php-using-firefox-with-firephp/
• http://sixrevisions.com/web-development/a-guide-on-advanced-logging-and-benchmarking-with-firephp/