Web Site Building Bits and Tips

Just a quick post to share some links you might find helpful if you are building a new web site. I've been helping several folks with their web site aspirations lately and came across these, in no particularly order:

First, how about a menu? It is pretty easy to create a nice top level menu using css and an unordered css. The tricky bit is a drop-down menu. That link will take you to a very simple but effective design which requires very little code.

If you are familiar with jquery you can use it to create a menu like the one on the left. The html/css/js code for doing this is available from this page, linked here. But what if you want to sketch out a complete web page design with menus and page elements?

For this there is a tool called Mocking Bird that you might want to check out (works best on a very broadband connection). Another new tool that might be worth looking into is: www.wix.com. It's a web site that let's you build a web site that uses Flash (like Mocking Bird, Wix is an example of an application delivered as a service, in other words, Software as a Service or SaaS, just like Salesforce or the marketing product that I've been working on: Monetate).

With these two web design apps you can create pages or edit templates using a web-based interface. As with many SaaS offerings the feature set is continually evolving so I suggest you check them out rather than rely on my giving you a snapshot of their capabilities.

When you are designing web pages, the grid approach can be very helpful. Here is an article on grid-based design that I found useful, full of links to related content (I am finding Smashing Magazine a good resource in general, for everything from WordPress themes and buttons, to coding tips).

The ability to draw a design on a grid and then have an application generate the required CSS is a huge boon to web site developers. Here's an article that has links to 15 ways of accomplishing this. (What a difference these would have made when I first started messing with CSS layouts.) Another solution, not on the list of 15, is 960 Grid System. As the name implies, 960GS simplifies designing around a width of 960 pixels, which is a common choice these days for page width.

Finally, for this post, I want to mention XAMPP, software that let's you test a lot of stuff on your Windows laptop or desktop before putting it on a Linux/UNIX web site. With XAMPP you get the ability to run Apache, MySQL, PHP and Perl (the AMPP). Of course, this then gives you the ability to install WordPress on your Windows box which is very handy when developing sites in WordPress. Fro Mac OS X users there is similar functionality in MAMP.

Happy page building!