Web Development: How I get it done

Web Development: How I get it done

As you probably already know there are numerous blog posts about cool apps, the top 10 apps for this, the 1001 best apps for that, etc. etc. I figured instead of posting another list of apps, you guys might actually want to see the tools that I personally use every day. Probably not, but here they are anyway.

My office

My Home Office

My home office

I figure some people might be interested in seeing my home office and computer set-up as well. 24" iMac 3.06 Ghz Intel Core 2 Duo with 4 GB of ram. 500GB internal HD with 250GB & 1TB external drives. Second monitor is a Samsung Touch of Color SyncMaster T240.

Design

For the most part I am a die hard Photoshop lover. I will occasionally open Illustrator for a certain element but most of the time all of my design elements are done inside Photoshop. I know some people argue Fireworks is best for interactive design. I am not here to argue against that, I just have many many years of Photoshop experience and I am not ready to cheat on the one I love.

Photoshop tip: Vector layers in photo shop are your friend. Become familiar with the pen tool and shape layers.

Production

For the design I am a one app guy, but that all changes with production. I have a bag full of apps/plug-ins that all serve a specific purpose for speeding up and perfecting my production. Here are the apps I use every day, hopefully you can benefit from some of these too if you are not already using them.

Pen & Paper

For me, a notepad while I am doing production is essential. Before I ever begin writing code I make a list of elements I will be using. I take note of widths, heights, text colors, background colors etc. Taking a little time to write these items down saves me a lot of time in the coding process, keeping me from having to switch back and forth between Photoshop and my code to make measurements.

Coda

Coda is a great FTP/editor in one. I hand write all of my HTML & CSS inside of coda, it offers color coding, code hinting, and allows for plug-ins to expand the app. Download a 30 day trail of Coda to see for yourself.

Web Developer's Toolbar

Web Developer's Toolbar - Edit CSS feature

Web Developer's Toolbar - Edit CSS feature

Web Developer's Toolbar - Line Guides

Web Developer's Toolbar - Line Guides

Web Developer's Toolbar - Show Current Element

Web Developer's Toolbar - Show Current Element

This is an add-on for Firefox that is an absolute must for and web developer. There are way too many features to list but the ones I use the most are the edit CSS and outline current element. Edit CSS displays all style sheets that are loaded on a page and allows you to edit the styles in real time. This is a huge time saver for development. I typically will write out my entire HTML in coda and then use the edit CSS feature to write out and preview my CSS in real time.

The "show current element" feature is massively helpful when working on existing site, or exploring other site's CSS. When you hover your mouse over an element it will highlight that element and then show the whole hierarchy of the element. ex: html>body>#content>#leftCol>p

A few other helpful features are line guides, rulers and view generated source. Download Web Developer's Toolbar

FireBug

FireBug has many of the features the Web Developer has but is more focused on script debugging. One helpful feature of FireBug is live HTML editing similar to Web Developer's CSS editing. Firebug allows for live CSS editing but I prefer the Web developer's toolbar to FireBug in the CSS area. Download FireBug

ColorZilla

ColoZilla in use

ColorZilla showing the colors values for an element

ColorZilla is a great plug-in for Firefox that allows you to see the hex color, or RGB values of any pixel on a site. There are more features but I mainly use it for viewing a specific color. Download ColorZilla

Pixel Perfect

Pixel Perfect, showing the overlay & options menu

Pixel Perfect, showing the overlay & options menu

Alright, listen up code monkeys. That Photoshop file you have just been handed is not a "general" guide of how the site might look, it's an exact blueprint of what the site MUST look like. As a designer I can tell you that we put that button 30px, not 29px or 31px, away from that logo for a reason! For quite some time that has been the struggle with converting design into code. Everything looks right but you know something is not quite right but you can't quite put your thumb on it. Enter Pixel Perfect. Pixel Perfect allows you to overlay a jpeg of your mockup over the top of your site. You are able to adjust the opacity of the overlay and drag it around to make sure it all lines up just right. Download Pixel Perfect (requires FireBug)

Use Pixel Perfect in combination with the Web Developer's Tool Bar: EditCSS to style your site on the fly with Pixel-Perfect precision.

Other Stuff

Once the site is built I make sure it looks good in all browsers required for the project. FF, IE7&8, Safari always get attention. Validate your site. I'm not a firm believer that a site MUST validate because I know there are certain techniques that will not validate such as CSS3, but validating your site is still important. Validating your site will help you clean up sloppy code, or help you figure out why something that should be working is not. It can also help you learn standard compliant code by showing you what you did wrong.

All projects are different and some require different tool, but this list covers the tools I use for mostly every project. What are the tool that you cannot live with out? What tool changed the way you coded websites forever?

Recent Posts

Magazines and much much more

Mar 09, 2011

So it's been a while since I had wrote a blog post so I thought I would finally take some time and let you know what I have been up to lately. I have been crazy busy to say the least and a lot of exciting projects...read more

Fix The Full Width Box-Shadow Bug

Oct 04, 2010

I recently ran into a problem where I wanted to use box-shadow to create a divider between a header and the content of a site. The div I was putting the shadow on was set to 100% width so the background...read more

Steve Mullen Interview

Apr 22, 2010

I was recently contacted by a college student and asked to answer a few questions for a class project. I figured since I already had it typed up I would share it on my site....read more

Destin Car Wrap Complete!

Mar 16, 2010

I recently designed my first car wrap for a client. It was a fun project and I was anxious to see the final result. I was a little nervous since I had never designed on before and the design was fairly complex....read more

More Posts

New Free Desktop Wallpaper

ITR Photo-shoot

New Addition!

Stop Designing in Photoshop. No thanks!

Behold Apple's iPad

Let it Snow Wallpaper: Download

Text layout in Photoshop using shape layers.

Powered by modx

Web Development: How I get it done

New Desktop Wallpaper

15 Inspirational Home offices

Color Profiles in Modern Browsers

Big Update!

Free Texture Pack #1

Run Your Old Add-Ons in FireFox 3.5

Downtown Tulsa - A Photographic Tour

Souled Out Website Launches!

Get rid of those ugly link outlines.

New Website Launched!



Need a website?

I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.

Twitter Feed