Russian Doll

Russian dolls seem to be very popular at the moment so I decided to draw a vector doll with one inside another inside another and here is the result..

This is Not Porn

Another site that has fab photographs. This is Not Porn is a collection of suprising celebrity photos that offer more that the paparazzi shots that we are now so used to

Putney heritage photos

Wandsworth Heritage Service have been uploading the historic pictures of Putney and the borough to Flickr. There are some really beautiful images that show Putney at it's best. Interesting to all Putney dweller and anyone with an interest in London and it's history.

View them all here.

Balsamiq Mockups

Balsamiq Mockups is a great way to do quick and easy wireframes for websites. The full version is $79 but you can have a free 7 day trial and also use the web interace demo.

The wireframes are sketchy and low-fidelity with linking that lets you generate click-through prototypes for demos & usability testing.

RSS Feed

Want to keep up to date with what is happening with Fat Pudding?

Then subscribe to the RSS feed http://feeds.feedburner.com/FatPuddingBlog

Back to the Future Photos

Irina Werning is a photographer from Buenos Aires who has created an amusing and creative look at recreating photos from people's pasts. The result is Back To The Future where she has taken old photos and set them in the same position and surroundings but the people are now obviously older.

Slide Panel

Space is a premium on most sites so that I why I like the sliding effect of text behind images using jquery. The code is very simple and it allows the user to rollover an image and see info about it. Of course you can go the otherway and have text on top of the image but this is a nice alternative.

view demo

Google Weddings

Google have just lauched their wedding planning service. Combining many of their portals you can know use Google as your own personal wedding planner for free! Get a wedding website, use Picnik to edit photos and share your pictures with Picasa Web Albums and use google docs to organise hen parties, guests and all the other things that need to be organised.

Senior product marketing manager Lisa Conquergood told "to help you plan this important day we've created wedding-specific templates in Google Sites, Google Docs and Picnik, and gathered tips and tricks for using these and other Google products at google.com/weddings. From wedding websites to save-the-date cards, these tools simplify wedding planning, letting you focus your time on the fun things—like tasting cakes!"

Best practises when building a website

Best practises when building a website

When building or maintaining a website best practises should be used to ensure the highest level of usability and a level of accessibility appropriate for the audience of the site.

Sites should adhere to the World Wide Web Consortium (W3C) standards which make web documents more accessible to all types of users and machine agents, and more visible to search engines.

• Doctypes – by using a certain type of doctype it is possible to validate the code to the specific syntax. Best practise dictates that strict mode should be used to ensure that all code is to the newest and highest standards.
• XHTML – using XHTML ensure that the highest standard of coding that works in all browsers plus XHTML pages can be read by all XML enabled devices. The code should be validated to the W3C standards and ASCII text be used were needed.
• Tags - should be used where possible. Alt tags should always be used to add associate keywords to images. Heading tags should be used appropriately. H1 – H6 tags to be used for top level key words as more weight is placed on them from the search engines.
• Images – images should always specify their width and height to allow browsers to continue rendering while waiting for the image data. Logo and imagery play an important role in the overall look and feel of a website therefore the images used on a page should relate to the content and be appropriate for the attended audience. For accessibility purposes alt tags should contain relevant information about the image and not just describe it.
• JavaScript – the js code should be included using external files for caching and better maintenance.
• CSS – this should always validate and be used to layout the page using css2. Text should be formatted with css1 and other decorative elements rendered with css2. The external css files should be sent with the correct MIME type. Aural CSS enable web authors to how their pages should be read aloud by screenreaders that support them.
• Typography – the typography should be legible and readable. Some fonts are not always legible and are designed just to stand out. The text size should be made to be changeable but the default setting should always be set at a level that is readable and clear. The colours used should also be taken into consideration and chosen so that there's enough contrast between your text and page background colour - particularly if using a background image on the page.

Usability

“The usability of a website is the extent to which the website can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”

The key to the usability of a website is to understand the users and what they will be trying to achieve by visiting the site. For most websites the navigation should be consistent and user paths should be clear and easy to follow, information should be laid out in an expected manner and there should be clear links back to the homepage.

Things that need to be considered when thinking about the usability of a website are:

How easy is it to navigate around the site?

Overall look and feel of site

Relevance of site images to content

Relevance of site content (text)

Overall ease of use

Overall page layout and organization

Was the site inviting to use?

Were the naming and labelling of links clear?

Site download time

What hardware and software will the majority of your users use to access your site?

Would you recommend this site to a friend?

Navigation

The navigation of the site is probably the most important issue with regards to how your users will find out more about you and the information they require. The navigation should be in a consistent location on each page of your website and tell the user where they are and where they can go. Clear language should be used and breadcrumbs (location indicator devices) can be included to aid the user and should be added near the top of the page showing the user where the page belongs within the structure of the site. Links back to the homepage should be added to every page of the site.

Navigation must also be considered for people who cannot use a mouse but must tab through content to get to the options or information they need on a page.

Links

Textual hyper links should be indicated in an appropriate manner. They should be in a different colour or style to the other text on the page and are often shown as underlined. Text links should also make sense to a screen reader or other similar device.

Sitemap

A sitemap will allow a user to visit one page and find out the hierarchical structure of the site. It is a good reference for a user trying to find a specific piece of information or webpage.

Title Tags

The title tag is shown in the top title bar of the browser and should be relevant to the current page. It is useful for those who may bookmark your site and in tabbed navigation.

Accessibility

It is now mandatory that government websites comply with the minimum level of the World Wide Web Consortiums Web Accessibility Initiative, however the more accessible a website the greater number of people can use it.

Access technology is used to adapt or make computer systems and services accessible to a disabled person or people using different web technologies such as mobile and pda’s. Examples include the provision of screen readers and text-to-speech systems; screen-magnification software; tactile braille display, trackballs, touch pads/screens etc; alternatives to standard computer mice, keyboards, switches and voice-recognition software.

The level of accessibility should also reflect the purpose of the site and who it is aimed at. Other considerations for an accessible website should include how the website will be maintained e.g. manually, using a CMS, or by using an automated web application

Accessible websites include:

• Text only versions
• Different style sheets for different mediums - If the browser or browsing device does not support stylesheets or stylesheets are switched off, the content of each page is still readable and the site fully navigable.
• Text resizing
• Access Keys – using the U.K. government standards
• Hypertext links - Use text that makes sense when read out of context e.g., avoid ‘click here’’. Where necessary have a title attribute which describes the target in greater detail.
• Using Skip Links – allows a user to navigate around a web document, without having to cycle through a huge list of links. Is a useful feature for screen reader users, and keyboard users in general, but they're also useful to other groups; primarily, people with mobility difficulties.
• Use of headings, lists and consistent structure

Accessibility of a website can be checked using the BOBBY Accessibility Checker

http://webxact.watchfire.com/

Testing for usability and accessibility

The test of usability and accessibility involves measuring the ease with which users can complete common tasks on the website. The testing should be completed by a wide range of users who would normally be expected to visit the website, the aim is to observe people using the product in as realistic a situation as possible, to discover errors and areas of improvement. User groups can be set up and given a number of tasks to perform. Their user journeys are then evaluated and the result implemented into the design and build.

In the production stages the final product is developed and then the functionality evaluated through testing, quality assurance, usability testing, and field testing. The evaluation results are used to improve the product and this process is repeated until the business goals are met.

Once the website has been launched it this then maintained and refined with user feedback which can be used to create new requirements

Vintage Posters

I love vintage posters and the Library of Congress have a whole host of old posters to browse and find inspiration from.

Google is looking funky today

Google is looking particually cool today with it's interactive doodle celebrating the 183rd birthday of science fiction author Jules Verne. The background, under the sea, can be moved around with the joystick or tilted on ipad's and iphones, showing different views of marine life and even a submarine

Very Cute Posters

Really cute animal posters by Sharon Montrose

my doggie picture

Picture of my 2 labradors Georgia and Bertie. As done in illustrator. The quotes above are generally what they are thinking about.

css3 block

Here is a quick starter to css3 effects of blocks. All are simple starters to what you can achieve with some basic css3 to then go on and create something much more spectacular.

Listed are
CSS3 rounded corners
CSS3 box shadow
CSS3 roated block
CSS3 speech bubble

The demo can be found here

Instagram app

I have just downloaded the instagram app on my iphone and it is really cute. There are lots of apps that add filters to your photos but what I like about this one is a that it comes with a social networking integration. You can also upload to facebook, flickr etc

The app is free and fun to play around with.
Instagram - By Burbn, Inc.

Cool Bikes

As a cyclist with a plain black bike I do like to see interesting new bikes. One site that has caught my attention is Bike by Me, where you can customise the frame, wheels, chain etc in different colours.



The only thing is I would like to see different bike shapes but it looks nice

transparency without changing the text

I did this a while ago but thought it would probably be useful.

When you make an area transparent the problem arises that the text also picks up the transparency. To get around this you need to put the text in a new div and use z-index's.

I have created an example here

Putney Illustration

Thought that I would do a vector illustration of Putney Bridge

JQuery 1.5 Release

The latest version on Jquery has just been released. The biggest change according to their website is a complete rewrite of the Ajax module.

Pull it on the google CDN at

https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js