By Lee Sykes
April 2006
This is part of the How did they build it …? series of interviews.
This is an email interview with Tim O’Brien from O’Brien IT who has created http://www.obrienit.se
This is an interesting website because it uses CSS for the layout of the website, rather than tables. At present, there are not many DotNetNuke websites that use CSS for the layout on commercial websites, so this is a particularly interesting website.
Even more interesting is that this site fully validates to the W3C standards. This is the first DNN site that I have come across that fully validates.
Overview:
- Q. Hi Tim,Thank you for taking the time to join us, how are you?
- Q. Could you start by explaining who you are, what you do and your background with DotNetNuke?
- A. I am an ex-pat Englishman living Sweden. I run a one man IT consultancy imaginatively called OBrienIT.
Before moving to Sweden I worked in IT in London as software development manager in financials. Most of the work was Microsoft platform based web solutions for the big banks. From about 98 to 02 I managed the development of a VB based portal system for the delivery of financial data to clients. We addressed a lot of the problems that .Net solved so much better.
We built a true stateless system that could run across many application servers and web servers. As it was 98 when we started we grasped XML with both hands. Everything was done in XML, from the skins for the front ends through to the log messages that we saved. It might seem a little strange to have built this in VB, but at the time we started Java wasn’t really mature enough and staff with Java skills were very expensive.
- Q. Why do you use DotNetNuke for designing your websites?
- A. When I first saw the IBuySpy example it was a real revelation. That application delivered 80% of what it had taken us about 15 man years to develop out of the box and for free!
- Q. What is the background on this website, what’s it’s purpose / use and what history is behind this website?
- A. OBrienIT.se is the company’s web site. There is also an OBrienIT.com, which has a table based skin and will eventually become a redirect to OBrienIT.se. It’s also the parent for child sites that are used as a staging area for up coming implementations.
For registered users at obrienit.se there is also a full tutorial on the changes required for building a DotNetNuke site that validates.
- Q. Why did you choose to create the site using a pure CSS layout rather than tables?
- A. I had been playing with DNN skins for ages, probably the biggest problem I had found was controlling the appearance of the Solpart menu, and the fact that it doesn’t always render as I would expect in Firefox. My first live client uses Mac’s and couldn’t get on with a Solpart menu based system at all. This lead me to look at the alternative menus that were available. Not to knock Solpart, it’s a great menu, particularly for larger sites that benefit from a drop down model menu.
The issues that tables introduce to layouts were familiar to me. In the system that I had implemented we used tables for layout. Often we were writing out large amounts of data in an XML data island and then transforming this on the client side in javascript.
We would be able to send the data to the browser in about 2 seconds, but the actual rendering of the tables on the client side would sometimes take 7 to 10 seconds. Bear in mind this is when a Pentium Pro 200 was a common desktop machine in offices.
You could explain this to clients until you were blue in the face, but there is no getting round the fact that tables are slow to display when you have to use them for layout because the browser has to perform two passes to work out exactly how to draw the table. No amount of server power can get round that!
- Q. Why is it important to create a website that validates?
- A. Validation is the first stage to building an accessible web site.
There is an increasing likelihood that someone will sue the owner of a public websites that doesn’t validate! In Maguire vs. Sydney Organizing Committee for the Olympic Games, a blind man sued the committee over the inaccessibility of their website and won, receiving AUD$20,000 compensation.
Aside from the legal situation, it just makes the site future proof, browsers are likely to become less forgiving rather than more so, the next generation of tools will make valid code easier to generate. ASPX 2 and Visual Studio 2005 are a huge advance on the previous versions.
There are further advantages, the page size, search engine crawlers can read the content more easily, pages that can be printed more accurately and so on.
- Q. What research and planning did you have to do before you began creating the website?
- A. Now I have to make a confession, the OBrienIT.se web site, as it currently stands, is based on an open source template. Due credit goes to Andreas Viklund http://andreasviklund.com for creating open source templates that work really well. Have a look at his templates for more great templates that are easy to convert to DNN.
- Q. Did you have to strike a balance between good looks and useability / accessibility?
- A. Not really, all of the fixes are pretty much common sense.
- Q. Why have you created a separate flash version of the website and does the content of the flash version pull the information from the DotNetNuke database?
- A. Unfortunately it isn’t DNN based, the flash site is really a proof of concept, it is dynamic, so it would be possible to drive it from DNN with a fair amount of tweaking. A future project perhaps?
Validation:
- Q. We’ve established that it is good practice to create a website that fully validates, could you outline the steps you made to enable your DotNetNuke website to validate?
- A. Once you get the default.aspx right, and go with a CSS based skin that is valid within itself as an ascx it is surprisingly easy.
The link statements that are generated to point at the stylesheets are hardcoded to write “LINK” rather than the lowercase “link” which is valid. Then you need to look at the modules that are used and work through them, changing spans into div and so forth.
It is quite easy really if you use the validation tools at http://validator.w3.org. The main thing is to understand that 50 errors in the validation doesn’t mean there are 50 issues to fix, often the issues are interrelated, so you might only have 4 fixes to make to get rid of the daunting 50 issues.
The Skin:
- Q. Where do you start when first creating a skin?
- A. With CSS the skins are normally extremely light. There will be a basic layout with a div for the wrapper and a div for each pane. Add in the controls for the menu, login and any others, like the date for instance and then it is on to the CSS which does all of the heavy lifting.
- Q. What research do you need to make before you begin creating a skin?
- A. The critical factors are number of columns and whether the columns will be fluid or fixed width.
- Q. In the initial design stages of the skin, how did you decide on the layout, and colour scheme?
- A. The colour scheme should reflect any existing artwork. I tend to use the color schemer web site (http://www.colorschemer.com/online.html) to find an appropriate palette.
Layout is very much driven by the amount and type of content.
- Q. What software did you use?
- A. Photoshop for graphics manipulation and a combination Visual Studio 2005 and notepad2 for the code.
- Q. Why did you use this software?
- You mean there’s other software you could use?
- Q. How long do you spend designing a css based skin?
- A site like the CityOst one: http://www.obrienit.se/cityost takes about a day.
If I am using a simple open source design and making it work in DNN it can be under an hour, I often do this just for kicks. A bit more time is required if you need to rework the menu for instance. Sometimes it is necessary to add more workarounds for browser compatibility, which really is the bug bear of CSS based design.
CSS Layout:
- Q. Could you outline the CSS techniques you used to create the layout of the skin?
- A. Generally I would use an established layout schema for the skin. Typically a negative margin based model for locating the columns. For a simple single column plus menu I would use a floating div with margins for the menu and a main contentpane with a left margin.
Regardless of the design layout I will refer to standard CSS models that are widely available. This really takes the pain out of learning to use CSS, there are a lot of gotchas, that’s for sure.
- Q. You’ve opted for a fixed width design could you explain why you chose that option, rather than creating a fluid layout that expands and contracts dependant on the browser size?
- A. In general a fixed width works better for presentation purposes. With a relatively low content site like OBrienIT.se it’s a better option. Ideally you would have max and min width properties that worked in all browsers.
Menu:
- Q. How did you create the menu links at the top of the page?
- A. In the OBrienIT it is just a standard links module. The declaration is:
<dnn:LINKS runat="server" ID="dnnLINKS" CssClass="sidelink" />
It is styled thus:
.sidelink {
display:block;
width:140px;
margin:3px 10px 2px 0;
padding:5px 0 5px 8px;
font-size:1.1em;
font-weight:bold;
text-align:left;
background:#eee url(img/gradient1.png) repeat-x;
color:#26c;
border-top:1px solid #ddd;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
border-left:1px solid #ddd;
}
And for the hover effect:
.sidelink:hover {
background:#fff url(img/gradient2.png) repeat-x;
color:#222;
border-top:1px solid #ddd;
border-right:1px solid #888;
border-bottom:1px solid #888;
border-left:1px solid #ddd;
text-decoration:none;
}
- Q. How did you implement the language selector that allows you to change the language of the menu links?
Modules:
- Q. Which modules have you used in this website?
- A. Mainly just text/html.
- Q. Did you have to make any adjustments to the modules for them to work correctly in a pure CSS layout or to validate?
- A. The ascx for the text/html has to be changed to hold the content in a div rather than a span. A span is meant to be an inline holder for content, a div is right for a block of content.
Testing, Hacks & Hack Management
- Q. Which browsers did you test your skin against?
- A. I use IE and Firefox, primarily. I check in Opera as well. I have a colleague who does print design with a Mac who takes a look in Safari for me.
I run a virtual PC with Ubuntu just to check Firefox on Linux, the fonts that are available are a little different so it can be a worthwhile exercise.
- Q. What methods did you use to test the skin?
- A. For the most part just “edit and continue”. I use the validation tools and the silktide sitescore site (http://www.silktide.com) that highlights validation issues.
- Q. Which browsers do you regard as essential to work 100%?
- A. IE 5.5 + and Firefox. I have clients who use Macs, I generally ask them to use Firefox for admin as testing in Safari is a bit tricky if you don’t have a Mac!
- Q. Did you employ a design method that allows the older browsers to view a more basic version, ie. just a text layout in Netscape 4?
- A. No, If I were tasked with a site with a wider audience I would look at this. I have worked a little on creating a site that renders well on mobile devices being an avid Ipaq user for many years.
- Q. How did you ensure the CSS layout works the same in all browsers?
- A. After you get past the issues relating to quirks mode in IE by using the correct doctype, the main issue is the box model rendering between IE and the others. Unfortunately IE7 will invalidate some of the hacks currently in place.
I have been using the Tan Hack which is the “* html{“ to target IE 5 and 6 and the !important keyword (this allows you to set a property for Firefox and then over ride it for IE), unfortunately these will also be read by IE7 which address nearly all of the common CSS bugs in IE.
The best way to move forward would be to use conditional comments to target IE versions in the page with separate style sheets to target each IE version.
- Q. Did you use any CSS hacks within this skin, if so what hacks did you need to implement?
- A. The easiest way to ensure a reasonable compatibility for the box model issues is to add an extra wrapper around the content. You define the width only for the outer wrapper and the padding only in the inner divs. It’s not really a hack, but it adds a few extra bytes to the page.
Other areas of interest
- Q. Which text editor do you use and why?
- A. The FCK editor is far better than the FTB one. I use the provider created by Locopon, I understand this will be introduced into a future release of DNN which is good news.
- Q. Are there any key areas users should be aware of when adding content to a page in a pure css skin?
- A. Using an editor that can generate valid xhtml, like FCK, is a must.
Top Tips:
- Q. Do you have any tips for the listeners when creating a pure CSS layout skin?
Tim is available for consultancy on creating valid accessible DNN sites.
OBrienIT.se provide a full service for the design, implementation and hosting of DotNetNuke based sites.
Contact info@obrienit.se for details.