Archive for the ‘Web design & development’ Category
I am releasing my MiniCard theme for wordpress which supports hCard/vCard microformats, tonnes of social networks, showing some portfolio items (optional), and more – all controllable from its own Theme Config page. This theme is free and licensed under GPL – there is also a premium pack available with many theme variations, and the footer feed functionality.
Read more for more information and the download links. I hope you find this theme useful and spread the word 
I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).
Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.
Theme Slice is an exciting take on the current crop of Slicing services out there; a PSD to WordPress Theme conversion service; brought to you by Anthony Brewitt and yours truly, Mike Jolley. You send in your mock up design and Theme Slice will send you back a full WordPress Theme based on your design. Read on to learn more.
Search boxes: integral parts of many websites but often neglected in terms of markup and style. When considering both accessibility and semantics, marking up a a search box can be a little awkward depending on the look you are trying to achieve.
In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.
Pull quotes, lift-out quotes, or call-outs are a handy method of drawing reader’s attention to a section of text. Recently, on a couple of client projects, I’ve seen the need to enhance large blocks of text so the user could skim read them without missing the really important parts. Pull quotes seemed perfect for this, so I created a small jQuery script to take care of them.
In this article I demonstrate an easy method of creating pull quotes from a block of text using jQuery (a JavaScript library), CSS, and the html span element. I hope you find this method useful.
Recently I’ve been searching for a method of creating nice looking rounded corners with Javascript & JQuery.
First I found the “JQuery Corner” plugin for rounded corners, but was disappointed that it did not include smooth, anti-aliased corners.
I then did some more google-trawling and found this post, which contained a modified version of Curvy Corners for use with JQuery. Now this script was much much better.
However…the filesize was a massive 40kb, way too big for production use, and to make things worse the code was not compatible with packer so I could not reduce the filesize.
Well, I got busy, and fixed the errors. It is now fully packer friendly meaning easy rounded corners in JQuery at only 9kb 8kb 15kb 20kb 16kb 10kb. Excellent. Read more for the download link.
A few days ago Jonathan Wold, a new friend of mine, tagged me to write about my success as a designer. Well, I’ve dragged myself away from my client work to write about it, even though in my eyes I’m not greatly successful, yet.
O, and as an added bonus you get to see old pictures of me and download some games I made years ago! lol
This is my first set I have ever completed for release, Ive always enjoyed making little icons but Ive never felt compelled to released them. Well at last Ive dedicated some time to getting a set complete and ready to distribute.
I hope they please you, and you enjoy them as much as I enjoyed making them! Better yet, enjoy them more than I enjoyed making them because some of them were a pain in the butt to make lol.
XFN (XHTML Friends Network) is a microformat which represents relationships between people with hyperlinks and the use of a simple HTML tag.
They can represent colleagues, contacts, sweethearts, friends and more!
Based on the XFN icon set by Wolfgang Bartelme I have created a small set of mini icons (9×10 pixels) to represent these links between people. I have also made a CSS file which shows the relevant icon when the correct XFN rel tag is present.
This week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.
Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.
