I have a copy of Bulletproof Web Design and it’s a great read. It really taught me to think about what I am doing with my web design, HTML and CSS coding. If the new book is anything like that, I’ll be buying a copy! Handcrafted CSS is available as a paperback and in hardcover from Amazon.

Related: The second edition of CSS Mastery: Advanced Web Standards Solutions by Andy Budd et al is also due for release in August.

Of course, the main reason I like Firefox so much is its extendability and the availablility of third party Add-Ons. These have given me some genuine productivity improvements and the web developer section has some outstanding tools.

I have started the process by sprinkling in some border-radius loveliness around the site. The border-radius CSS3 property allows you to add borders with rounded corners to elements by specifying a few simple rules in your style sheet. If you have a background colour on the element but no border you will get a rounded corner box. I will describe this in more detail in a later post but here’s a nice article that explains border-radius.

This is an example paragraph with the border radius property applied. If you are viewing this with Firefox and Safari, you will see that it has a pale green background with rounded corners. If using Internet Explorer, you will see straight edges.

Using these properties gives me a chance to experiment a bit with some newer CSS features that I’m sure will become mainstream. In this case, it also means that I can implement rounded corners in a few lines with minimal effort. Result!

Technorati : css

PS: There are some other good articles on the That Web Guy Blog. Nice design and layout as well!

Technorati : web standards

The method that I have been using more and more recently is to add the overflow property, either overflow:hidden or overflow:auto, to my containing element. This is a simple way of clearing floats that seems to work well when you are using a floated image inside another element that needs to be cleared.

Here’s an example that shows what I mean. For the first paragraph, the image is floated right, the text is quite short, and the containing coloured background paragraph does not ‘know’ what height to use. As a result, the image ‘sticks out the bottom’ of the paragraph. Mostly this is not what I want to see. The floated element needs to be cleared so that the height accurately encompasses the floated image.

In the second case, the styles are the same and the image is floated right but I have added overflow:hidden to the containing paragraph element. As a result of this simple change, the height of the paragraph is what we intended. The float is cleared.

Here are the image styles in the example:

.image-right {
	margin: 10px;
	padding: 5px;
	background: #FFF;
	float: right;
	border: 1px solid #E0E0E0;
}

.. and the paragraph styles.

.box1, .box2 { 
	background: #E7F3CF;
	padding: 10px;
	margin-bottom: 150px; 
}
.box2 { 
	overflow: hidden;
}

Using the overflow property like this is a quick way of clearing the float without adding extra mark-up.

There are several other ways of clearing floats which I will not elaborate on here. However, All About Floats on the CSS Tricks website is a great article that explains more about floats and clearing.

Note: I don’t pretend that this method will work in all cases. Your layout and older browsers like IE6 may dictate that you need to tweak the above or use another method for clearing floats. Floating the containing element [float to clear a float] or adding another element that clears the float are two methods that may work just as well. Use the best method for your particular circumstances.

Technorati : css

Info: The screencasts are provided as Quicktime and Flash movies.

The latest tutorial is an Infinite Carousel which is the carousel effect seen on the Apple Mac Ads page. This is a neat way of highlighting a range of content items [in the Apple example, their adverts over the years] and has often been used with image galleries.

I am a big fan of screencasts because they explain each line of code. This makes it easier to understand the examples compared with a ‘normal’ tutorial, which sometimes assume a degree of knowledge. If you want to understand jQuery more [like me], why not give jQuery for Designers a try!

Yes, yes, I know that a larger CMS like WordPress or Textpattern [two of my favourites] are often the ‘solutions’ that are suggested when the subject of client website updates are discussed but, equally, not everyone wants a system like that for small website changes. I am thinking of small business brochure-type websites here. In these cases, Perch may be just the job.

Why a simple CMS may be a good choice

The reasons why I think that Perch may be a good fit for some clients are set-up cost and time and minimal disruption to an existing website. Ease of use may also be a selling point but I will be testing Perch in the next few days to see how this aspect shapes up. Now, don’t take this the wrong way. I think Textpattern and WordPress and other CMS solutions are excellent choices for many websites. However, recently we migrated an old brochure website from static HTML pages to WordPress. It all went rather well but the process took a couple of days even though we were using a pre-designed theme. I guess this is not too much money but if you run a small business, you would probably rather spend a bit less if you do not need the complete CMS experience that WP provides. Perch on the other hand looks like it can be set-up and working in a lot less time.

Another reason for using Perch is client experience. Let me explain. Client education can be a problem with some CMSes. Give someone a full-blown CMS and it can be rather daunting at first, even with the ease-of-use features that are often provided. There is a lot to take in with WordPress if you are not familiar with it. As a result, a fair amount of client training and education may be needed. A simpler CMS with features that can be extended later sounds like a better choice perhaps. With Perch, my initial assessment is that the text or content blocks can be designed to take into account the client’s experience. For example, simple text fields for someone without much experience or with minor text change requirements or larger content blocks for others with greater familiarity or bigger demands. The beauty of this would be that you can start small and build larger as the client learns the system.

Over the next few days, I will be making a more thorough assessment of Perch and I will report back some more when I have ‘got my hands dirty’ with it.

Update: You can now sign-up for a Perch demo which gives you 24 hours to play with the system.

Technorati : cms, wordpress, textpattern, perch

Sticky footer

A neat visual effect that can sometimes be useful is exemplified by the CSS Sticky Footer where the footer element [often overlooked in design and content terms] is ‘stuck’ to the bottom of the browser window. This particular technique has been described in a few different ways dotted around the web but new methods are always welcome. It might be difficult to choose between the methods but my advice would be to try a couple of these and pick the one you like best.

Changing case

The text-transform property is underused but it is very powerful if you want to capitalise or otherwise change the case of a particular element on your website. A simple style rule using the text-transform property and its values enables you to change all your headings, for example, in one simple step! Devlounge explains how to transform your text with text-transform.

Reading these types of articles always provides a great incentive to try something new in my projects. Often, the project deadline gets in the way but I try and do something different in my style sheet if I possibly can… and if it makes sense for the client’s website requirements of course!

Technorati : css, typography

I agree and disagree on this. Sitting on the fence or what!? On the one hand, I agree that wasting hours on IE6 is not so useful. However, I doubt if most of my clients would be too happy with the Universal Internet Explorer 6 CSS method if their web visitor statistics show a significant number of people with IE6. The other argument that I want to put forward is that if your website is relatively simple, you may not be spending too much time on IE6 and its foibles in any case. I know I don’t. That’s just my approach I guess.

Still, the Universal Internet Explorer 6 CSS method is worth considering in some cases and will work well for some people I’m sure.

For the uninitiated, a font stack is simply a list of fonts. If the user does not have the first font in the list, the browser will check if the second is available and so on. Thus, it’s perfectly possible for two users to be seeing different fonts when viewing the same website on different computers.

However, these font stacks are not always chosen with the care and attention that they deserve. Often, the font stack list from a programme like Dreamweaver is used when, in fact, there might be better alternatives. For example, the ‘default’ font stack “Verdana, Arial, Helvetica, sans-serif” is often chosen but the fonts Verdana and Arial have quite different characteristics and the same line of text will be much shorter in Arial and letters will appear bigger in Verdana. Not exactly a good match if that is what you were intending. In this case, Tahoma is probably a better choice than Arial.

The lesson here is that we should pay much closer attention to our font stacks than perhaps we might have done previously. There’s a great article about choosing better font stacks at the Unit Interactive blog. I particularly like the “Gill Sans, Trebuchet, Calibri, sans-serif” font stack that is suggested for titles because that is relevant to a client’s current website where we are replacing ‘heading’ images [that use Gill Sans] with the actual heading text. [It’s better for search engines don’t you know.]

Overall, a lot more attention could, and should, be put into font stacks and web typography and I am intending to do more in this area. After all, it’s the text on your website that your visitors will read or browse. Let’s give it the attention it deserves!

Technorati : font, typography