Redesigning the personal website

I first designed my personal website a couple of years ago when I was a multimedia newbie and gave it some cosmetic updates about a year ago. Lately, however, I became increasingly aware that it needed a major overhaul. I kind of felt those "stylists" on TV who dispense fashion advice but who are themselves are dressed like glamorous hobos. Thus, I recently gave my site a technical and cosmetic overhaul. Here's what was wrong with the old design:Intro pageI detest intro pages because they are usually unnecessary or at worse cumbersome and annoying, yet I realized I totally had one on my own site. One of my favorite bloggers likened the intro page to holding the visitor's head in a bucket and keeping it there. I couldn't agree more so it was the first thing to go.Split pages In online journalism where every page view counts, it's become acceptable to split content over several pages. This is fine for galleries and long articles, but I had somehow managed to split each item in my portfolio into a separate page with a clunky Flash menu to complicate things even further. I redesigned my portfolio to be a series of scrollable pages where the user could see previews of all the content in that section in one fell swoop. The new layout was inspired by design blogs Smashing Magazine and inspiredology in which the user can simply scroll through the galleries to get the gist of the content. Before and afterNo CSSMy name is Mark Luckie and I used the tag. I'm not proud of myself. Literally every line of code in the old version had this long strip detailing the font, font size and a whole mess of other things that could have been done in one simple stylesheet. I cleared out all the tags and tables and built the whole page from scratch using div tags and a streamlined stylesheet to govern the whole site.Word HTMLInstead of copying and pasting the text of my résumé into a new HTML file, I simply saved the Word file as a "web page." This, of course, resulted in miles of Word's useless proprietary coding that made a mess out of what should have been simple lines of code. Even after running the clean up command in Dreamweaver (Commands | Clean Up Word HTML), I still was left with a gobbledygook of text that did not adhere to my CSS stylesheet. The entire resume page had to be stripped of coding, which took a considerable amount of time.Lack of SEOThe original site was made up of all images and literally no text, save for some hidden in the intro page (not even an ALT tag). Add to that a completely ridiculous use of iframes and the whole thing was an unindexable mess. The existing design was fine for direct traffic and the site got a boost in Google rankings because of its association with 10,000 Words, but was not SEO friendly at all. In the new version, the menu still consists of images so it adheres with the comic book look, but the blurbs were converted from images to actual text. Before and afterCross-browser incompatibilityI must have been thinking "to hell with those IE users" because the first iteration of my site used a Javascript scrolling menu that was only viewable in Firefox. Visitors using Internet Explorer only saw a gray box. This means about 70 percent of internet users could not see my "cool" menu. The wonky element was later substituted with a Flash version in the initial cosmetic update, but was ultimately nixed in the overhaul because it didn't add anything useful to the page.That said, don't make the same mistakes I did. For more on bad web design, read LifeClever's 10 Reasons Why Your Online Portfolio Sucks, which was coincidentally published while I was in the middle of retooling my own site.

Fishbowl

Redesigning the personal website

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!