A Designer’s Toolbox
CSS, Photoshop, Other Applications
Debra Weiss
A Note about this Slide Show
To navigate, either:
Click on the screen, or hover over the bottom right portion of the screen
to see the list of slides.
Consider opening the links in a new tab or window.
This application was developed by Eric Meyer. Find out more about it at:
http://www.meyerweb.com/eric/tools/s5/
[any material that should appear in print but not on the slide]
Make Friends with an Aardvark
Aardvark is a Firefox extension that enables you to analyze the structure
of any page, block by block.
Our other essential analytical tool is the WebDeveloper Toolbar.
[any material that should appear in print but not on the slide]
So, What’s the Problem?
Try changing the window size.
Uses a pixel-based layout that's good at 1024 x 768 or above.
Middle column doesn't wrap, under-utilizing screen real estate
Headers are links to articles, but no feedback to the user to indicate this.
CSS layout is rather complex, and doesn't really need to be!
[any material that should appear in print but not on the slide]
Layout Strategy - A Blueprint
Think of building a house. You start by framing it out, and putting in some
walls to delineate space. You wouldn’t start decorating until you have a structure!
We want our structure to be solid. We need to have distinct “rooms” where
all of our potential content will live.
When everything fits into place nicely, we’ll have the scaffolding we need
on which to cover with our pretty design.
Check out our blueprint.
[any material that should appear in print but not on the slide]
Be Logical, and Be Tidy
Let’s view the source of our document so far.
I like to organize elements in my style sheets in logical groups, starting
with the main layout sections, and adding rules for more specific elements
like type, links, bullets, and other formatting items after that. Right now
the styles are inline, which means inside the XHTML document. I'll move them
out of there when our stylesheet is complete. For now, it can be more efficient
to work with the style and code in the same place.
Your code should be organized as well. If YOU can’t read it, it is extremely
difficult to track down problems. Clean code and logical, organized styles
sheets will make you feel good about your work and just might impress your
geeky friends, too.
[any material that should appear in print but not on the slide]
Background Images are Powerful
Background images have many uses and properties.
Just about any element can have a background.
CSS can manipulate a background image in some handy ways.
Take a look at this example of how you use CSS to position a background image.
In our demo, we used the Web Developer Toolbars "Edit CSS" to move the image
around on the fly.
[any material that should appear in print but not on the slide]
Faux Columns
CSS boxes hold their content only. They don’t inherently “stretch”. This is
a problem when you need columns to appear equal in height.
TIP: Whether you use a sliding background for flexible layouts or a fixed-width
one, to have the most control, set padding or margins for your containers with
a separate class, not in the main element itself. Padding or margins set in
the main layout elements affect width.
See an example
of faux columns in action.
[any material that should appear in print but not on the slide]
CSS Rollovers
You can get rid of Javascript and multiple images for every item in the navigation
you want to be a rollover. Use one image with both states, and use CSS to do
all the work.
See an example
of how our rollovers were made.
[any material that should appear in print but not on the slide]
Rotating Images
Some good sources for inexpensive or free images:
Clipart.com
Istockphoto.com
Flickr
A really good rotating script to use if you have PHP is called
rotate.php, written by Matthew Mullenweg. It's supposed be at http://photomatt.net/scripts/.
At the time of this writing, the script page is not working,
so I've provided another link to the script in the navigation area of our demo
site.While we’re at it, let’s use Aardvark to look at the headpics
of our demo site, and talk about CSS’s overflow property. Some info about
this property: www.quirksmode.org/css/overflow.html
[any material that should appear in print but not on the slide]
Meet the Dingbats
Traditionally, a dingbat
is an ornament or spacer used in typesetting, sometimes more formally known
as a "printer's ornament". But they are useful for lots of different
things.
Dingbats are FONTS. But they're not letters, they're pictures! And you can
get LOTS of them for free.
Favorite sources:
Dingbat Depot
The Dingbat Pages
[any material that should appear in print but not on the slide]
The Big Picture
Reading a bunch of text is boring.
Effective use of images makes every site
more enjoyable.
Why folks use teeny, boring images is beyond me.
Don’t be afraid to go BIG.
You can optimize even large images pretty well.
Take a look at a slightly
different version of our demo site.
[any material that should appear in print but not on the slide]
Behind the Mask
If there’s one technique in Photoshop to master, it’s masks. If you want to
make lovely montages, or cut backgrounds out of images, masks are the way to
go.
Note to folks who might be viewing this at a later date--we did a masking
and montage demo using Photoshop. It was one of those “you had to be there”
things!
[any material that should appear in print but not on the slide]
Flexible Layouts to the Max
I constantly struggle with creating sites that look great at all the major
screen resolutions. The difference in screen size can play havoc with any layout,
which is why a ton of designers choose to go with a fixed-width one.
Creating “liquid” i.e. layouts based on ems or percentages rather than pixels
is a great start. But problems arise there, too. What size do you make your
images? If the page size is too wide, text is hard to read. What about a footer
that's suddenly going across the middle of page because the content is too
short?
Dynamic Layout to the rescue! This one is fundamentally changing the way I
create sites, and it’s probably my favorite tool in my toolbox. You can see
it in action on our demo site, and read about all the particulars at Particle
Tree. It’s based on The Man in Blue’s Resolution-Dependent Layout, which
is also very nice.
[any material that should appear in print but not on the slide]
Get to Work!
I’m on a one-woman mission to stamp out ugly crappy websites.
Want to learn more? Lynda.com is the most fabulous resource. Worth every penny.
My hope is that this session has given you some good tips, tools, and things
to think about when you create your next site.
Now, get to work. Make something fabulous.
[any material that should appear in print but not on the slide]
The Puppy Site, October 2004