I've come to realize that the hardest person to design for is oneself. Luckily, for the overhaul of my personal website, I had a little help.

Anytime I see something graphic or design element that strikes me as interesting, I bookmark it or save it to a little folder on my computer that serves as a digital inspiration board. Usually any new design project begins with a few clicks through the folder, which, at last count, contained 333 files collected over the years. Before I redesigned my own site I pulled a couple of images from the folder and set them aside for inspiration. Here are those actual images:

   
   


And here is the final design:



I came up with a million different designs in my head and ultimately stuck with a comic book theme, but you can clearly see the influence of the selected images in the design. I later realized I had also been subconsciously inspired by the billboards for the new Indiana Jones movie that have recently popped up around the country.

Keeping your own personal inspiration board, whether it be digital or a collection of torn out magazines or photos, is a great way to get the design process going. I often use the screenshot tool FastStone Capture (downloaded when it was free) to create a quick snapshot of something on the web that is in the vein of my own design aesthetic. I also use del.ici.ous to bookmark Flash-based, multimedia or interactive sites (and, incidentally, ideas for blog posts.)

If you don't have your own personal inspiration collection just yet, there are many sites that will stir up the creative juices, including screenfluent, Beautifully, dafont.com and the previously mentioned inspiredology.com and Smashing Magazine.

What inspires you? Is it a website, a photograph or something else. Share it with everyone in the comments.

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 page

I 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 after


No CSS

My name is Mark Luckie and I used the <font> 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 HTML


Instead 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 SEO

The 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 after


Cross-browser incompatibility

I 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.

Being a web journalist means spending a lot of time at the computer which sometimes means developing that nasty little tingling sensation in your arms and wrist. A few extra hours at the computer this week (I'll tell you why tomorrow) have made me more aware of the downside of a 24-hour web world. Does the increase in digital journalism mean an increase of journalists with carpal tunnel? WebMD says no:

[Researcher Johan Andersen, MD, PhD] says his advice to people who do a lot of computer work and suffer from hand and arm pain is don't jump to conclusions that it's carpal tunnel syndrome.

"Most likely, symptoms that are mild will disappear," Andersen tells WebMD. "If you have numbness or tingling exclusively in the first, second, or third fingers, the likelihood is much higher that it's carpal tunnel syndrome. But if it's in the whole hand, it's not likely that it's carpal tunnel syndrome."

Keep in mind I'm no doctor and a reporter is only as good as his sources. According to the professionals, there are some things that one can do to ease the stress from typing. From Microsoft Home Magazine:

To give your wrists and muscles a rest, it's important to take frequent computer breaks. Mooney advises taking a five-minute stretching break every 15 minutes, preferably away from the computer. If you can't get away, stretching at the computer is still beneficial.

There are even more valuable tips at essortment like looking away from the computer screen once in a while and relaxing the shoulders. You can also try the fun exercises demonstrated at Nimble Fingers (look its multimedia!), which cover just about every part of the body. Point is, work hard, but not so hard you can't work anymore.

At its inception, I admittedly was not a fan of the podcast (more specifically, the once common practice of posting a couple of mp3s online and calling it a multimedia page). But now that multimedia journalism is diversifying, it's time to take those podcasts to the next level.


An estimated 18.5 million people downloaded a podcast in 2007 and that number will jump 70 percent in 2008, according to a February eMarketer study. That's a lot of potential listeners. For the uninitiated, Podcasting News has a great primer on what a podcast is and how it works. Newbies who don't have access to podcasting equipment such as a microphone, headphones and software can purchase a podcasting kit from Urban Outfitters for $120 or from zZounds for $99.95.

Recording a podcast, doesn't have to mean sitting in front of a computer or in a recording studio. Sites like BlogTalkRadio, Gabcast and Yodio make it simple to record podcasts from the field using a cell phone. This is ideal for conversing with subjects who can't make it to the newsroom or podcasting from a live location such as a press conference or convention.

It's also easy to record interviews or conversations over the phone for inclusion in the podcast. You can use a gadget that will record landline phone calls or, if you are a Skype user, use Call Graph to record and save calls as mp3s. The free software indexes calls in a user-friendly way that makes tracking them down later a breeze.

Podcasters with an existing listener base will appreciate the services of K7. The site lets users call in and leave voice messages which can then be included in future podcasts. It's a unique way for integrating interactivity in what is often a one-way medium.

Odiogo is perfect for those who don't want to bother recording audio or just want a new way to present content on the web. The online service will extract text from an existing RSS feed and convert it to audio, thus making it perfect for audio-inclined visitors.

Finally, if you're looking to increase listenership for your podcast, consider publishing it on iTunes or including it in any of a number of online podcast directories, including Podcast Alley and Podcast.net.

Labels: audio

It's been a long week producing this story so I am anxiously looking forward to the weekend. Here are some great posts that I've been saving in my RSS reader.


E-Media Tidbits (Poynter)
Getting Commenters to Play Nice

"Post a clear, plainly worded comment policy that says what is encouraged and what is not allowed."


SteveOuting.com
Twittering reporters

"I just wanted to update you on our Twitter coverage at WCNC. We did it for the primary yesterday, and it was incredibly successful."


Reportr.net
Taking stock of how newspaper editors see the future

"35 percent believe print will reign supreme."


Online Journalism Review
How to get your site into Google News

"Google News is one of the world's most popular news portals, 'in the top five worldwide.'"


New Media Bytes
The Secret to Increasing Traffic from Facebook without Building Applications

"Facebook provides a number of tools that can help you promote your content and cash in on social network referrals. And the best thing is - Anyone Can Do It!"


The Editorialiste
6 Tips For Landing Your Dream J-Job

"4. Remember that any progress is good progress."


Journalistopia
Overcome evil article pagination with Firefox add-on

"Hard-core news junkies hate it. Matt Drudge hates it. You surely hate it too: article pagination."


And a sincere thank you to everyone reading 10,000 words. You really inspire me and keep me going!

1. Despite all the various multimedia skills I've learned over the years, the only one I'll really use is Flash.

2. Good journalism jobs are hard to find...and worth fighting for.

3. Most of my future co-workers will not be as effervescent and optimistic as my classmates.

4. Hold on to those business cards.

5. Always keep a clear separation between work and personal life.

6. Two weeks to complete a story is not really a deadline.

7. Fast food is not a lifestyle; pack a lunch.

8. I will not work 24 hours a day like I do in J-School. I will, however, do the same amount of work in an 8-hour day.

9. There is this thing called a cubicle...

10. There's always public relations.

There are the usual suspects when it comes to multimedia news pieces: slideshows of the wonders of nature, interactive diagrams of new buildings, video interviews with the downtrodden... all of which likely teach the viewer something new. But sometimes the news needs a little dose of fun factor.

A new crop of online games that subliminally teach a lesson or two or incorporate news headlines in some way are quickly going viral because they are simply entertaining. While every news story shouldn't become an online game, the ones that are encourage participation amongst otherwise passive readers. The games also — and this is good for advertising — increase the time spent on the page.

American Public Media seeks to educate players about eco-friendly living with its Flash game Consumer Consequences. The game itself is convoluted and preachy, but its suggestions on how to improve one's lifestyle based on interaction with the game are laudable.


The Genetic Science Learning Center at The University of Utah demonstrates the effects of drugs on the brain with a couple of animated mice. The sad and tragic news is softened and more absorbable in the "game" environment and most importantly isn't overbearing.

MSNBC has thrown its figurative hat in the ring with NewsBlaster and NewsBreaker, the latter of which is reminiscent of the Pong of Mac games, Brickles. News headlines are integrated into the fairly simple games and while it is an admirable effort, one StumbleUpon reviewer offers the most insightful critique: "If I want news, I'll go to news sites. If I want games, I'll go to gaming sites. The two don't mix."

SexyPolitics has been covered on this blog before, but it's worth repeating — this game is fun AND informative. Virtual strippers reward correct answers are rewarded by removing clothing, but the game also has an option to lessen the sexy factor. Even news buffs will be challenged by some of the questions on the issues and the candidates.


Newseum's website is more than just Today's Front Pages. It's NewsMania trivia game lets players choose from three levels: Intern, Reporter and Editor, with commentary from sassy virtual host Rita.

St. Louis Dispatch has an innovative assortment of multimedia, including this quiz that compares the player's geography skills to those of the young adults in the United States. A few news quizzes can also be found on Facebook, including the ever popular New York Times News Quiz and the equally entertaining, but less popular, Reuters News Quiz.

If you're looking for inspiration for your next online game, consider a trip to the local museum. Many exhibits, like those at the California Science Center in Los Angeles, are incorporating gaming and technology to provide a greater learning experience for visitors.

Considering many people under 30 aren't picking up newspapers or listen to non-music radio programming, making a fun online game is a great way to hook them in. As long as the games remain diverting without being overbearing, they will continue to succeed.