“It still amazes me that this tiny enclosure contains an entire computer”, my girlfriend mused, as she examined the new base model (1.7 i5, 4 GB RAM, 128 GB HD) 13” Macbook Air I had purchased a few hours earlier. “Is it going to do everything you need it to?”

Truth is, I wasn’t quite sure. I wanted a small and slender portable that I could replace my aging Macbook Pro with, one that could actually keep up with my iMac. This was no simple request, as the iMac was the latest generation with an SSD. Although I read the latest Macbook Air was pretty quick, I studied the Apple return policy well, as I still wasn’t confident that it could live up to my expectations.

The Macbook Air had been on my radar ever since Apple started making SSD storage standard on the slender portables. Boot times were in the mere seconds, and apps would be awaiting input after a single bounce in the dock. While I came close to purchasing the last iteration of the Macbook Air, I ultimately decided to hold off until the next release after reading Cameron Moll’s review.

When rumors started flying about a new Macbook Air set to release the same day as OS X 10.7, I figured the newest generation would really take advantage of the OS’s new features. The gesture support really perked my interest, I loved the convenience of an SD slot, and I definitely wanted to be able to drop the word “Thunderbolt” amongst my peers. I was indifferent about the new backlit keyboard, but I am currently eating crow, as this post is being written in my backyard as the sun goes down.

The first time I booted up my new Macbook Air, it was surprisingly snappy. I mean I expected snappy, but everything was instantaneous. Sure, it may have been because it was a fresh OS install, but it was noticeably quicker than the Macbook Pro that it was replacing. The Macbook Pro was no slouch, as it was the flagship model from a few years before. To make it even quicker, I had recently upgraded the hard drive to an SSD, something I am sure you have heard me sing praises about.

After installing a few apps on my new Macbook Air, setting up my dropbox account, and virtually replicating my iMac work environment, it was apparent that this little powerhouse wasn’t slowing down. This was a quick machine.

I had absolutely no intention of doing any design work on this tiny 13.3” screen, although it should be noted that it is bright, crisp and the colour reproduction is quite decent for such a thin panel. If I want to get really picky, it does lack some of the colour depth that my 27” LED iMac panel offers, but what do you expect out of a panel that is only a few millimetres thick? At 1440x900px, it is actually the same resolution as my last 15.4” Macbook Pro, so I received the same amount of screen real estate, with slightly more eye-strain. Although I have 20/20 vision, I currently have the font size set to 16pt as I write this, as it is much more comfortable.

I remembered hearing that the 27” iMacs had video-in capability, so I figured it would be great to work with the display that I stare at day in and day out, as I would be more likely to pick up any performance nuances with the Macbook Air by recreating my regular work environment. I purchased a $20 DisplayPort cable, plugged it into the new Thunderbolt port on the Macbook Air, and the Mini DisplayPort on the iMac, and I was instantly up and running.

Down To Business

I am definitely not the power user some of you are, but I still deal with pretty large and layer-intensive Photoshop files on a regular basis. I was amazed to see that when I was working with a 5000x1160px PSD that contained several hundred layers, the Macbook Air never lost it’s zip. It was nearly as snappy as it was when I set it up for the first time, and I am extremely satisfied with the performance.

Filters, heavy brush work and massive use of the healing tools were no match for my new machine, and it was in this area that I really thought I would see the Macbook Air choke, as the processor speed is much lower than my previous notebook. This indicates that the Macbook Air has really been built around the latest Intel architecture, and Apple has taken full advantage of it.

Because I was using the iMac display with the Macbook Air, I actually forgot that I wasn’t using the iMac at times, and to me that speaks volumes of the Macbook Air’s performance. Because I use the iMac daily, if there were any significant performance differences I am pretty sure that I would have picked up on it. I almost want to go as far to say it performed slightly better than my iMac, but I am not going to do that.

Conclusion

Truth is, as nice as it would be, I don’t really need it to be a desktop replacement. If that is what you are looking to hear, and you want some reassurance, I can give you this: If you most of your work takes place in Photoshop/Illustrator/InDesign, you don’t render a ton of 1080p video, and you aren’t animating the next Pixar movie, I think you will be pleased with the new 13” Macbook Air. Paired with one of the new Apple 27” LED displays, it could be a fantastic setup at a relatively reasonable price.

Bottom line, for $1300, I definitely scored a winner here. For what I use it for, I can confidentially say it consistently outperforms my older Macbook Pro in virtually all areas, minus the display’s colour depth and screen size. When you couple that with the sleek form factor and the superior battery life, the only problem I see with the new Macbook Air is this: Apple has a lot of work ahead of them in repositioning the next generation of Macbook Pro, as I have found (and I am sure most other users will find as well) that the bulkier form factor of the Pro and the higher price point might just be too hard to justify.

A WORD OF CAUTION:

Results may vary. Apparently Apple has been utilizing two different SSDs in the new Macbook Airs, and they are reading and writing at drastically different speeds. This Macrumors Video demonstrates the differences in speed, and shows you how to identify which SSD you have: Watch The Video

Thankfully, I ended up with one of the quicker ones. I really believe that this entire review would have faired much differently if I didn’t.

I am sure you know by now how much of a Dribbble enthusiast I am, as I find it to be a steady source of inspiration and of ideas for projects I am currently working on.

A little while back, I posted a tweet, expressing my love for a dribbble shot that someone had posted. The tweet got a ton of feedback, so I figured I should share my other favourites with you.

There is really no pattern, rhyme or reason to why I like these shots. They all have different styles, colour schemes and purposes, but I constantly find myself referencing them for inspiration. In no particular order:

Here are a few of the apps that make my freelancing work day go that much smoother. While I am sure you have heard of most of them, I wanted to share some insight on how I make them work for me.

Dropbox

Free - $19.99/month
www.dropbox.com

You all know about Dropbox by now. It is one of those apps that I have no idea how I functioned without it before it came along.

Dropbox syncs all files you have placed within a specified folder amongst all of your computers and most of your mobile devices. This is an absolute necessity if you work between a desktop and a notebook, as you no longer have to use external storage devices to transfer data between machines. As an added bonus, it stores these files (with several revisions) in the “cloud”, so if you were ever to lose your local data, or overwrite a file by mistake it will bail you out.

How I use it: Other than the obvious synchronization, Dropbox offers the flexibility of sharing specified folders, so I use it all the time for collaborative work. I email a link to the person I want to share a folder with and it automatically adds it to their dropbox account. I have moved my iPhoto library folder to Dropbox, so I know that all my images and albums are exactly the same between my two Macs, and I have piece of mind that if there were hardware failure, I wouldn’t lose my images. It’s storage of multiple file revisions has also been invaluable, as Time Machine in OS X only stores multiple file revisions at specified times, rather than each time the file was saved.

Xero

$19-$39/month (Free trial available)
www.xero.com

After trying several different bookkeeping options, I just can’t find a more intuitive and robust option than Xero. It allows you to do all of your bookkeeping plus your invoicing, making for seamless transaction tracking and reporting. It learns your accounting activity over time and makes reconciliation painless. I can’t quite put my finger on what makes it that much better, but it just feels like it was created for freelance designers.

How I use it: I want to know what is going on with the finance side of my business at all times, so I find the reporting functions very refined and invaluable. It is also easy to acquire specific data by specifying simple parameters, making tasks like monthly sales tax reporting effortless, and it keeps me constantly aware of what is coming in and going out. The fact that it is web based and iOS friendly is a big plus as it allows me to interact with my books virtually anywhere, making financial decisions easier.

Ballpark

Free - $99.99/month
www.getballpark.com

Although I submit official estimates less and less, as email quotes generally suffice, there are some clients that still request an official estimate. Ballpark generates estimates quickly and easily, and has some of the best UI in a web app I have seen to date. It allows you to email a professional looking estimate, tracks viewing activity, lets the client correspond through an attractive UI, and reports the jobs you have won and lost.

How I use it: For those times that a proper estimate is required, it is generally for a job that several quotes are being sourced, and I don’t want to waste studio time on typing one up, as Ballpark offers several shortcuts on getting an official looking estimate sent quickly. It also keeps all correspondence for the prospective job organized and informs me when a client has opened the estimate, so I can follow up with them.

Pulsar

$20 + monthly SiriusXM Subscription
www.rogueamoeba.com/pulsar

Working by myself all day can get a little lonely, so I rely on satellite radio to keep me company. Sure, there are web apps like Rdio that are great for music, but I prefer talk radio and the comedy channels. Satellite radio has some great programming, but their flash-based web app never works quite right.

Pulsar is a client-side app that connects your XMSirius account to their web feed and makes for a much more seamless experience. It allows you to assign favourites, pause the live audio for up to 3 hours and keeps channel data up to date on the dashboard.

How I use it: When my favourite radio programs start, I open the app and pause it, creating a delay, so after a brief period, I can listen to commercial-free radio by scrubbing through the ads. It also has output options, so I can capture the audio, throw it on my iPod and have in-car entertainment for long car trips.

CSSEdit

$39.95 (Free Trial Available)
www.macrabbit.com/cssedit

CSSEdit is a rare example of an app that works for beginner and pro developers alike. Anyone that asks me how to get started in writing markup, gets the same advice: grab a copy of CSSEdit and start ripping your favourite sites apart with it’s X-Ray feature.

Not only does it assist you in writing basic CSS by offering auto-completion and a simple UI for building each element, but it allows you to edit document elements by merely clicking on them, and guiding you to the corresponding selector on the correct stylesheet.

How I use it: Because I generally use a text editor to write CSS at this point, I utilize CSSEdit’s X-Ray element and its integrated browser to quickly pull up existing documents to quickly edit, change or add to the stylesheet without having to pour through several lines of markup to find the one selector I am looking for. It is also a quick way to look under the hood at what other developers are creating and how it works. Sure, there are browser plug-ins that do this, but I find CSSEdit’s workflow to be that much more streamlined.

Espresso

$79.95 (Free Trial Available)
www.macrabbit.com/espresso

Created by MacRabbit, the developers of CSSEdit, Espresso is yet another text editor in an already saturated market. While I can’t quite put my finger on why I prefer it, I find it’s interface most pleasing to the eye, and it’s auto-completion of code the quickest and most refined. I still fire up Coda sometimes, as it has a few features that Espresso lacks like Sites and client-side validation. For what it is worth, I still can’t think of a text-editor that has it exactly right. I just feel that Espresso is the closest.

How I use it: Because most of the sites I work with are running ExpressionEngine, most editing is done server-side, so Espresso’s ftp options for making markup edits is refined and invaluable. On long documents, it is easy to lose track of a document’s structure, so the ability to fold a div keeps my head from exploding sometimes. Also, Sugars are small plugins used for auto-completion of code, and are available for most languages, so it makes the markup process that much smoother.

ImgOptim

FREE
www.imageoptim.pornel.net

While using PNG images in web projects is a major advantage because of alpha channel support, the sheer size of some of these image files make developers hesitant from using PNGs more often. Enter ImgOptim, a free app that shrinks PNGs more than you even thought possible. With simple drag-and-drop functionality, you will be amazed at how small the PNG file sizes can get.

How I use it: I use PNGs as much as possible for everything from web buttons to browser screenshots, as these images are generally not perfect squares, so it is much easier to use a format that supports transparency, rather than trying to use a jpg and matching up the site background with the image background. When these images get larger, it sometimes rules out the use of PNGs. Because of ImgOptim, there have been quite a few examples of being able to use PNGs again solely because of the file size reduction that ImgOptim was able to provide.

LittleSnapper

$29.99 (Free Trial Available)
www.realmacsoftware.com/littlesnapper

I take countless screenshots in a day. OS X’s built-in function is pretty decent, but leaves a lot to be desired. LittleSnapper offers invaluable options, such as one-window organization, several formats, simple editing functions, and sharing and annotation options.

How I use it: The sharing options are big for me, as I can easily send a client a link to a screenshot of what I am working on rather than then sending an inbox-cluttering image file. The “Snap Window” function allows me to capture an isolated window, making for less photoshop edits. Because all of my screenshots are now routed through LittleSnapper, my desktop is a much more organized space.

Font Book

Included with OS X

While a lot of designers prefer more feature-laden font organizer apps, the OS X included Font Book works perfectly for me. It allows you to keep your fonts organized and categorized, allows you to preview type and view a typeface’s complete repertoire.

How I use it: I keep fonts that are “embeddable” and “not embeddable”, and “free” and “free plus embeddable” in separate groups, as I want to avoid setting type for a project that will later turn out to be impractical. Font Book also gives me a fast view of a font’s special characters, making adding little type embellishments that are hidden within a typeface’s repertoire quicker. It also displays what keystroke to use for special ornamental-type fonts, so I don’t have to type out the whole alphabet to find that one little gem I was looking for.

Alkaline

FREE (Paid Expansion Options Available)
www.litmus.com/alkaline

Litmus offers superior online web and email browser testing, but their pricing is unrealistic for most of us. While some developers need to test their creations in every version of IE since creation, and preview their html email blasts in all-but-dead clients such as Lotus Notes, most of us can get away with testing our project in a few versions of IE and Firefox, since Webkit browsers typically render a page quite similarly.

Well looks like they understood this, as they created Alkaline, a client-side OS X app that allows you to preview your project in IE7 for free and several other browsers for a rather large fee.

How I use it: The free version suffices for me, as I don’t support IE6, and IE8 is installed on my one windows box, so IE7 is my only real issue.  The Coda plugin that allows you to test your work in progress in IE7 is pretty solid as well. It saves me some time as it makes sure IE issues don’t get too out of hand too early in the development process.

Taska (iPad)

$4.99
www.bitalpha.com

To-Do apps can be quite robust and pricey, two things I like to avoid when I only require a solution that covers the fundamentals. Taska for the iPad is simple, customizable, looks great and will do the trick for most users.

How I use it: The idea behind using an iPad app rather than a desktop app was to keep my to do list completely separate from my workflow so it didn’t blend in with the 20 something apps I have open on any given day. I start my day by having a coffee, reading my feeds and then running through and adding tasks for the day. I can pick my iPad up at anytime, and walk away from my desk, so I can focus completely on updating my priorities. This approach has worked quite well for me, and I definitely recommend giving it a try.

If you are an active Dribbble user (and if you are a designer, you absolutely should be), you are aware that retro and vintage design is quite the trend lately. It generally involves a subdued color scheme, some subtle texture, a little bit of destruction, and some really fantastic typefaces of yesteryear.

I have noticed that Dribbble commenters are consistently asking the designers of the post “shot” what fonts were used, and it seems like it is the same typefaces coming up time and time again. Here are a few of the most common fonts in question, and some others that aren’t quite as well known, but have the potential to make your project really look authentic.

Money doesn’t rain from the heavens on every project you will work on, and some have no budget at all. This may cause you to forgo niceties like expensive typefaces. That doesn’t mean you can’t create quality typography, however.

I have recently been working on a fantastic project that requires font embedding, and the use of several free fonts. This has caused me to do some research on quality typefaces that are free alternatives to popular and expensive counter-parts, and that are embeddable to boot.

The issue in this specific project’s case is not the cost of the font, but rather licensing restrictions on embedding. One of the best qualities of a free font is it’s freedom to embed using @font-face, which I have found to be the most easy, free, and cross browser-compatible method.

I have to say that I have been pleasantly surprised at what I have found, and felt compelled to share the results, in the hopes that your budget-restricted projects will now have elegant copy gracing it’s pages.

This isn’t ground-breaking stuff. I am sure you have seen most of these typefaces before. I simply wanted to share what I have been working with, with the hopes that they may work for you.

Downside

Of course there are negatives to free fonts: not all glyphs look quite right, sets are incomplete, and there are very few weights, but hey, you get what you pay for.

This shouldn’t slow you down too much though, as these fonts will usually work for buttons, navigation and headers, which is generally all I use detailed typefaces for. I tend to shy away from layouts that forgo a simple typeface for the body copy.

@font-face

Font Squirrel is arguably the best resource for professional-quality, free fonts. Not only can you find great typefaces on their site, but they make embedding them quite easy by way of their @font-face Generator tool. When browsing their vast selection of fonts, there will be a “@font-face compatible” tag that is bolded in the header, letting you know if a particular font is licensed to embed.

On a side note, you can use their online @font-face generator tool to create stylesheets and embeddable files for other fonts you may have as well. Just make sure the license allows for it. From my experiences, most don’t.

Fine Print

Free font licenses vary greatly, but generally have a “commercial use” component. Not all fonts displayed below are restriction-free, and not all are embeddable, however they tend to be. Click on the sample images below to visit the font’s download page, and make sure you do your due diligence to adhere to the font’s license and respect the creator’s work.

Web analytics fascinate me. It is amazing how greatly your visitor’s browsers and screen resolutions can vary depending on what type of product or service your website offers. While I have access to several of my client’s analytics, I knew that they probably wouldn’t be a good forecast of what types of visitors a portfolio site would bring, so I was excited to see what technology capabilities my audience had.

Browser Support

I knew Firefox was likely to be the heavyweight, but I was really curious to see how webkit-based browsers would fair. With CSS elements like anti-aliasing, your coded site can look virtually identical to the PSD, and with webkit transitions, you can make your page come alive without a lick of javascript. While Firefox has great all-around support, it lacks some refinement, leading me to believe that webkit is the future of modern browsing technology.

Here is the breakdown of browser percentages for the first 50,000 hits at foundationsix.com. I am quite surprised to see the percentage of webkit browser visits hovering right around 34%, and I am excited for the lack of hits from IE, which is running around 5% for all versions.

When you dig a little deeper into the IE numbers, you will see that at 222 hits, IE6 users only account for 0.04% of Foundation Six’s traffic. For those of you that questioned it, clearly there is a justified lack of support.

Display Resolution

When I started designing the new foundationsix.com, I knew I wanted to make a strong visual impact with the homepage, so I figured, “Why not try a 1080 pixel-wide layout?” I felt like I couldn’t get all of my desired content on a 960px wide homepage, and I thought it was a good time to experiment with modern display resolutions. Going into the project, my biggest concern was, “How many monitors will be able to display foundationsix.com without offering up a horizontal scroll bar?”,  when it should have been, “How many pages of the site actually look correct with that wide of a layout?”

Once I got over that minor design block, I am glad I chose 1080.

For the few comments I received on the site being too wide, I had dozens more praising the fact that it went beyond 960 pixels. I presently work on a 30” Apple Display with a resolution of 2560 X 1600, and needless to say, current websites tend to look a little puny. No, I don’t think everyone has this large of a monitor, but even my mother who is pushing 60 uses a 23” display. What is your excuse?

Well, the numbers backed up my theories, and 1080 pixels is definitely a safe width, provided you add some minor tweaks for iPhone and iPad support. Only around 4% of my visitors have a screen resolution that is below the acceptable range for foundationsix.com, and even for them, the viewing experience is relatively the same as long as you don’t mind scrolling a few pixels horizontally.

Bottom Line

I am not naive. I know that many foundationsix.com visitors are probably fellow web designers visiting from CSS galleries, and are more likely to use modern browsers and take advantage of higher screen resolutions, skewing my statistics. I know that some companies won’t allow an update past IE6, and are still making employees work on a radiation-emitting 17” CRT fishbowl. You just have to decide who your audience is. If this is your audience, break out the custom IE6 style sheets, and the 960 grid system.

But these aren’t the customers I generally work with. If it were, you better believe my site would look stellar on old Windows beige boxes.

Since the launch of the new site, I have received so many emails asking questions about Foundation Six. Certain ones come up repeatedly, so I think it is time to a share a few things with you.

Where did the name “Foundation Six” come from?

From the six fundamental principles (or foundations) that I believe embody great website design. It just so happens that they all start with an “F”, enabling the F6 moniker. If you want to find out exactly what they are, I list them in the sidebar of my invoice. All you have to do is hire Foundation Six for your next design project and you will see them.

How many people make up Foundation Six?

Just me. Dave Ruiz.

Choosing between using my name or a company name for my web design business was something I struggled with. While I definitely want my name to be recognized in the industry, I ultimately chose a company name, as part of my business plan is to grow the company into a web design collective that can cater to several clients at any given time. That doesn’t mean I am island right now, though. I work with some talented individuals every day, and we are constantly tapping into each other’s strengths to render the best possible product.

What type of projects do you like to take on?

Foundation Six started with the desire to give small businesses a large web presence with great design, accurate visitor statistics, a content management system, search engine optimization, and effective online advertising. While it is important that the site looks great, it needs to effectively communicate your business objectives, and ultimately lead to successful conversions. To accomplish this, these projects generally take a month or so to complete. I generally have some smaller side projects on the go as well. To save you some time, I am not interested in building the next Facebook/Flickr/Twitter for a percentage of the profits after it launches.

How long have you been designing for?

Real web design, about a year-and-a-half. I would have gotten into it earlier, however markup was intimidating. After learning how to write valid code, I actually really enjoy marking a project up, and realized that this definitely something I wanted to do day in and day out.

I came from a print design/advertising background, and I left a Creative Director position to start Foundation Six. I am passionate about the web, and I felt that this was the most effective way to explore my career goals. I started in consumer packaging design (there are some really talented designers in that field), and have had some really interesting projects along the way, such as designing an award-winning show car. That was a lot of fun!

Why don’t you have a blog?

I do now. Launching the new site with a blog was something I mulled over, but I really didn’t know if it was something Foundation Six needed. After the questions started pouring in and I came up with several post ideas I was definitely leaning towards creating one, but the thing that really sold me was the need for an outlet to properly thank all of the people that helped launch Foundation Six (the business and the site).

I also wasn’t sure if I wanted to put a lot of time into something that might not have many readers. I enjoy writing, so I figured as long as I write about things that I like, it doesn’t really feel like work, so the amount of readers is not the determining factor. I actually don’t have any type of counter or analytics monitoring the RSS feed, as I won’t let the amount of readership affect the content. It wouldn’t hurt to have a large following though.

Will you please sell me the templates to X?

I am surprised at how much I get this question. The answer across the board is NO. My clients own the “templates” to their work, and my site is out of the question, for now at least. The day my next redesign launches, the old one will be up for sale.

What inspires you?

Great question. Sounds like next week’s blog post to me.

It has been a crazy couple of weeks around the office. No matter how much you plan for it, you never quite know exactly how a site launch is going to go. You aren’t sure if people are going to like your work, how much traffic you are going to receive, and what the community response is going to be like.

It is even more nerve racking when it is your own website going live. There is no creative brief, client direction or outside forces involved. It is just your ideas exposed to the world, and if it is not well received, you only have yourself to blame. To raise the stakes even higher, it was the official launch of Foundation Six as a business, so it was crucial that this project launch went smoothly.

Success

I am happy/relieved to report the August 3rd launch went off (almost) without a hitch. Feedback was fabulous, community support was overwhelming, and the inquiries are already rolling in, which is ultimately the single most important aspect. The only hiccup was a couple of closely timed tweets from a few influential individuals sending a volley of traffic to the site. Due to my omittance of page caching and the purchase of the lowest level hosting package, the server went screaming. Thank goodness Engine Hosting is responsive and forgiving, and quickly allowed for more bandwidth during the busy period.

The site has now been featured on several gallery sites, including: CSSREMIX, Best Web Gallery, CSS Mania, Creattica, Patterntap, and Line 25.

Traffic figures have been overwhelming to say the least. In the first week, almost 24,000 unique visitors stopped by foundationsix.com, over 58,000 pages were viewed, 2.5 pages were viewed per visit, and 2:32 was spent on the site by each user.

These kind of results certainly didn’t come without some assistance, and there are some fantastic people that I need to mention.

Thanks

Christian Ross: My cohort at noteandpoint.com, Christian has writing skills that don’t come along every day. It is great to know that I have someone to take my rough ideas, and finely finesse them before delivering them to the world. No, he did not polish this post, or it would have been much more eloquent.

Nol Franklin: A man of few words but of many solutions, Nol spends his days making sure that things run smoothly in the beast that is IE, so you know he is a great asset to the team. He is an EE whiz and can write you some custom jQuery faster than you can blink. I can definitely see us working together in the near future.

Cameron Moll: To my luck and surprise, Cameron has helped me launch the last couple of projects merely by using the voice he has earned over the years on the internet. Due to the sheer size and loyalty of his following, I have to say his tweets and comments have greatly contributed to the success of both projects. I really appreciate it, Cameron.

Jesse Bennett Chamberlain: Man, am I lucky to have a friend like Jesse. He has helped me so much along the way with my transition from traditional print media into the digital design realm. The amount of time and patience he has put into me is practically divine, and as a bonus prize I get to learn from one of the most talented interactive designers in the world. I truly hope there is something I can do to help him out someday.

Some other people that are mention worthy include Noah Stokes, Simon Collison, Mike Precious, Chris Bowler, Engine Hosting, and Lacey Battaglio. While each of you helped in a different capacity, be it through a tweet or reviewing mockups for me, I appreciate the role you played, and I hope I have a chance to work with you all in the future.