A close-up view of the search results for "motion graphics Centennial Colorado"

Some great news for my portfolio site today: after its most recent reindexing in Google, my site is now listed as the number one entry in the search query “motion graphics Centennial Colorado.”  I’ve been working to increase my site’s visibility on the Web over the past few months, and this is certainly a nice indicator that my work is increasingly paying off.

A full-page view of the same search results page

In addition, my site is also ranked first in the organic search results for the same query on Ask.com as well:

Ask.com's search results for the query "motion graphics Centennial Colorado"

Free Download: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

A close-up of an Illustrator mockup for the OFLC Construction website

I always use Illustrator to draw out website layouts.  I know a lot of people like Photoshop for layout comps, but I stick with Illustrator because it’s drawing tools are so much better.  Photoshop is certainly one of the greatest pieces of software in the world today, but when it comes to drawing up button/layout/icon graphics, Illustrator’s vector drawing tools save the day. But one nagging problem that kept coming up was an apparent lack of pixel-perfect drawing options, especially when it came to stroked vector shapes.  The left side of the picture above shows the problem. Even when a particular shape is set to a 1-pixel stroke, it oftentimes straddles the pixel border, resulting in a stroke that’s twice as thick and half as intense.

This problem was driving me crazy until I found a blog posting on Vibr8bros.com that addressed this exact issue.  The solution’s too simple: make sure the stroke is set to center alignment (it usually is by default anyways), then set the line’s position at half values. For instance, if you have a vertical line with an X-position of 1124.293, just change the position to 1124.5.  Problem solved!

You can read the full tutorial on Vibr8bros.com here.

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

Well, after a lot of work, my portfolio site’s redesign is finally complete.  Some history: my graphic design portfolio has been running on www.cstrom.com since early 2005.  From 2005 through the first half of 2008, it was running as a pure Flash site.

This had several drawbacks: the first, of course, being SEO.  Being a series of old-school Flash files, my site was literally invisible to the search engines.  (I keep hearing about Flash being more accessible to search engines nowadays, but I still feel like I never see many Flash sites show up prominently in organic search results.)  Another drawback, for me, was that it was cumbersome to update compared to XHTML.  And finally, with increasing monitor sizes nowadays, it was becoming increasingly necessary to change my layout to a 1024x768-optimized layout, rather than the 800x600-optimized layout I was currently using.

My 2005–2008 portfolio site — showing its age

With these things in mind, I decided a few months back to overhaul my site, giving it a redesign and moving it over to an XHTML format.  My plan was to first run the site in a “transition mode:” build a few XHTML pages with my résumé and a few of my most recent work pieces, but still link to my old Flash site to display the majority of my work.

The transitional portfolio site

Finally, when some time opened up between contracts, I started building out the “finished product” — the fully redesigned site.  I kept the same basic layout as the transitional site, but gutted it all under the hood: the transitional site ran completely on absolutely positioned <div> elements, so I rebuilt it using a more flexible and standardized flow-based layout. I built out a full footer section, using the wonderful footer technique from A List Apart.  I filled out the content to display a much larger selection of my portfolio, divided up by category.  I added this blog that you’re reading now.  And finally, I gave a bit of a facelift to the design, cleaning up the typography and some of the visual elements.

A comparison of the transitional site and the final site

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now