For many years I developed flat comps of several of the main website pages. I always spent more time than necessary explaining how each little detail would work. Most of the time, I would have to direct them to previous work to ease their minds on how a particular piece would work. Why was I doing this? Wouldn’t it make more sense to just code it real fast and show them? Then their minds would be at ease, and the work for that functionality would already be done! Not to mention, if they didn’t like it, I just dodged one of those last minute wrenches that clients love to throw at you on launch day.

Enter Website Prototyping

Website prototyping is the act of creating several pages (probably the main navigation pages) to make a semi-functional version of your website. This prototype is created with just the HTML and CSS code that your website will be ultimately be built with.

Now I understand completely that this is more work on the front end. However, there are many, many advantages to having a functional preview both for you and your client.

• A clickable, functional concept will be better understood by the client. If you’ve developed more than 2 websites for any client you’ll know that they are usually unhappy with the progress on any project until the very end. It’s hard for them to understand the process, and as geeks, many of us have a hard time explaining it. Just give them something they can click. They will have a tangible product, so they will feel they are getting their money’s worth right off the bat.
• When the front end is designed first, the back end programming becomes 10x easier. This workflow provides a clean separation of HTML, CSS and business code, it promotes a more easily managed code base as well.
• You already have the front end presentation code done when you enter the programming phase of your site! Most of your CSS should be in place, and your HTML templates will already be done. Additionally, if you took the time to bug test the preview for all browsers you should run into very little cross browser bugs.

Flat comps are for design direction only

By no means did I get rid of flat design comps all together. I use them in every project. They are still my preliminary first phase. The client is shown several design directions done up in photoshop. Of course, I have to explain to them that they are for direction only, and are by no means an exact representation of the final product. Basically, they show them the color scheme, basic layout, logo/navigation placement and art direction.

It’s worked for me

I’m sure many of you are already working this way. It may seem blatantly obvious to everyone, but if I made the mistake then I’m sure other people are as well. I have yet to find a disadvantage using this process. It may not be for everyone. In my experience with it so far, it has resulted in happier clients and a much happier me.

I am using a Mac to rip my DVD’s, so this guide will be catered towards a Mac user. The steps should be relatively close to the same, however the Windows™ based version of Handbrake’s interface is a bit more complicated. There are more buttons to get confused by but, if you follow these directions and leave the rest alone you should be alright i’d assume.

Let’s Get Started

Once Handbrake is installed and launched, go to the Preferences menu - Handbrake > Preferences (command + ,). You will see a preferences dialog like the one below. Please ensure your preferences match mine and click “OK” (if you are prompted by a menu asking you to “Select a DVD”, click cancel and you will be able to access the dialog).

The next step is to go to: File > Open DVD (command + o). This will open up a dialog with two options (see below). The first option is to select a Detected Volume, which is your DVD drive or any current DVD image files (ISO, DMG) you have running on your system¹. Insert the DVD you wish to rip (you may have to quit out of the Apple DVD player when you put the disc in). Click open after Handbrake has recognized the DVD.

After we’ve selected our DVD source we need to choose which DVD title to rip. In Handbrake they conveniently give you the length of each title, select the longest one ^{2 & 3}. Just leave the chapters as they are ⁴.

If you do not have the presets drawer panel on the side of the application window, you can access it by choosing: Window > Presets Drawer. Once the drawer is open select the “HB-AppleTV” preset. This will set most of the options you need to rip your DVD for AppleTV.

All of the video settings have been set, now we have one setting to change in “Audio & Subtitles.” In the “Track 1 Mix” dropdown select “6-channel discrete.” This will put all of the surround sound audio tracks into seperate tracks in the final mix ⁵. You can optionally set the “Subtitles” dropdown to render subtitles into your final output.

And you’re all set. Click “Start” and your DVD will start ripping. Depending on the speed of your Mac this could take nearly 6 hours for a 2.5 hour DVD. After ripping is complete drag the newly created file into iTunes and enjoy!

Thanks for reading

Advanced Tips

¹ You may alternatively select a video_ts folder that has been copied to your hard drive.
² You can open the DVD in the Apple DVD player and it will tell you which one it is.
³ If you are ripping a DVD with episodic content (a tv series) you will want to find which title you wish to rip. You may do so by opening the DVD in the Apple DVD player and choosing the title from the DVD menu. the console will have the title number posted on it.
⁴ If you don’t wish to rip the credits select the next to last chapter in the second drop down box.
⁵ Depending on your surround sound system you can also choose Dolby Pro Logic II or Dolby Surround (your woofer or center console will have the Dolby logo stenciled on it).