On the Inside

I recently revamped the front page look at Ubercart.org in preparation for an eventual (hopefully sooner rather than later) first release. In the process, I learned once again that all the wonderful contributors have made Drupal an excellent tool for designing web pages. With a simple combination of Panels, Views, and Drupal's own content type creation, I was able to achieve what you see there with no headache whatsoever. It was just too easy!

What isn't necessarily easy is knowing the tools exist to do something like that and how to use them together for your site. I decided to spend some time writing up my experience, including the preliminary thought processes and then actual configuration of the modules, so others could benefit from my fun. The voice in the tutorial is pretty informal, but I trust it gets the job done. Also, I'm just darn proud of the end result and thought I'd put this up to get some feedback while helping people, too.

Purpose: Describe the thought processes and modules used to design the front page of Ubercart.org, a site designed to be both an information portal and user/developer community.

Modules explained: Drupal's own content type creation, Views, and Panels.

Honorable mentions: Deciding on what to display, visual aids, "enhancing" the forums and Navigation menu.

Well, the goal of this article is to explain to you how I constructed the front page at http://www.ubercart.org using some awesome contributed modules, a little bit of HTML, and some great free icons. We're preparing the place to be a community site, and a straight list of recent nodes just wouldn't cut it. I also didn't want to settle for a simple node that I update with new information every so often, so I finally got around to downloading the latest versions of the Panels and Views modules and set to work.

This is the blog site, similar to mine, of fellow Drupal developer Greg Holsclaw. He also runs http://www.skejo.com, a site where I post my articles related to Drupal development. He's now officially a developer for vbDrupal, as well, an open source hybrid of vBulletin and Drupal available for those with a vBulletin license.

Ahh, finally a good looking site to explain the intricacies of HTML/CSS. The tutorials here are very good and are designed to give you good habits from the get go:

http://www.htmldog.com

I've used this tool (found through the Drupal forums) to create the favicon for several sites (including the wombat icon used here). It works like a charm! Upload your picture and it turns it into the 16x16 .ico file for you.

http://www.dynamicdrive.com/favicon/

Don't know what the favicon is? It's that little picture that appears in your address bar or by the link to a site in your bookmarks.

As stated on the tool's page, "The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast 'when viewed by someone having color deficits or when viewed on a black and white screen'[W3C]."

http://www.snook.ca/technical/colour_contrast/colour.html

A neat little tool to show you the organization of content on your website. I'm not sure how practical it is, but it sure is fun to watch those nodes start building on each other and flying all over the place.

http://www.aharef.info/static/htmlgraph/

I'm horrible at matching colors unless it's black and white with varying shades of gray. Here the blues were chosen by "locking" the relation of the default colors to one another and sliding around the blue scale till I liked what I saw.

In any event, poor color schemers like me might find this tool useful:
http://wellstyled.com/tools/colorscheme2/index-en.html

It matches up various shades of the appropriate colors based on a few different styles. Use the arrow button on the very top right corner of the page to rotate the colors around. I probably won't change this place, but it's certainly nice for future sites...

Oh what a wonderful world of web design have we... well, you.. and me. Check out this design technique to get round corners on tables without using images. Pretty handy, though I won't use it here. I may somewhere else!

http://www.html.it/articoli/niftycube/index.html

Here's a quick little tool for SEO analysis. (Search Engine Optimization... if you care about that kind of thing.) This site is 'satisfactory,' which is good enough for me.

http://www.sitening.com/tools/seo-analyzer/

I can never make sense of .htaccess. Most of the tutorials I've tried don't even end up working right for me. I'm sure it's my own Apache ineptitude... and maybe some bad tutorial writing.

In any event, here's a good tutorial that explains what these files do fairly well (although it's not the kind of resource with examples of how to do things... I'll post those later):

http://apache-server.com/tutorials/ATusing-htaccess.html

It's very easy to use CSS to change the mouse pointer over an element on a web page. I'm posting a link here to a quick example page that shows them all in action... just hover over the text in each box to see them change.

http://www.stewshack.com/css/Mouse.aspx

An incredibly handy little tool to test the display of different fonts in your web browser. Do comparison tests and ensure the fonts you use are browser-safe:

http://typetester.maratz.com/