Development Cycle

For years designers and developers have used “Lorem ipsum” as a standard placeholder text when creating page layouts. When incorporating images into the body design though the standard approach is a little less straight forward. With images having to be made or resized first to the required dimensions and then inserted into the page layout where required.

Enter holder.js
Holder.js allows placeholder images to be placed into your layout easily using the HTML5 canvas element. To use simply include the holder.js script in the head of your document:

<script src=”holder.js”></script>

Then simply use standard img elements with the desired dimensions of the placeholder where you would like the image to appear in your layout:

<img src=”holder.js/300×200″>

For an example of the script in action see here.

More Info:
Holder.js site
Holder.js @ github

Adjusting the visibility of element within a web page comes in handy from time to time for features like tool tips, extending content after a short excerpt etc. This technique adds greatly to the user experience of your site and has been around for a long time but the jQuery library makes this task a lot easier with the hide method.

To get started if you haven’t already load the jQuery library into the head of your page i.e

Source code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">

Read the rest of this entry »

HTML 5 brings many new features to the browser including a lot of enhancements to the way forms are created and handled. One of my favourite features is the introduction of the placeholder attribute, this allows the display of  some text in a text input field or text area until the element is brought into focus. This allows the addition of small tips or related prompts to give the user a better understanding of what is required as input.
Read the rest of this entry »