In this Issue...
 INTRO
| Short & Sweet...
This month the newsletter is a little short, but still
sweet. We've been working on a number of projects that you
will find very interesting. We expect to be delivering these
exciting new products and services within the coming months.
We're also preparing for the
eBay
Developer Conference and
eBay Live! in Boston during the week of June 11th. If
you're a part of the eBay community and will be at the
conference, or if you work in the Boston region, let me
know. I'd love the chance to meet with you to learn more
about you, your web and presentation needs, and
your involvement with eBay. Drop me an email at
jreckers@pixelmill.com.
This month Corrie continues her series on CSS where she
dives into the challenges of moving from tables to CSS.
Also, she writes a great how-to article for working with our
new product search tool and filter. You will find this tool
to be very valuable when searching PixelMill.
Thank you again for your continued interest in our
newsletter and for being a valued customer. Expect more from PixelMill
and yourself!
by Jason Reckers, President & CEO -
PixelMill Inc.
 FEATURE
| Weighing Tables and CSS
Last month, we moved past the CSS knowledge
Level 1 mile marker by learning some CSS basics that
apply to streamlining tables-based sites as well. This
month, we'll tackle Level 2 head-on. As a quick refresher,
people in Level 2 are "tables-layout gurus" who may have
tried CSS layout, got frustrated, and gave up. The best way
to move forward is to start by being open to taking a
serious look at tables vs. CSS. You'll be much more willing
to learn CSS after seeing how they stack up against each
other.
In the rest of this article, I'll compare two web pages -- one built
using tables, font tags, and spacer gifs and the other using
CSS and background images. We'll put them both on the scale
and see how they weigh.
I started with the
Intensive Wedding HTML template, which was designed
using CSS for the layout and design.
Then, I spent a good hour and a half reslicing the images
and building a table structure. The screenshot below (click
for a larger version) shows my nested table structure. I
have five levels of nested tables.
Now I'm ready to weigh both options!
Looking at file size alone:
- The tables page is 8.46K.
- The CSS page is 3.07K, with the stylesheet itself at
4.36K.
Initially this doesn't seem like much of a difference.
However, since the layout/design code (code for spacer gifs,
font tags, etc.) is in each and every tables page, the user
is having to download all that information for each and
every page. The stylesheet, once loaded, automatically
applies to every page that is viewed and does not need to be
reloaded. Here's how it breaks down:
- Tables site - viewing four different pages (if all
the same size):
9K + 9K + 9K + 9K = 36K
- CSS site - viewing four different pages:
3K + 4K (stylesheet) + 3K + 3K + 3K = 16K
CSS is the obvious winner for saving you
bandwidth.
Now let's look at the graphic files. The diagram
below shows just one example of how CSS can make working
with graphics easier. With tables, the footer graphic had to
be split into three separate graphics to fit the table
structure. With CSS, only one graphic is needed. In my
entire web site, I needed 8 additional graphics for creating
the table layout's various background images and slices.
Again, CSS results in a slimmer solution.
Figure 1. CSS results in less graphics.
Let's look in-depth at the navigation buttons. The
HTML code for the CSS version is simple, clean, and semantic
to boot, taking up only six lines of code. The button
graphic, text placement, width, height, etc., are all
controlled through the separate stylesheet.
<ul class="submenu">
<li><a href="index.htm">Home</a></li>
<li><a href="gettingstarted.htm">Getting Started</a></li>
<li><a href="template2col.htm">2 Column Template</a></li>
<li><a href="template3col.htm">3 Column Template</a></li>
</ul>
The HTML code for the tables version is a mess, to say the
least. I will spare you the full 45 lines of code, but
here's a small section:
<table border="0" width="100%" cellspacing="0" cellpadding="0"
id="table2">
<tr>
<td><img style="display: block;" src="images/vertical1.gif"
width="21" height="26"></td>
<td width="100%" background="images/vertical2.gif">
<font face="Verdana" size="2">
<a href="index.htm">
<font color="#FFFFFF">Home</font></a></font></td>
</tr>
<tr>
<td><img style="display: block;" src="images/spacer.gif"
width="1" height="7"></td>
<td><img style="display: block;" src="images/spacer.gif"
width="1" height="7"></td>
</tr>
...
Even with all that code, the functionality of the CSS menu
is far superior to the tables menu. Without CSS, you can't
remove the underline from the table link (short of actually
creating individual button graphics for each link), nor can
the button change on-hover (without adding Javascript
functionality). The CSS menu looks clean, crisp, and
easily allows for a link rollover effect.
Figure 2. CSS gives better control over links, with much
less code!
Here's a summary of how tables matched up with
CSS:
Using CSS for design and layout...
- results in lighter, cleaner code
- allows for semantic, standards-based markup
- saves on bandwidth with smaller file sizes
- makes graphics less complex
What I'm NOT saying, however, is that CSS is "easier"
than tables. As with any new skill, it will take some
focused effort to learn the rules of CSS, just as it took
some time to get used to building complex table structures.
Once you get used to it, however, CSS will seem so natural
that you'll find it hard to go back to tables!
In next month's newsletter, I'll get you jump-started
with CSS-based layout.
by Corrie Haffly, PixelMill Staff Writer
 SOLUTIONS
| New PixelMill Search
We quietly introduced an improved PixelMill
search engine and advanced search form. Those of you
who visit PixelMill regularly may have already seen
this great new feature, but if not, here is our
newest way to help you find the product that is just
right for you!
Besides revamping the backend code to perform more
efficient searches, we've put out additional advanced search
options on the catalog page so that you can more easily
narrow your search results to have only the features that
you're interested in.
The first step is to perform a simple keyword search,
or, click any of the categories from a product
landing page (such as the Expression Web page or Dreamweaver
page). These take you into the search results page.
Once you're there, you'll see our new search bar
across the top of the page. There are links to expand the
search bar to display more search options.
For best results, only pick a few options at a time
and click the "go" button to apply the search filters.
For example, typing the keyword "computer" with FrontPage
templates selected brings up 157 products. To help narrow
the search, click "general options" and then select Blue
from the color list, then click "go." This narrows the field
to 71 products.
Now, click the options for "layout and features search."
While there are many different options that you can check,
it's best to begin with one or two of your most critical
features. In this case, I've selected XHTML 1.0 Strict
and a layout width of 1024. This narrows the results
drastically to only four products. If I had selected
many more options, I may not have gotten any results!
Of course, you can always deselect options to broaden your
search!
PixelMill has always had a large variety of products to
choose from, and we have done our best to make it easier to
find the right product for you with this new search form. If
you have any questions or suggestions about the new search
form, please contact us at
support@pixelmill.com.
SOLUTIONS
| A Little Extra Help Goes a Long Way..
One-on-One Training
Need a little extra help making the transition to
CSS-based Web sites and changes in web standards? We
have designed our new one-on-one training service to
connect you with an experienced professional to help
guide you through your questions.
Register for one of our No Risk training options to
schedule a personalized online training. You will be amazed
how much you can learn in an hour and how quickly you can
grasp CSS and Web standards.
Click the option below to buy your
training today!
A PixelMill team member will contact you after placing the
order to discuss your specific needs and coordinate with the
appropriate expert.
Service requires a PC and a broadband connection. For questions,
please call 866-749-3564 (Option 2) or
contact us using one of our many contact options.
 SOLUTIONS
| Save Valuable Time...Have PixelMill do the Work for You!
Custom Services
Need to focus on more than just the project at
hand? Let PixelMill help you save valuable time by
providing you professional and timely customization
services. We will
bring our best experts to your project ensuring that
you deliver an exceptional solution for your
customer.
Our Custom Services package offers:
- Reasonable prices for custom work.
- Quick turnaround...within 1 to 2 business
days
- PixelMill-approved designers and coders.
- Great communication...work with one
project manager through the entire process.
- NEW! - SharePoint Solutions! Need a template or graphic design and
CSS work for your SharePoint site? Let us know,
we're quickly approaching the release of new
solutions for SharePoint.
Visit our
Custom Services page for more information,
and get started today!
|
