One of the most frustrating aspects of web design is ensuring compatibility across different web browsers. The most frustrating for our team to date is the issue with Internet Explorer 7 and changing the DPI setting of the display in Windows.

The computer is a Dell XPS laptop, and it turns out that the DPI setting from the factory is set to 120 dpi. While browsing with Firefox, the web pages looked just fine. But when we fired up IE and had a look, the font sizes were scaled up dramatically and provided a jagged, low quality effect to fonts and images. The easiest fix was to change the default display setting from 120 dpi back to 96 dpi. This maintained the web page display with Firefox and improved the IE display of the web site so that everything looked proper. But we can’t go suggesting that all visitor change their display setting before coming to our web site.

This raised some questions;

How many of our visitors are going to be visiting the site and experiencing the same problem?

Is there a way to determine the dpi setting of a visitor and reformat the page so it looks proper?

Based on our research across the web, the good news is that not a lot of manufacturers ship with the display set to 120 dpi. But Dell and possibly Toshiba are among the manufacturers that ship units with this setting from the factory.

We also discovered a couple of suggessted fixes for this that can be inserted into your CSS or HTML to try and compensate for the change. William’s Blog had a good post on how to handle the scaling and sizing of fonts using a conditional staement in your CSS file. We found another good article at Leading Edge Scripts that provides a Java Script to insert into your HTML file to accodate for the issue.

Is this a hint of the continuing issues to come for Web Designers that want to provide an equal experience regardless of the users browser? Let’s hope not. We will continue to monitor this issue and look for other solutions. Until then, if you have a proposed solution or suggestion, we would love to hear from you.

Related posts:

1. Getting to Grips with CSS
2. WordPress: Sticky Posts
3. Slow Websites and SEO

Related posts brought to you by Yet Another Related Posts Plugin.

I can’t tell you how many times I have been designing a web site and come to a point where I say to myself, “I wish I had a really cool looking button for this section.”

So I start up Adobe Photoshop, of which my skills are somewhat lacking, and I attempt to create a stunning button. Hours later, I have a so-so graphic that looks like something a 3 year old drew with a crayon. Not my desired result and a major waste of time.

So I was very pleased to run across this fantastic online tool for creating very cool looking buttons. It takes very little effort on my part, but looks like I know my stuff when it comes to creating graphics.

In four easy steps, you too can have a Web 2.0 button that looks as stunning as the one shown here.

Step 1 – Select the size of your button with the handy slider bar

Step 2 – Select a color for your button

Step 3 – Optionally use a predefined, or uploaded, icon in the button and size it

Step 4 – Select your Text, font style, size and color

Click ‘Apply’ and there you have your newly created, stunning looking Web 2.0 button. Don’t like it? Then revisit any step and click ‘Apply’ again. When you like what you see, just download it to your computer by clicking the ‘Download’ button.

What could be easier? And better yet, what else can make me look like the web design professional I wish I was?

Related posts:

1. 6 Online Web 2.0 Button Generators
2. 5 Online WordPress Theme Generators

Related posts brought to you by Yet Another Related Posts Plugin.