DivitoDesign

Everything for the Web Professional

Case Study: Revamping an Existing Site

April 27, 2010 34 Comments →

Jacques Soudan, a client and friend I met through DivitoDesign, sent me an email with a guest post about a case study on revamping his outdated site. Enjoy reading about his revamping project.

Below is a case-study on how I used the Blueprint CSS Framework and jQuery JavaScript library to rebuild an outdated site – somehow you helped me with it, so in return I share my work, hoping it can be of future use. Thank you!

The website we are talking about was build back in 2001. As you would understand we are talking about a heavily-aged website that had the following ‘problems’ or difficulties:

  • using some CSS, but mainly tables
  • the menu is a separate JS file: easy to maintain, but it doesn’t look too good
  • a few years ago I added the rounded corners (using JavaScript) and the red backdrop/border, but that doesn’t look too flashy either
  • the source is not W3C compliant (outdated code like <br> – instead of the current <br/&nsbp;>)
  • the footer is embedded in each page (hard to update for about 100 pages)
  • in general, look & feel is not ‘up to date’
  • the enquiry form uses a JavaScript file that is no longer supported
  • in Firefox, the banner is not centered (in IE it is…..) and looks like this (also in a table – probably easy to fix, but never got to it):

For a website in the modern internet world, that is not acceptable. For this reason, I compiled a list of features I would like to have on the modern, good looking website.

Site Features we Need

  • W3C compliant code
  • CSS and HTML in separated files
  • browser compatibility
  • rounded corners & drop shadow
  • 1 central menu file
  • JavaScript support (instead of using several separate scripts that (might) interfere)
  • structured design (layout without tables)

Where to Start?

Last year I read this very useful article about building HTML/CSS sites using a template. This template has a grid CSS layout and the jQuery framework build in. I had seen those before, but was not yet using them in combination with WordPress.

I also found this site for dropshadow & rounded corners. As I wanted to avoid too many jQuery plugins, I didn’t use jQuery for the round corners. So far my experience is that jQuery rounded corners can interfere with other plugins, needing too much work to fix (and warrant) it.

For this reason, the no-Java-script solution seemed preferable. Provided, it had worked – it did not – as it uses several <divs>, it messed up the Blueprint classes, it didn’t display properly ‘underneath’ the header images etc. The typical pain when it comes to CSS and different techniques in different browsers.

So…. dropping Blueprint? Or dropping the very sleek (and easy!) rounded corners? Dilemma there….. Until playing around with Blueprint a bit more…. as it comes with grid.png, to display the columns for design purposes, which you can switch off when you go live. But then, if you can remove that backdrop, why not adding your own???? Using my own image I had created for the initial technique, but thought useless now, it worked flawlessly!

Here is what I did – in the Blueprint folder, there is a screen.css – just add one line and comment the grid-line – that’s all!

In your container-DIV, just add the ‘showgrid’-class: (you need that anyway, if you want to display the Blueprint-columns):

The grid.png is repeated both horizontally & vertically, but my one large image is not, so it fits perfectly – I stretched it to 1600px, as the backdrop is hardly ‘repeatable’: it is a scanned letterhead-paper with a unique texture – using only a small slice/strip and repeating that would make it look unnatural. And I use a footer-image – including it in php, it neatly fits underneath the length of the actual content – not the full background image of 1600px – it ‘stretches’ to the maximum height, but resizes to the needed height.

I wanted to use this menu for this website. One problem though: it has no single menu file (eg. menu.php) you can add to your website. After building that menu.php file myself, the jQuery menu worked perfectly.

When I created the header.php and footer.php files and included in the website using PHP, they are easily updated in those 100 different pages. Depending on the page of the website, I can now include different images via one page. Pretty efficient.

The Template

With all this now in place, this is how the code looks like (this is what I will use as the ‘page-template’ (there is some test copy in, to show in Blueprint columns – all the ‘body-text’ for an individual page is placed within the <content-div> (both <span>-classes, in blue) – everything remains in place, no fluid/stretched text (in different browsers).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!-- blueprint -->

<!--[if IE]>
	<link rel="stylesheet" href="supportfiles/css/ie.css" mce_href="supportfiles/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

<script src="supportfiles/js/jquery.js" type="text/javascript"></script>
 <script src="supportfiles/menu/menu.js" type="text/javascript"></script>
<div id="container" class="container showgrid">
<div id="header" class="span-24 prepend-top">
<div class="prepend-1 span-22 append-1"></div>
</div>
<!-- end header -->
<div id="CONTENT" class="prepend-1 span-22 append-1 prepend-top">
<div class="span-17">
<h1>Main content</h1>
Put your main text here (17 columns wide).

</div>
<div class="span-5 last">
<h3>Sidebar</h3>
Some sidebar on the right (5 columns wide).

</div>
</div>
<!-- END CONTENT -->
<div id="footer" class="span-24"></div>
<!-- end footer -->

</div>
<!-- end container -->

Blueprint-grid enabled:

And this is how it looks like (pictures not optimized yet):

I need to finalize the CSS and do some tweaks here and there, but the very flexible yet sturdy framework is there. You can visit the live version of the website right here to check how it works.

Thank you – I hope this is of help to you – let me know if you have any questions or feedback by adding a comment.

Information about the Author:

Name:

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

More on: CSS

34 Comments

  1. Magician in Wisconsin says:
    April 28, 2010 at 7:59 pm

    Entertaining read. I’m a magician, but back in the day, I worked in the corporate business world–back when HTML was the thing and xml and ccs was just getting mentions. Now a lot of this seems like…well, magic!

    Reply
  2. Blueprint & jQuery – Case study | 3J says:
    April 28, 2010 at 10:05 pm

    [...] it helped me creating a W3C compliant and browser compatibile site - sharing it with you here: case study - I hope it is as useful to you as Stefan’s article was to me – feel free to let us [...]

    Reply
  3. internet sajt says:
    April 29, 2010 at 6:28 pm

    Good start for designers.

    Reply
  4. CNA Training says:
    April 29, 2010 at 7:54 pm

    The things regarding case study is really nice,i got a lot of information from here.

    Reply
  5. USB Memory Direct says:
    May 4, 2010 at 8:12 pm

    Definitely much more impressive. The new version looks much more polished and up to spec, and you showed some cool tricks with CSS and PHP which makes the site much more powerful. Thanks for sharing this!

    Reply
  6. Business Logos says:
    May 5, 2010 at 10:05 am

    I find site redesigns of existing/established websites to be far more difficult than new websites. You have to be careful you don’t effect existing navigation/ good seo ranking etc…

    Reply
  7. Computer Parts Dwight says:
    May 5, 2010 at 1:03 pm

    CSS has helped me creat websites for a while now. I am actually do in for some revamping of my website as well because I like everything so plain and clean. I have talked to my graphic designer and she has interesting ideas for me to implement that I would not have thought of.

    However, changing everything everywhere can be hard, but when you use CSS you can make one change and fix all your webpages no matter how many you have.

    Reply
  8. Steve says:
    May 9, 2010 at 9:59 am

    It’s always difficult to explain to people why tables are so ‘yesterday’, back in the day when tables were our staple it was so easy to know a mediocre site looking together. Divs seem more difficult at first but when you learn properly it’s much more efficient way to build and such loveley neat code. The rest of your article contained lots of stuff I didn’t know. I’m gonna make a re-vamp ‘template’ based on this post.

    Thanks

    Steve

    Reply
  9. FAQ Software Agent says:
    May 10, 2010 at 1:48 am

    Nice! Times are changing and we need to make our sites more attractive at the same time business friendly. Collaborating design ideas with my designers will be of help.

    Reply
  10. green business says:
    May 19, 2010 at 1:37 pm

    Thanks,
    this is good for the designers.

    Reply
  11. Nigel says:
    May 19, 2010 at 1:37 pm

    Some useful stuff in here. Trying to get my head round grid layouts at the moment. 960gs seems to be the way to go for me right now. Thanks for sharing.

    Reply
  12. Aurora Designs says:
    May 23, 2010 at 5:39 am

    some tips on css and html very good start for beginners and also a little touch up for the pro’s.

    I specially loved the revamping design, its whole new transformation to the existing website. Awsome post, good read.

    Thanks

    Reply
  13. Jon Ideas says:
    May 26, 2010 at 4:06 am

    This post is quite interesting and informative. Tech Info can help others to understand well some info regarding templates…etc.

    Reply
  14. Engineering Jaipur says:
    May 28, 2010 at 8:18 am

    nice article lots of things in the aricle of case study of HTMl & XML nice onee for it perfessional…….

    Reply
  15. catalog shopping says:
    May 28, 2010 at 9:11 am

    I love wordpree but css is not my thing till now. This article helped me to lose the fear of it. Thanks

    Reply
  16. gypsy music says:
    June 13, 2010 at 1:25 pm

    Thank you for the detailed guide and links for further information. That is very helpful to me.

    Reply
  17. Backpacking Jaime says:
    June 15, 2010 at 4:57 am

    I built a website back in 2006 with HTML coding. And mind you there were a lot tables! I’m trying to “modernize” it. Any idea how long this will take? It’s basically just a website with about 500 pages or so…

    Thanks in advance.

    Reply
    • Stefan Vervoort says:
      August 28, 2010 at 11:47 am

      That’s one hell of a job you need to do. The great thing about WordPress is that once you build one “single” page, all your articles use the same structure. The only thing you can do is doing everything yet again..

      Reply
  18. Jacques says:
    August 24, 2010 at 11:03 pm

    Thanks for the compliments – I still need to finalise the framework (images, CSS), but so far I’m quite happy with it – Stefan pointed me in the right direction!
    I’m not too worried about SEO – it’s pretty good already – reducing the table-clutter will improve loading time and eliminate any coding-errors, which will help its ranking (although hard to tell how much).
    Reg. the grid: I found this tool to be very useful: http://toki-woki.net/p/Boks/.

    Reply
  19. CNA training online says:
    September 10, 2011 at 3:32 pm

    hello, hope you will elaborate more on how you use CSS to create and revamping that existing website.

    Reply
  20. renting a car says:
    January 18, 2012 at 1:21 am

    That’s a really good case study. I have a few sites that need to be revamped and I’m going to use this as a guide.

    Reply

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!