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.
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.
This post is by guest blogger Matt Buck.
The fifth International Cartoon Festival is open now in Shrewsbury.
The main event when more than 40 of Britain's best cartoonists will be in town for a long weekend of cartoons and cartooning, runs from April 18-20.
But already six exhibitions of some great cartoon jokes and art are open to the public. You can find out more at http://www.shrewsburycartoonfestival.com or at the Bloghorn,
After reading about the 10 most beautiful bridges in the world at the weekend through Digg I went to take some photos of Ironbridge, #7 on the list which happens to be about 20mins drive from where I live.
The bridge itself.
The power station overlooks Ironbridge, giving an interesting contrast between old and new industry.
A view from the bridge looking up the river.
The bridge in the distance.
The bridge and the village which takes it name from the bridge.
On the drive up to Ironbridge I took this picture of the river Severn.
Here are some of my best HDR photos from my travels. HDR is a technique of taking a photo over multiple exposures (or extracting them from a RAW file) then recombining them in a program such as Photomatix. By doing this you can bring out the detail from the multiple exposures creating a powerful image.
My first is of St Chads Church in Shrewsbury.
I really like how the HDR technique has brough out the detail in the stone work.
This next one was taken in Betws Y Coed last summer.
I like the brightness in the trees in comparison to the building and water in this one.
This one is of the B&B we stayed at in Betws Y Coed.
Again I love how the stone work is really brought out against the trees.
I took this next one in Egypt last summer.
The rich blue in the sea and sky really shines through in this picture.
This one was taken in the Cotswolds on my Birthday last year.
The contrast in the sky especially with the sun setting is very striking in this picture.
This is another of St Chads Church in Shrewsbury.
The way the cloud almost circles around the spire is especially apparent in this picture as it almost implies the power the building or church has over people.
This train track near Betws Y Coed almost has a rain forest feel about it with the luscious green.
This next one again is from Betws Y Coed.
All of my HDR photos can be found on Flickr.