As a web designer/developer we often tend to build our sites and systems based on the dimensions of our own monitors, not realizing that the majority of users do not live on the web 24/7 like we do and therefore do not have the power machines we tend to have. This, sadly, also means that they often do not own monitors with the same resolutions as ours.

Today, an interesting new google project was brought to my attention, so I thought I should highlight it some more.  It’s called Browser Size and it shows us based on google data what the most common resolutions are, that are used on the web today. (Well, what resolutions visit google each day)

To make a point. I am writing this entry using an AOC 23″ monitor with a maximum resolution of 1680 by 1050. I love the real estate for displaying all sorts of data and the bright display shows me the colors clearer than 99% of monitors out there. Now, it’s great for me, but on the other hand it also means that when I think a site’s colors are too bland or too bright, it might just mean that to the average web user it looks just right. Now, this has more to do with colors than with resolution so we may talk about that another time. If you want to read more about what colors to choose for your designs, click here.

Back to resolutions. The new google project is still in it’s labs phase but it brings up a good point. The majority of visitors are still using monitors that have resolutions below 1024 by 768. When designing our sites, you often see that designers are stepping beyond that with designs that are 1100 pixels wide or sometimes even larger. We need to realize that the majority of people will only be able to see a small part of the screen and as a result of that, our layouts must be adjusted. We can still (and IMO should still) design large layouts, but we have to place our content appropriately so users have access to the important links and buttons, no matter what their resolution.

There are a few tools on the web that can help with this. Google’s new Browser Size is partially useful in that it gives you a nice map of sizes, but the problem I immediately noticed is that it’s not yet able to properly display the map for sites that are centered in the display. Considering that most sites we see these days are centered on the screen, I’m betting they will fix that shortly. If not, tell them to by leaving your feedback via email.

A great tool to help you with web development in general is the Web Developer Add On for Firefox. If you don’t have it yet, get on firefox and download it now. Aside from all the awesome web dev tools it contains, there’s a small button that’s among my favorite options and it reads “Resize”. It allows you to set the dimensions you want to see the page at, and once you submit a width and height it resizes the browser window so you can see what a user using that resolution will see on their screen. It allows you to easily check your design at different viewing sizes. The only drawback is that you have to make it a flat image first so you can view it in the browser.

Another item to pay attention to when designing for different resolutions is that designs that fit on small screens, end up having a lot of empty space around them. A good way to avoid the site looking drab on large monitors is to add a simple background graphic that is larger than the main design so on larger monitors the design comes into view and keeps the site looking nice.

Taking into account what hardware your visitors are using can make a big difference in how they interact with your site and can directly impact how often users come back or what links they will actually click on. This in turn affects the revenue you can generate from your sites, which is obviously quite important as well. Now, if only we could convince everyone to just upgrade to better monitors like ours.

Random entertaining link with interesting old information about monitor resolution. Note they have the standards compliant button at the bottom

More informational wikipedia link. Not as entertaining, but the new resolutions are pretty awesome.

If you want to see how screen resolutions have changed over the years, try out the w3schools statistics.

After quite some time in development, the SureFireSource site is finally coming along and I’ve finally found the time to write something useful. I had been wondering what would make a good subject to start with for writing  a Web Development blog and then it hit me. Web development isn’t about just about the code, the designers and programmers. It’s not about driving hordes of zombie visitors to your site and have them leave because they’re not interested in what you have to sell. The web is about ideas.

Recently I came across TED, a great collection of free speeches by many experts in their respective fields. This site was built to inform anyone, who’s willing to listen, about amazing innovations around the world. These innovations and incredible leaps in progress all started as someone’s idea. Sometimes a fleeting thought they didn’t get back to until many years later, and sometimes a massive thought that they spent decades working into a viable product. Any of the popular sites such as Amazon, Google, Facebook, Twitter and hundreds of others, began as ideas and grew because their creators put all their time and effort into making them a success on the web.  I have found that great ideas capture our imagination, even when they are about subjects we would normally not think twice about, and great ideas can lead to very successful projects if we are willing to put in the time and effort required.

If anything, these sites should teach any web developer or designer, that a site is nothing without a great idea behind it. You can have a site that is perfectly standards compliant, has the best bug-free code and can process any data you throw at it…and it can still be useless. If your idea doesn’t apply to the majority of you visitors, no one is going to use it. Now, we all dream to build sites that can be as successful as those I mentioned above, but of course, it’s a pretty big task to accomplish, especially because sites like KillerStartups remind us of how many new sites are released into the wild every single day, so building something new to stand out above the rest is hard to do.

Now, we’ve all run a search on google to find instructions on how to build something on the web. If you haven’t…um…just click here…. Anyways, the issue is that sometimes tutorials on the web are poorly written, don’t contain enough information about the subject, or simply have it all wrong and we spend endless hours wasting our time on some code that is just not going to work.  More often than not, they provide advanced information, so a newbie developer has no idea which way is up.

That’s where SureFireSource.com comes in. The goal here is to inform web developers and designers of relevant information about our field. The main site will be used to post tutorials about anything to do with the web. Every tutorial will be verified by experienced programmers in the supported languages, before being posted on the site.  Contributors will be able to use the site to promote their skills, build a network of web developers who understand the tools of the trade or who are interested in teaching others their skills. Initially focused on programming we will aim to grow the site into other areas as time passes.

This blog will aim to inform the web-savvy crowd of new developments in our field. The difference here is that we will not be posting every article about every little development. We aim to summarize articles we read into concise information that we can then share with you, the reader. The goal is to give you the information you need, after we trim the excess waste from it. Your comments will help drive our posts and keep us on our toes so we can provide you with the right information.

In laymen’s terms…we aim to Teach, Learn, and Grow…