Our Process

We pride ourselves in knowing what works best and how to apply this technology to your industry. Below are a few thoughts on how we approach web design. Most of our clients find this useful in understanding the intricacies of web design.

- Ken Henderson

Until recently (within the past year or so) the process of converting good graphic design into a dynamic website was well understood. The limitations as to what elements would render consistently across the various internet browsers was well documented. For example, if you wanted rounded corners or color gradients on certain elements (these are just 2 examples, there are many more) of your website, you needed to construct those elements with individual images and piece them together to form a rounded rectangle. But we are now in the age of CSS3 which allows us to create many of these effects without the use of additional images. You might be thinkings..... why should I be worried about additional images? ... the answer is quite simply that the more images you have on a page the longer the page takes to render. And as your page rendering time increases, you run the risk of frustrating your clients and losing your ranking in Google searches.

So we believe CSS3 truly helps take web design to the next level, offering a huge variety of features that simplify the way we design for the web; ultimately reducing the cost for our clients. Here's a quick example to show you what I am referring to. Example Page 1 takes you to a page with no style. Example Page 2 adds some minimal CSS style to the page (what we in the web design industry might consider web 1.0 style). But Example Page 3 shows a page that is very aesthetically pleasing, with drop-shadows, rounded corners, and styled images (more along the lines of what we would consider web 2.0). The only difference between example 2 and 3 is the use of CSS3 elements (no additional images). The difference with CSS3 is that we no longer need to use images to create rounded corners and gradients, which makes development and subsequent changes much faster/cheaper!

So you're probably thinking that it sounds pretty simple....just use CSS3, right? Well, not all browsers render code the same and are compatible with the full suite of features that new standards such as CSS3 offer. The most problematic browser is Internet Explorer (IE). IE is not compatible with the majority of features being flaunted by CSS3 (and HTML5). Check out this article on the full list of features that the various browsers are compatible with CSS3. So the question becomes, how do you design for Cross-Browser Compatibility and consistency with all of the major internet browsers? Keep reading.....

Cross-Browser Design

Good Cross-Browser Design means designing a website or application so that it looks the same in all internet browsers. People today use many different browsers. Windows users could be using Internet Explorer 6 (IE6), IE7, IE8, IE9 (coming very soon), Mozilla's FireFox, Safari, Netscape, Google's Chrome, etc. Mac users could be using Safari, Mozilla's FireFox, Chrome, Opera, webkit, etc. The problem is that each of these browsers have a slightly different way of rendering the code on the page, and some of these differences can make your page appear broken. There are a ton of articles that explain these differences in detail ( here's a good example ), so I'm not going to go into detail about this. Rather, I am going to explain how we at Kenderson design with these limitations in mind.

So the challenge (which we pride ourselves on excelling at) is to know the limitations of each of the browsers and develop the website/application so that it appears the same no matter what internet browser your you are viewing it from. At this point you might be thinking to yourself...yeah, I see there are a lot of browsers available, but don't most people just use the latest and greatest one? Well, the short answer is not really. Much to our chagrin, most of the world still uses the dinosaur of browsers; internet explorer. Below is a quick view of the breakdown browser statistics as of June 2010 ( Source ).

So now that you understand the challenge, it's time to present you with the three possible solutions.

  • The Old Way. Since the majority of internet users are using internet explorer, and internet explorer hasn't adopted any of the CSS3 elements, some designers feel as though the world is not ready for CSS3. These designers will usually fall-back to the older way of creating a website/application; which will inevitably have slower page-load speeds.
  • In with the New and out with the Old. Then there's "the other side of the extreme". Some designers feel as though the world should automatically and instantaneously come up to speed with the latest and greatest standards (CSS3). These designers will push the features of CSS3 and produce a website/application that has great page-load speeds. The problem is that these sites/applications will not appear the same in all browsers. Rounded corners will become square, gradients will turn into flat colors, etc. These web designers see this difference in functionality as a simple degradation in style.
  • A Hybrid of New and Old. This methodology mixes both the old and new. By constructing the code to use CSS3 on browsers that recognize it, and reverting back to images and slower page-load speeds for browsers that require it, this method respects the graphical design of the website/application and assures that it is rendered identically across all browsers. The downside behind this method is that it requires more work and attention to detail when constructing the website.

As you might have guessed, at Kenderson we design using the 3rd methodology. When working with clients who want a new website/application, or to refresh the graphical design on an older website), we go through many design iterations to assure the customer gets the design they want, and in the end it's our responsibility to assure that that design is properly translated to the web; and we take that seriously.

Below are a couple visual examples of what we are referring to. Using the front page of this website (done mostly using CSS3), we first show how the page looks in Mozilla FireFox, then we show the appearance in IE8, and finally we show the appearance in IE8 with the CSS3 shortcomings patched up.

ABOVE: Kenderson Site in Mozilla FireFox

ABOVE: Kenderson Site in IE8 (WITHOUT hybrid approach)

ABOVE: Kenderson Site in IE8 (with hybrid approach applied)

In conclusion, the take away from this article is that you (the customer) should be aware these differences when hiring a website designer/developer, and make sure that they are delivering truly matches your expectations.

© 2013 KENDERSON.NET | ALL RIGHTS RESERVED
KENDERSON SAYS
  • Twitter Updates
X Close this Warning

Notice! You're currently using Internet Explorer as your browser. Due to security and performance considerations, we and many other organizations recommend upgrading your browser to Mozilla Firefox. Firefox is free, secure, and will provide much faster and better viewing quality!