Some of this software is free, while others are not.  I’ve seen many lists for the best “free” software, and I love these lists.  But, this is not that list.  You might also see thing in this list other than full fledged applications (like Firefox plugins, etc).  In addition, some of the applications I’m going to list below are online, and thus platform independent.  Please, enjoy.

Base

Assuming you are somewhat technically savvy already, I don’t have to point out that you will be running Windows.  However, there are a few basic things I do need to go over.

Browsers

For testing purposes, you will need a wide range of browsers.  For every site developed you need to cross-browser test them, to check for inconsistencies.  However, one of these browsers will be your main workhorse:

Firefox — FREE

One can argue that Firefox is the most extensible and user-friendly browser currently available.  It’s strength lays in it’s ability to run add-ons (mini applications).

In addition to being fast, easy to use, and extensible.. it’s also one of the leading forces in standards compliant browser rendering.

The rest are:

Safari — FREE

Safari, originally written for Macs, is a part of the Webkit family.  It is a fast, lightweight browser that I actually enjoy using from time to time.  The user interface is continually evolving to be friendlier and easier to use. UPDATE: The recently updated Web Inspector has given Safari a lot of punch while designing / developing for the web (http://webkit.org/blog/1091/more-web-inspector-updates/).

Chrome — FREE

Also a part of the Webkit family, but not made for Macs UPDATE: and runs on Macs and PCs alike. Chrome was developed by Google for a faster, more intuitive online approach.  While most browsers have an address and a search bar, Chrome has an omnibar (which searches and accesses addresses intuitively. UPDATE: With the addition of extensions, Chrome is quickly becoming some developer’s choice as a solid testing browser (https://chrome.google.com/extensions).

Opera — FREE

While Opera has done an extremely good job in keeping up with being standards compliant (one of the best) it generally lacks in the ease of use department.  Although it only has just over 2% of the market, you probably want to make sure your sites are rendering correctly in Opera as well.

Internet Explorer — FREE

There are many versions of Internet Explorer, each bringing to the table their own share of problems.  Because you can only have one version installed on a machine at a time (without the use of VMware), I strongly recommend installing the latest version, accompanied by IETester.

Workflow

In this section, I’ll go over what applications make my life/workflow a bit easier.  From settings, to apps, I will be covering how and what I use to work.

RocketDock — FREE

Emulating the OSX Dock, RocketDock is a great application launcher that I use every day.  Fully customizable (down to the icons and skin), it is also extensible.  Plugins for laptop battery life, weather, and many more “widgets” have been created to make this a very functional and useful tool.

Windows Taskbar — WINDOWS

Because I feel that RocketDock is best on the bottom, I need to move the Windows Taskbar to the top.  To do this, simply make sure the Taskbar is not locked (right-click, and un-check “Lock the Taskbar”), choose an empty area on the taskbar, and drag it to the top of your screen.  You might notice that you can drag it to either left or right, but I haven’t found these to be really intuitive positions.

Taskbar Shuffle — FREE

While randomly surfing a free-ware list, I saw an app that caught my eye.  I’ve constantly struggled with having too many windows open, thus having tons of entries in the Taskbar.  “If only there was a way to sort this,” I thought to myself.  Taskbar Shuffle gives you many settings to choose from, but the base functionality is all I really want/need (and it helps me a lot).

Vista Switcher — FREE

I Alt+Tab like crazy, but sometimes it would be nice to see a screenshot of what I’m tabbing to as I might have three windows of the same app open, and don’t want to spend loads of time reading window titles.  Answered.  Nuff said.

Communication

With the thousands of tools and protocols there are to communicate, it’s hard to choose which best suits your needs.

Gmail / Google Apps — FREE

If you have email, and your own domain, don’t you dare bother with using something like Horde or SquirrelMail.  While Gmail is great for hosting personal email, it is equally (if not more) amazing for business emails.  There is a pretty easy to follow instructions on how to get your company/domain email hosted with Google (the best part is that they have free accounts, which I’ve been using for well over a year now).

More and more applications are moving to the browser — cloud concept.  This is awesome because it allows you to access your email anywhere, with all the same basic functionality.  In addition, Gmail makes it stupid simple to access your email by phone, and always stay up to date with IMAP.

TweetDeck — FREE

If you use Twitter, you’ll love the functionality of TweetDeck.  With a basic column layout, you can sort your followers into groups, search criteria, and mentions of your handle.  I have four columns: Personal, Design, Development, and Business.  Keep up with your friends AND colleagues.

All that, and it’s built on AIR, making it cross-platform!

Digsby / Pidgin — FREE & FREE

I’m still torn between the two.  They both support loads of protocols (AIM, MSN, ICQ, Facebook, Myspace, GoogleTalk, etc).  However, where I find both lacking is the file transfer arena (continually getting corrupt files, or won’t transfer at all).  Although, I’ll leave file transfer to FTP or email, and I don’t have a huge problem with that.

What it comes down to is interface, and functionality.  Digsby has great functionality with social networks like LinkedIn, Facebook, Myspace.. while Pidgin has a very small footprint, and allows my CPU to focus on what’s important at hand (although one can argue that a conversation about cheese-puffs with a cross-country friend is important).

Either way, they are both winners in my book.

Skype — FREE

While it offers the same functionality of Digsby and Pidgin without the integration of other protocols or social networks, the video and audio conferencing is second to none for a free service.  In addition, the file transferring is relatively easy and reliable.  I use this to conference with clients and friends that I can’t meet with in person.

I should also note that you can make actual phone calls using Skype, but I have not ventured into this arena, as my cell plan is unlimited.

Design

Photoshop — $642.49 / $699 Standard — $908 / $999 Extended

Your going to be seeing a lot more Adobe products later in the list, but this is by far the must-have of this entire entry.  You might say, “What about GIMP?”  To that I respond, “Screw GIMP”.  It’s not that I don’t like GIMP.  GIMP and I never got into a fight about whose tie looked better at a black-and-white party a few years ago, thus causing a quarrel turned bad causing the punch bowl to be overturned and the party then became black-and-red..  No, nothing like that.  I just simply love Photoshop and it’s integration with the other CS tools (latest version is CS4, recommended).

As the industry standard for graphic creation and photo manipulation, this is hands down must.

As far as what edition to get, it’s really up to you.  You won’t be missing out on a lot of tools needed for web design if you run with the standard edition, but it’s always nice to have all the bells and whistles in case something does come up.

Kuler — FREE

It’s actually more of a community than an application.  Kuler allows you to browse hundreds of color combinations to find the perfect fit for your design project.  You can even submit your own combination to the community.  A great tool when the color wheel just looks like a blur..

Picasa — FREE

Another application developed by Google, Picasa is a great program for managing your photos.  Some of my favorite features are facial recognition and geo-tagging.  Picasa 3 also works hand-in-hand with the Picasa online service, so you can share your photos with friends/family/colleagues.

Illustrator — $575.94 / $599

Similar to Photoshop in that it is mainly used to create graphics, Illustrator differs in that it’s a vector-based application (as opposed to bitmap/raster).  For things that need to be scaled up without losing any quality, I use Illustrator (generally logos, banners, etc).  Using CS4, there is a considerable amount of integration between Photoshop and Illustrator by utilizing Smart Objects.

Flash — $597.99 / $699

Covering the gamut of online animation and video, Flash is a beast of a program.  Currently running ActionScript 3, you can essentially write entire websites in Flash (although not recommended).

Development

Dreamweaver — $377.99 / $399

Originally written by Macromedia, Dreamweaver is now part of the Adobe Creative Suite.  There are a couple reason I use Dreamweaver over other IDE’s.  The main reason is it’s integration with other CS applications.

FileZilla — FREE

FTP isn’t really a complicated task, but it shouldn’t be made any harder with poor interface.  FileZilla is easy to use, extremely fast and responsive, and doesn’t fluff up their interface with unnecessary icons and graphics.  In addition to their FTP Client software, they make it stupid easy to set up an FTP server out of your own machine.

Notepad++ — FREE

Notepad is a great tool for developers across the world.  However, there are just some basic functions that would be really nice in a text editor.  Tabbed interface, syntax highlighting, automatic file history..  These are a few of the many features that Notepad++ has to offer.  My general use for Notepad++ is editing a few of my Apache config files (I hate searching for them everytime I want to make a simple edit).  Scenario: you have three config files open, and close the application.. the next time you open Notepad++, those files will be readily available automatically.  Saves on a lot of time digging for files.

TortoiseSVN — FREE

SVN has become one of my favorite tools for development, especially when a team is involved.  In fact, I find it a necessity now, and will not work on a team project without it.  However, interfaces for SVN applications can sometimes be a drag.  Who wants to open an application just to make sure their files are up to date?  TortoiseSVN is built right into Windows Shell, making it a right-click away from updating your repository or local build.

Business

Basecamp — FREE / MONTHLY SUBSCRIPTION ($24, $49, $99, $149)

Project management is one of those necessary evils.  With email getting way to cluttered, and Google Wave still in “invitation only” testing, Basecamp is a great tool to keep a team on track and on task.  Milestones (deadlines) and a to-do list, as well as file uploads and messaging and writeboards..  Basecamp was written by 37Signals, whose method is to keep things simple (and it’s shown in the ease of use of Basecamp).

FreshBooks — MONTHLY SUBSCRIPTION ($19, $29, $39, $89, $149)

If you are, or have been a freelancer, you know that invoicing clients is not the most glamorous part of the job.  However, it is manageable with some tools, one of which being FreshBooks.  Easy to log, easy to send, easy to brand.  Not much else to say here but: “that was easy.”

Quicken — $59.99 / $99 (HOME & BUSINESS)

Freelancing?  Need to manage your business money, and prepare for taxes correctly?  Quicken, although it’s not that quick..

Microsoft Office — $319.99 / $499.95

I think it goes without saying that Microsoft has dominated the Wordprocessing, Spreadsheet and Presentation market.  These tools are vital to communicate with others via documents.

I’ve often wondered that if certain things were fully supported in CSS (like border-radius) then we wouldn’t have to bend over backwards implementing crazy things like the sliding doors method for rounded looking buttons in all browsers.  The idea of new CSS functionality is to be able to write more semantic code, without the need to wrap certain elements in useless DIVs or SPANs just to give a certain effect.  In a list I’m going to list ideas of what I think would make CSS much more effective as a designer.  In no way am I stating these as completely original and my own.  Anything from selectors to new functionality are acceptable, and if you feel something should be on this list that is not, be sure to let me know in the comments.

Multiple Background Images

If this were implemented, it would be much easier to add complex textures to a single DIV that has a dynamic size.  Say the top of a section needs a slight gradient, as does the bottom.  As of now, you’d have to have two DIVs (one as a wrapper), both containing the background images needed for these gradients (on for top, the other for bottom).

http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering

Native Gradients as Backgrounds

As it stands, we can use solid colors or images for backgrounds.  It’s impossible to have a gradient background image stretch for the entire heights or width of a dynamically size element, so working around this using semantic code is out of sight.  If there was a way to set points of beginning and end, along with color values (and possibly even alpha) this would be a great answer to an immense need.

http://webkit.org/blog/175/introducing-css-gradients/

Dynamic Background Image Size

I know that it’s not a good general practice to have CSS resize your images, but I think that if we were able to scale the background images based on the size of the element, using attributes like fitting to height or width as well as keeping aspect ratio, it would open up a whole lot of possibilities for layouts.  Granted, I don’t think I would want it to scale up the images (for obvious reasons).

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

Expressions/Variables/Computing

Although some might think this is a bad idea, there have been many a times where I wish I could use PHP in my CSS.  Not only would it make templating so much easier (imagine creating a palette of color combinations, and then being able to modify your color scheme on the fly by changing only a couple values), but would allow for much richer possibilities in user generated styles.

What language would be used for this?  Or would a knew language be created?

http://disruptive-innovations.com/zoo/cssvariables/

http://gadgetopia.com/post/2774

:parent(x) Selector

It would be extremely nice to be able to select the parent of a certain element.  There is currently no way to do this.  You are only allowed to move down the tree, and not up.  I have sometimes implemented jQuery to select parent elements and assign a class attribute.

http://journal.adityamukherjee.com/essay/css-parent-selector-or-reverse-selector/

For the time being, this is all that I can think of.  If you have any suggestions, feel free to let me know, and I’d love to add it.

I recently stumbled upon a site For A Beautiful Web. When I find a site like this, it is in my nature to dig. View the source, and whip out Firebug for a peek under the hood. Get in the minds of people and sites I aspire to, and learn the things that will put you in the head of the pack.

As I was digging through some source in the HEAD, I noticed some conditional statements. These always catch my eye, as I am always interested in how other people handle IE bugs. A firm I used to work with decided to set up a page referring them to download newer and better browsers. A freelancer I currently work with supplements with stylesheets to fix the bugs. But what do other people do? This question has always been on my mind. So while looking at these conditional statements, I realized that they were linking to some code hosted on Google Code. It was an IE6 specific stylesheet.

Take a look at the code, as it is some clean work. In the developers notes, they state that THE most important part of (most) sites is the content. This stylesheet leaves intact the content, does not give it layout, but structure (very similar to the default styles of the browser). The difference between giving the IE6 user this stylesheet, and not letting IE6 have control over the styles is simple: these styles are much classier, and easier to work with if you ever wanted to give a mild bit of branding.

I’ve decided that I will recommend this to all future and current clients. It is an elegant solution to what I think is a hideous problem.

I’ve created two templates.  One for if you are simply working with (X)HTML, and the other if you are using PHP.  I’ve separated the two because I believe that if you are using PHP (in a simple fashion) there are many structural things that make updating your site so much easier (i.e. making sections that stay the same throughout the site an “include”).

• Starter Template — HTML 248
• Starter Template — PHP 217

These ZIPs include a small file structure.  I will do my best to go through and explain everything.

index.html/index.php

The index is where all of the files are linked together.  This should be your base template for every page.  I tend to rename it “template”, leave it in the site root, and then duplicate it every time I need a new page.

It uses a strict (X)HTML doctype, imports the Google hosted jQuery library and a local javascript file, links up the CSS, has conditional statements for Internet Explorer versions 6 and 7, as well starts off with a very robust document structure.

Javascript

jQuery

I use the jQuery library in almost every project I do.  Even if I’m not going to use jQuery from the start, with a minimized file size of 4k, it’s easy to add some Javascript to a site if it’s already loaded.  I also decided to stop copying the jQuery lib file into every project I do, but link to the file hosted by Google Code.  There are many reasons why to, and not to do this, but ultimately it came down to one thing: it’s easy.  The pros and cons can keep battling each other all day, but they really are going to even out.

global.js

Because I use the jQuery library so often, I added this global Javascript file.  I tend to use JS for things like navigation drop-down animations, and other things that are globally located around the site.  So, it only made sense to have a global Javascript file.

CSS

screen.css

The core of my skillset is mostly in CSS.  With that, I don’t know what I would do if we still had to write inline styles (probably pursue my life long dream of Wife Carrying).  The reason the file is named “screen.css” is because it simplifies the naming convention I generally use.  Some times (and this is only when I’m SUPER bored) I do create a handheld and print stylesheet.  In this file (screen.css) it imports another CSS file, reset.css

reset.css

Courtesy of Eric Meyers, this reset stylesheet removes most, if not all, browser default stylings.  It places everything on the same level as to not run into any weird kinks later down the road that seem confusing.  I can’t tell you how many times I’ve wondered “Why is that two points larger than it should?!”

Conditional Statements

Conditional statements, conditional statements, conditional statements… what are we to do?  The very fact that Microsoft created an “out” just for them someone irritates me.  These little buggers let you hide tags from any other browser that isn’t in it’s “condition”.  If you don’t know what I’m talking about then have a look at Microsoft’s Developer Network.

Document Structure

I’m pretty sure I’m not the only one to have this document structure, but I don’t recall copying it elsewhere.  After looking at as many lines of code as I have, things start to become a bit hazy.  Either way, let me explain the best way to use this structure.

#wrap

I generally use the #wrap for some sort of background image applique.  It works best when you have a repeating background image on the body, but need some sort of “topper” (if that makes any sense..).  It’s just a div that fills the entire horizontal space, and as much space as your content takes up vertically.

.container

I used to use the #wrap to horizontally center my content.  I did this until I met .container.  What .container allows you to do is have a section (i.e. #branding) that spans the entire width of the document, but “contains” the content into a fixed (or even fluid) width that is smaller than the document.  Example: your design has a black stripe behind the branding that goes all the way across the document, left to right.  But the content only spans about 600px.  You set the global .container width to 600px, and you can center it using some margin techniques.  Bam!  As well, if the content width ranges from section to section, just use the “cascade”, and call on the .container by it’s parent div id (i.e. #branding .container).

Sections (#branding, #content, #site_info)

Although I’ve been using CSS for quite some time, it was brought to my attention not to long ago how far we should take semantic coding.  I’ve realized that id’s like #header and #right_col don’t have much value if you are restyling a document with no sidebar, or the “header” is now at the bottom of the page..  These sections that I’ve put in the document are not the “be all” of structure.  In fact, in many of my projects they don’t work at all.  But keep in mind when you are coding a document, “What content is going to be within this block of code?” and name it accordingly.  BTW, if you are unsure of what #site_info is for, I generally put copyright, “footer” type things there.

I hope this can benefit somebody, as it has helped streamline my process by a lot.  Thanks!

How many times have you built a two column layout?  How many times have you found it damn near impossible to get them to line up at the bottom without using some Javascript?  It’s a crappy situation to be in.  “Rely on Javascript, do without..?”

In certain situations, you don’t have to decide.  Assuming both columns are above the same background, and all that is needed between them is a one-pixel divider, then we’ve got the ticket.  The general dilemma with this sort of layout is that you really only get to choose one side to have the divider on.  Say you have a basic “Content/Sidebar” layout:

If you add the divider to the left column, then you chance the  content column being longer than the divider.  If you put the divider to the right column, you chance it being shorter than the left column, etc.  It’s just a big mess.

The solution?  Add the divider to both columns.

If you noticed, we pretty much did the same thing to both of the columns.  We added the dividing line on the sides that touched, as well as compensated the 1px border in the width.  The only thing that we did differently was added a negative margin of one pixel to the secondary column on the joining side.  This method basically overlaps both columns by one pixel.  Luckily, both of these columns share a one pixel border on that side, causing it too look like there’s only one border between them.

You can see how finding this has saved me tons of grief, and time searching for the best column Javascript code..

Hope this helped somebody, as it was a huge help to me!

Well, I finally came across how to achieve this effect.  Enter stage right, HTACCESS.

Apache servers (with mod_rewrite enabled) have the ability to take the request from the user, rewrite it, and then display the rewritten requested page.

This will access the file:

by typing in the URL of

Respect: Thanks to Dave Dash for this insight into cleaner URLS.  Go Green!

To get similar results with an IIS server, visit Micronovae.

Note: that I have a basic understanding of how servers work.  For more information about Apache, visit their site.

Initializing Virtual Hosts

First, open up a text editor.  There are three files we’re going to have to manipulate.  The first is the main Apache config.  If you are using a stack, like WAMP, the file path will look something like:

Once you’ve got this file open, look for a line like this (mine was on line 497):

And change it to:

All this is doing is removing the comment symbol from the line that is including that file.

Creating VHost

The next step is to start setting up the file we just included.  Again, if you have a stack like WAMP, the directory will look something like:

You can read this file, but the important part is near the bottom.  There are code blocks that read something like:

Each of these blocks is going to be where we set up new local domains.  The best part is that we get to create as many as we’d like.  Once you are finished with a project, you can remove or leave a domain settings.  I choose to leave them in case I ever have to revisit that project.  I should not that once you include this second file, the ‘localhost’ domain (as said in the Apache guide) is removed.  If you’d like to reinstate it, you can recreate it here, and I’ll show you how.

Now, there are some dummy settings here, but you can just remove them, or use them as a template.  I’m going to use my local build of my site as an example.

To start, I should not that the beginning tag should match exactly the string that follows ‘Name__________’ on line 19.  As you can see, the first thing listed is the ServerAdmin.  Just put your email, or remove this line altogether.  The second thing is the DocumentRoot, or where the local working copy directory is.  Mine is on a second harddrive W:/.  And the third, and very important, thing is the local domain we will be using, the ServerName.  The above setting allows me to type into the address bar:

or

Setting Permissions

Now, if you are using WAMP, there are some initial settings in the httpd.conf file that we are going to need to change.  These alterations give us permission to access the files we stated for the ServerName.  So, reopen the httpd.conf, and look for the line that resembles:

Note that there should be two of these, and one just contains “C:/”.  This is the base configuration that allows no permissions.  We are going to want to change the directory to something more broad.  Now, if you are working off the local drive (C:/), then you can reduce it to just that.  I, however, am running projects from multiple drives.  My directory listing reads like this:

This broadens it up to an “anything, and everything” approach.

Letting Windows Know What’s Going On

The third file that you have to open is:

You can read the description in the file, but basically it’s what tells Windows that the domains we list in this file will be at the I.P. adress that we designate.  In our case, we are using 127.0.0.1, our local I.P. address.  The first two lines read like this:

We want to add a line for each domain we create.

After adding this line, I should be able to save all the files I altered, restart the Apache service (if you are using WAMP, click on the WAMPSERVER icon in the taskbar and choose “Restart All Services”), and voila!  The next time you type in your custom local domain, you’ll have your local working build.  I find it also very useful to create a url for utilities, like phpMyAdmin.