News

Huyzentruyt web site

posted by Geert Leyseele
14 April 2010

Woningbouw Huyzentruyt contacted Duoh! to refresh their web presence, located at huyzentruyt.be. We were asked to tune their web site closer to their printed brochures. We tackled the user experience from the perspective of customers that are on the lookout to build a new house and need to find information as fast as possible.

The goal

The existing site failed to meet audience needs or deliver a experience consistent with the Huyzentruyt brand. Our goals for this redesign were to provide:

  • Create a homepage that doesn't look crowed with the amount of information that needs to on be there.
  • A redesigned user experience to improve the existing navigation, functionality and overall usability of the previous site.
  • Enhanced visual design that strengthened the Huyzentruyt brand. Duoh! was tasked with making a color identity system that represent the different sections.
  • Striving towards editorial efficiency. Our goal was to do all the CSS heavy lifting in the backend so that the client only needed to worry about putting data in.
Design

The client wanted it to be colorful. It was a tough nut to crack to keep things harmonious, and not having everything shouting for attention. We opted to work with four central blocks of information, each in their own color. There was a big amount of info that needed to be shown there and to keep things light we decided to rotate the different news items with some jQuery help. We repeated the color usage deeper in the site so that the visitor had a visual clue that he still was in that particular section. Once you are in such a section you see a large photo of a house and all the information that comes with it. On the right you have more options to choose from. Here we developed a set of icons to visualize these particular options.

Icons used in the web site of Woningbouw Huyzentruyt
Progressive enhancement

This was the first project where the client encouraged us to push the boundaries of what is possible today in modern browsers. Here at Duoh! we don't believe that a web site should look, or be experienced, exactly the same in every browser. We don't consider ourselves to be in the group of developers that is waiting until using progressive CSS is safe because all major browsers support the same CSS. In this project we just made sure that the site gracefully degrades in people's own browser of choice. Let's dive into some of the CSS3 that we have been using in this project.

Woningbouw Huyzentruyt web site design detail
CSS code for the navigation

One of the elements on the site that might be interesting to look at is the side navigation used on detail pages on three of the sections of the site. They all use basically the same side navigation, however each of these pages use their own color palette, as the main sections of the site have a different tone.

Here is the CSS code for the ul element of the navigation, which takes care of the position, width and text aligning. Nothing special here:

  1. ul.nav-buttons {
  2. position:absolute;
  3. left:616px;
  4. top:53px;
  5. width:125px;
  6. text-align:center;
  7. }

The CSS code for the a element for each button, which sets the width, height and padding. Again, nothing specail, just a matter of showing the entire CSS code:

  1. ul.nav-buttons li a {
  2. display:block;
  3. height:20px;
  4. width:115px;
  5. padding:35px 5px 5px 5px;
  6. }
Woningbouw Huyzentruyt web site design detail

We thought if we use a % of black for the text links and for the background color when hovering these buttons, we keep this nice consistent look, and we save work at the same time by using RGBa values. On top of this we thought to make use of what the webkit engine offers us to do with CSS3 and add in some subtle CSS3 animation, using the -webkit-transition property. No harm is done for browsers who don't support it, as users will simply see a direct hover effect instead of one with subtle fading transition.

  1. ul.nav-buttons li a:link,
  2. ul.nav-buttons li a:visited {
  3. color:#666;
  4. color:RGBa(0,0,0,0.4);
  5. text-decoration:none;
  6. -webkit-transition:all 500ms ease-in;
  7. }

While browsers that don't support RGBa will pick up the hexadecimal color value, browser who do support it will overwrite this value and render the RGBa one instead. Although, the hexadecimal color values were explicitly added in the Internet Explorer 6 and 7 stylesheets as both browsers seem to ignore the rule in the main stylesheet.

Furthermore each button uses a class that refers to the type of icon that needs to be rendered. Background positioning was used and only 1 image file containing all icons.

  1. ul.nav-buttons li.pdf a {
  2. background:url(graphics/nav-buttons.png) no-repeat center -85px;
  3. }
  4. ul.nav-buttons li.var a {
  5. background:url(graphics/nav-buttons.png) no-repeat center -285px;
  6. }
  7. ul.nav-buttons li.vplan a,
  8. ul.nav-buttons li.plan a {
  9. background:url(graphics/nav-buttons.png) no-repeat center 5px;
  10. }
  11. ul.nav-buttons li.dfoto a {
  12. background:url(graphics/nav-buttons.png) no-repeat center -190px;
  13. }
  14. ul.nav-buttons li.lig a {
  15. background:url(graphics/nav-buttons.png) no-repeat center -385px;
  16. }

Finally all hover, focus and active states were defined in the CSS, using an RGBa value of 10% black preceding by the fall-back hexadecimal value. As mentioned before, each main section uses a different color palette, and so we used an id for each body element to assign each color value. First we defined the hover styles that are equal for all pages and then we split up the page specific ones:

  1. ul.nav-buttons li a:hover,
  2. ul.nav-buttons li a.focus,
  3. ul.nav-buttons li a.active {
  4. color:#333;
  5. color:RGBa(0,0,0,0.7);
  6. text-decoration:none;
  7. }
  8. #wonp ul.nav-buttons li a:hover,
  9. #wonp ul.nav-buttons li a.focus,
  10. #wonp ul.nav-buttons li a.active {
  11. background-color:#a3937e;
  12. background-color:RGBa(0,0,0,0.1);
  13. }
  14. #projp ul.nav-buttons li a:hover,
  15. #projp ul.nav-buttons li a.focus,
  16. #projp ul.nav-buttons li a.active {
  17. background-color:#91babb;
  18. background-color:RGBa(0,0,0,0.1);
  19. }
  20. #kijkp ul.nav-buttons li a:hover,
  21. #kijkp ul.nav-buttons li a:focus,
  22. #kijkp ul.nav-buttons li a.active {
  23. background-color:#bfd1de;
  24. background-color:RGBa(0,0,0,0.1);
  25. }

We've also made use of the border radius property to add rounded corners on the price tag, which will only be visible in browsers that already support this CSS property. Since the entire look of the site basically consists of straight corners it doesn't feel like the layout is broken when it's not rendered without it. With this method progressive enhancement, or enrichment if you like, the site gracefully degrades in browsers that don't support RGBa, border radius or animation effects such as the transition property.

Only design and standards compliant templates

In this project we didn't implement our templates into a CMS. Effix was the partner that was responsible to work with our our web standards compliant templates and implement them into their CMS.

Huyzentruyt final design

What we did

Graphic design, information architecture, user interface design, and CSS/XHTML template development.

Comments

There are no comments on this article.