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).

Overall – April 2011
april browser overall
37.08% – Internet Explorer
25.40% – Firefox
14.31% – Chrome
13.90% – Safari
3.57% – Opera
5.74% – Other

Internet Explorer Version- April 2011
ie browser april
73.81% – 8.0
14.50% – 9.0
6.96% – 7.0
4.71% – 6.0
0.01% – 5.5

Firefox Version- April 2011
firefox browser april
48.18% – 3.6.16
22.07% – 4.0
4.83% – 3.6.13
3.65% – 3.5.18
21.27% – Other

Chrome Version- April 2011
chrome browser april
56.93% – 10.0.648.204
25.16% – 10.0.648.205
7.20% – Other
4.55% – 11.0.696.60
1.54% – 11.0.696.57

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;

M.E.Y FaviconTony Rauti FaviconCaptain Cichlids FaviconWindsor Squash FaviconSebas Favicon

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.

If you’ve been keeping up with my @sebas_agosta Twitter account lately, you’ve probably noticed that I’m currently creating a brand new custom web design for the Montessori Early Years. You can see the current website design I did about a year ago in my portfolio. As you can see the site already looks out-dated and is clearly not some of my best work.

The new design includes much “softer” and “inviting” colors as well as much better coding on the back end. The site is now completely built using a DIV based layout and CSS. One thing that I was really excited to change was the photo gallery section on the site. The script I used for the first design was very tedious and quite frankly a pain to update. The code I’m using for the photo galleries now is called Lightbox and more specifically Lightbox 2.

Most of you have probably seen some variation of Lightbox online when searching through photos on certain sites. Facebook now uses a form of Lightbox for it’s photo galleries as well as many other mainstream sites. Lightbox is coded using Javascript and CSS and is very simple for even the most beginner web designer to implement on their page. All the information on coding and files for Lightbox can be found on this site.

Lightbox will make your photo galleries much more elegant and simple to navigate. I’d recommend Lightbox for anyone who has thumbnail photos they want expanded when clicked. Give it a try and if you have any questions on it, feel free to comment below!

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.

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Palatino Linotype
Tahoma
Times New Roman
Trebuchet MS
Verdana
Symbol
Webdings
Wingdings
MS Sans Serif
MS Serif

Many of you have probably visited some of your favorite web sites on your iPhone or Blackberry only to find it looks different than the site you’re used to seeing on your PC or laptop. That’s because the site you’re visiting has a simpler version created just for mobile devices. I myself created a mobile web design for my portfolio site, feel free to check it out on your phone or even on your computer by going to Sebastian Agosta | Mobile Version.

The reason more and more companies and individuals are creating mobile web sites is because more and more people are using their mobile devices to browse the web. This article on mashable shows how some analysts think people will surf the web on their phone more than on their desktop by 2015. It’d be silly for to create a web design for your company and not have a mobile site setup.

If you do want to get a mobile version done for your site and it’s not being designed or developed by me, I want you to keep a few things in mind.

1) Be sure to create it so that there isn’t too much scrolling. I wouldn’t make my design much longer than what would fit on your basic iPhone or Android device.
2) Make the links large enough that someone doesn’t have to zoom in to click it. As you can see on my mobile site the links are the entire width of the page.
3) Condense your mobile site to show only what’s absolutely necessary. I find that some people who do mobile web design forget that people are surfing on their phones and probably aren’t going to spend hours searching through the 100 pages you have. Keep it sweet and simple. My mobile version only has 5 pages.

There are a few other things I would suggest, but those are the main 3. If you’re curious about what else I would add or remove from a mobile web design feel free to contact me. I’d be happy to give you a free consultation.

Anyone else have opinions on mobile design? Comment below!

« Go BackKeep Looking »
  • Advertisements

  • My Twitter Feed

  • On Facebook