Anal Retentive

The Problem:

Modern websites are no longer visited by pale pasty individuals with bulky desktop computers and pitifully slow 14.4kb modems. These days even the most basic mobile phones contain faster processors and (in a lot of cases) higher resolution screens than full-size computers from 18 years ago (think Amiga 500+).

Being able to access information from anywhere in the world and on different devices has two major obstacles:

• Bandwidth
• Presentation

If you create a site that has fixed sized elements (using px to specify sizes) and/or heavily laden with images, flash etc then their is a good chance it will load incorrectly or take considerably longer to load on slower connections. There are a number of things we can do to correct this, but in this article I will look specifically at font sizing.

In traditional typed printed media, fonts have been specified using pixels. With the first itteration of webstandards font-sizes were specified using the built in browser presets (think IE and smaller, small, large, larger) or specifying a font height in pixels, such as 12px. Using px to specify font-sizes is perfect if you can guarantee that every screen will have the same resolution and screen size (say 15″ at 1024×768). However as computer displays have evolved and become larger or they become mobile and therefore smaller, these dimensions have changed drastically; and measuring the font in pixels, simply will not work..

Example 1:

Text at 12px, on a 19″ 800×600, will appear half the size on the same screen if we increase the resolution to 1600×1200 (because we now have twice as many pixels)

Example 2:

12px text on a 19″ 800×600, is going to become miniscual (and most probably unreadable) on an iPhones 480×320 3.5″ screen.

The Solution:

Anyway… enough of the reasons why px shouldn’t be used…. what we need to know is what is a more viable solution, something that will work on a variety of equipment. The closest thing that exists at the moment is the em measurement. em represents a relative size. So, a font-size of 1em is the same size of its parent element, a font-size of 0.8em is 20% smaller than its parent element… and I can hear you thinking… “But where does the parents font-size come from!?”.

Generally speaking browsers set their default font-size to 16px, so if I gave a <p> block a font-size of 0.8em, the font would be rendered with a font size of approx 12.8px, the biggest disadvantage to this (besides em measurements not working in older browsers) is that if the user changes their browsers default font-size, our font-sizes will change accordingly.

This ‘relative’ font size allows us to correct for different rendering of fonts because if for example, I visit a site on my iPhone, its browsers default font-size should be something that is readable by someone using the device, and my stylesheet modifications, should increase or decrease that font-size proportionally.

Equally, with em sizes you have to be careful if you find yourself nesting different font sizes.

Example:

<div style=”font-size: 0.8em”>

<div style=”font-size: 0.8em”>

Some text

</div>

</div>

This will cause the font to be reduced twice. The default font size of 16px will be reduced to 12.8px and then again to 10.24px. Ughhh.

Useful Links:

The information in the article, while I wish it was original research came from several sources on the net, but most noticeably from the two below.

No72DPI

BigBaer CSS Font-Sizes

I’ve started work on a new site this week and one of the things I stumbled upon was a nifty method for reseting the default values of potentially any CSS property. This is especially useful because each browser has different ‘default’ settings (such as padding and margins).

In extreme cases browsers will position HTML elements using different CSS properties, for example IE uses margin-left to indent lists, while firefox (or rather its engine) uses padding-left. This code:

* {
padding:0;
margin:0;
}

will reset all spacing default properties. Excellent! However now we have to manually set all the margins and padding of our ‘H1->Hx’ elements, a potentially lengthy process. However we can rectify this by assigning several elements properties in one go.


h1, h2, h3, body {
margin: 10px;
padding: 10px;
}

Obviously these are only simple examples, but this is one technique I will be using in all of my websites from now on… if you are interested in further reading, this is an invaluable link ‘Eric Meyers, CSS Legend‘.

While I am on the subject of useful OS X web development software I wanted to let you know about a cool “Xenu’s Link Sleuth” alternative (LS is a popular windows based link checker). On OS X their isn’t a lot of choice, however we only need one and “Integrity” provides all of the features we need.

I can tell ‘Integrity’ to not follow a paticular URL string, I can tell it to follow a paticular URL string etc. The results page can then be browsed for missing links (of course) and exported to a CSV file for further analysis…. Simple but effective!

As I’ve mentioned previously I am an advocate of PNG images (Portable Network Graphics). It supports 24bit colour and greyscale, but even more importantly, its lossless and supports 8bit transparency. I often use this transparency feature to create logos or banners (See wikipedia for more details).

However one thing I noticed was that they can be considerably larger than GIF or JPG images… significantly larger; but this can  be easily rectified. I run OS X, so I don’t have an opinion on any windows apps, but

PNG Crusher

is brilliant at taking PNGs and recompressing them. All you do is drop and drag your file and PNG performs its magic. For example:

40Kb before compression

28Kb after compression

This was quite a complex image, on something as simple as a logo I’ve seen a reduction in size 9x times over (8Kb from 72Kb). This dramatic decrease in size will help my site to load faster, reduce the bandwidth required by myself and the user. Efficient!

Having written a small post about favicons, I stumbled across some interesting information while looking through works apache error log. Besides being HUGE, it was also annoyingly filled with favicon.ico missing statements.

This wouldn’t be such a big problem, if it wasn’t for the fact that I have never referenced a file called favicon.ico (for that matter my favicon are .PNGs). It turns out that IE5 by default looks for ‘favicon.ico’ in sites root directory, regardless of whether you specified a meta location or not (see the post below).

The solution?…. Nothing elegant I am afraid. Your chooses:

1. Place the ‘favicon.ico’ in your sites root directory
2. Inform apache that the file isn’t their and too not even bother looking (http://www.trilithium.com/johan/2005/02/no-favicon/)
3. Create a dummy favicon.ico and place it in the root directory

I hate IE…

Often the forgotten final element to a website, the favicon is the ‘je suis je reste’ (to quote del boy). It allows a mini icon to be displayed on your bookmarks and in the corner of most popular browsers tabs..

To maximise compatibility it needs to be 16×16 pixels, and either a Jpeg, gif or png (I prefer the later).

<link rel='icon' type='image/png' href='./Images/favicon.png' />

Place the above code (with the correct path) in between your <head> tag for favicon goodness

So today I was playing around with -moz-border-radius and I was having problems with text touching the border of my div, ideally I wanted some sort of internal margin… ok so, padding I thought… 5px or so should do it.

I would have been right as well, except I had defined a width for the div and when used in combination with the padding property it was causing the div to expand beyond the width I had specified, ugh!

To get around this I had to take the border size into consideration:


border:                      4px #BB834B solid;
padding:                     10px;
width:                       180px;


would become:


border:                      4px #BB834B solid;
padding:                     10px;
width:                       170px;


8px have been deducted for the left (4px) and right (4px). This makes sense, but it would make more sense for the borders to be deducted from the width, not added. If anyone can suggest a better method, I would be very interested!

UPDATE:

As it happens, I have found a better solution, rather than deducting the borders from the width… simply don’t determine a width, but wrap the div around an outer div (which has its width set). That way the inner div will not expand when you add the padding:


<div class='outer_div' style='width: 200px'>
<div class='inner_div' style='border: solid 4px #000000; padding: 10px;'>
</div>

</div>

Ok, but of a blog entry here, no real code, just some stuff that’s been rolling around my bored little mind… Each day I find myself using three tools more and more.

• Google Analytics
• Google Webmaster Tools
• Google Adsense

These 3 free powerful programs break down just about every useful piece of information I could possibly need, even now I am still only scraping the potential of these programs (especially ‘analytics’). But with them I can see is visiting my site, where they came from, I can see if they left the site immediately, how many pages they visited… etc etc.

Imagine what google is going to be able to do when AI kicks off, with all this information and statistics (not to mention access to anything and everything that isn’t made secure)… that is a scary thought!

I know this is common sense, but I something to share and this was the most relevant thing I could come up with. More and more I find myself using these simple divs to display error messages to the user.

<div class='error'>Blah Blah Unsuccessful</div>
<div class='success'>Blah Blah Successful</div>

And then the usual little bit of CSS to format the text (in relevant colours).

.error { color: red; margin: 10px; }
.success { color: green; margin: 10px; }

Simple but highly effective

One thing I often find myself having to look up on the web is how to center block content, without using tables or ‘text-align’ and using CSS (I believe that tables should only be used for displaying tabular data, not formatting entire sites).

To do this, we simply, create a main div to wrap everything else in, set a width and then set the margin-left and margin-right properties…

#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
<body>
<div id='content'>
<div id='foo'>Some content</div>
<div id='foo_2'>Other content</div>
</div>
</body>

Its important the width property is set, but it needn’t be ‘px’, ‘em’ or ‘%’ will also work. If you want to center text (non block content), then use:
text-align: center;