Does Size Really Matter?

This article examines the importance of creating websites that “fit” in every screen resolution and are compatible with the most popular web browsers in use today. Included are some tips on how to achieve correct sizing in all screen resolutions and cross-browser compatibility.

Does size really matter? The answer is yes when referring to websites and web design. One of the most difficult and frustrating aspects of web design is developing a site that is compatible with most, if not all, of the commonly used screen resolutions and most popular web browsers. This can seem overwhelming when you consider that there are over forty screen resolutions and even more different web browsers to choose from. The trick is to identify the most common screen resolutions and the most popular browsers being used today and design your site accordingly. 

 

   *600×800 (1% of users)

   *1024×768 (20% of users)

   *76% of all users are using higher screen resolutions

      *1280×1024 (18.2% of users)

      *1280×800 (17.3% of users)

      *1440×900 (10.5% of users)

      *1680×1050 (10% of users)

      *1920×1200 (4.6% of users)

      *1366×768 (3.6% of users – including me)

      *1920×1080 (2.3% of users)

      *1152×864 (2.1% of users)

      *1600×1200 (1.4% of users)

      *1280×768 (1.2% of users)

Most Popular Browsers in 2010:

   *Internet Explorer

   *Firefox

   *Chrome

   *Safari

   *Opera

Imagine that you have just finished designing your entire website, and it looks perfect to you which is very gratifying! You’re proud of the hard work and all of the hours you put in, only to find out that other people are having issues with its functionality and usability! Now you must start all over again from scratch and attempt to make it multi-screen-resolution and cross-browser-friendly, as functionality and usability are two of the key components in building an effective and efficient website. The success of your site relies heavily upon the visitor or user’s experience, and if it does not perform well in most screen resolutions and popular web browsers, you are losing traffic and sales. This probably seems to be a rather daunting task, but don’t let yourself become overwhelmed because there are relatively simple steps you can take to ensure your website’s usability to all its users.

It is vital to ensure that your site fits in every screen resolution, as it can lose its appeal, functionality, and usability if it does not. If you disregard screen resolution, your site can appear to be a jumbled mess in some of them, which is sure to drive visitors away. If the site is not visually appealing and navigation is broken up or placed incorrectly, there is no reason to stay on the site. It is imperative to design a scalable website (or stretch layout), which means it fills the page no matter what screen resolution it is being viewed through. 

There are two solid methods you can implement into your web design to achieve this goal. The first and simplest way to build a scalable website (great for beginners) is through the utilization of HTML tables. When you create a page using tables, do not size them in pixels, as this gives them an absolute, fixed size on the page, and they will take up that exact amount of space each time the page loads. Instead, use percentages to size your tables. Percentages are relative to the size of the page. For example, if you create your table to take up 100% of the page, it will always take up 100% of whatever the page size is in the different screen resolutions. This is an excellent way to ensure that there is no side-scrolling on your website regardless of the screen resolution your visitor is using. Your visitors are unlikely to stick around for very long if they have to side-scroll in order to read all of your content.

If you are a web design professional or an advanced user, it is optimal to use CSS (Cascading Style Sheets) to design your website. CSS, also known as table-less design, replaces HTML tables with div tags. In addition, CSS layouts are very clean, have exceptionally fast load times, and follow W3 standards. Though the method and coding for HTML and CSS differ, the concept regarding the scalable websites is the same, except instead of applying percentages to your tables, you apply them to your div tags.

Ensuring your website’s cross-browser compatibility is also critical and is not as difficult as it may sound. The first step is to download the most popular browsers (listed above) onto your computer. It is absolutely free to download these browsers, and they will save you a lot of time and potential pain during the web design process. If you use one of the Dreamweaver programs for your web design projects, you can edit your browser list and add each of the new browsers to the list. This will enable you to preview every page you create in Dreamweaver in each of the browsers you have listed. If you do not a use a program that offers this feature, you can launch each browser individually in order to view your site. Another less reliable resource for testing cross-browser compatibility is to utilize sites like Browsershots.org. The advantage to using a service such as this is that it provides you with more web browser previews of your site than you probably even knew existed; however, the disadvantage is that your project is likely to expire before any screenshots have been uploaded to your account.

It is not a bad idea to not only preview your website in each of the popular browsers, but also check it in each of the screen resolutions available on your computer. For example, once I have a completed webpage, I select a browser to preview it in, and then I go through each of the screen resolutions in each browser to ensure design competency, functionality, and usability. Doing this can be a lengthy and tedious process; however, it will ultimately save you time because you won’t have to worry about fixing an entire website once it has already been completed because it is not multi-screen-resolution and cross-browser-friendly. It is better to take the extra time in the beginning to do it right the first time than it is to have to completely redesign a site which you have just finished designing. Taking these simple steps will aid you in avoiding that frustrating process.

 

Danielle Dandrige writes for WE magazine for Women and now Women in ecommerce. She wrote this article to help our members and visitors do more business on the web by appealing to a broader online audience of ewomen. Her website design and marketing strategies help women (and men) create websites that work.