Responsive design is the idea that web site layouts should change based on the users choice of device. Depending on the users environment the design may adapt to the screen size, platform or orientation.
I've put together an example that you can use in your own web sites. Look what happens when you resize the page horozontally in your web browser or on your mobile.
View now - Responsive Design
Feel free to inspect with Firebug and copy into your own project where suitable.
It uses a condition to tell the web browser which stylesheet to include:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 660px)" href="1col.css" />
In the above example we are saying to include 1col.css when the media is a screen and the maximum width is 660px.
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px) and (max-width: 1200px)" href="2col.css" />
Here we are saying to display 2col.css when the media is a screen, the minimum width is 1000 pixels and the max-width is 1200 pixels.
Any questions I will try to answer in the comments.
Update: When setting the viewport you might want to detect the device with PHP first otherwise the viewport will be set too small on the iPad.
Last weekend I cycled around Lake Vyrnwy in Wales for the Severn Hospice, the 11 mile cycle took around two hours at a leisurely pace, here are some of the photos I took on the way round:
The dam forms one edge of the lake.
Boating is a popular pastime.
Water from the lake supplies homes all over the West Midlands.
The first signs of spring were starting to show.
As it started raining this faint rainbow appeared.
You can just about see the whole rainbow in this shot.
The mist started to get heavier at this point.
I stayed with the runners - for support obviously.
The tower's almost Gothic look in the creepy mist.
To find out more please visit: http://www.justgiving.com/mikiesheridan
Apple's home multimedia suite iLife was recently upgraded, while all apps (iMovie, iWeb, iDVD, iPhoto and Garageband) got an upgrade iPhoto got the best and most significant new features. The most useful of these is Faces.
For a long time now you have been able to tag people on social networking sites such as Facebook linking them to their user profile. Facebook has the ability to detect faces however cannot match them meaning you have to tag every person in every photo. iPhoto takes this to the next level, after first scanning your entire library to detect faces (a job which took around 90mins on my 8418 photos on my 2.4ghz C2D Intel iMac) you have the ability to start tagging people.
Above: iPhoto scanning my library looking for sexy people
Once you have tagged a person in a couple of photos iPhoto will start to suggest similar photos, at first some of the suggestions are wild guesses but by simply clicking a photo once to accept or double clicking a photo to deny makes it very quick and easy to work through your library.
Above: Single click to accept a picture, double click to deny.
The majority of my photos contain people, often from nights out in fancy dress. iPhoto struggled with some of these photo at first and I found myself having to tag photos so that iPhoto could detect the rest.
Above: After a couple hours of tagging I now had a selection of Pete photos. I had to tag myself on numerous occassions, iPhoto could not automatically detect that baby Pete (top right) was the same as sumo Pete (bottom middle).
Above: I now have my three friends tagged in iPhoto.
Tagging photos is all very good but its what you then do with these photos that is interesting. For instance what if I want to see all the pictures of me and a friend or with valentines day approaching all the photos of Laura and myself. I can create a smart album, just as you would in the older versions of iPhoto but this time you have the option of specifying names.
Above: A filter in a smart album.
Above: The filter results of pictures of Laura and myself.
It doesn't end here as iPhoto then lets you print or order items based on those photos producing an instant valentines day present.
Above: Three years worth of presents.
With iPhoto 09 you also have the option for automatically uploading photos to Facebook and Flickr.
Tagging takes several hours especially if you have a large library but its well worth it.
This picture was taken over Shrewsbury whilst I was cycling at the end of September, its taken a while for me to edit and process it.
I've run the photo through Photomatix to bring out some of the color.
I took these photos whilst the sun was setting last week at about 6:30pm (before the clocks changed). The first one I've run through Photomatix to enhance some of the colours.
I work with the open source content management system Drupal on a daily basis, I've designed sites for local and international organisations. Modules are essential for my work, these are the ones I work with everyday and use in some fashion on almost every website.
1. CCK - Content Construction Kit
Almost every website will need to define content fields in some way so that it is easy for the user to enter data and to report off, the CCK module gives you this flexibility to do this. These can be anything from simple number and text fields to select boxes, radio buttons and image upload fields. CCK is one of the main reasons Drupal is a flexible platform allowing for the quick development of website.
Being able to store all your data is great however what really matters is how you display this data to the end user. By being able to select what fields you want to display, pass arguments and setup filters, Views is incredibly powerful and goes hand in hand with CCK.
Panels is a great way to mix different views and blocks into the same page in different columns. The panels module comes with either two or three column layouts giving some great flexibiltiy to page design.
Clean URL's are a great way to give a more descriptive URL, the path auto module allows you to automatically generate different urls for different types of content. For example on ImAFish it differentiates imafish.co.uk/blog/??? and imafish.co.uk/articles/??? .
IMCE integrates an image upload box into TinyMCE and provides basic controls for resizing images. IMCE is here for a similar reason that TinyMCE is, people love to put pictures on web pages and usually these start out on a users computer. IMCE provides an easy way to upload these images so that they can be positioned on a page with TinyMCE.