Marketing Ninja

On Friday night I decided to sit down and start work on a new project that I had been mulling over for a couple of days, but this time I was going to build the new service from the top-down, rather than from the bottom-up.

I’d start by building the end user experience first then shape all of my programmatic logic around creating that experience. I sat down and spent some time reading through Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages (referral link), which was given to me at Christmas but I had yet to actually sit down and digest. I used this text to help guide me through my weekend CSS/graphic design adventure.

Paint.NET – a Poor Man’s PhotoShop

The first order of business, according to Jacob Sanford, the author, is to design yourself a logo around which you style the rest of the site.

I’m a pretty terrible graphic artist, so I decided to just try and do something simple. I normally use The GIMP since I can’t afford PhotoShop (I wouldn’t even know how to use it if I could,) but I had recently been referred to Paint.NET by a classmate of mine who happens to “get” this whole “art” thing.

Paint.NET turned out to be a better choice than the GIMP for the following reasons:

• It consumes less system resources than the GIMP;
• It has a simpler, less “crowded” interface;
• It’s also free; and
• It has a much smoother “drawing canvas,” if you will, for people like me who want to draw rather than edit.

Using Paint.NET I threw together a basic logo and banner that I was comfortable with, then I moved onto the next part of the process: putting together a CSS layout.

BluePrint – a Full CSS Framework

CSS is not my forte; I can handle most CSS jobs thrown my way but I am by no means an expert. BluePrint was designed with people like me in mind; people who may not be brilliant at creating original CSS designs but are clever enough to adapt existing designs in order to suit their needs.

BluePrint offers a solid foundation for doing grid-based design and has a smart system for managing columns, nested columns, rows, all without relying on tables at all. It also has built-in adapters for supporting Internet Explorer-related CSS quirks and a printable version of all of its layouts. I tinkered around with BluePrint and came up with an elegant 2-column design for my new project within a matter of minutes.

It’s a great framework and I highly recommend it for any CSS-challenged developers out there who just want to build a solid, robust layout without all of the headache that can go into building CSS from scratch.

ASP.NET 2.0 CSS Friendly Control Adapters

In chapter 5 of Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages (referral link) Sanford describes how to use “CSS Friendly Control Adapters” to manipulate the output of complex ASP.NET controls like the GridView, TreeView, Login, Menu, and so on.

When I first started using BluePrint the output from one of my TreeView controls was really wacky, simply because it was trying to output a big mess of nested tables instead of nested list elements. I downloaded and installed the ASP.NET 2.0 CSS Friendly Control Adapters, as recommended by Sanford, and edited my TreeView control’s output so that it would produce more CSS-Friendly output.

I highly recommend getting this adapter toolkit, and having Sanford’s book to help guide you through the process of modifying the adapters is also very helpful.

If you enjoyed this post, make sure you subscribe to my RSS feed!