Archive for February, 2011

The Most Important Content for a Mobile Ready Website Design

Monday, February 14th, 2011

Good website design borrows at least two ideas from newspapers:

  • The headline and
  • The area “above the fold.”

Of these two ideas, I think that the issue that gets less attention is the second idea “above the fold.”  When you buy a newspaper from a stand, it is usually folded in half.  You do not see the bottom half until you pick the newspaper and turn it over.  Since newspapers want you to pick the newspaper up and buy it, the “best content” and the “biggest headline” for that edition goes into the top half of the sheet, “above the fold.”  If they put the best ideas below the fold, you would be less likely to pick up the newspaper.  Another important point is that, even with all that space, a good newspaper limits the number of articles that start “above the fold.”  They do not want to clutter your mind.

Websites should use the same marketing principles.

The headline is still one of the most important things on your website.  People can absorb a good headline without really stopping to read it.  If you have a good headline, they can grasp what your website will be about without really seeing anything else on the page, just like a newspaper.

The website’s main headline must be “above the fold,” which would be whatever shows up when a visitor views the website.  On a desktop, you can generally get a lot more space above the fold much easier than on a mobile device because of the screen size.

Since we cannot predict exactly what each visitor will see, the most important stuff goes in the upper left hand corner.  The least important stuff goes in the bottom right hand corner.  (Browsers cut off the content at the bottom and to the right when the page first loads.)

Unfortunately, many current websites were designed with fixed margins that assumed the visitor would be using a large desktop computer, causing a lot of content to be cut off on a mobile device.  To further confuse things, different phones and mobile devices show different viewing sizes.

Consequently, the best mobile ready website designs use the following marketing strategies

  • A well written headline
  • A very focused message,
  • A clean, clutter free layout, and
  • The most important stuff in the top left corner.

Two Very Common Website Features that Many Mobile Devices Cannot Display

Wednesday, February 9th, 2011

Many websites use flash animations to ad interactivity to their website and drop down menus to help people navigate their website.  While these make great website strategies for a browser on a desktop or larger laptop, many mobile devices will either not display this website content or will take a very long time to load.

Apple iPhones, iPads, many Blackberry devices, and older Android phones cannot display flash content.  However, just because a phone can display flash, does not mean it is a good choice.  Most mobile devices use a much smaller processor and have much more limited bandwidth.  That means that all content, especially large flash files, takes much longer download and appear on the screen.  If the flash file  takes too long to load, you will lose the audience.

Some of the touch screen phones, such as my older Blackberry Storm, do not display drop down menus.  These systems do not fully support what graphic designers call “rollover effects,” basically anything that happens when a mouse is over an object.  By extension this problem could affect certain types of maps and forms in which information displays when the person rolls over a place on the screen.  (Clicking the spot still seems to work.)

Solutions:

One alternative for both of these options is to develop the site using jQuery or another JavaScript library.  Unfortunately, there are a few people who turn off JavaScript in their browsers.  So you may need to provide alternatives for those people.

The most fool proof way to handle the drop-down navigation issue would be to create a sub-menu that duplicates the drop down menu.  Each page in the drop down menu should have the same sub-menu.

For other roll-over effects on your website, you should probably ensure there are other ways to get to the information.

What Is Flash?

Flash is a very nice tool for creating on-screen animations.  Occasionally you will still see entire sites built in flash.  You have probably seen links that bounce or move, pictures that move or fade in or out, or banner ads with moving objects.  Some of these are built in Flash.  Simpler ones are often done in JavaScript.

    Please come back when we have finished our re-branding and have republished this site