I have seen a lot of web development companies, or for that matter, companies that offer IT services having a dull client list page. They usually reside to a logo showcase or a text list divided into multiple columns. This later design is what we will try to achieve in this tutorial, but we will also add a service list, and map the two lists together. Pointing to a service will reveal clients that bought that service while pointing to a client will reveal services bought by that client. We will use jQuery to map the two together.

The HTML

I will be using HTML 5 tags for this tutorial, which means what we are building here will only work on modern browsers. However, it's just a few tags and a doctype that need to be changed to make it work on every browser. The structure of the file will be consisted of two HTML 5 tags: header and section. Enough talk, here's the code:

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

<header class="top-rounded">
	<!-- this is the horizontal bar with the gradient-->
	<h1>Services</h1>
	<h2>Clients</h2>
</header>
<section>
	<ul class="services btlft-rounded">
		<!-- this is the section that will hold the services-->
		<li>Systems Development
			<ul>
				<li class="ubn"><a href="#" class="">Business Needs</a></li>
				<li class="dd"><a href="#" class="">Design &amp; Development</a></li>
				<li class="ti"><a href="#" class="">Test &amp; Implement</a></li>
			</ul>
		</li>
		<li>Design &amp; Branding
			<ul>
				<li class="mr"><a href="#" class="">Market Research</a></li>
				<li class="bs"><a href="#" class="">Business Strategy</a></li>
				<li class="ci"><a href="#" class="">Corporate Identity</a></li>
				<li class="obp"><a href="#" class="">Online Brand Presence</a></li>
				<li class="ue"><a href="#" class="">User Experience</a></li>
				<li class="ia"><a href="#" class="">Information Architecture</a></li>
				<li class="ad"><a href="#" class="">Application Development</a></li>
			</ul>
		</li>
	</ul>
	<ul class="clients btrght-rounded">
		<!-- this is the section that will hold all clients -->
		<li class="dd ti"><a href="#" class="">Nike</a></li>
		<li class="ubn di ti"><a href="#" class="">Adidas</a></li>
		<li class="dd"><a href="#" class="">Hugo Boss</a></li>
		<li class="ci ad"><a href="#" class="">Canal +</a></li>
		<li class="mr bs ci obp"><a href="#" class="">TV shop plus</a></li>
		<li class="ad"><a href="#" class="">CBS</a></li>
		<li class="ia"><a href="#" class="">NBC</a></li>
		<li class="mr bs ci ue ia ad"><a href="#" class="">GOL TV</a></li>
		<li class="ia ad"><a href="#" class="">Petrom</a></li>
		<li class="ue ia ad"><a href="#" class="">OMV</a></li>
		<li class="ci obp"><a href="#" class="">La pizza</a></li>
		<li class="mr"><a href="#" class="">The shop</a></li>
	</ul>
</section>

As you see in the code above, each list item has a various number of classes. These classes are used to identify services and to map services to clients and viceversa. The class attribute in the anchor tags is used to emphasize which clients or services are selected. With that said it is time to move on to some basic styling.

The CSS

I will use some rounded corners instructions, but apart from that everything else is pretty simple. Here's the CSS code

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
55
56
57
58
59
60

/* reset basic styling and set rounded corners */
*
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
.all-rounded,
ul.services li a,
ul.clients li a			
{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.btlft-rounded			
{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded			
{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.top-rounded			
{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; 
border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }
 
/* styling of the general structure: size, position and alike */
header
{ display:block; width:801px; height:40px; margin:0px auto; margin-top:100px; border:1px solid #888;  border-bottom:none; }
header h1, header h2
{ display:block; margin:0px; padding:0px; }
header h1
{ width:200px; float:left; }
section	
{ display:block; width:803px; margin:0px auto; margin-bottom:50px; overflow:auto; }
ul
{ display:block; float:left; list-style:none; padding-bottom:15px; }
ul.services
{ width:200px; }
ul.clients
{ width:600px; }
 
/* visual styling: colors, font size etc */
header
{ background:#999 url('../images/top.png') repeat-x; }
header h1, header h2
{ font-size:20px; color:#F6F6F6; line-height:40px; text-align:center; }
ul.services
{ background-color:#999; border:1px solid #888; border-right:none; }
ul.clients
{ background-color:#F0F0F0; border:1px solid #888; }
 
ul.services a, ul.clients a
{ text-decoration:none; }
ul.services li a		
{ display:block; color:#F0F0F0; height:23px; line-height:25px; padding:0px 5px; border:1px solid #999; }
ul.services li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
ul.services li ul		
{ margin-left:20px; }
ul.services li			
{ overflow:hidden; }
 
ul.clients li a			
{ display:block; float:left; width:138px; padding:0px 5px; line-height:25px; height:23px; text-align:center; border:1px solid #F0F0F0; }
ul.clients li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
 
ul.services li a.selected,
ul.clients li a.selected
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

And here is a demo of how what we coded looks like. Being done with HTML and CSS, we move forward to jQuery coding to map services and clients together.

The jQuery

As you've seen in the demo the two columns do not share the same height. If you have many services and few clients, or few services and lots of clients, it is very likely that the two columns will not be of equal height. We can easily fix that with the following jQuery code:

1
2
3
4
5
6

// resize column for same height
var servicesHeight = $('.services').height(); // get height of services ul
var clientsHeight = $('.clients').height(); // get height of clients ul
// check who's bigger and set height accordingly
if(servicesHeight>clientsHeight) $('.clients').height(servicesHeight); 
   else $('.services').height(clientsHeight);

You can view a demo with the equal height columns problem solved. Next piece of code is the one creating the behavior necessary when clicking on services.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// if services on the left are clicked
$('.services a').click(function(){
   $('.selected').attr('class',''); // a service is clicked, make any, if selected, as not selected
   // when we click one service we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the services classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the service clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all clients that have such a service
      $('.clients li.'+classes[i]+' a').attr('class','selected');
      }
});

When clicking a client, same thing happens but exactly the other way. We first get the class attribute of the client to check out the services bought and then loop through those services and set them as selected. Pretty neat! Here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// if clients on the right are clicked
$('.clients li a').click(function(){
   $('.selected').attr('class',''); // a client is clicked, make any, if selected, as not selected
   // when we click one client we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the client's classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the client clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all services that were bought by the client
      $('.services li.'+classes[i]+' a').attr('class','selected');
      }
});

And we're done. You can check out the final demo over here and download the source codes over here. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

There's only around 5% of internet users which do not have javascript turned on, but that doesn't mean you should disregard them and create a beautifully working site with javascript which fails completely if javascript is not available.

In order to fully understand what I am talking about, you should visit the sites showcased in this article, view them with javascript on, then turn off javascript and refresh to see the difference. Some sites, as you'll see, do a better job then others when it comes to working properly without javascript. All these sites are impressive if javascript is on, but may be completely useless if javascript is off.

Really good examples of javascript enhanced sites

Helloewy

Helloewy is the blog of Loewy, a NY web development company. They created an accordion for the entire posts structure of the blog which works quite well. I've seen many accordions across the web, but this one's the first one that also automatically scrolls your page and adjusts its position accordingly to the tab you just clicked. The best thing is that with javascript off, there's no accordion, but all the content is there in the exact layout. It's just that it is all expanded, which doesn't bother me - the what is javascript user? - at all.

Youlove

Youlove's older version of the site was bundled with awesome transparencies, animations, sliders and scrollers which resulted in a visual aesthetic that took your breath away. The new version is similar, but for me, its not that bright as the previous one. With javascript off, that first version gave nothing up in terms of usability and available content. It just got rid of animations, sliders and scrollers. Transparency was preserved as it was built using CSS not javascript. Awesome website!

Alexandru Cohaniuc

Alex's website is similar to the first one presented just before. It also uses an accordion to group his portfolio on categories, all tabs beeing expanded if javascript is off. It is a one page website, and the little javascript tricks add some spices to its design and make it beautiful.

TEDx Bucharest

TEDx Bucharest has and interesting and original concept in terms of layout, structure and navigation. Funny thing is it uses javascript for a small amount of the website, which is flying in a few thumbnails on the homepage / guests page, and to create some sort of a tooltip while hovering those thumbnails. Besides the flying in effect, the strange tooltip could have been easily created with some tricky css. The important point here is that with javascript off all functionalities are preserved. Nothing too extraordinary, but the concept and progressive enhancement cannot be disregarded.

The full article will contain more example of website that do a bad job when using javascript, and some who are right on the edge of falling in the same category, but are not quite there yet.

Really bad examples of javascript enhanced sites

U No Why

U No Why is simply Amazing! It has a totally original navigation concept. It moves so smoothly and responds fast to user's mouse, is bundled with lots of visual effects and subtle transparencies but unfortunately turns into a screenshot if javascript is off. In fact, if javascript is off, you can either look at one photo, click the logo or close the browser. Which one would you choose?

Engage Interactive

Engage interactive is entirely constructed on sliding doors, panels and slideshows. All are powered by jQuery. There's quite some JS work behind this site. Very well thought off, javascript tags are located at the end of the source files. On the other hand with javascript off parts of their site are inaccessible the menu being nowhere to be found. You could still check out a part of their portfolio though, if that's any good because they fail the ultimate goal, which is allowing visitors to contact them. Twitter link doesn't count here!

Djafar Inal

I gave two examples of websites that successfully use accordions to enhance user experience. Here's one that fails almost completely. Inal's website fails because if javascript is off, there's only one tab of the accordion fully expanded. This may be due to the fact that Inal's website uses a horizontal accordion as opposed to Alex's and Helloewy's websites above which have vertical accordions. However, a few css tricks and if javascript were off, those tabs on Inal's website could have all been expanded and placed vertically.

Made by Elephant

Another website that uses jQuery a lot. Sliding doors, tabs, forms. It looks and feels great if you have javascript available. The moment it's gone, the whole site gets scrambled. No thank you!

Nerve Music Store

Nerve is a music store that has its entire UI developed using javascript. That's great because the interactivity provided is awesome and could rival easily with Beatport. Just turn your javascript off and then you get a spinning gear that spins and spins and spins...Forever.

Eyedraw

Eyedraw is yet another site that uses plenty of sliders and sliding doors. These features make it look chic. Unfortunately, with javascript off you're left to viewing a few thumbnails and no ability to contact the designer. Auch!

Webalon

Webalon uses javascript to create a huge dynamic slider on their homepage and some nifty fading effects. Apart from that, it appears that they should have some sort of lightbox in their portfolio section, which unfortunately doesn't work even with javascript available. Needless to say, with javascript unavailable there's no fading and the content slider completely vanishes into a dark mist.

Bonadies Architect

What was the first thing that crossed your mind when you saw the above screenshot? Hmm, let me check this minimal website? Well, please do check it with javascript off, because there's nothing more to see than what you just saw in the screenshot. Useless website if you do not have a decent modern browser with javascript on. I must say that it is really interesting if you are lucky enough to use a modern browser. Transitions, animations, elements moving around.

Best Before

Best Before has a really, really interesting website. Smooth animations, fading elements, movement of elements around the page make sliders look dull. Too bad the site turns into a blank page if javascript's off.

Those who remained neutral: neither good, nor bad

Jaboh

It was a little bit hard to put this site into a category. I was going first for failure to use progressive enhancements, but then I said. Ok, it does have progressive enhancement in certain areas. Now, it depends if the homepage is considered a vital part or not. So is it? I am asking because this minimal site that "abuses" of sliders, slideUps and slideDowns throughout its content areas and navigation has one major problem when javascript is off. The content on the homepage suddenly disappears. Call for Sherlock Holmes guys!

Loewy design

Does Loewy sound familiar? yes it does. And it does because they did a great job with their blog, which is showcased up in this article. Anyhow, the agency seems to lack consistency as their main website has some issues. While javascript is on the site is bundled with smooth animations, a nice navigation and sorting menu in their portfolio section and more. If javascript's not available some features like the aforementioned sorting menu stop working. The most important fact here is that the site remains accessible. One can navigate wherever would like, use the contact form, but those little details that made the site interesting are gone.

Adam Rix

Adamrix is a full page slideshow that showcases the portfolio of a talented designer from Manchester. The site lacks navigation and means for making contact if javascript is off.

Position Relative

Position Relative uses javascript to animate navigation - it is a one page website - and to create a nice lightbox, which I think is custom made. With javascript off, there's no animations and the lightbox turns into links to new pages. The navigation also meets some issues because without javascript, jumping to the exact location of the correct section is not pixel perfect. Scrolling with the mouse fixes this issue.

Similar posts will follow. I could use a helping hand in finding really unique and original pieces of material so please let me know about any websites you may have similar to these ones. If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

The temporary solution

This issue has a relatively fast solution. You just put a negative left margin to the post info box, and it should go right out of there. This works relatively ok. The problems is that only really new browsers had no issues with this. I tested on IE 6, Firefox 1.06 and the post info box with negative margins disappeared from the view. That was due to the fact that the negative margin moved the box outside the content wrapper.

That could have been easily fixed by expanding the content wrapper with the post info box width, and floating the content to the right. Basically, this would have been a faux column layout inside another faux column layout. It works great, but when you hit the next problem, there are no apparent solutions at the horizon.

What if you want rounded corners? CSS 3 rounded corners!

The problem with rounded corners is that you cannot expand the content wrapper, as the corners would go away from the content, rendering the layout useless. (check out the below image). The solution I found was to add a new wrapper, which would wrap the post info box, the content boxes (multiple posts have multiple boxes), and the side wrapper.

That new wrapper looks great. All you need to do is to add left rounded corners to the content boxes, and right rounded corners to the side wrapper. WRONG! That would work in most cases, but if you have a really long side wrapper, chances are you will have pages with content that do not have the same height! And that's when the cookie crumbles. Check out how you could end up with your background.

We put all that thinking into it and it looks like it doesn't work. Ok then, Browsers 1 - Developers 0. Some say you can fix this problem with going to css height and min-height properties. Having a body , html and wrappers with height:100%, and the last content box having min-height:100% should fix the problem. Well it doesn't. It does that if you don't have many nested wrappers. If you have many wrappers, it works only if the content area's height is lower than that of the side wrapper. If it is higher, you get the original problem (just the one you see in the screen above), but transferred to the side wrapper. Browsers 1 - Developers 1 because the problem is partially solved.

The ultimate solution

After struggling for around 2 and a half hours with height, min-height and wrapper variations, after not reaching any solution, I fixed this in 10 minutes with jQuery. Who would have though that the solution is that simple? So what was the jQuery code to handle this issue.

Remember we had a content wrapper, containing content boxes, one for each post? We also have the side wrapper. The solution is to get the height of the side wrapper, the height of the content wrapper, which grows due to the content boxes, and then compare the two values. If the content wrapper's height is smaller, you should increase it to match that of the side wrapper. But how?

One span and jQuery to the rescue!

You simply add a span tag to the end of the last content box, not the content wrapper. If the height of the content wrapper is smaller than that of the side wrapper, set the span tag's height to be the difference between the mentioned 2 heights. The result, no matter which box is the highest, is the one you see on this very own site. With rounded corners. All the time. Browsers 1 - Developers 2.

The jQuery code

	var diff = 0;
	var sideWrapper = 0;
	var cWrapper = 0;
	sideWrapper = $('#sidewrapper').height();
	cWrapper = $('#cwrapper').height();
	if(cWrapper < sideWrapper)
		{
			diff = sideWrapper - cWrapper;
			$(".end").height(diff);
		}

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed. A demo, and full source of this layout will be soon available.