Archive for the 'Web Design' Category

Bad Code <br> Out

Wednesday, April 4th, 2007

Reworking a website is never my favorite task. Its always more fun to start a site from scratch writing the HTML super clean. A few times I have been given the task to rework other’s sites. If you write any HTML you will know that everyone has their own style. This usually causes me to curse out-loud and blame ridiculous habits on those who are no longer working at the company. I am one of those coders who talks out her code verbally asking aloud “why are you not floating left… float LEFT!”. When it is someone else’s code I usually say something along the lines of” what the hell was #&!@ thinking when he wrote all of this inline CSS?!”.

Today I am reworking one of my sites that is about 2 years old. It is one of the first sites I ever coded quasi-on-my-own. After a bit of procrastination and fear of what may lie beneath, I peaked under the hood to find mountains of <br> tags. Gasping in horror… “how could i have written this?!”. Looking away in denial I thought to myself “maybe i can just not touch it, no one would notice”. While wrestling with these disturbing feelings the truth percolated through my conscience. It was too late,the image of excessive tags had been burnt into my brain. The embarrassment of ill kept code began to eat me up. Something must be done.

While I don’t mind the revisions, it is the embarrassment of having written it in the first place that hits me hardest. After beginning the process of rebuilding, I started to think about it. It could be worse. These could be tables or non breaking spaces. This code that I am wading through could be horrible given the circumstances. I was designing exclusively for print only a few months prior.

There is a more hideous scenario: Two years after writing the erroneous code I could see nothing wrong with it, making no progress at all. Back then my attitude was like “sweet i know CSS, I can make a website”. Now that attitude is ridiculous and I have learned to stay mindful of what I don’t know. This goes along with a theory I have had for some time. If a potential employer asks you to rate your Photoshop knowledge on a scale of 1-10, and you say 10… he/she will know you are full of yourself. Not even the most badass designers will admit to saying they are Grand Masters of Photoshop. If you do say 10 and the employer is ok with it, then it is someone you don’t want to work for because they have no understanding of the industry.

Whether it be Photoshop, web development, businesses, or design if you think you know it all you are selling yourself short. I hope to continue to be desperate and hungry for web knowledge. The threat of falling behind is looming over us all. In an industry that moves so fast it is often discouraging to keep up. A run on the treadmill may knock the wind out of me but I hope a little bit of HTML never does.

TechTags Plugin [ HTML | CSS | BY | Web Development | Code Habits ]

Whitehouse.gov Redesign: Looking Sexy

Thursday, March 1st, 2007

By no means am I a political blogger. Living in Northern Virginia, However there is no escaping it, politics, government, and military are everywhere. but on the coat tail of my last blog I find this a perfect place to point out a delightful surprise I found online today.

The Whitehouse has redesigned their website, and its pretty damn sexy.

Government websites tend to have a lot of crap on them. I’m not sure why, but somewhere along the lines of working for the government you become brainwashed into loving excessive drop shadows, strokes on text, and just throwing as much useless crap possible on a webpage hyper-linked in bright blue to more useless crap. In some cases design is just not a priority and left as the responsibility of an admin person who sees it as play time with PowerPoint. I’m not dissing on PowerPoint (at least not in this blog) but Design is a very powerful tool that when effectively utilized can benefit all government agencies.
With a clean 3 column layout, Whithouse.gov has organized its information in a clear legible fashion. Subtle shadow and shine give the site depth and dimension while the simple color scheme echoes the traditional look and feel of the Whitehouse. Enough Web 2.0 design to be refreshing, but not too much that it makes it look like they are trying too hard. My favorite part of this site is the attention to detail. Unique borders, icons, and ornaments are well placed throughout the site. These little gems make me giddy. I especially love the creative little podcast icon. Overall I think the design of this site sets the benchmark that all government sites should strive to work towards in quality design.

I am, however very disappointed to have opened the source code and found tables. There is a clear attempt being made to write standards compliant code, but it does not cut it. I’m not going to get preachy about designing with standards, just recommend someone on the Whitehouse web team check out

TechTags Plugin [ Website redesign | whitehouse.gov | whitehouse redesign | web design | web 2.0 | web standards | government webdesign ]

Politics, Design, and Campaigning on the Web

Sunday, February 25th, 2007

Every March my friend Keith has a March Madness pool where we all bet on who is going to win what college basketball games. I know nothing about college basketball or sports, yet I consistently win. What is my secret? Rumor has it I bet on the teams that have the nicest design to win. This may or may not be true, but wouldn’t it be fun to pick our candidates for the 2008 election the same way?Recently political campaign design has grabbed my attention. In the last election the web played an unprecedented roll in Virginia when a YouTube video sparked one of the most fierce ad campaigns I have ever seen. This video, which was shot at a George Allen event by someone who worked for the opponent Jim Web, helped to tip the polls from Allen’s favor to Webb’s. How exciting! For the first time I feel like I have the power to interact in politics, and I think all the campaigns are picking up on this viral tactic. But who will leverage the winning combo of web marketing coupled with effective design to potentially change the future of a nation? Lets take some bets. In a completely politically unbiased fashion I would like to critique some of the most talked about sites and discuss how well their campaigns are exploiting the tools to reach a nation over the Internet.

Barack Obama:

Barack is bringing sexy back to political campaign logos. Not only is it fresh it evokes hope and has many possible interpretations. Is it an O? is it a horizon? is it a lifesaver? Regardless of how the viewer interprets it, this mark conveys an uplifting bright message in a visually appealing manor that remains patriotic without being cliché. Another element of this logo I like is the dual application between web and print. For the Internet it can be given a trendy web 2.0 sheen, but for t-shirts and print material it translates to a solid 2 tone screen-print. The website is delightfully clean with a layout that is a little chunky with web 2.o components. Links to Facebook, youTube, and Flickr are clearly displayed at the bottom of the index page telling me that the people behind Barrack’s campaign clearly understand viral marketing. The online store to buy Obama gear prompts to further engage online users beyond the Internet to show their support and is a nice touch this early in the game. There are some minor changes I would personally make to the design, toning down the use of stripes in the background of My.BarackObama.com section, but otherwise I think it’s an online home run.

Barack’s MySpace Profile


Rudy Giuliani:

Rudy is a little behind with an exploratory site still up, however a nice one nonetheless. My favorite part of this is the clean san serif type. and use of negative space. On so many of these political campaign sites there is crap everywhere. Crammed in, and bursting at the seems… crap. Rudy tells me he is visually comfortable with getting to the point and keeping it simple. As a designer, I can respect that. Many other sites promote hope and clarity subconsciously through the use of white space, Rudy uses a lot of blue. My problem with this is that the layers of usability heir-achy tend to tip toward the heavier side making the eye a tad bit overwhelmed with separating information. While not my favorite, it’s a good start. I hope to see some more interactive features in the next version.


Hillary Clinton
While Google searching blogs about campaigners websites I found that most people favor this site. I can see why, it takes a nice clean middle of the road approach with straightforward navigation and an excellent modular layout. While I give this site high marks, I can’t get past the logo which is a set back in political campaign design progress. Taking no risks, and sending no messages this logo consist of a generic waving flag. The advantage of this design is that it takes the focus away from her and brings the focus to the issues highlighted elsewhere on the page. I find the action center iconography mismatched with the look and feel of the site, but the overall design very appealing. Where her effort is lacking is in the way of online viral marketing with no mention of you-tube or any social networking sites even though she does have a MySpace Page.

Hillary’s MySpace Profile

In an age of innovative marketing strategies I am most surprised that no one is making the attempt to market their candidate like a product. In an age where a horrible B movie can make greater than expected sales because of a phenomenon accelerated by the Internet anybody can rocket himself or herself into the public spotlight. So why don’t politicians use this tactic? What is the difference between making a choice in soft drinks and making a choice at the polls. Unfortunately a great portion of our population equates today’s political circus to purchasing a product. While I am not saying its right, it’s reality.

TechTags Plugin [ Hillary Clinton’s Website | Barak Obama’s website | Rudy Giuliani’s website | myspace | political web marketing | Barak Obama’s logo | political web design | politics on the internet | successful web design | candidate’s websites ]