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

Wireframing is an invaluable technique when starting the development of a new project, both to set functionality expectations with project stake holders and to give the build team a concrete idea of what it is exactly they have to build. There are plenty of web based and commercial packages available but I don’t really do enough wireframing to justify the cost of an ongoing subscription to a web based service and not many of the commercial packages cater to the Linux market. I have always loved Dia ( http://live.gnome.org/Dia ) for creating flow charts and work flow diagrams but never really found it suited to the creation of wireframes.

Read the rest of this entry »