Home > Continuous Integration, Custom Development, Graphic Design > The Design and Development Benefits of CSS

The Design and Development Benefits of CSS

August 14th 2009 | Tom Lerchenfeld & Josh Frankel

Tables belong in living rooms, not HTML

Long term sustainability of code is the biggest challenge and central concern to building an application. It’s what the cyclical “O” in the Thycotic logo represents (and you thought we were into recycling), and it’s the ultimate goal of every application we build.

The first challenge encountered when building a Web site or application is to do with keeping the architecture lean while anticipating changes that may arise years down the line. Anyone who has worked with a mature Web application knows the horror of making a ‘minor’ change to something that is within a series of nested tables. Nested tables are like Russian dolls, with each table yielding a smaller table inside. This is cute in crafts, but debilitating in code.

Nice UI, let’s use it for the next 10 years

Tables present just one example of designing without future flexibility in mind. Inline styles can also make it nearly impossible to change or even tweak a UI.

Cascading Style Sheets (CSS) has been implemented in many Web sites and Web apps, but its true potential lies in a back-end architecture that anticipates change and involves minimal back-end development, yet affects the UI in a profound way. That was quite a mouthful, so let me use these two Web pages to illustrate my point:

Want to guess what they have in common? They are both using exactly the same HTML and content.

Seriously, go check it out www.csszengarden.com.

For a back-end developer this means that generic classes and specific ids allow the overall UI to be completely controlled through CSS and other front-end techniques.

Keeping team code the same
A common problem in many businesses is that everyone works on a separate aspect of a project and then brings it together and tries to make it look uniform. Inline styles, BRs, and HTML tags can make a page look the way you want it to, but when you want to change the look of your site, you’ll find these methods can be a real pain. The problem will be even greater for your designer. Each page will be a single design, too complex to change easily and cost-effectively.

Checking for uniformity
I recently came across a test that uses a simple file reader to check Web pages for uniformity. The reader grabs all the .aspx files from the source, identifies ‘bad’ tags, and recommends changes. This solution saves hours of trawling through code manually. If you’re daring, write the method so it changes the tags on its own, saving even more time. If you’re using unit tests, this test will fail every time, alerting a new programmer not to use the bad tag.

Coding for your designer
If you use Master Pages in ASP.NET, you already know the benefits. Other languages have similar templates you can use or make. But how far should you take them? Our designer has suggested splitting our Web site into three different types of pages. This way we won’t have to recreate the layout every time we add a new page.

* Login, logout, and and other similar unauthorized pages will have one template
* Configuration and site maintenance pages will have another
* Content pages for every user will be the third template, with specific ids making them unique

The benefit to this is that when your designer writes the CSS for these pages, he can change them all at once. Of course every page will be slightly different, but that’s where specific ids come in. With this method, when you change your site layout in the future, you don’t have to do it page-by-page.

Adding to your site
If you think this sounds like too much effort to apply, think about the time it takes you to create a brand new page. Each one will most likely have to be designed to match the look of your other pages…adding tables, spacings, BRs, inline style… the works. If you are set on your site and you don’t see much expansion in your future, you’re probably ok for now. But if your Web site is in an expansion stage, consider the time it takes you to create a new page, and how drastically a templated page would decrease the effort.

Maximizing usability
I can’t walk down the street without seeing someone looking at a Web page on a 4″ phone screen. Many people now have phones that can browse the internet to one extent or another. Some Web elements show up better on phones and PDAs than others. Lists, divs, and paragraph formatting all show up great. With CSS, your site will show up effectively on a variety of small wireless devices. But tables, Flash, and images that act as spacers don’t scale well, and show up as bits and pieces of an otherwise functional Web site.

As you can see, with CSS there are no losers. It’s not really a case of whether or not you should embrace the language—it’s simply a case of how soon you can do it.

Tom Lerchenfeld  is interning as a TDD / .NET Developer and Josh Frankel is a graphic designer. Both work for Thycotic Software an agile software services and product development company based in Washington DC. Secret Server is our flagship password management software product. You can follow Josh on Twitter

  1. August 17, 2009 at 12:06 pm

    Why doesn’t your logo at the top link back to your homepage? And the RSS image doesn’t do anything either… Just letting you know…

  2. August 17, 2009 at 12:17 pm

    @John

    I agree with you on both points. We have quite a few things to update on the website and this is on the list. The idea is to fix the general navigation around the site, and do a better job incorporating the blog.

    I hope we dont fall into the category of your “stupid profile pics” post from your blog.

  1. August 17, 2009 at 9:24 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: