I’ve worked at Loewy Design for five years, and over time I’ve noticed a growing trend in requests for content management systems (CMS). After building out a handful, I noticed another trend that struck me as odd. Some of the clients wanted me to make edits to their sites post-launch, even though I had just handed them a fully functional, easy-to-use CMS.

How could this be? Did I do something wrong? Was the training I gave them on the software not good enough? A lot of thoughts like these ran through my mind. Maybe, or perhaps…there’s more to this trend.

I’ve noted that the clients who end up not using their new CMS software have these traits in common:

1. They’re terrified of breaking something.
   Even though it’s been explained to them that it would be very hard, if not impossible, to truly “break” the site, they still show tremendous trepidation about hitting that save button.
2. They’ve underestimated the learning curve
   Everything new has a learning curve to it. Although we strive to use the simplest systems out there, everyone learns at his or her own pace, and some people pick up things faster than others. Either frustration sets in, or it’s too costly for them to spend all day playing with new software. And some people just don’t want to learn anything new.
3. They generally work for larger companies
   Strangely enough, the companies that have larger budgets are the ones that don’t tend to use the systems. Clients like the idea of being able to manage their own websites, but quickly realize that although a CMS is easy to use it’s another task they need to add to their busy schedules.

My third point brings me to a question: “How do you, as the client, know when a CMS is needed?”

There are lots of possible scenarios, but in general, if you have a little time to invest in learning the software and a good development team supporting you along the way, you can’t beat the value and independence a CMS provides.

The recent widespread rise in popularity enjoyed by content management systems such as WordPress, Joomla, Drupal, and MODx has changed the way clients feel about their websites. No longer are they just hiring someone to build something. They are now really part of the process: able to affect their websites directly, without needing any programming knowledge or having to pick up the phone.

So are you ready to move to a CMS?

There’s been a lot of buzz about HTML 5 lately. I’ve seen a wave of articles talking about the new version of HTML in the RSS feeds I follow. Work on HTML 5, which commenced in 2004, is far from complete, but we’re starting to see some new and exciting features being released in the current draft.

So what’s new? For front-end developers, there are a few improvements in version 5 that aim to make life easier and cut down on development time.

So What’s Different?

Well, a lot, but one of the most significant changes from HTML 4 is that HTML 5 is not based on SGML. It has, however, been designed to be backward-compatible with common parsing of older versions of HTML.

In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like the paragraph tag), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.

HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the specs call it) or “XHTML form.” This gives page authors more flexibility.

Page Structure

HTML 5 brings a whole set of new elements that make it much easier to structure pages. Now, we have tags like:

<header>
<nav>
<article>
<section>
<footer>

HTML 4 lacks the necessary semantics for describing these parts of the page specifically. The new tags should replace the all-too-common “use div” elements, giving each a descriptive ID or class.

Typical markup for an HTML 5 document could look something like this:

<body>
<header>...</header>
	<nav>...</nav>
	<article>
		<section>...</section>
	</article>
		<aside>...</aside>
<footer>...</footer>
</body>

Embedded Media

The popularity of audio and video on the Web is undeniable. Sites such as YouTube, MySpace, and Facebook make it easier than ever for anyone to publish rich content to the Web. HTML 4 lacks the means to embed and control multimedia successfully; many sites rely on Flash to perform those tasks.

HTML 5 promises two tags to aid in the embedding process:

<audio>
<video>

There are many additional attributes available for each of these tags, should the author of a Web page require more-detailed control over its content. But for purposes of demonstration, this would be a typical use:

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

<audio src="sample_audio.mp3" controls>
    <a href="sample_audio.mp3">Download song</a>
</audio>

The optional “poster” attribute can be used to specify an image that will be displayed in place of the video before the video has begun playing. The “controls” attribute is a true-or-false attribute that indicates whether the author wants the built-in controls turned on or off by default.

Regular expressions

HTML 5 extends the input element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.

Enter a US or Canadian Postal Code:</p>
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&amp;#160;B2C" />

The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript.

Canvas

The new Canvas element consists of a drawable region defined in HTML code with “height” and “width” attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of Canvas include building graphs, animation, games, and image composition.

your browser does not support the canvas tag

See the yellow square? That’s being drawn by JavaScript into the Canvas tag. Currently only FireFox, Chrome, and Opera support the canvas tag.

This is an early example of the improvements the Web-development community can look forward to with the release of HTML 5. Of course, not all browsers will be swift to support the new specifications, so don’t throw out that HTML bible just yet!

Do you have any other HTML 5 tips and features you find exciting? We’d love to hear about them!

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!

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/