In this Issue...
 INTRO
| Push Through the Changes... PixelMill is Here to
Help...
When planning for 2007 we spent a good amount of time
looking at the key challenges in the web and presentation
markets. The web design industry is on its
ear right now. The significant shift is akin to moving from the
"anything goes" Wild West to the "structured" Industrial
Revolution. Where there were little to no standards or
industry guidance before, we now see the introduction of
products like Expression Web that are focused directly on
the web standards push. This is a big statement that CSS and web standards are taking a much more important role.
Uncertainty and lack of true direction creates the
risk that some of us will take stop dead in
our tracks to wait for everything to shake out. In my
opinion, this is the best time to step up and push ourselves
through these changes. It's not always going to be pretty
and we'll all take a couple of dead-end tangents, but if we're not
moving forward, we'll definitely lose ground. The web
industry has never stood still and there is no indication
that it will slow any time soon. Over the past ten years I've seen a number of talented
individuals pushed out because they were not willing to
push through the haze and wanted to "wait out the change."
All they found on the other side was that the change
had continued without them. With no real plateau or stopping point,
they simply fell behind even more and lost the will
to catch up.
At PixelMill, our goal is to help guide you through these
changes by providing more educational materials and easier-to-use templates.
Our templates are not only products
but are also learning tools to help customers make the jump to
the new standards and tableless CSS building strategies.
(This is not to say that tables-based sites are dead. We hear
a number of people in the industry argue the fact that
sometimes a table-based site helps you get a specific design
that is still difficult to accomplish in a tableless site.
Though you will clearly see us shifting with the
environment, you'll continue to see development of
products and education materials focused on tables-based
design.)
The point to take away is that we should all allow
ourselves to embrace the change while understanding that it
is not an overnight shift. Learn as you go and don't lock yourself into one way of
doing things. Take advantage of the growing wealth of
educational resources and apply something new to your
portfolio every week. Find what works best for you and
capitalize on that with your own style.
In this month's newsletter, Corrie Haffly delivers an excellent article
about CSS and why it is important for you to take notice. I
encourage you read this article and decide how this is best
applied to you and your business and where can you start
applying some of these strategies without coming to a
standstill. We also introduce Heather Waterman and her
PDF resource, "Under the Hood", which gives you a
peek at new tableless CSS coding strategies using one of our
templates as an example. Both articles help break down some
of the concerns you may have about CSS. Finally, we include
an article on how to create a reflection effect with an
image in both Adobe Photoshop and Photoshop Elements.
Thank you again for your continued interest in our
newsletter and for being a valued customer. We look forward
to delivering you more of what you expect from PixelMill in
the coming year!
by Jason Reckers, President & CEO -
PixelMill Inc.
 FEATURE
| Why CSS?
The recent release of Expression Web is only one more
example of how web standards and CSS have truly come of age.
CSS has been around since 1999 (!), but with spotty,
inconsistent browser support (plus the inconvenience of
having to figure out a new language) the bulk of web
developers, including myself, ignored it or used it for
minimal font formatting and removing link underlines.
But that was then. This is now... Everywhere you look,
people are encouraging the use of CSS for formatting web
sites. The current popular browsers all support CSS (in
fact, it is is completely possible -- and not difficult --
to take any tables-based web layout and create a CSS-formatted
site that displays consistently in all the browser). The
popularity of handheld internet devices (cell phones, PDAs,
etc.) has companies taking a second look at the
accessibility of their web sites. Even Microsoft has jumped
on the web standards bandwagon with Expression Web, with
specific tools and tasks built around developing sites with
XHTML and CSS. (At PixelMill, we've been offering CSS-based
web templates since early 2005.)
But is CSS really for you? Why should you bother
to climb up the learning curve of CSS-based web development
when you are already comfortable using tables? "Everyone
else is doing it" may not be the most compelling reason, so
let me first share a little bit of my story and then give
you a few specific reasons for making the switch.
Confessions of a former tables-user
Up until two years ago, I developed pretty sophisticated
tables-based web sites, applying CSS to table cells only for
background colors and basic font formatting. I would come
across various articles about CSS positioning and layout, my
eyes would cross, and I would quickly click away from the
site. I firmly believed that tables were the way to go if
you wanted full browser compatibility.
I'm not sure exactly when things changed, or what caused
me to switch sides. Perhaps it was the week when I
sequestered myself to "finally learn about this CSS thing."
Perhaps it was that there were finally lots of free, online
resources for learning more about CSS. Perhaps it was
CSS
Zen Garden and being amazed that one HTML page could
be formatted using CSS in so many different ways.
It's been almost exactly two years since I started
developing exclusively with CSS/HTML, and now I'm probably
annoyingly enthusiastic about CSS. I exclusively develop CSS
templates and have been helping to slowly transition the
mammoth PixelMill site over to valid XHTML/CSS.
Some good reasons for learning CSS
There are many people who have provided eloquent reasons
for learning CSS, and I've linked to additional articles
below. Here are the ones that stand out to me:
CSS sites are easier to develop and maintain. Once
you get past that initial learning curve, CSS sites are
actually easier to develop and maintain than tables-based
sites. I'm not just talking about putting together a
three-column layout -- I'm including the time it takes to
fine-tune the "little details" of a site and modify the site
down the road. Our pre-CSS PixelMill site was a huge pain to
manage -- a design decision to change the font size on the
page involved lots of fancy search-and-replace commands and
having to double-check every page. CSS allowed us to
separate the design and formatting into a separate
stylesheet. Now, it's easy to make a design change -- we can
just open the stylesheet, make modifications to the code,
and the entire site is affected. The designers are happy
because we can make changes and fine-tune as we see fit; the
coders are happy because we aren't messing up the page code
or forcing them to recompile the site's .NET controls.
Using a stylesheet reduces page size and bandwidth.
My old tables-based sites had all sorts of nested tables,
graphics used for spacing table cells, and lots of
additional code for formatting. Using a stylesheet instead
can dramatically cut down the amount of code actually used
on each HTML page. Furthermore, with tables-based sites, all
the formatting/layout stuff on each page has to be
downloaded for each page. With CSS, the stylesheet is a separate file
that only gets downloaded once by the viewer but then
applies to each HTML page, so you're also saving on
bandwidth. We're really only talking about a few dozen
kilobytes that you're saving per page, but if you have a
high-traffic site, a lot of pages, or your hosting account
has you pay for a limited amount of bandwidth, you'll also
be saving dollars -- and who doesn't want to do that?
CSS provides future security. When your site
conforms to web standards (i.e., is compliant with XHTML,
CSS, and accessibility standards), you can rest assured
knowing that it will work reasonably well for future
browsers and devices. Naturally there may be small CSS bugs
to work out, but (going back to my first reason) the fact
that you have an external stylesheet makes it very easy to
fix your entire site. For example, some of our two- and
three-column CSS templates lost the column backgrounds when
IE7 came around and we had some frantic customers calling
us, but we were able to tell them to add one simple line of
code in the stylesheet to fix it.
CSS increases potential to broaden markets. Using
a stylesheet to format your site means that you have future
opportunity to develop alternative stylesheets for other web
devices. For example, the "mobile web" seems to be the Next
Big Thing on the horizon for web developers. In the old
days, new technology meant that you had to develop ANOTHER
separate copy of your site with a different tables-based
layout that worked for that alternative device. Now, you can
simply create a separate, different stylesheet that is
specific to that kind of device and only maintain one
"version" of your web site. One web site, multiple
stylesheets -- when you separate the XHTML content from your
CSS layout, you finally have the opportunity to target those
mobile web users without the headache of maintaining two
separate sites.
Join a broader community. Part of why CSS used to
be so frustrating was because browsers didn't interpret CSS
consistently. But, in fact, there were cross-browser issues
even with tables-based development as well -- those of us
who have developed complex sites with tables know full-well
the various table hacks we had to use to get a site to work
in Netscape and Internet Explorer. (Although if
you've been doing it for a while, those "hacks" might seem
like second nature now!) Browser compatibility has always
been and probably will always be an issue, yet we see
more cooperation between browser companies and the web
standards community than ever before. The simple fact that
there is an established body of people who all agree on
certain specifications for XHTML and CSS (the World Wide Web
Consortium, or the W3C) means that we, who are using those specifications, should try to follow those
guidelines as they were meant to be used. The hard fact is
that tables were never intended for layout; in the current
environment, they don't need to be used for layout anymore.
Call me idealistic, but if all web developers subscribed to
these standards, the browser/device/software world would
follow suit. (Oh wait -- we're already seeing that with
Microsoft's Expression Web and Internet Explorer 7!)
So perhaps "everyone else is doing it" is a pretty
compelling reason after all.
But don't just hear it from me -- here are a few select
articles that you may find helpful to read as well:
This article is part of a series, so tune in next month
for more!
by Corrie Haffly, PixelMill Staff Writer
RESOURCE
| Under the Hood
Heather Waterman, one of our PixelMill developers, has
written an article that specifically looks at what our CSS
templates look like "under the hood." The PDF has
screenshots and images of one of our CSS templates, helping
you to see what the code looks like and how to use and edit
a CSS template. If you haven't experienced one of our CSS
templates before, this is a great way to get a quick
preview.
Read
Under the Hood: A close look at PixelMill's CSS
table-less templates (pdf).
 TUTORIAL
| Reflection in Photoshop or Photoshop Elements
Getting a reflection effect is remarkably easy to do. In
this tutorial, I'll make a reflection using the PixelMill
logo on a single layer, but
you can make a reflection using any shape, image, text, or
other layer or layer group
in Photoshop or Photoshop Elements.
Before you start, you'll want to make sure you have
enough room on your document for the object and the
reflection. If you need to, increase the canvas size or
reduce the size of your layer. Now you're ready to start.
First, make a duplicate of the layer. You can right-click
and choose Duplicate Layer.
Now, type Ctrl-T to transform the layer. You'll see
handles show up around a bounding box. Click on the top
center handle and drag downwards to flip the layer upside
down. Double-click inside the bounding box to commit the
transformation. (In Photoshop Elements, you can click the
checkmark icon to commit the transformation.)
Lower the opacity just slightly -- in this case, I've
brought the opacity down to 80% by modifying the setting in
the Layers palette.
Now, simply create a layer mask on the reflected layer to
fade the bottom part of the layer into the background.
(Learn how to make
layer
masks in
Photoshop or in
Photoshop Elements.) Your effect is complete!
by Corrie Haffly, PixelMill Staff Writer
|
