Everyone wants to have the fancy stuff on their site, don’t they? Nice images, gradients, that fancy serif font the MD saw on the London based digital media agency with the cool anti-aliasing. It all looks nice on the design but when it comes down actual putting together the nuts and bolts PHP, XHTML, CSS etc it may not always be possible. Someone, somewhere is going to be disappointed.

The question of typography and web safe fonts is one that has a number of different solutions to help achieve that look the designer had in his mind’s eye, each with pros and cons. MightyMeta has taken much of the pain out of deciding which is best with this guide to getting a web safe font and related cheat sheet: http://www.mightymeta.co.uk/introducing-the-web-safe-font-cheat-sheet/

I was in a meeting the other day, where I was reliably informed that the font face Arial is in fact identical to Helvetica; they are one and the same. At the time I thought this was not the case but the re-assurance was such that I was open to accept that maybe I was wrong and they were in fact interchangeable.

Upon further investigation on the matter I discovered the following information about these two popular fonts:

Helvetica

Designed in 1957 by Max Miedinger. Helvetica’s design is based on the font Akzidenz Grotesk (1896), and classified as a Grotesque or Transitional san serif face. It was renamed Helvetica (Latin for Swiss) in 1960 after being revised.

Arial

Designed in 1982 by Robin Nicholas and Patricia Saunders for Monotype. Was originally called Sonoran San Serif, and was designed for IBM’s bitmap font laser printers. It was supplied with Windows 3.1 in 1992 and only recently replaced by Calibri as part of the Windows Vista operating system.

Now whilst there is certainly common similarties between many of the two sets of characters there are very clear differences for ‘a’, ‘G’, ‘Q’, ‘R’, and ‘1′.

Of course as with many things in life there is always an element of ‘borrowing’ from whats gone before it would not be fair to say that Arial is a copy of Helvetica. However there are certainly not the same font; as Mies Van Der Rohe remarked: “God is in the details”. It always pays to check.

Related Articles:

• How to spot Arial
• Helvetica wiki entry
• Arial wiki entry

I recently read this post: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/ which talks about using your reset CSS in a slightly different way; by making it your default styling.

Most of Miromedia’s sites, up to this point, have been built with a reset.css that attempts to start off a basic site which is consistent across browsers (based on Eric Meyer’s own reset.css). Once this reset is done we apply our own styles for the website framework, then the client specific CSS as dictated by the design. A fairly common approach.

Now, however, our philosophy has changed so that the reset becomes the cross browser baseline as well as the default setting for framework and CMS. This approach not only reduces the amount of CSS used in the stylesheet it also makes it much easier to read and diagnose problems. In addition to this we now place all website frontend CSS into one stylesheet, removing the need to use the @import rule. This reduces the number of HTTP requests and also helps prevent download stalling if a stylesheet cannot be found.

Changes like these help us to improve and develop our flagship product. Even at Miromedia we are constansly learning new things and new ways to tackle problems and increase performance.

Following on from Richard’s demonstration of the broad share of the browser market that Internet Explorer has, it is worth noting that we developers and the designers still need to cater for the relic that is IE6. Whilst your everyday user will probably be using version 7 or 8 or more likely Firefox, the corporate sector are still tied to the old browser due to the massive project of rolling out a new version in a corporate environment.

ZDNet has this to say on the matter: http://blogs.zdnet.com/BTL/?p=31328

So, despite thinking that we should code to the latest browser technologies and new web standards, we should always keep in mind the clients main customer market and ask the question ‘what is the minimum browser that the site should cater for’.

One good reference site for all things that IE doesn’t comply with is here: http://www.positioniseverything.net/explorer.html

Here’s just a few posts that we’ve come across this week in the world of CSS and design:

Tips for desiging in the browser from Design Shack: this includes some interesting ideas on how best to design sites that are cross browser compatible and includes Adobe’s BrowserLab and the very useful Typetester which allows you to dynamically compare fonts in the browser.

MakeUseOf have this post about Mitto, the online secure password manager.

Another great post from Smashing Magazine talking about  understanding and optimising your sites performance.

In life there are generally 2 groups of people: tidy ones and untidy ones. Those who fill the dishwasher, pop in a tablet, turn it on and those that leave dirty cookery stacked high in the sink to go mouldy and turn the kitchen into a festering hole. As a web developer you must be the former. You must be clean, both hygienically speaking and in terms of the markup and coding you produce.

Creating websites with clean and concise code which conforms to the latest web standards is paramount to producing high quality, fast and SEO efficient sites. A site that is created and can be validtaed using W3C’s validation tools will aid future proofing and accessibility. A badly created HTML page may work in the current crop of browsers but that does not mean that future version will be so forgiving.

Always write XHTML making sure it is as stripped down and lightweight as possible, use no unnecessary tags or attributes, after all a Formula 1 car has no radio or cup holders (it doesn’t need them). All styling for a page should be contained within style sheets using validated CSSand applied to the page using either class names or by tag Id. Not only will this help any future development that you may make to a site it also means that any other competent developer can look at the code and easily understand how it work.

Spending more time to produce the best output you can will not only benefit your clients but will also benefit your own team of developers, easing any future updates and giving SEO potential a head start.

It’s that sudden moment of realisation that the copy and paste you’ve just done has over written a newer version of a file and you don’t have a backup! All you want to do is cry out loud but when you’ve have no backup no one can hear you scream.

This happened to me recently (I know; you should always work with a backup but I was just making a quick change and thought it wouldn’t be a problem) and I copied over a CSS file that contained site specific styling and subsequently lost the formatting that had taken a fair while to put together. I’d like to point out that this happened on our development server so no live sites were affected but the situation could very well apply.

I was stunned into silence for at least 20 seconds before coming to terms with my heinous error and getting on the internet to try and retrieve a cached version of the file from one of the many browsers on my machine. This is something that I remember doing in the past and was hoping it would help me out again. However my browsers had other thoughts and were proving to be less than helpful:

IE7 seems to be deleting my session cache once I close the browser down. I had already deleted the Firfox cache whilst making the CSS changes that I copied over. I was going to look at Safari as a last resort so turned to Google Chrome. This proved to be my lifeline as a quick trawl through the search pages returned for: “cached css files chrome” gave me this: ChromeCacheView.

The small exe file runs up and interrogates the cached indexing history for the browser and displays a list of all the content you have viewed, including Filename, URL, Type etc. From this (large!) list of content I spotted the CSS file I was after and using F4 copied the file to a location on my desktop from where I could view its contents. Although it was an out of date copy it did provide me with the much needed complex styling I was after.

So, after taking some time to reinstate the changes lost, I was able to recreate the CSS and the website was back to the way it was without anyone noticing.

Of course for the eagle-eyed amongst you the lesson for today is: Think twice before copying over a file and never, ever do anything without a backup.

It’s always nice to find a fix for a Internet Explorer specific bug although not nice the amount of time it takes to find. This particular one relates to setting the height of a <div> containing a background-image which, not unsurprisingly works fine in FireFox.

Consider:

Which renders thus in IE7:

Note the whitespace beneath the blue image despite this image being 13 pixels high.

Now the solution is as simple as adding overflow:hidden to the divHeight class!

Simple but effective!!