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...

To Wiki or Not to Wiki

I have never really been a contributer to Wikipedia. I have often used it on occasion as a starting point for some basic starting information on a subject before researching elsewhere. I know some people though that love to write and contribute to it. I admire the idea of wikis but there is still a lingering doubt in my mind about the veracity of the information.

It go me to thinking about what other wikis are out there in the cloud besides Wikipedia. I went in search of some and found these.

My favorite by far is WikiHow. Billed as the "the world's collaborative how-to manual," it consists of exactly what it says - articles written by several contributers that show you how to do something. The design of it is much more sharp and clean than Wikipedia's and more pleasurable to read. The articles are actually quite helpful as they all seem to follow the same format: a list of steps accompanied by an appropriate illustration or picture. Interestingly, many of the articles are not about the obvious how-to topics such as how to paint a wall or how to grow flowers, etc. Many are about more abstract topics such as how to handle drama at school or how to flirt with a girl :)


Another interesting website I found is Wikia which is actually a wiki hub that collects wikis on specific subjects (do-it-yourselfers, recipes, children's books to name just a few subjects). These very specific subject wikis seem to be very limited though probably due to a lower number of contributors than the larger wikis but still interesting if you're looking for something specific.

Smile Marge! You're on candid camera!

I've always loved photography. Cameras have always been a hobby of one person or another in my family. In my case, though, I feel that it is more important than something I do on weekends or when I take a trip (although I will still do both of those things). As a web designer, if you don't at least understand the process of photography, I think you're doing yourself a disservice. 

Let's face it, glossy pictures that catch the eye will keep a visitor to a website interested. It's also easier to look at a picture than it is to read text. The moral of the story: sometimes a story is better told through pictures than a mountain of text that no one will read. 

To sharpen my skills and get some critical feedback, I recently decided to join two photography meetup groups that we have in Milwaukee - Studio MLP and Milwaukee Photography. I've only been to one meetup so far but I have to say that the individuals at my first meetup were quite fantastic. I was a bit concerned since I'm such a newbie to the digital SLR world but these photographers (who range from amateur to studio) were more than helpful. (I've actually noticed this helpfulness to assist the rookie from not just photographers but also other web designers and developers. Think I'll pursue that in another blog...)

 
Here are a few photos I've taken in the past that I'm particularly proud of.  I've put some more on my website and will update those as I continue in my photographic studies.

As an aside, if you're a web designer, you need to take a look at these two books that are excellent resources and that I recommend: Photoshop CS4 for Photographers by Scott Kelby and the Digital Color Management Guide and Printing Guidebook by Canon. The first is readily available at bookstores and online. The second was generously given to me by Jeff Dobbs from Mike Crivello's Cameras but it looks like you can find an older version of it online at Amazon for $4.65 or as a PDF on Canon's website.

So the client tells me…”neon pink is my favorite color!”

Yes, the title I’m using for this particular post was part of an actual conversation that I had with a friend about her website (in this case it was a portfolio website for her paintings and photography). While I’m not trying to hate on neon, it does transfer a certain kind of feel and to whatever it is that you’re trying to promote or sell. Good on sandbox toys and maybe little kids’ swimsuits, but not so much as part of a website.  Having said that, I’m sure there will come a day when neon pink is absolutely the right color to use for something I’m designing. I will not be holding my breath, however.

There are articles and articles about color theory that you can read like Six Revision’s article on color theory (definitely read this one because it’s very good and tells you things about color you never knew). Instead of a boring paragraph blog, I’m just going to list the things that you really need to know about color:

1.  Color is the first design element I think about when designing someone’s website. Before divisions, html, images or content, I go for the color.

2.  What is somebody promoting or selling and what feeling do they want to convey about it? What color(s) would convey that feeling?

3.  Don’t let your own personal favorite colors influence the best choice for the client. I may not like puke brown but if that’s the color that works best, I grin and bear it.

4.  Contrast is HUGE! I see it done badly so much and I don’t think it takes a genius to know that you don’t put a light colored text on a white background or a dark font on a black background. The point is to have people actually read the web page. A novel concept, I know.

5.  Read about color theory to find out what feelings certain colors evoke.

6.  Know what the color wheel is and what complementary, secondary and primary colors are.

7.  Use tools already built for you like Adobe Kuler that makes choosing colors easy (and is somewhat addictive so don’t stay too long!).

8.  Know the difference between RGB and CYMK.

9.  PNG images support transparency, JPEG images don’t.

10.  All of the colors in Photoshop are not necessarily the same shade when rendered in a browser. Use transparent images (that would be the PNG images I referred to earlier) so that the background of your image isn’t a different shade than the web page’s background even though they are ostensibly the same color.

11. Put all of the hexadecimal or RGB values for the colors you’re using for a site in a comments tag in the html or CSS. I also put a generic name next to the color (navy blue, dark brown, etc) or what I'm using it for (hover, link, header, background). It saves a TON of time going back and forth trying to remember what color is what number or what you were planning on doing with it.

12. Go find web pages that did right by their color schemes and learn from them:

www.amazon.com - Amazon uses simple white with (mostly) black text because let’s face it, black type on white paper is still the easiest to read.

www.bestbuy.com - We all know what Best Buy’s logo colors are (yellow and blue) so that’s what much of their website is. It makes sense and just seems…right somehow.

www.porsche.com/usa - Gorgeous website with blues, greys and whites. The colors connote that cool, efficient, good engineering vibe that you expect from a Porsche.

www.colouringcode.com - I get nervous about using red because it’s so bold but this website is just really beautiful. The red is offset by using complementary colors like black and tan so no one color overwhelms you. Extra points for NOT using a blue Twitter bird and making him (her?) red instead. Extra, extra points for those readers who know what a Black and Tan is.

13.  Go find web pages that didn't do right by their color schemes and learn from them:

www.thehousesale.co.uk/legal.cfm - This is the evil gray text on a white background that I was talking about. Somebody go grab the torches and I’ll form a lynching party…

www.outletdiscount.com - I am not opposed to either blue or orange on a website, but in this case, I am opposed to them being used together. This website has other problems besides color but this blog isn’t long enough for me to get into it.

www.houstonjewelry.com - Remember what I said in number nine about using transparent images? See the BBB logo in the upper left of this website to see what happens when you don’t use PNG images. And red type on a black background reminds me of an 80's hair band album cover. 

www.jarke.com/index1.html - Somebody stop the textures please! This site sells forklifts and pallet jacks but looks like it should be selling wallpaper if its background is any indication. 

www.readwriteweb.com - I don’t have a problem with the majority of this website but the red type on a white background does bother me for some reason when reading it (and I have good eyes).

Carnevor: You Have the Worst Website Ever

A couple of weeks ago, I had to organize an event at my day job. One of my tasks was to find a restaurant with a private room and organize a dinner complete with menu and drinks. Armed with three possibilities, I decided to take a look at the restaurant's websites to see what kind of menu and atmosphere they had. The first two had stylish and user friendly websites, but the third? Let's just say this particular website illustrated rather nicely what is meant by a bad "website."

The restaurant in question is Carnevor Steakhouse. Here's a screenshot:

The first problem with Carnevor's website is the flash intro opening. I'm not a fan of these and most people who are just looking for information aren't fans of them either. I've never sat through an entire flash opening, I hit "skip intro" every single time. 

The major flaw of this website, though, is that its main page is a series of Wheel of Fortune style buttons that you have to rollover to figure out what they mean. But here's the thing, they don't stay rolled over so it starts to become a game of Concentration for you just to find what you're looking for.  Needless to say, I didn't even contact Carnevor. The website simply turned me off.

I was curious to see just how bad websites can get. Turns out they can get pretty bad.  For a fun romp through some bad websites, go to Web Pages That Suck. Post your favorites in the comments below...

Marketing Yourself Is No Easy Task

I spent the majority of yesterday afternoon, evening and this morning working on what I think is probably one of the top 2 or 3 tools I need to actually do web design in a freelance capacity: my own professional portfolio website. Here's a little screenshot of it:

 

Theresa's Professional Website

I've read a lot of articles on this particular topic and found many lists that compile what are considered the best portfolio sites. Some are flashy such as this one for Kavoon and some are lovingly minimalistic such as Sofa's website. One of my favorites is this one from a company called Simple Art.

At this particular point in my career (which I don't even think I can really call a career just yet), I decided to go with something that was particularly functional and easy to navigate for a potential client. I also had some concerns that potential clients would get a certain feel from a website that was overly flashy and not want to hire me because of it. I almost want to give a "blank canvas" kind of feel to my portfolio website, that is, I want somebody to not feel that they would be hemmed in to some slick design because that's what my website is. But at the same time, obviously, I would like to express myself creatively.

I came to the conclusion that most individuals would be looking at the work I've done so far and that I would best be served by just putting samples on my website and letting a viewer judge for themselves.

Having said all that, though, I do have a design in mind that I would eventually like to go to. It's more flashy than what I have now but at the same time I think people would get a kick out of it. It does require, however, some things I don't know how to do yet (but that I'm working on). Now all I have to do is find the time to do it. Oy vey!

And so it begins...

I tried to tell my Twittering minions that my homework for my social media class was to write this blog. All I received in return were acerbic asides about how tough it must be for me. It is amazing how withering you can be in 140 characters or less. It's enough to make e.e. cummings proud.

In any event, the subject of my first post is one that I have been thinking about for awhile. Once the decision is made to become a web designer and/or developer and you have completed the requisite educational requirements to at least look outwardly proficient, do you feel you can call yourself a web designer at that point?

I take a look at the web for inspiration and I find myself feeling somewhat inferior. There are sites out there that blow me away and make me wonder if I could ever get to that point in my design aesthetic. I'm not talking about the hum-drum sites that people make from templates or are obviously just a recycling of a site designed for someone else. I'm talking about a site like Freight Train Creative. Will I ever get to that point where a design like that would pop into my head?

This is the point at which designers like myself who are just starting out need to take a deep breath and gain some perspective. Every person who is considered the best at what they do in their particular endeavor was once a rookie. They may have been a prodigal-like, over-achieving rookie but they were still a rookie. I like to think that Sir Laurence Olivier was a wreck the first time he got on stage to perform Hamlet. I imagine that after the 1000th time he'd done it, he had finally reached the point where he decided to just have fun with it and enjoy himself and it was then, and only then, that he finally became the best at what he did.

Meryl Streep, Brett Favre, Barack Obama and even the Pope were all beginners once. They all appear to have done just fine.

P.S. If you don't know who Sir Laurence Olivier is, look him up and find out. Here, I'll even help you.