Daniel Marino

Just like anything else, web design goes through its own fads. One of the current trends, or rather, a popular question to ask is "Do websites need to look exactly the same in every browser?". This question has particularly been made popular by this website created by Dan Cederholm. There's no such thing as a stupid question, but the answer should be somewhat obvious: Nope.

I understand why this question has been so popular lately with a lot of designers pushing to use CSS3 attributes such as: border-radius, box-shadow, text-shadow, and the list goes on. Having said that, this isn't the first time this question has been asked. Fifteen years ago when everyone was coding using the <table> element for layout and the <font> element for styling, we were still at the mercy of browser wars. Some of the names and faces were different, but the battles were the same. Table attributes rendered differently, if they were even recognized, across IE and Netscape, and specifying font sizes via the <font> element always varied as well across the browsers.

Unless you're using Flash, I'd say it's next to impossible to have design consistency across different browsers, and that's totally fine. It's been like that since the birth of the browser wars.

I’ve redesigned again, which you all know is a favorite past time for me. Welcome to version six of iamdanielmarino.com. I’m doing some cool new things here and I’m very happy with the results. This is still a work in progress and decided to push it live prematurely — mostly because I did some stuff on my server and broke my previous website. I didn’t do a very good job of properly backing up files and lost a lot of hard work (Let that be a lesson to you all). Over the next several articles I’ll give an inside look as to how I designed and developed the redesigned site. Today’s topic is design.

Let me preface this by saying I recommend using Firefox 3.5 or Safari to get the best results, but it will look ok in IE8 as well. It does work (for the most part) in IE6 and 7, but I’m not actively supporting those browsers.

Overall look & feel

I don’t feel like I was really inspired by anyone or anything in particular this time around. I looked at a lot of websites and made note of a lot of ideas. I also took my time in designing this site and let ideas sink in, instead of rushing to churn out something new (I started this well in advance of breaking version five). Right before redesigning I watched Elliot Jay Stocks screen-cast on designing a portfoio site which gave a lot of insight that I’ve tried to incorporate in the overall design.

When it came time to design, I started out with the journal. I think it is most important to make sure the text flows before anything else. If it isn’t easy on the eyes while reading, no one will stick around to read it. I also like keeping the colors subtle (in this case, almost non-existent) to help portfolio pieces to pop (which unfortunately I didn’t get to finish before launching the redesign).

One thing Elliot talked about in his screen-cast is finding a way to create pleasing tension which is a concept I’ve never really explored in my own work. As I worked through the design of my site, I came up with the concept of presenting article dates in a worn-leather-looking bookmark (which later became a reoccurring theme throughout the site). After coming up with the design for it, I pushed it off the grid by 10 or 15 pixels and the pleasing tension concept just clicked for me. I’d have to say the bookmark is my favorite element of the website.

Typography

I’m very particular about typography mainly because my designs tend to be simple and not overly graphical. Now that I have more time in my life, I’d also like to start writing more, so the journal quickly became the focal point for my website.

For typography I chose to use “Mueso” for the logo, navigation and h3 elements. I was recently using it on a project at work, and was instantly drawn to it. It’s very playful, yet carries a serious tone with it. I tried using bolder variations of it, but kept coming back to the light variation.

I’m using “Georgia” for page titles elements which is always a winner in my book — though I will say that the browser never renders it as well as it looks in my mockups. I’m always a little disappointed once I see “Georgia” in the browser. Never the less, it is still a great font.

In my previous version, I used “Times New Roman” for body text, but I thought this time I would try the ever-popular “Helvetica”. It feels lighter and where “Mueso” has some strong serifs, I think that “Helvetica” balances it out nicely.

What’s to come

In future articles in this series, I’ll write about using HTML 5 and the challenges that created for me, as well as browser support, what additional content to include and how to present it, and what to expect. I’ve been working on interesting projects and have some great topics to write about and discuss. I look forward to this new chapter of my website.

If you read one of my more recent posts, you’d know that one of my goals for this year was to not redesign my website. Well here we are two months into the year and I’ve already thrown that one out the window. Actually, I think I started working on the redesign the day after I wrote that.

Out with the Old

I was never fully satisfied with my previous version of this site. I always got good feedback on it. Even when I was showing my new design around to others, the majority of them would ask me what was wrong with my current one. I guess design-wise, I didn’t really have any major complaints with it. But under the hood, my site was lacking finesse. I think the biggest reason why the backend design was so ugly was for a couple of reasons:

1. It was my first experience using TextPattern
2. I kept making changes/updates to the layout and functionality of the website, leaving the backend a mess

I was reading TextPattern Solutions so I could learn how to effectively use TextPattern and in the course of my readings, I realized that my site could be so much better. Rather than just redesign the backend, I thought I would spruce up the design too.

In with the New

I drew a lot of inspiration from several websites out there, some may be obvious, and some may not — I’ll leave that for you to figure out. One thing I knew when redesigning is that I wanted this site to be a little more professional, yet still harness my personality. That’s a little hard for me to explain, so I won’t even try. This was important for me because lately I’ve been receiving a lot more freelance opportunities and traffic has been picking up around here.

Let’s Get Strict

This is my first time using XHTML 1.0 Strict and I’m happy to announce that every page on my site is valid. My previous version was XHTML 1.0 Transitional, but not every page was valid, which always bothered me.

It’s sIFR Time

I had thought about using sIFR on my previous version, but decided it wasn’t appropriate at the time. While comping up ideas for this new version, I really fell in love with the way the font Futura looked for some of my headings, so this time around sIFR was implemented.

Plugin to This

I’m using the same TextPattern plugins, but I’ve also added some new ones into the mix. I’m not going to get into what each one does, but here’s my current listing: ajw_if_comment_owner, hcg_templates, ied_hide_in_admin, rss_admin_db_manager, rss_auto_excerpt, rss_suparchive, zem_contact_lang, zem_contact_reborn. I will say that I love the zem_contact_reborn plugin as it saved me huge amounts of time from having to design and code the contact form from scratch.

Snippets

I decided to ditch the news section. I’m not cool enough to update all the things going on in my life. I didn’t like how it was stagnant so often. Instead, I’ve replaced it with a Snippets section, which is basically a listing of links to other cool things on the web.

Wrapping it All Up

That’s pretty much the gist of things around here. I can’t think of anything else worth mentioning related to Version two. I’d like to thank the Godbit community for helping out when I was up against a wall. I’d also like to thank my wife for putting up with me during another redesign.

There are several content management systems available now that allow the use of advanced formating within posts, also known as rich-text Formatting. This has always driven me bonkers, since my first CMS experience with WordPress several years ago. I was a noob with this whole Web Standards methodology, and barely new a lick of CSS. Despite my lack of knowledge of these things, the mixture of rick-text formatting and a CMS environment didn’t sit right with me. Mostly because I knew it defeated some of the purpose of using a CMS in that content should be separated from markup. As I’ve been educated over time about designing for web, I’ve learned there are several reasons why rich-text formatting within a CMS is a bad idea.

Depreciated Tags and Unnecessary Markup

I’ve found that more often than not, some CMS’s tend to use depreciated tags, such as the <font> tag. Some even use <b> and <i> tags, respectively. Although these two tags are not depreciated, they do not carry any semantic meaning such as the <strong> and <em> tags. I’ve also found that several of the CMS’s that I’ve tried tend to add unnecessary markup such as extra non-breaking spaces or <br /> tags for no reason at all.

Author Has Control Over Design

For better or worse (and it’s usually for worse), Rich-text Formatting gives the author some control over the design and presentation. There’s a reason why the client hires a designer/developer to create a website. Why would we want them to be able to change fonts, sizing, and colors, among other presentation-related options.

I recently designed and built out a website for a client, and after I handed it over, he changed the font to Comic Sans on several of the pages. The font choice was bad enough in itself, but to make matters worse, the CMS made the change using <font> tags. Why would I bother taking the time to create a code-validating website, when the CMS is just going to break it. It could at least use in-line styles, which aren’t much better in my opinion. This brings me to my final point.

Separate Content from Markup

One of the major selling points for using a content management system is that it separates content from markup. This makes the maintenance of a website so much easier. This happens to also align with the Web Standards mission.

A Simple Solution

One thing that I haven’t come across yet in a CMS that would be cool, is a list of user-defined classes that could be used within a post. This way the designer could set up several styles could be used in a post, aside from the usual suspects (ie: <p>, <strong>, <blockquote>, etc.). There are two advantages to this method:

1. The styles would be created by the designer, so they would be consistent throughout the website.
2. The CMS would output the styles using the <span> tag or some other valid XHTML tag.

Obviously I haven’t tried all of the CMS’s out there, and I may be making a very gross generalization based on the three or four I’ve used. However, the ones I’ve tried tend to be the more popular ones that are available.

Spinny Vinny is actually it’s code name, but it sounds a lot more exciting than Custom Flash Video Player for PC Connection. I created this to be used for a Virtual Trade Show that PC Connection held recently using Unisfair. I really enjoyed working on this, mostly because it was an oportunity to learn something new in Flash.

If you haven’t noticed by my work yet, I’m a big fan of simplicity in design, so naturally with this project, I wanted the user interface to be very plain and simple, as to not detract from the video playing in it. I am especially proud of the design and functionality of the volume control slider.

The greatest outcome with this project is that I now have a code base that I can recycle from project to project, only having to reskin the player as needed. I’ve already done this on a couple of projects in the last month alone.

Some fun facts about this project

• I already mentioned Spinny Vinny was the code name of this project, but no one knows where it came from…
• Along with creating the Video Player, I produced 11 videos to be played within it. These videos showcased products, such as the one featured in the portfolio. Steve Koontz and Bob Williams are responsible for product photography.
• The voice over for the 11 product videos was provided by D. C. Douglas. You might recognize him from the Geico commercials.