Lessons learned from redesigning my website

Just finished a major re-design of my business website. Most of the work seemed to be to just figure out a basic design (also something that I’m not really good at). In my previous post I included a mockup of the design I had in mind. I managed to get things almost exactly done as I wanted.

There were a few things I changed in the html:

Menu Border Images

In the old design, there were little images at the left side of the menu bar:

This added a nice border to the menu bar, but of course this was totally a visual thing and nothing that belonged in the html. It should have been a background image of the div that made up the menu bar. In the new design, the images were no longer needed, so they were removed from the html files.

SmarterSoftware Pen Image

In the header of each page, I have an image of the company logo, a pen writing some digital code (originally designed by Leo Blanchette at Jesterarts):

As this is also nothing structural, I’ve moved the reference to the image from the html to the css file as a background image. This is not totally clear-cut as with the menu images. In the first version I made the image a link to the initial splash screen with a large version of the pen. I’m not aware of any way this can be done with a background image (other than with JavaScript, which I may do in another version).

Additional divs

The only thing that was a bit tricky to do in CSS was the way I wanted to “switch” colors in the left “column”:

I’ve played around with the “border-left” properties but could quite get it to work.

Here’s a little code snippet of what I finally implemented:

HTML:

<div id="header" class="outer"> <div class="inner">
    <p> Smarter Software </p>
</div> </div>
<div id="nav" class="outer"> <div class="inner"> <ul>
    <li><a id="current" href="home.html"> Home </a> </li>
    <li>&bull; </li>
    <li> <a href="loesungen.html"> L&ouml;sungen </a> </li>
</ul>  </div> </div>
<div id="main" class="outer"> <div class="inner"> 
    <h1>Wir &uuml;ber uns</h1> 
</div> </div>

CSS:

.outer {
    background-color: rgb(0, 102, 153);
    margin-right: 20%;
}

.inner{
    background-color: white;
    margin-left: 15%;
    padding: 10px;
}

div#nav.outer, div#footer.outer{
    background-color: white;
}

div#nav .inner, div#footer .inner{
    background-color: rgb(0, 102, 153);
    padding: 0;
}

The outer divs define the color in the left “column”, usually blue (the rgb-color). Also, with the right margin set here, the color to the right of the text will be the standard background color (usually white). We could move the margin-selector to the inner class, so that the color on the left would be repeated on the right. The outer div only contains an inner div, but no content on its own.

The inner divs then define the left margin and the background color for the “main” content area. Usually, it’s a white background, but for #nav (the navigation or menu bar) and the footer the colors are swapped between the inner and outer divs.

This achieves the desired look, but introduces extra divs that are purely presentational. Does anyone have a better idea how to achieve this look without additional divs? Any ideas are appreciated!

Summary

I was quite happy that there weren’t to many changes required. Once I got the main page done, there weren’t many steps required to get the whole website changed. Total re-design took two evenings on X-mas, maybe 4 to 5 hours of work in total (including this blog-post). Not too bad!

Planning to re-design my website using just CSS

When I became a freelancer more than a year ago, one of the first things I did was to build and deploy my own website.

Back then, I knew basic HTML, but CSS was pretty new to me. What better way to get to know it than with a real project! I’ve read a couple of books and websites and managed to get things done and I’m quite happy with the results from a coding perspective.

Now that I’m starting to talk to a few more people in my network, there are some new people looking at the site. An old colleague/boss remarked recently that it looked like a school project.  Touche!

So I looked a bit around for a new design. One inspiration was a friend’s design for PowerPoint slides. As I also plan to add a “business blog” to my site, I’ve looked into wordpress as blogging platform and some of the more common templates. I’ve picked a good looking template and did some changes to it, so between those two inspirations, I’ve got a baseline.

Here’s a quick mockup:

Depending on how well I developed the site last year, I managed to split content and structure (in the HTML) and presentation (in the CSS). I hope to get almost all of the changes done just by changing the CSS. My goal is to do minimal changes to HTML (apart from adding maybe a class or id here and there). It’ll be interesting to see how much I’ll be able to do and I’ll post some lessons learned in this blog.

Have you tried similar things? Let me know in the comments or send me an email!