In my eyes, this is the perfect example of why this website needs to be redesigned. This website has had this layout since 2005. The users have grown accustomed to its layout and have learned the fast way to get to the exact content they want. This is fine, as designers we want our users to be able to get to their destination with as little hassle as possible, but in this situation, I can’t help but think that so much content is being ignored because users see no need in scrolling down or even visiting the left side of the page.

Here’s a few quick points when redesigning your own website(s):

• Spread out the most popular links
  Spreading out the most popular links will draw attention to other sections of a page and hopefully get your users more involved with other offerings you already provide.
• Move the search box closer to an area you really want to emphasize.
  The search box is easily the most sought after element on a page. Placing it close to specific section of your page is a simple and effective way to attract attention.
• Move content up.
  The closer your content is to the top of the page, the more important it appears to your users. If there is something you want to draw attention to, move it above the page fold.

I’d love to hear how you prepare for a redesign. Here’s a screen capture of the entire crazyegg heatmap test.

• MIME types
• Character encoding
• Pop up windows
• Alt texts
• Image maps
• Specify image sizes
• Page title
• Use of stylesheets
• Stylesheets dependency
• Redirection
• Default input mode
• Page size limit
• Large graphics
• Caching
• External resources
• Avoid free text
• Structure
• Form submit buttons

A visualization module is also provided. So you can see your site loaded in a handful of popular mobile phones.

Tags: mobi, mobile, mobile web design, web design, web standards

I purchased Cameron’s book on Wednesday and have been thumbing through it off and on. I find it extremely enlightening. Not only is the book well written, he provides links to some very informative pages about mobile standards and good mobile design practices. I’ve added quite a few new feeds to my reader after reading this book.

The book is 104 pages long, comes in pdf format and will set you back 19 dollars. This book is well worth the small fee. Cameron has posted a sample of the book(pdf). I suggest taking a gander, you won’t be disappointed.

FYI: If you purchase a copy of the book by September 14th, you’ll be entered into a drawing for an iPhone.

When I saw this for the first time, the leaderboard advertisement was a flash ad and was laying on top of the corner peel ad and thus looked very funny. This little problem caused me quite the headache today. I thought I’d show you the little trick that saved me an even bigger headache.

There is a little know attribute for the object and embed tags called ‘wmode’. If you set ‘wmode’ to ‘transparent’ in both the embed tag and the as a parameter inside the object tag. It allows for transparent flash animations and also fixed my little overlay problem.

If transparency isn’t an option (i.e. you don’t want the html behind the flash file to show through), you can also set wmode to opaque. This should fix your flash on top of flash problem while still preserving you flash file’s background.

Inside the object tag:

<param name="wmode" value="opaque">
or
<param name="wmode" value="transparent">

Inside the embed tag

wmode="opaque"
or
wmode="transparent"

Now, I’m not sure if this little guy is a valid attribute or not, but I do know that it saved my ass today and I’ll risk not validating for that.

Tags: flash, adobe, wmode, transparent, leaderboard, corner peel, advertisement

The ultimate goal of Design Float is to, hopefully, categorize the huge amount of design-related content available on the web into neat and easy to navigate pages of articles in order of importance/relevance as decided by the community.

You were hired to design and develop a website. If they already knew what they wanted, or wanted what someone else had already created, why did they hire you?

I understand that inspiration for a page layout usually comes from bits and pieces of other layouts that you, or others have found appealing, but to say to a designer, “do what they did” or “I want that exactly”, is unethical and illegal.

Tags: web design, design by committee, design

MLB.com has a mobile website that, in my opinion, is one of the best and most useful mobile sites around. Today I’m going to dissect there mobile home page and tell you exactly why I think this site is so great.

First things first. A truly well designed mobile site uses access keys. Access keys allow mobile users to access a link by pressing the corresponding button on their mobile phone. For instance, if you visit the MLB’s mobile site, you’ll notice a number one next to the Scoreboard link. If you were to press the 1 key on your phone, the link would be activated and you would be sent to the Scoreboard page.
Secondly, to design a useful mobile home page, you need to decide what is the most important content on your site that users need access to from a phone. In the instance of MLB.com, it is game schedules and outcomes. The MLB has decided that game schedules and scores are the most important feature of there website and therefore would be accessed most often on their mobile site. Therefore they put the link to there Scoreboard section first along with an access key set to 1.

Another great design tip for mobile website design is to keep it as simple as possible. Not only are mobile phone screens very small, so is their bandwidth. The need to keep the overall design of the page as simple as possible is a necessity. Images, other than logos and content related images, should be avoided. They will slow down load times take up too much of that much needed screen real estate.

Some of the more obvious mobile design tips are:

1. Usability and Accessibility play a major role. Many mobile web users turn off images, styles, javascript, cookies, etc to save on load times and bandwidth usage. Your site will need to function with all of those turned off just as well as with them on.
2. Alt attributes are a must. A large portion of mobile web users, myself included, turn images off. Nothing annoys me more than a mobile site not making use of the alt attribute.

Mobile website design is becoming more of a necessity these days. I hope this helps you the next time you need to design a mobile website.

Tags: mobile, website design, usability, accessibility, mlb

This is an exciting time for web designers married to their windows boxes, myself included. Safari is, in my opinion, the fastest rendering modern browser available. Not to mention the first of only a handful of browser to pass the Acid2 Browser Test.

Today is a good day!

Tags: apple, safari, beta, windows