Object Oriented Web Design & Development

Posted on

To create spectacular websites isn’t a simple task. It takes coordination and a full understanding between all parties involved. For the web developers out there, I’m sure your job, at times, can seem hard enough as it is. That is why I will be introducing you to the concept of Object Oriented Web Design.

My Personal Experience

To start off, I will tell you a story from my personal experience with a designer to outline the problem. Recently, it occurred to me that I have a relationship with one of the best web designers I currently know. We were both working on a website together, he was designing the website with Photoshop and I was creating the website from his PSD files. It really was trivial work. However, I realized that my job was just a little bit harder than it should have been. Not because the design was difficult to code to HTML, but rather, the way the design was put together and styled.

For the most part, the design of the website fit together very well and it all seemed consistent. There wasn’t really anything to complain about. The design was very typographic, so the text had more than one type treatment and fonts and styles, etc… This is where the design was slightly inconsistent, on one page the font size could have ranged from 14pt to 45pt, and on others, it might have varied a few points from those figures. This is the same case with the font weights, bold fonts were used in some places and light fonts were used in others.

Ok, Why Does This Matter?

The point that I am trying to get at is simple. Design the pages of your website using uniform styles. Styles that a developer will be able to re-create and implement easily. One of the biggest things of building a website is bringing the best browsing experience to the user, this involves creating a beautiful website, while keeping page load times down. One way we can keep the pages loading faster, is by optimizing our CSS.

This is the part where I start talking about Object Oriented Web Design. Just a warning, if you are only a designer, than this section could get a little technical for you, but you need this. This explanation will make you a better designer, and even more so for developers.

What Is Object Oriented Web Design?

I am sure most of you have heard of OOP (Object Oriented Programming). When designing a website, the entire website itself is an “object”. An object can be described as a noun – a person, place or thing. In this case, a website is a thing, obviously. Furthermore, each separate piece that make up the design of the site can be their own object also. Take for example something as small as a button. Think of what creates a button. A button may have a border, a border radius, a label, a font size, a color; the list goes on.

A great analogy for a website that contains many objects wrapping one another is the nesting doll.
Object Oriented Web Design

The Nesting Doll is identical in theory to HTML. The largest doll would be the html tag, the doll that fits directly inside the largest would be the head tag, and a smaller doll yet would be the title tag, and so on.

<html lang="en-US">
    <head>
	<title></title>
    </head>
    <body>
 
    </body>
</html>

As a developer, of course you know that in CSS, each element that is inside another, will usually inherit a style that is applied to an element that encloses it. You can use this to your advantage by using a CSS Reset, like Normalize.css.

What kills me the most is when I see developers code they have written that resets all sorts of different elements multiple times. Repeating code, completely ignoring the DRY methodology. An example could include resetting the margin to 0 of every element individually. This would start to create a larger file size if you website were large enough.

The OOWD Solution

In order to put OOWD to use, you need to learn how to break each object up by its own properties. Say you have some buttons that you re-use on your site, but they do not all look the same. They can have different styles, as we discussed above. The image below illustrates the separate styles that we may apply to an individual button to achieve the style we are looking for in that particular instance.
Object Oriented Web Design

<input class="purple rounded small italic" type="submit" value="Submit" name="submit" id="submit">

The code above demonstrates how you would create a button that resembles the center button in the image above. By creating CSS styles in this way, our code becomes modular. It becomes easy to reuse and style in another part of our website, and no longer needs its own unique styles. If you view the source code of Facebook, you will notice that they have many classes that dictate how things look. They are a very good example of how to implement object oriented web design.

Conclusion

What OOWD really comes down to is not repeating yourself. Once you master these techniques, you will be one step closer to creating better websites. Designing a website with these things in mind is key. It often helps to create a default styles document in Photoshop that defines all the styles that will be used and re-used all throughout the site. A good example of this that I am familiar with is in the blueprint CSS framework.

Anyways, I hope this helps you guys understand OOWD a little better. I plan to create more posts to better teach the techniques described.

As always, thanks for reading! And don’t forget to follow me on Twitter @zackperdue!

  • marc

    seems interesting but almost impossible to read on my phone, your font color is too light! more contrast plz

    • http://zackperdue.com/ Zack Perdue

      Thanks, it’s the font weight for certain browsers. I will need to tune it soon. Something for this monday? Quite possibly! Thanks!