Using CSS in ASP.NET
An often ignored part of ASP.NET development is building a good web based user interface. I’ve found this to be especially true when ASP.NET developers get called upon to construct public facing web sites. After all, historically most ASP.NET web apps are created for internal, not external, consumption and it’s expected, if not demanded, that all visitors to use IE, the “corporate standard” browser.
But, today we’re seeing a shift where organizations have a need to present customized solutions to the outside world. This can be anything from a fully public website to a site restricted to vendors, dealers or the like. This also means that we have to be able to present designs that hold up well across a wide variety of browsers and look good doing it, even on internal facing web apps. This is especially true as internal users are increasing usage of Apple and Android smartphones and tablets.
CSS Based vs. Table Based Page Layouts
From what I’ve seen, most ASP.NET developers tend to get stuck around 1998 when it comes to laying out a web site. Typically, they’ll use tables, including nested tables, to layout screen elements. Many ASP.NET developers have told me that they have trouble with understanding DIVs and other CSS elements and therefore avoid them.
The most common argument you’ll see against using tables for layout purposes is that tables are intended for displaying tabular data, not laying out the web page. But, the reason to use a CSS based design rather than an old fashioned table layout goes deeper than that.
First of all, using CSS makes it easy to maintain visual and code consistency throughout a site and across other related sites and makes the site more visually appealing, usable and accessible to visitors. One place I often see this is with data entry screens where spacing of entry controls and matching labels can lead to a hodgepodge of layouts that are difficult to modify and maintain. One developer may use many levels of nested tables and in-line styling while another uses a combination of <br>, and transparent gifs to handle spacing. The positioning of each and every screen element is handled differently on each and every page, making the site difficult for developers as well as users.
Next, a good CSS design insures that redesigns and even simple changes can be done more efficiently and less expensively. When things like nested tables and transparent gifs are used to layout pages, it can create a situation where even simple modifications can become time consuming exercises. For example, changing a company logo design or position to meet the latest whims of the marketing department can mean hours, if not days, of tedious work. With a consistent CSS design, you can prevent this kind of headache.
Lastly, using a standard and modern CSS design helps present your site better across multiple browsers as well as improving performance. As more and more visitors show up with Apple iOS and Android based smartphone and tablet devices this aspect becomes more important. Table based sites, especially those that use nested tables, tend to perform poorly on mobile browsers.
So, should you never use tables for web page layouts? While it is something to avoid in general, you may encounter situations where a table layout is the best solution. This is sort of like finding situations where a “GoTo” statement is useful, although a little bit more common. If you must use a table layout, do make sure that you avoid nested tables and using HTML elements or gifs to handle spacing. Instead, use CSS code, such as margins and padding, to handle as much positioning as possible.
Basic CSS Design Rules For ASP.NET Sites
Now, let’s go over a few things that will help you design better ASP.NET web pages.
First of all, I highly recommend building a template site that uses your CSS framework and contains your master pages and empty or stripped down templates of the different types of web pages you’ll be displaying. This prototyping technique works well for both WebForms projects and MVC projects. Having this kind of guideline to follow will greatly help new people coming into your project and help keep all team members on the same ‘page’ so to speak. Things can get really ugly on a site when everyone is doing their own thing rather than following a common user interface standard template.
I also suggest that you use a naming convention for CSS elements. This makes it easier for other people on your team to figure out what element to use in a particular situation. Along with this, I suggest using the ‘id’ rather than ‘class’ attribute for common elements like the page header and footer. This helps identify their unique status on the page and can prevent accidental usage of a style.
Next, avoid inline style attributes as much as possible. There can be special cases when this is necessary but, as much as possible, keep CSS in the CSS file(s). Another thing to avoid using are older HTML styling elements like <font>, <b> and <i>. Instead using spans and CSS styles. This insures visual consistency and maintainability.
Finally, don’t fall into the trap of replacing empty cells and spacer GIFs with spacing divs. (Yes, I’ve made this mistake myself.) Instead using margins and padding to position your screen elements. If you layout your page designs well it’s very unlikely you’ll need to have spacing crutches on your pages.
Common CSS Grid Frameworks
It may seem like quite a task to come up with a style sheet that handles a page layout easily and consistently. There’s a lot that goes into it ranging from properly resetting HTML elements to selecting common sizing and typography to cross-browser compatibility. Fortunately, a lot of this work has been done for you. All you need to do is download the CSS frameworks and plug in your own styling where applicable.
The two systems I’ve used are the 960 Grid System and the Blueprint CSS system. Both are easy to understand and apply to a site. There are also several modifications to them around that you can download for use in custom situations like mobile device sites and floating layouts. Using one of these common CSS grid based systems is perhaps the easiest way to simplify using CSS in your ASP.NET site designs.
By doing a little planning up front and by using a common CSS grid framework you can get away from using antiquated table based layouts and improve the quality of your ASP.NET websites.