Design for non-Designers #3 in series of 6

Last time we took a look at some basics and I promised to show some more about how to do an effective liquid layout design, and how to make a good pod/bubble in CSS.

First off I'd like to make sure I clarified a few things because I found that there wasn't readily good information about this on the web. Fonts. I mentioned fonts last time, but a good friend told me he didn't know what they were, so I'll talk a little more about fonts here. I said there were 11 common fonts on both platforms, and I have a list below. Let me Break them into 2 categories. Serif and Sans serif.

Serif fonts: (in case you don't know what a serif is, we'll make it super simple. Serif fonts have tails, Sans Serif, no tails) Times New Roman is the most popular Serif font. Most popular for print that is, and some web sites use it as well. Because of screen resolutions, I personally like using Serif fonts for headers and subheads, not body content. Georgia is a great font instead of Times. Then Courier and Courier New.

San Serif: Verdana is my favorite to use for body text. why? Because it is a wide font, it is very legible on the web. Next would be Helvetica, Arial, Trebuchet MS, and Arial Black. (Please do not bold the already bold Arial Black.) Lastly comes Comic Sans. Yes, we've all seen this used way to much. Comic Sans is actually considered cursive or brush on Windows, but unless you are doing a child's website, stick to a normal font. What you say, I've forgotten Impact? OK, so I tried. Yes, it's common to both platforms, but not the most legible font now is it. To a designer, it's just plain ugly, but my old print self thinks Arial is ugly too.

So now I'll give you a nice reason to use Dreamweaver CS3. Dreamweaver already has these grouped nicely. How Dreamweaver does it is breaks them down to something like this: I'd like them to see Verdana. But if they don't have Verdana, then use Arial. If not Arial, then use Helvetica. If no Helvetica either, then any Sans serif font. In CSS it'd look something like this:font-family: Verdana, Helvetica, Arial, sans-serif;. I know you could write that in any text editor, but Dreamweaver already has things in groups of like fonts, plus it's easy to add your own groupings. Dreamweaver CS3 also does an amazing job with CSS, so just another reason to use it.

I do want to say this to the hard core developers about Dreamweaver; I love the way it handles code in Code View. Don't think just because it's a WYSIWYG editor, we designers can't use anything but Design view. DW just makes it so easy to code with code hints etc. that I typically write all my CSS by hand. Now that doesn't mean the Design View hasn't improved a lot of the years. Next time I'll show you how to code a page in CSS strictly by Design View, and it won't mess up the code.

One last comment about Dreamweaver here. On Scott Fegette's Blog, he talks about what they are taking out of Dreamweaver. Kudos to the DW team! Unlike Photoshop where they just keep cramming in features (don't get me started on what they need to take out of Photoshop) the DW team is taking out unused features like Flash Text and buttons. There are plenty more things, but I for one am thrilled they are taking this and more out, so they can make DW the best program it can be without a bunch of waste. Keep it up Scott, great job and great blog. One of the more useful blogs I read.

OK, now for the bubble. I recently had to make one for work, so we'll use that example, although I've had to do this a lot in my career. This one is different though because it is meant to go over top of a window, not inside, but the principle of making it is just the same.

First we'll start with the actual bubble, which I could have drawn in Photoshop or Fireworks. I just wanted it to be vector so I could change it easily before I decided on the actual shape. The great thing about fireworks over Photoshop is I have more control of what my end result over this bubble is, meaning I could just have it in CSS, or I could make a symbol of it and bring it into Flash. Can't do that in Photoshop. I, as many of you know, am a Photoshop Expert and Instructor, but Fireworks is by far the better program to use for web graphics. Maybe we'll do a blog outlining why. We'll see.

OK, so this bubble was a gradient, but IT couldn't figure out how to make it, so we changed it back to just a dark gray outline and lighter grey inside. More than likely, it would have some buttons in there too besides the X close one. Not that it matters right now. All we want is for it to be able to expand with text. IT wanted to have me give them 4 corners. Now, I don't mean to insult anyone here, so if that's what you would have done, let me just say, there is a better way. The 4 corner trick worked beautifully in the days of tables, and very early CSS. When we absolutely positioned things, which I try not to do except when I can't find another way.

So if not 4 pieces then what? 3 pieces. This bubble does not expand in width, just in height, but I would have done just 3 even if it was the width I wanted to expand.

Here are the 3 pieces: The top piece is just as far as the curve on the rounded rectangle. So is the bottom piece. This is why I then don't need to make a rule in my CSS for a space above my text. It can sit at the very top of the next DIV. My middle piece then is the only piece that expands. It has a repeat on just the Y and that's also where we put the text.

As far as the CSS goes, all I need is a container DIV to keep the other pieces together, and my 3 div's for my pieces. I did add the close button as an actual image though, so IT could program it, as the rest are background images so they don't affect any text I want to use. You can see the code and CSS in the example I've put up for you.

As far as a good liquid layout goes, I am of the mind that only certain things should be liquid. I can't stand the text area going liquid on me, but textures, headers etc. can be liquid. It has more to do with choosing the right textures that will look good when expanded on a large monitor. This is getting really long, so I'll finish up this thought tomorrow before we move on with the series.