April 2010

Content Strategy and Web CMS

Submitted by Vijay Patel on Fri, 04/30/2010 - 09:56

decimal152 have written a great blog post on the role of web CMS. In many organizations there is a desperate need for managing web content, and top level management has recognized this need. However, there is a misconception in organizations, one that rears its head up after the implementation of a CMS.

This article titled "The Incidental Publisher" illustrates the importance of having a content strategy.

Personas and Highways

Submitted by Vijay Patel on Sat, 04/17/2010 - 10:36

Personas are an incredible tool in the design process. Be it, software or industrial design.

The challenge: draw a connection between Highways and Personas. What can we learn about the way civil engineers think about building highways, tunnels, and bridges in the context of designing better web sites?

"A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions, and even visual design." (Kim Goodwin, Cooper.com)

Next time you drive about take a look at the various types of roads and bridges. There are terms for some of these classifications: freeway, highways, county road, alley, street... I'm sure there are more. But, the point I'm getting at is that these words conjure different images. Each of these types of roads were designed around a different type of user, different Personas.

I live in Boulder, and drive to Denver often. The primary highway between the two cities is Highway 36. Any study would show that the average type of vehicle on this road is a five passenger car. Probably a Toyota. However I do not think the roads were built with these vehicles in mind only, even considering that these types of cars were the majority of traffic. Instead these roadway systems were designed around the archetype user.

So what do I mean by archetype user? In this case the roads have to accommodate vehicles like regional buses, large 18 wheeler interstate delivery trucks, and garbage trucks. So the highways are designed to allow ease of use for these types of vehicles. The width,grade, materials used, and so on are decided with the needs of these larger vehicles in mind. In designing roadways for the ease of use by these "archetype" vehicles, the overall system becomes easier to use for the average user. If a semi can maneuver the road, the average car can easily do it. But, it does not work reflexively. Can you imagine the headaches a semi-truck driver would have if she highways were designed like residential neighborhood streets?

Design for the archetype user and you'll make them very happy. Additionally, you'll make the average user happy most of the time. But if you design for the average user, you'll make them happy on average. But, you'll alienate your archetype user.

Rounded Corners - CSS3 for You and Me

Submitted by Miles France on Mon, 04/05/2010 - 21:57

Download Code | View Source

I'm currently working on a website for the University of Colorado at Boulder (more details to come on this project) and I ran into a common problem amongst web developers, rounded corners. Sure you may think they look snazzy and coding them can't be that hard, which thanks to the new CSS 3 standards you would be correct on both accounts in a perfect world. Unfortunately we live in a world that uses Internet Explorer (IE). None of the current versions of IE support CSS 3 standards.

Let IE Suffer

I ran across an article explaining a great way to tackle this problem but unfortunately it didn't seem to work the way I had hoped. So I decided to do it the old school way in IE and use images for IE only. To accomplish this I used an IE only style sheet and placed the image replacement in there.

So to outline this you place a comment in your html head with your other style sheets like this:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ui/css/ie.css" />
<![endif]-->

Then in the body setup your div like this:

<div id="main">
<!--[if IE]>
<div id="main-tr"> <div id="main-bl"> <div id="main-br"> <![endif]-->
<p>Content here</p>
</div><!--[if IE]> </div></div></div> <![endif]--> 

You will notice that all of the extra divs that we have to create are surrounded by a conditional comment so they will only be read by IE. This code will be a bit bloated for IE but will take advantage of CSS 3 and will run much smoother for Firefox, Safari, and Chrome without the bloat. Here's the code for a style sheet that is seen by all browsers:

#main{
	background:#ddd;
	height:100px;
	width:960px;
	padding:10px;
	/* Select all four corners for the possibility of 
	controling larger radius or only rounding certain corners */
-webkit-border-top-right-radius: 10px;    /* for Safari */
	-webkit-border-top-left-radius: 10px;    /* for Safari */
	-webkit-border-bottom-right-radius: 10px;    /* for Safari */
	-webkit-border-bottom-left-radius: 10px;    /* for Safari */
	
	-moz-border-radius-topright: 10px;       /* for Firefox */    
	-moz-border-radius-topleft: 10px;       /* for Firefox */
	-moz-border-radius-bottomright: 10px;       /* for Firefox */    
	-moz-border-radius-bottomleft: 10px;       /* for Firefox */	
}

This can be accomplished by two lines but I did it the previous way to show you how to select each corner one by one. Here's a two liner:

#main{
	background:#ddd;
	height:100px;
	width:960px;
	padding:10px;
	-webkit-border-radius: 10px;    /* for Safari */ 
	-moz-border-radius: 10px;       /* for Firefox */ 
}

Once you have the corners working with CSS3 you can open it up in firefox or safari and take a screenshot. Then open the screenshot in photoshop and grab each corner and save them individually. I named them each:

  • main-tl.jpg
  • main-tr.jpg
  • main-bl.jpg
  • main-br.jpg

Then place them in an images folder within the css folder. From there you can place the proper css inside the ie.css:

#main{
    background:#ddd url(images/main-tl.jpg) top left no-repeat;
}

#main-tr{
    background:url(images/main-tr.jpg) top right no-repeat;
}

#main-bl{
    background:url(images/main-bl.jpg) bottom left no-repeat;
}

#main-br{
    background:url(images/main-br.jpg) bottom right no-repeat;
    height:100px;
    width:960px;
}

This will work in all versions of ie including the well hated ie6, see my post on ie6 for further hate. So now you have a very sleek CSS3 solution for rounded corners that will also work in all versions of IE. This is definately bloated for IE but there's no way around using images or javascript in order to make your code happy in IE. The Pinnakl website currently uses javascript for the rounded corners which we may change some day soon. If someone has a different technique they use, please let us know in the comments.