Web Site Design

Designing & Coding CSS Special Effects

John — Wed, 18 Mar 2009 17:29:26 -0400

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

If you're a true designer for the web you know that web design is not all about a pretty face for a web site. It's about planning. Planning for a user's reactions, planning for content to grow, and on it goes. So in this article we'll talk a bit about planning for and executing special effects. I'll use some real-life examples from sites I've worked on.

Special CSS Effects Using PNGs For Transparency

First up is the Reston Virginia Pet Fiesta. That's right, a party for your pets! In this design I was given a logo, so I based the design on some colours used in the logo, plus the whole fiesta vibe. The background is a sort of stucco feel but that's a fairly mundane repeating background. The special part is the jagged red line between the header and body content, echoing the jagged red line from the hat which the logo animals are wearing.

The first step here was knowing I needed something to dress up the design and to help marry the header with the body content area. Like The Dude's rug in The Big Lebowski, I needed something to tie the room together. I figured a big jagged line echoing the hat would be nice. The problems that went through my head were:

do i want to have to cut all those images for where the jagged line overlaps the header and body and left/right columns
how will i be able to get this to work with the flash piece that is supposed to show at the top of the body area?

What I decided was that I needed one graphic that had transparency. This way I would not have to cut a bunch of graphics but could instead cut one image that I could layer on top of the design. A GIF was ruled out because I didn't want to have to fuss with getting the jagged line placed EXACTLY right so the edges all matched the various colours it was overlapping, and additionally it probably wouldn't have looked good overlapping the Flash piece. The answer was to use a PNG.

Using PNG and CSS to Achieve Special Effects

Using a PNG meant now I was opening another can of worms because IE6 doesn't support PNG. In order to use them you have to use something like JQuery with PNGFix. This was OK with me because from the beginning I was planning to use JQuery, knowing the shadowed edges of the design would need PNG-power as well.

I went into Illustrator and used a brush to create a fat, irregular-edged but straight line. I then used a filter to make the line jag up and down. I then pasted this as a smart object into Photoshop. Since it remained a vector shape I could resize it without loss of clarity until it looked right in the design. Then I saved out just this jagged line as a PNG.

I created a <div> at the bottom of the HTML template for this design, using CSS to size the div. I placed the jagged line PNG inside the div, then used CSS to position the jag up in the header, overlapping the other design elements including the flash piece. Once the flash was saved out with a transparent background and the wmode was set for its embedding, the jag appears to overlap the flash piece.

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 2

John — Sat, 14 Mar 2009 01:35:10 -0400

In Theming Drupal, Part 1 we talked about some of the basics of the Drupal theme, getting started with your design, code, and the initial steps to creating the theme. Now, as Young MC might say, its time to bust a move.

Your first ally in real theming is the template.php file. This is the place where you override (theme) Drupal's core while maintaining the virgin-freshness of the core itself. If your theme doesn't have a template.php file, add one now. If you're adding one, just add an empty file.

Theming Drupal Regions: Ad, Delete, Mix and Match - More Fun Than Garanimals!

The first thing to notice inside template.php is the regions function: "function themename_regions()". If you don't have this function because you're starting with an empty file, add it now (Garland doesn't have it). It looks something like this:

function mythemename_regions()
{
return array(
"sidebar_left"=>t("left sidebar"),
"sidebar_right"=>t("right sidebar"),
"content"=>t("content area"),
"header"=>t("site header"),
"footer_message"=>t("site footer")
);
}

The regions function allows you to add regions to your design. Be sure each theme's region function is named appropriately. For example in our example from Part 1 the theme is called "my_theme" so the function name will be "function my_theme_regions()".

An example of adding a new region to your theme is, say on the home page you wanted to have a rotating promo. Create a new variable name such as $promo then insert this variable into your page.tpl file like you do any other Drupal snippet such as $content or $sidebar_left. Then in your region function add a new line so we can make the region appear in your blocks for that theme:
"promo"=>t("home page rotating promo")

Creating a Drupal Content Type

Now you'll need to create a new "content type" in Drupal for your home page called "Promo". To do this go to "administer > content management > content types" and choose "add content type". This will be where we store our promos from which we will randomly draw one for display on the home page. Once you create the content type, create a couple dummy promos so you can see this in action when we're done.

Next go to Views and add a Block List View of 1 called "promo_view" with the field of Node:Body, a filter of Published:Yes & Node:Type->"promo", and Sort Criteria: Random. Next visit Blocks where we tell our theme we want the "promo_view" to be placed inside our "promo" region. Shazzam! You have rotating promos. Ain't life grand?

Now I will touch on more customization that I half-promised back in Part 1. It's more template.php magic. That's not magic as in Merlin, it's magic as in Penn & Teller in that I'm gonna show you how it's done. Sort of...

Getting Control of the Drupal Navigation

The default Drupal nav was pretty uninspiring to me at first, back when the only way I knew how to accomplish tasks was hacking core. Naughty, naughty. Now I've learned a few things and I'd like to share them because it is frustrating to a lot of people. That is namely dealing with some navigation customization. Things like adding a selected state to a list item instead of the anchor, adding a span INSIDE the anchor, and enabling a way to allow for using images in the navigation.

I'm not really an intensely learned PHP guy. I can understand most of what's going on and can usually edit existing PHP to achieve a desired outcome, though it may not be the most efficient way, so your mileage may vary, but here is the function I use to spice up my Drupal menus:

The above makes a list item (not its anchor) have a "selected" class when active, and its parent will have addionally a "selectedSection" class. This is helpful when you want to control what sections are open/closed using CSS in a menu.

The above also adds an "item#" class such as "item69" to a nav item. People often use an id for this instead of a class but I often have to generate menu items or parts of the menu several times on a page, and muliiple ID usage is improper HTML, so use a class. This is useful if you want to use images for your nav items because you can target specific list items.

The above also adds a "hasChild" class so you can do things such as using an arrow bullet in your nav to indicate which sections have children. You can see this in use on this site by rolling over "Projects" in the main nav to see an arrow indicating that "Industries" has child nodes.

In Part 3 of this series I will continue discussing some template.php magic. Be sure to tune in next time, same Bat Time, same Bat Channel...

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 1

John — Fri, 13 Mar 2009 20:19:01 -0400

This will be as short and sweet as I can make it while covering the entire theme development from concept to launch, with occasional pitstops for my bad humour... Whew, what an undertaking!

Web Design, The First Step to Theming Drupal

Start with a design in Photoshop. Stop using Illustrator to design web sites. Stop using Fireworks or ImageReady to cut them. For goodness's sake, if you're a designer, then be one for real. Use Photoshop. Use vector shapes and guides to cleanly define areas using a grid to setup the design. It doesn't have to be perfect but if you're making your own design then it should at least be good, otherwise you may as well go grab a free theme somewhere and save yourself some time.

Do not use images for navigation unless you are prepared to constantly edit them yourself, meaning if this job is for a client, get off your designer's high horse and use text for navigation. Its irresponsible to use images for nav when YOU won't have to maintain it, just because you think it looks pretty. Keep the client in mind. Use text.

Coding Your Drupal Theme

Code a HTML/CSS tableless template by hand. Do not use an app to export it. Just look at the darn design and visualize the rows and columns you'll need. A header is usually one row (div set), the nav might be another, the body content another, and then a footer, generally speaking. Within the rows are columns, each column is another div set. For example often the body content area has columns, in the case of this site there are 3; the left column for navigation/quotes, the center for body content, and the right column for callouts. You will define a width for these columns, then float them all left and then clear the floats afterward. If all this is mundane to you and you want a new challenge try coding so that your page content is at the top of your HTML.

I've really plowed through the design and code portion of creating a theme because the main topic of this post is the Drupal aspect, theming Drupal, and not really the creation of a design/HTML template. If you need more in depth info on those aspects I may have other articles later, or again, save yourself some trouble and pick up a free theme somewhere.

Once you have the HTML template code complete (with some dummy content in place) or have purchased a plain HTML theme elsewhere, and have tested it in FireFox, IE6 (hopefully dead soon), IE7 and Safari, you'll need to create your own theme folder. To start it may be easier to just duplicate the garland theme, then rename the folder whatever you want (hint: if you plan to have spaces in the name it is best to use underscores instead). For now let's assume your folder has been renamed "my_theme". Inside /themes/my_theme/page.tpl.php is where most of the work goes into creating a theme. If you don't know what the page.tpl.php file is, again, check into an existing Drupal theme such as Garland to see an example of the file.

The Drupal Guts Switcheroo

Next is swapping out your pieces of code for Drupal's guts. When I am creating a new theme I usually paste the entire new HTML code ahead of the old code of an existing page.tpl.php file. This makes the copying/pasting of the Drupal guts easier... Be careful to copy/paste all the region variables you'll need to ensure a smooth transition. If you see PHP in the old theme's code, it probably belongs in the new theme but you will have to learn over time exactly what you can add/keep/discard.

I'm not going through the whole list of region swaps you'll need to make but an example would be, cutting out the body content area of your HTML code and adding Drupal's <?php print $content ?> snippet. Another example is, deleting the code for what should be the left column content of your HTML template then inserting Drupal's <?php if($sidebar_left) {print $sidebar_left;} ?> region snippet.

When working on this part of the process, you'll have to consider your client's needs. Generally for my projects, clients don't need every bell and whistle. For example how often will a client change their logo? Nearly never is the answer in my case, so I don't usually use Drupal's $logo variable. Same with the mission statement ($mission variable) since most of the time designs incorporate the mission statement as a part of the logo. But you be the judge of what works best for you.

More In-Depth Drupal Theming Tips

We've covered the basics. Now it's time for the nitty-gritty...

Your theme should be well inside the ballpark now, with Drupal trying to generate its Drupally system bits in the right places, however now the devil is in the details. At this point Drupal will be inserting content in the right place in your theme, the $content variable, and even though it may be trying to insert left-column stuff in the $sidebar_left region variable, you may not have told Drupal what it is exactly that you want in that area. This is where blocks come into play.

In "administer > site building > blocks" you will see any themes that are registering with Drupal, such as garland and minelli. As long as your new theme has been enabled in "administer > site building > themes" you should see it in the blocks area. Clicking the name of your theme will allow you to instruct Drupal what content should appear in which region (the variables you just added to your new theme) Now you can control what shows in the various regions of your page, the header, left and right columns, and footer. For example if you need a copyright statement in the footer, as long as you have swapped the $footer_message into your new theme, all you need to do is add a new block called, say, "my copyright", add the copyright statement into this new block, then in the "my_theme" theme tell this new block to reside in the footer by choosing "footer" from the dropdown.

This ia a pretty simple way to get a quick site created in Drupal. The thing is... people always want to customize. They want this and that coded exactly this and that way. This leads to the need for more control over what Drupal is exporting and where it is exporting it.

For example, what if we need our main navigation to render a bit differently, say with a span tag inside the anchor, or a div surrounding each ul for special effects? What if we are creating a site for ourselves and we DO want to use images in the navigation because we know we can update the images ourselves if needed? What if we want a view to sometimes render items as a list that DOES use a proper list format (unordered or ordered) and in other cases we want a list of items that are NOT inside a list structure?

All these questions and more might be answered in Part 2, or possibly Part 3, or the way I'm rambling it could be in Part 12, after this commercial break!

Designing Web Sites for Monitor Resolution

John — Fri, 14 Nov 2008 23:58:07 -0500

Monitor Resolution, Shmonitor Resolution

If you’ve been ignoring the effect monitor resolution has on your Web site designs then it is time for you to pay attention.

You can witness endless design horrors on the internet but one of the most annoying is lack of concern for monitor resolution. It has to stem from the “my monitor must be the norm” syndrome, which affects nearly everyone in the Universe until they see a familiar web site on someone else’s machine. It slowly dawns on them how different a Web site can be from machine to machine.

When I run across these types of websites, my first thought is that the designer didn’t know about monitor resolution. That can’t be true, can it? Everyone who makes Web sites knows about resolution.

Don’t They?

If you don’t know, here it is: monitors have different display resolutions that can be changed by the user willy-nilly. Some standard resolutions are 640x480, 800x600, and 1024x768. There are many others.

Your Web site looks different on each of these resolutions. Goodness help you if you’ve made your site too large for a particular resolution because people hate to scroll left and right.

You need to pick a minimum resolution before creating art for the web site. It’s a real pain to try to retrofit a site to a smaller resoluton. The current resolution Way Cool Web Design uses is 800x600 if no other size is specified by the client. A number of web sites keep some statistics on monitor resolutions used by their visitors. You may find these useful.

800x600 is not 800x600

OK, so you’ve settled on a resolution to design for. You hop into Photoshop and create a new 800x600 document and start designing away, right? Ugg... not really.

Sure, you can go ahead and make the doc 800x600 but don’t use the whole space because “designing for 800x600” does not mean creating art that fits into 800x600 pixels. Browser chrome (that useless stuff on all sides of the browser like navigation bars, scrollbars, etc.) eats away at your design space.

Set some guidelines up at the "safe" dimensions for 800x600 — you can determine that at Web Monkey. Way Cool Web Design uses 744x410 as a starting place, depending on project requirements.

“Above The Fold” Is Below The Belt

To add insult to injury at having to use such a small width, there’s also “The Fold” to deal with. Although it sounds akin to an Organized Crime Family, “The Fold” is actually instead what the height guideline at 410 is for. That guideline marks the area where a user will need to scroll if items exist below it. It’s fine and dandy to have content below the fold, just know that a user who has his screen set to 800x600 will have to scroll to see it.

Resolution To This Article

There you have it, folks. Monitor resolution for the masses. If you didn’t have this weapon in your Web design arsenal before, now you do. So please stop making me scroll left and right!