Website Design – Establish a consistent theme

For developers who use ASP.NET, DesignBais, and other tools, it’s important to design the look and feel of a website before too much front-end work is done.

I was recently looking at a website that discusses how Microsoft redesigned their front-page and navigation. It’s a good introduction to the considerations involved in establishing site characteristics. Consistent page elements include navigation, headers, footers, and sidebars. Every page you visit in this site has a consistent look to it and that helps people to become familiar with your site.  Where is the navigation? Where can it take me? How do I get out of here? How do I find stuff?

In ASP.NET a consistent site is developed with Master Pages. All pages become content within the master page and at development time we can see the container as well as the content, and we can write code that allows the container or the content to exchange information with or manipulate the other.

In FlashCONNECT, pages are created as templates and these are used to construct all other pages. You read in a template, populate the header, fill in content, populate the footer if it ever changes, then return the page back to the user. In ASP.NET it’s exactly the same with Master Pages. The important thing is to design one or two master templates and then use them.

In DesignBais the default site structure is to have a header with one menu at the top of the page and a left-side bar with another menu.  What you put in the menus is up to you, and you don’t even need the sidebar. But be consistent. One consistent practice might be to put site navigation on the sidebar, and page-specific menus at the top of each page. It’s considered bad form to change menus too many times on people, so you may provide a standard Logout menu option, a standard Help option, and then some page-specific items. This way consistency is demonstrated and the menu also gets recognized as providing context-specific convenience functions.

DesignBais doesn’t have a concept of Master Templates yet, but there are two ways to enforce a consistent layout:

This first method isn’t very effective but it’s something for now. Create a standard form for the site with a heading and footing, and assign left and top menus. Whenever you go into Forms Designer to create a new page, use the Copy Form option to copy your template to the current file and a new form name. Then use this as the base for your new form. Be sure to put your buttons in a standard place – don’t put buttons in a different place on every page. Consider how effective the structure of the form would be if it were used as a subform rather than as a main form. Do you have critical options in the menu only? Those won’t be available in a subform.

The second method is to use the DBFORMLOCAL variable to read in the DBIFORMS definition of a form, modify it directly, then pass that up to the user. I’ll do some writing on this later but if you haven’t read the doc on that, check it out now. Consider calling a program from the Before Screen or Get Screen event for every form, and applying a site style to it before passing it to your After Display event for normal processing.

In any site, good use of CSS defines what the site will look like, and applying CSS to content forces structure on it. FlashCONNECT doesn’t know anything about CSS but you can easily build this into your pages on your own. With ASP.NET and FlashCONNECT get used to using DIV tags and then assigning styles to them, rather than using tables to control page layout. I think most Pick people have no clue about CSS when they first start using a product like DesignBais which relies heavily on CSS to provide a consistent visual style. It’s a good idea to get familiar with CSS quickly though because it is very powerful and can be used to dramatically change the site appearance. Remember though, that a data entry form shouldn’t be dramatic…

Just for reference, consistency isn’t exclusive to the domain of the web – thick client apps should use themes and other elements of design and style to keep them consistent as well.

Most importantly, try to establish the style before you get into heavy coding so that everyone knows where things go. And while this may be hard in some cases, try to design your site/application so that changes to the overall visual structures won’t impact the way code works or the way components render. You can expect the main content area to have a minimum amount of space, but the right side navigation may not exist and may not be on the right side.  Try to avoid hardcoding colors and font styles but rather, assign category names to your controls and try to let site-wide style or theme definitions control what they look like, and sometimes even where the controls are found.

There are no absolutes about what makes a site/application user-friendly, so plan on having it all change a few times before you get it right. If you code with this concept in mind you will find that your code increasingly won’t care about what the UI looks like, only how it behaves, and therefore he site should be able to change with few to no code changes at all. Well, that’s the theory anyway…