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.
Continue reading "Easy jQuery Pull Quotes" »
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. Excellent. Read more for the download link.
Continue reading "Anti-aliased Rounded corners with JQuery" »
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
Continue reading "Defining Success as a Designer" »
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.
Continue reading "miniXFN Icon set & XFN CSS implementation" »
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.
Continue reading "Using Image replacement techniques" »
Recently 'Microformats' has been a major buzz word in the web design community, but what are they all about? If you are feeling lost then this article is for you. This article explains what Microformats are, the benefits of using microformats, and how to implement them.
This article focus' on the microformats hCard, and hAtom; both of which are used on the Blue Anvil site if you hadn't noticed.
Continue reading "Introduction to Microformats + a look at hCard & hAtom" »
Page: 1 2 3
Most sites on the web are coded using pixels for widths, which is acceptable, however these sites make it harder for users with poor eyesight to increase the text size whilst keeping the layout in place and usable.
That is where ems can help. This guide will explain ems, and show you how to convert a layout to utilize ems.
Continue reading "Going elastic with ems, layout techniques" »
This article introduces a planned work flow for developers to use on their projects. Like garlic and bread they DO actually go! Using a lifecycle a project is more organized and important principles such as scope and goals can be confirmed more quickly. Very few web developers use a lifecycle for their projects thinking that it invades the creative process, when actually a lifecycle will fine tune your ideas and streamline your work. Well take a look at the Prototype model for use in web development.
Written by Anthony Brewittt
Continue reading "Garlic bread? Web design lifecycle?" »
