Mobile Web Design: Keep It Clean!

At last count (and that count is probably already outdated), there were 2.4 billion mobile phone users worldwide. Traditional website design just doesn't take these people into account. A website that works fine on your laptop or desktop will not necessarily look very sharp on an iPhone or Blackberry.

If a mobile user can't use a site easily, they will go to the next one that is user friendly. As an example, I've done this myself with the website for the SyFy channel on television. Their site works fine on my laptop but their mobile site is difficult to navigate and is rife with errors. As a result, they were zapped from my iPhone's Google reader ASAP.

The easiest way to build a mobile website is to modify the one you already have. Don't start over, just change the CSS and HTML to reflect the new design using the tips below. But be prepared for major changes in design and layout.

1. Don't use tables as the main layout for a mobile website. They just don't look right on a mobile phone.

2. Mobile sites have to use CSS for the layout to ensure maximum compatibility.

3. Put all the most important information that you want people to see at the top of a mobile website. It can be time consuming and tiring on the fingers to browse through a lengthy site. Remember, it's all about making the web browsing experience convenient for your user. (Don't forget they're paying fees for the privilege to browse on their phone.)

4. Images should be in JPEG or GIF. All mobile phones can read these.

5. Don't use Flash if you can help it. iPhones are not compatibile with Flash (it's a long story, maybe I'll tell you later). That means that if your WHOLE site is flash, no one on an iPhone will be able to view it. That translates to approximately 6.4 million users in the U.S. not being able to access your site. (That number of iPhone users was from September 2009; it's probably higher now.)

6. Make sure to include back buttons and links everywhere. Many phones aren't equipped with the mighty back button so help the user out.

7. It can be tedious to type text into a mobile phone (unless you're a nimble-fingered teenager of course). Try using radio buttons and lists so they can make their choices through those instead of typing.

8. There is a maximum page size for a mobile site. The general safe number nowadays is 20 KB so keep the site under that number.

9. You can use Dreamweaver to create a mobile site from scratch which might be an easier option than revamping the current, traditional design.

10. You can't support every single device out there so the best option is to keep your mobile site as clean as possible so that it has the best  chance at being read across as many devices as possible.

For a more in-depth look at how to design a mobile site, check out Cameron Moll's excellent article and tutorial that gives you the nuts and bolts on how to execute a mobile design.

Green With Envy

In honor of St. Patrick's Day, I've gone in search of websites that use green as their primary color. I'm always interested in what you can do and convey with a single color. Let's see what you can do with the color of the Emerald Isle:

Mike, a freelance web designer out of the UK, uses green extensively on his portfolio website. I can't speak as to why he chose green but it does contrast nicely with all of the graphics on the page and makes them stand out. You have to admit, it catches the eye.

More Design uses a minimum amount of green on its website. I'm generally a fan of minimal websites but I think this site needs a little something more. It's too minimal (if that's possible).

Here's a site that uses too much green. I know, I'm worse than Goldilocks.  It's never just right. But this is a lot of green - it needs some more contrast to get the message to shine through. 

Speaking of contrasting colors, I like this site out of the Czech Republic. I don't speak Czech so I can't really speak to the subject but from the colors and graphics I'm going to guess it is about the environment or conservation of some kind. Notice the colors used with the green. Orange wouldn't have been my first guess but it looks really nice here. 

Just out of curiosity, I found the government of Ireland's website. Not much green on it (just the header which isn't very readable). I can't blame them for trying to fight the stereotype, I guess.

I am happy to report that Milwaukee Irish Fest didn't overdo it either. Just enough green I think.

I'm off to drink my green beer and eat my corned beef. Happy St. Patrick's Day!

Typography Is Typical - and Topical

Typography is the art of arranging type and using type in design. It used to be that web designers had pretty limited fonts and font families that they could use. Arial, Verdana and Helvetica were pretty much all you had to work with if you were a web designer. Recently, though, more and more fonts have become web friendly and designers now have a plethora of fonts to choose from.

This does, however, present the same problem that all design elements have: just because you have the ability to use something new and flashy doesn't mean you should. 

A good general rule for typography on the web is to use what is already readable and eligible. Look at the fonts you read on a daily basis. If they are easily readable to you, chances are good they will be to everyone else also. If you look at the two images below, you can see that the readability of one is vastly better than the other:

Another golden rule that is often lost is one that I've blogged about already - contrast. Light type on a white background or red type on a black background is just plain difficult to read. A different way of looking at contrast is using two different typefaces on the same page. Two different fonts can look great together and make the title or message of your page stand out. Take a look at the title on the Bobulate website.The logo contains two different typefaces but it looks sharp and clean because the fonts work together and don't clash.

Basically, what you have to remember is to use typography to enhance your website and message and not use a new font just for the sheer novelty of it.

Fine Art Websites

I recently received a request from a friend who is a landscape painter to explore a website for displaying and selling her work. This got me to thinking about this subset of websites. What things do you need to know to create a website for someone who has a tangible, physical work of art that needs to be seen on the web? Surely, the needs of these clients will be different than the needs of a web designer whose work IS the web and therefore lends itself pretty easily to web presentation.

I decided to take a look around and see what artists are doing to present and sell their work on the web. For the purposes of this blog, I'm concentrating on the fine arts such as painting, sculpture or something similar.

To wit, here are some sites I've discovered:

The first that popped up in my basic Google search was Fine Art Studio Online. This particular site acts as a hub for artists with each artist having their own site designed by Fine Art Studio Online. Seems like a decent option for an artist with little or no web design experience. The sites are functional and the pictures very accurate. The sites themselves are pretty vanilla though and don't represent the artist or their personality at all.

The next one is what I think must be the mega-monster of fine art sites - d'Art. I have the feeling if you can't find what you're looking for her, you aren't going to find it. The huge selection is definitely its biggest plus. Again, the representations of art are very lovely and well done but the artists still don't have their own space. I'd classify this as the "fast food" version of fine art shopping.

Finally, a site dedicated to an artist - William Whitaker. The site itself is fairly simple but in the case of fine art websites, this is probably the better road to take. If the goal is to sell the painting or piece of sculpture, you don't want a gaudy website competing with or distracting from the painting.

I went searching for a sculpture specific website and found Dennis Bernhardt. This website has problems that have nothing to do with its product such as tiny type (and too much of it) on the home page and what appears to be the preference for black that all of these websites exhibit. 

After some more perusing (and resisting an extreme urge to buy something for the newly renovated office), I ran across this rather helpful strategy article for designing an artist website.

Now, let's see what I can find for the new office...