Design A Perfect Web Site With The Best Mac Tools.

As longtime Mac users, we’ve been challenged. Not in the ‘special’ sense, but in the gauntlet sense. A challenge has been issued to build a better web site for Mac360.

If you’re not a graphics design or web site coding goddess or god, which Mac tools should you choose to do the job?

The challenge is not as easy as you might think. We want to build a better web site, but have some constraints. Like experience, knowledge, design expertise, and time.

What we have plenty of are a remarkable set of tools, applications and utilities, that are available for Mac users. Since we’re not design or coding professionals, we decided to document what we’re doing and what tools we’re using.

The long term objective is to build a better Mac360. The short term objectives including figuring out how, what designs are good, what we need to get the job done. This is a dynamic list of what we’ve settled on and why.

Expression Engine
This is the popular content management system first pioneered by Mac360 back in the day. Today’s version of Expression Engine is highly flexible and loaded with features, but requires a design to be constructed, pretty much by hand, in XHTML and CSS.

EE requires a web hosting service that runs the scripting language PHP, and the MySQL database. The web has plenty of tutorials on coding XHTML and CSS, so that was a start. So was Amazon.

Once we were comfortable with the basics we began to design. Uh, oh. Neither one of us is a designer, so we started with a basic three column layout with a header and a footer.

Coda
Meshing XHTML and CSS together can be a challenge, even with plenty of books and tutorials. We chose Panic’s Coda to handle the basic XHTML code, but found the CSS implementation to, well, integrated, but not as intuitive as other tools.

I love Coda’s split windows. Code in one window, see the live result in another.

CSSEdit
XHTML is rather straightforward, but only one of many of the HTML standards. We chose XHTML 1.0 transitional. For CSS, cascading style sheets, we chose version 2.1. What’s the best utility for creating a site using CSS?

CSSEdit is the top tool. Period. CSSEdit has a live preview window so you can see changes in CSS in real time on your site. In fact, you can pull down another site, check out their CSS design, and make changes and see the effects instantly. But only inside CSSEdit, not live to a remote site.

Fireworks
While we have the full Photoshop Creative Suite, the jewel for web site designers is Adobe Fireworks. Designers won’t have the precision and features found in Photoshop, but Fireworks is vector-based which makes it easy to create graphic elements that need to change frequently.

Fireworks can slice up graphics and export the slices in a variety of file formats and do so with just a few clicks.

Color Schemer
No web site is complete with dashes of coordinated color. Unfortunately, there’s no single color utility that does everything we need, so these are the ones we found to be most flexible, most capable.

Color Schemer Studio will teach you more about how to use true color combinations on a Mac than any other tool. We also like Shades, which shows various color ranges, and Hex Color Picker which shows hexidecimal HTML color codes right inside OS X’s color picker panel.

xScope
As they say, the devil’s in the details, and a web site may require pixel perfect positioning. No other Mac tools is as cool and handy than xScope.

Measure, align, and inspect on-screen layouts and graphic details without digging into code. Check dimensions, check pixel colors with the Loupe, define screen sizes and more. This is one cool tool.

These are the tools we’ve chosen, among a few others. Over the next few weeks we’ll work on various designs and layouts and color schemes and provide some details on our progress.

We’re not professional designers or web site coders, but we have access to some incredibly rich and capable Mac tools, and we’re willing to share what we learn with readers. In fact, we’re willing to involve you in the process.

What tools do you prefer for web site or graphic design? Why? What web site designs do you find most attractive, useful, and readable, and why? Share your experience and thoughts in the Comments section below.