I recently gave a lecture to the advanced web design class at Farmingdale College. When I met up with professor Jack Harris, he informed me that the kids, mostly juniors and seniors,  saw Loewy Design’s page in the Flash/Dreamweaver Genius Guide, and they were looking forward to meeting with me. A bit embarrassed and very flattered, I asked Jack what book was he talking about and where could I get one.

I later found out that the book is published by Imagine Publishing and promises to be the essential guide to dynamic design and development. We were recognized for our website’s approach to animation and design using purely CSS and Javascript, a technological accomplishment but not exactly what I wanted to talk about in my little seminar. My talk was about the real world lessons that you can’t get from a textbook. I wanted to focus on the process of solving business and branding problems with the online medium.

I tried to push their tech questions aside but they kept coming. I eventually got my point across that the technology we’re using today will be completely different when the students immerse themselves in the job market. They’ll need to educate themselves on the latest versions of Flash and Dreamweaver and keep up with always evolving programming languages throughout their careers.

The most valuable information I could share with them was to describe our thought processes, not only about making a website look great but about creating one that will actually help your clients solve their business challenges. I gave them our secret sauce on how we deliver positive results to our clients and improve their bottom lines.  As a take-away, I provided them, and now you, with a list of reference tools organized by each phase of our process.

By no means is this the complete list, since it too is always evolving, but it could serve as a nice resource and good starting point for students, clients and peers.

Everyone–designer and developer alike–has a set of tools to rely on that make the day go smoothly. We all have tricks that help us be more productive and more efficient–and take less Tylenol!

Here’s my list of tools that I use on a daily basis:

CSS/HTML/JavaScript Helpers:
Firebug (FireFox Add-on)
This is probably my top choice for front-end development. You can see/edit/remove CSS styles and HTML markup on the fly with this great resource. It also has many built-in features that allow you to debug JavaScript code right from the browser.

Web Developer Toolbar (FireFox Add-on)
This tool is similar to Firebug in the functions it offers. I find the combination of the two to be useful; I choose between them depending on the situation. The Web Developer Toolbar’s auto population of form fields saves lots of time, and the inline ruler is quite handy when comparing designs to markup.

Dust-me Selectors (FireFox Add-on)
This is a helpful tool to keep stylesheets as lean as possible. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. It then stores the data, so when you test subsequent pages, selectors can be crossed off the list as they’re encountered.

HttpFox (FireFox Add-on)
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. This resource is useful if you need to know what files are being requested from a web server and you can’t get that information directly by viewing the source code.

CleanCSS
CleanCSS is a powerful CSS optimizer and formatter. It takes your CSS code and makes it cleaner and more concise.

Tabifier
If you work with messy coders or inherit old code that hasn’t been kept neat, this tool will save you lots of time and eyestrain by correctly indenting the code and making it easier to read.

Browser Testing:
XenoCode Browser Sandbox
You don’t have to keep installing different browsers; XenoCode lets you run the browser of your choice virtually from its servers. This service essentially sandboxes the browser, allowing you to run it without changing any of your computer settings. I usually have IE6 and 7 running along with my installed version of IE8.

IENetRender
Here’s another handy tool; it allows you to see real-time screenshots of your page in many versions of IE.

Browsrcamp
If you develop on a PC, Browsrcamp allows you to see screenshots of what your page will look like in MAC Safari. I’ve found that the PC version of Safari doesn’t always render pages consistently.

W3C Validator
This choice is an obvious one. Validation keeps developers honest and squashes most problems before they become headaches.

Version Control:
Assembla
Assembla offers a nice control panel interface for your version-controlled spaces. This particular one runs on Subversion. Even if you’re coding a project all by yourself, I would recommend some kind of version-control software as a must-have. It will save you hours of time.

Tortoise SVN
This is a great SVN client that ties right in with the Windows Explorer Shell. (Sorry, MAC users.) There are numerous subversion clients out there, but this one is my favorite because it runs silently in the background until you need it.

Server Environment Information:
Builtwith
Builtwith is a web technology information profiler; it lets you find out what a given site is using.

Domain Name Details
The name says it all. This is a good place to find answers to most of your common questions about domain names quickly.

This list is by no means exhaustive. There are lots of great products out there that you may find just as useful. It’s really all a matter of preference and comfort. What tools do you use in your development cycle? Feel free to share!

Although CSS3 is still officially in the works, the recent releases of Safari and Firefox have given us a few new CSS tools to experiment with. Designers may specifically be interested in the following features that accomplish with a few lines of code, things that we would normally do with graphics.

Custom Typefaces

Being able to use whatever font we feel like using in a web layout is a pretty much a designer’s dream come true. In the past the only way to do that and make sure that users see it was to create graphics for the pieces of text that you wanted rendered in a particular font. As more browsers include the @font-face property, that should hopefully change. Luckily the inclusion of the @font-face property in Firefox 3.5 now opens up font embedding to a much larger audience.

Using it is pretty simple. First you define the name of the font family and point it to the location of the font file. At this time .ttf and .otf are supported:

@font-face {
font-family: PrettyFont;
src: url(fonts/PrettyFont.ttf);
}

Then you just use the above font-family name in your document as you normally would:

p {
font-family: PrettyFont, Arial, sans-serif;
}

As always, plan on a fallback incase your users are on an older browser. In this case if the user is using an older browser they will see paragraph text in Arial.

Drop Shadows

I’m pretty sure a book can be written on the history of the drop shadow. Back in the day, designers used to create drop shadows on objects and type by adding a separate layer behind an object and adding some blur. Later versions of PhotoShop made this easier with some built in tools, but all this meant to your site designs was more graphic files and longer download times. The box-shadow and text-shadow properties now allow you to do this all with a line of code to either a box or a piece of text.

div {
box-shadow: 2px 2px 3px #CCC;
}

h1 {
text-shadow: 2px 2px 3px #CCC;
}

What this does is place a 2px to the right, 2px down, add 3px of blur and color it a light gray (#CCC). The best part is that your text stays selectable and can be increased or decreased in size using your browsers built in text sizing function.

Rounded Corners

Another feature that is sure to be useful (web apps come to mind) is the border-radius property. What this does is round the corners on boxes – a feature that previously required a lot of markup and graphics to create. Now you can do it easily with:

div {
border-radius: 8px;
}

This will round the corners of a box with 8px radius.

The nice thing about using these new features is the savings on extra graphics and code and simplifying your stylesheets and preserving the underlying text. All of these features degrade nicely on older browsers too. That being said, remember that CSS3 is still not fully supported on all browsers so be sure to test thoroughly. But Remember… with great power comes great responsibility! There may be a temptation to go over the top so please… use these sparingly

Over the past few years, CSS frameworks have become popular web development options. And there’s no shortage of opinions on their usefulness.

For those who don’t know, CSS frameworks are collection of CSS templates that set up such things as basic typography, form styling, grids and simple layouts, and resets.

Why would you use a framework? Well, there are lots of reasons. In addition to saving you time, they can help you standardize the structure of your sites, avoid dumb little mistakes, and ensure browser compatibility. And if you’re building out a few sites that will be related, it helps to start with an underlying structure that can be duplicated as needed.

Sounds pretty compelling, right? But there are reasons not to use them as well. A framework might be too much for the site you are designing; it may be unnecessary. Frameworks also tend to use cryptic class names, which are not always clear.

Take for example, this possible stack of classes one could build using the BluePrint framework:

<br />
<div class="prepend-20 span-1 append-1 last"><br />
    <p>This is my Content</p><br />
</div><br />

Not too clear what that class does, is it?

Here are a few of the most popular frameworks:

BluePrint
BluePrint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation on which to build your project, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

960 Grid
The 960 Grid system is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Elastic
A simple CSS framework to help you lay out web-based interfaces, Elastic is based on a four-column printed layout technique, but it’s capable of unlimited column combinations and makes elastic, fixed, and liquid layouts easy. The Elastic CSS framework provides a set of helper classes that enable you to accomplish hard things through pure CSS techniques, such as same-height, full-width, and vertical-center options.

Yahoo! UI Library: Grids CSS
While other frameworks include support for text and reset documents, the foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4 kb file provides over 1,000 page-layout combinations.

Tripoli
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects. Tripoli is not technically a framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Are CSS frameworks right for you? It’s a matter of preference. I personally like hand-coding CSS classes as I need them. For me, it’s faster than poring though a list of style definitions. But some people find them very useful. Do you have a favorite CSS framework that you don’t see on the list here? Let us know.

A website is more than just an online presence. Properly created by a professional team, it becomes a valuable investment. Take care of your website, and it will take care of you and your brand for years to come.

So, what are you doing to tend this precious resource? You’ve probably put a lot of effort into coming up with a great design and assembling a marketing team to realize your vision. But have you taken the time to ensure that your site has been built using the most up-to-date standards and best practices?

Many small business owners don’t even consider questioning the coding quality of their websites, simply because they don’t know what to look for. But in a rapidly changing landscape like the web, you’d be well served to stay on top of best practices for a few key reasons:

1. Using Standards Creates Consistency
   If your site is cleanly and consistently designed, it makes a good impression. As a developer, I know that at some point everything I’ve coded will be looked at by at least a handful of other coders. By using standard naming conventions and familiar patterns, you can make the work of the next coder easier and provide a clear road map. This saves you time and money—and ensures that your enterprise looks professional.
2. Future Proofing
   Websites built with solid standards tend to look and act much the same for years, even as technology advances. A well-designed site is likely to weather changes in platforms with grace. Once you have created a solid foundation by becoming W3C compliant (more about this below), your site should be able to bridge the gaps between different and newer versions of web browsers, as well as devices such as PDAs and cell phones, with greater ease.
3. Your Site Looks Great….So should the Technology Driving It
   What use is a beautiful site that frustrates the user with error messages and layouts that are broken from browser to browser? Although it’s easy to get caught up in analyzing the visual aspects of a site, that same quality of critical analysis needs to be applied to the coding. Both parts need to be in sync.
4. Leaner Code Means Better Performance
   Greater visibility on search engines is key to successful growth. And the less time those search engines spend hunting through your HTML code for your content, the more time they can spend indexing your content and keywords. Separation of style from content by way of an organizational format called CSS (”cascading style sheets”) is the almost universally preferred method of achieving this enhanced visibility.

Now that you know the benefits, it’s time to take action. You can either enlist the services of your favorite web design agency or go it alone. If you do, here are some helpful resources:

Basic Web Standards:
http://www.w3schools.com/quality/default.asp

HTML/CSS Best Practices:
http://www.htmldog.com/
http://www.alistapart.com/topics/code/htmlxhtml/
http://www.alistapart.com/topics/code/css/

W3C Validation:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Website Optimization Tools:
http://www.websiteoptimization.com/services/analyze/

Just One More Note On WC3 Validation
W3C validation is one of the simplest ways to check whether a page is built in accordance with current web standards, and provides one of the most reliable assurances that future web platforms will handle it as designed. Validation actually saves money. Creating web pages or applications according to a widely accepted coding style makes them easier to maintain, even if the maintenance is performed and the evolution is overseen by someone else. And last but certainly not least, validation is a sign of professionalism.

Until next time, check out some of our best practices at www.loewydesign.com/work/recent/