All artists have a tool set that they know and rely upon. Sculptors choose the best chisels; painters choose the best brushes; calligraphers choose the best pens. Likewise, Web designers need to choose the best tools at their disposal not only to visualize their designs but to also create them in their medium of choice, the Web browser. The tools you choose will not make you a better designer, but they can help you make better designs.
What browser do you use to surf the Web? Some people have a favorite browser. Some choose based on their job. Others simply use the default browser on their machine and may never be aware that other options exist. Regardless of your personal preference, however, your designs will need to work on all of the most common browsers. To compound the issue, when a new version of a browser is released, older versions do not magically disappear (IF ONLY!), so you also have to test on legacy browsers.
Microsoft’s Internet Explorer is inarguably the most commonly used Web browser, with a market share of about 70% of the Web viewing public. The exact number will vary depending on location and audience, though. For example, designers have a higher percentage of Mac users than other audiences, and the Mac does not include a recent version of Internet Explorer. So, that audience tends more toward Safari or Firefox.
All modern browsers support CSS; however, not all browsers do so equally. Throughout this book, I’ll point out where browsers do not have or are deficient in the particular features I’m discussing. First, let’s get a quick overview of the four most common browsers you will encounter.
For a while, Internet Explorer overwhelmingly dominated the Web browser market, rising to as high as a 90% market share at times. Unfortunately, IE6 had several flaws when its came to it implementation of CSS, including the exclusion of several important features and the misinterpretation of others. Although IE7 has gone a long way in adopting CSS standards, it still has several issues, and, of course, IE6 is still out there. The good news is that the IE6 market share has rapidly fallen and is now at around 15–20% globally, and IE8 fully embraces the current version of CSS (v2.1).
In general, I recommend starting your development by testing in Firefox. It has a strong implementation of the current CSS standards (v2.1), includes many future CSS standards (v3.0), is the second most widely used Web browser (22% of market share), and it allows you to install add-ons that help with coding CSS. If your design works in Firefox, then it will work almost the same in both Safari and Opera, and most likely in IE7 and IE8. IE6, on the other hand, will take a bit of work.
Many designers will develop in Safari, since it is the default browser on all Macs. Sa4 has, arguably, the best implementation of the CSS standards so far. This implementation not only includes all current standards (v2.1), but also many still in development (v3.0) and a few styles of its own. This is a mixed blessing, since it can mean you are using styles or features that are not currently available in other browsers.
Often overlooked, Opera is more popular than you might realize. It is used in many European mobile devices as well as on Sony’s PlayStation gaming system. Op9 equals Sa3 in CSS standards compliance but does not have some of the advanced features. If you don’t have the most recent version of Opera, get with the downloading. Like all of the best things in life, it’s free!
codeweavers.com/products/cxmac
One of the hardest issues to deal with on the Mac is how to test your designs in IE6, which is still very popular and only available for Windows. One great and inexpensive solution is a program called Crossover, which allows you to run many Windows applications directly on your Mac desktop without having to own or install Windows on your machine. Currently, it does not support IE 7 or 8, which is a shame, but these two browsers have fewer page-rendering inconsistencies than their predecessor.
Engine Name | Browsers |
|---|---|
Gecko | Firefox, Camino, Netscape, Flock |
Trident | Internet Explorer, AOL Explorer, MSN Explorer, RealPlayer |
KHTML and WebKit | Safari, Google Chrome, Shiira, OmniWeb, iCab, Konquerer |
Presto | Opera, Nintendo DS Browser, Internet Channel (Wii) |
Java | Lobo, Opera Mini |
Firefox makes a great development browser, not only because it has strong standards compliance, is available for Mac, Windows, and Unix/Linux, and is the second most commonly used browser, but also because you can install a variety of add-ons, small programs that run within the browser, to enhance its capabilities. Here are a few of my favorites:
addons.mozilla.org/firefox/1843
Firebug is an indispensable tool for anyone creating a Web site in Firefox. It enables you to:
» | View and edit the HTML, CSS, and JavaScript code of the page being displayed and edit it on the fly. |
» | Identify any element on the page, showing you all of its full context and any styles applied to it. |
» | View the Web page as it loads to see how long each element takes to download, letting you identify any bottlenecks in your design. |
addons.mozilla.org/firefox/271
Allows you to sample the color of any pixels in the Web browser, displaying the value in both hex and RGB values. Simply choose the eyedropper, then click a pixel. You can then copy and paste the color code into another application as needed.
addons.mozilla.org/firefox/2290
Grab all of the color values out of a Web site’s CSS and turn them into a working color palette for Photoshop and other programs with Palette Grabber. All it takes is a single click to save a palette, then you can load it into your favorite image editing software to start working.
addons.mozilla.org/firefox/539
Have you ever had something on the screen and you needed to find its size? Or noticed that the alignment of two objects wasn’t quite right but weren’t sure by how much? Then MeasureIt is the tool for you. You click an icon, select the area width and height you want to measure, and MeasureIt displays the dimensions in pixels, taking out a lot of the guesswork when precision is your goal.
addons.mozilla.org/firefox/7943
If you like your sites to look exactly like your visual comps, you’ll need Pixel Perfect. This is actually an add-on to Firebug (an addon to an add-on) that allows you to load a a JPEG version of your visual comp as an onion skin over the top of the live version to compare your vision to the reality on the Web.
Just as you have a word processor for writing or an illustration program for drawing, you need a Web development program for coding. A good code editor will:
» | Organize and edit documents, providing suggestions where needed. |
» | Preview documents without having to jump between multiple browsers. |
» | Download and upload documents as you work on them. |
» | Analyze and optimize your code. |
Coda is my program of choice whenever I edit code. Coda (Panic Software) includes integrated FTP, making uploading and downloading files a breeze. Its CSS editing tools allow you to get straight at the code or to use a more designer-friendly visual interface.
newsgator.com/individuals/topstyle
Although I generally recommend designing on a Mac, if you are using a PC running Windows, TopStyle is similar to Coda.
If you are a designer who is only interested in working with CSS code (and not HTML or JavaScript), CSSEdit has everything you need. It includes some impressive tools for analyzing the CSS of an existing Web site.
Dreamweaver, which comes with many Adobe software packages, is often the default choice for designers. Of all of the code editors, Dreamweaver is possibly the most feature rich, but it is also the most expensive, and more features also means it’s harder to learn to use.
We typically think of an application as something that you get on a disk or download and then install onto your computer. Increasingly, applications are being delivered through the Web, without requiring you to install or download the specific application. Some of the best tools in my arsenal aren’t on my desktop; they’re online. The line between Web site and Web application (or just Web app) is gradually being blurred. Like you do with a Web site, you get to a Web app by using a Web browser and URL, but Web apps provide functionality like you would expect from a traditional application.
Every designer has to deal with color. It can be difficult to define a palette of colors that work well together but provide the spectrum needed. ColorJack and Adobe Kuler are Web apps that allow you to put together a color palette, helping you choose the best combinations based on color theory. You can then save the results for use in common image editing software such as Photoshop and Illustrator.
Good typography on the Web seems like an oxymoron, but it’s getting better. Typetester allows you to preview how different font families will look at various sizes, weights, and styles. Just choose from an extensive list of Web-safe fonts or from a list of fonts installed on your computer, and the results are instantly displayed underneath.
If you are a designer, you likely already have an image editor of choice like Photoshop, Fireworks, or Illustrator. These applications can be costly, but free alternatives are available on the Web. SUMO Paint allows you to create and edit layered bitmap images in a familiar Photoshop-like interface. If you are strapped for cash, it may just be what youare looking for. Although limited in its feature set, it has all of the basic tools you would need to put together simple Web graphics.
