When I design my websites, I always make sure that they render properly across all web browsers including; Firefox, Internet Explorer, Safari, Google Chrome and Opera. This is an absolute necessity because my sites get visitors from all of these browsers (some more than others) each and every month. Here is a list of the most popular browsers used on my sites for the month of April (along with some pretty pie charts).
There are a lot of things these type of stats tell us about internet users and the browsers they choose. It’s clear that people who use Google Chrome or Firefox update to the latest version much more quickly than others (mainly because it’s an automatic update). We can also see that most Internet Explorer users only update to the latest version once it’s included in a Microsoft update. The most used browser on my sites is still Internet Explorer however, Firefox is a very close second with Chrome and Safari battling for third.
As far as web design goes, it’s clear that every site created needs to be optimized for every browser out there. It may be frustrating and it may be tedious, but if you want to be taken seriously as a web designer, it’s something that needs to be done.
In the last few years more and more of my web design clients have been asking me to add “that little logo in the address bar” on their websites. That “little logo” is called a favicon and is used more widely now than ever before on recent web browsers such as; Firefox, Internet Explorer and Google Chrome.
Favicon’s are actually very easy to add to a site, the difficult part is having to create your logo in such a small little 16px by 16px box. The best logos to use are obviously ones that are close to being square. As long as you are able to highlight the main part of your logo in a 64px by 64px square, you should be good to go. Most web designers are familiar with creating favicon’s for their clients, so if you’re unsure whether or not they’ll make you one just ask.
If you have to do it yourself, here are the quick and easy steps to getting it done;
1) Open Photoshop or whichever photo editing tool you use.
2) Take your logo (or a certain aspect of your logo) and put it into an image sized 64px by 64px.
3) Save that image as a .jpg in the highest resolution possible.
4) Go to a site like Favicon Generator and upload your saved image.
5) Save the image they create in the images folder in your websites directory.
6) Open all of the pages on your site and add the code to the header on each page.
<link rel="shortcut icon" href="images/favicon.ico">
7) Open your site in a web browser and you should be able to see the favicon you created!
If you’re having trouble selecting what to use as your favicon, here are a couple I’ve created for clients;
If you’re still stuck, feel free to contact me and I’ll gladly help you out with your add a favicon to your website.
The other day I was discussing a custom web design with a client and I was showing him a few different types of fonts he could choose from. He asked me if he could pick one from the list of fonts in his Microsoft Word document and I had to explain to him that he couldn’t because it wasn’t a browser safe font. You can guess what his next question was; “what’s a browser safe font?” I went on to explain that browser safe fonts are fonts that can be used across the most popular web browsers like; Firefox, Safari, Internet Explorer and Google Chrome without any issue. I then proceeded to show him the following list. I figured I’d post it for anyone else curious about the best picks for fonts on the internet.
All of these fonts are in their standard format (no italics, bold etc.) and have a font size of 18px.
Comic Sans MS
Lucida Sans Unicode
Times New Roman
MS Sans Serif