For the most part: chaos…… but it doesn't have to be!
Not only are you getting online on your home and office computers anymore… for most of us, it's glued to our pockets 24/7, allowing us to always have access to the internet whether were at the movies, in line to buy groceries, waiting for a concert to start or sitting at the airport about to board a plane. Today's generation requires internet usage every second we have to spare; that's simply just what we've become. So thank goodness for internet integration on current cell phones. After all, how else would we be surviving right now?
At first, this whole concept of viewing a website on a cell phone was just simple text, and minimal photos. It was just enough information for you to 'get the point' and read the content you needed to read. It wasn't what you saw on your home computer, but you still got the gist of what you were looking at. Well needless to say, as with anything else, we have come quite a ways, to the time that actual websites, in 'for-real' format can now be viewed on your cell phone. You can now see yahoo.com on your phone the exact same way you view it on your home machine. How awesome is that?
But what is the ratio of sites you pull up on your phone that look like what they 'should' and ones where mobile-compatibility totally wasn't taken into consideration? I'd say 1:100. Just a rough guess, but I'm sure somewhere around there.
Being a web developer, I have to stay on top of things like this, as clients are beginning to ask 'Why does my website look terrible on my cell phone?' It was only a matter of time before we had to step back and say, 'OK, it's time to do something about this.' Whether you're a web designer, developer, or the person looking into buying a website, here is what I would consider to be the top 10 things to take into consideration when trying to create the same 'effect' with your website, whether the user is viewing it on a 23 inch flat screen monitor at home or the cell phone they carry on them daily.
10. Flash, to be or not to be? Flash is great! It's cool looking, it moves around on your screen, it's an attention grabber, and it's just 'flashy'. But are we more concerned about the information we're getting to our client or how we deliver it? Let's think twice about all-flash websites, and even using flash elements within our websites, as all mobile phones have yet to integrate any flash capabilities. It's one thing to get a big box with an 'x' in the middle of it, if its just a simple photo rotation, when viewing your site on a mobile phone, but what happens when that flash piece is your navigation, your company logo, or even the entrance to your website? You just lost what could have been a million dollar sale…. but oh well, guess you'll never know.
9. Navigation, does direction matter? Something to think about when choosing placement and functionality of your navigation is how a website scrolls. Typically you want to stick to 'one-direction' scrolling. Meaning generally when you look at a website, you are scrolling up and down (top to bottom) and not horizontally…. well hopefully. This being said, in order to get your navigation to function as properly on your cell phone as it does on your computer, you may want to consider vertical navigation opposed to horizontal. After all, you don't have a lot of room to work with as it is, however you have unlimited space vertically, as this is the direction the site scrolls.
8. Tables: good, bad or indifferent? Well a little of each I'd say. Seems as though a developer either loves them or hates them, and for the most part people either build solely using tables or stay away from them all together. Fact of the matter when it comes to mobile compatibility is you can use them, just don't over-use them. For overall layout, its best to stick to a CSS 'shell' for your site if possible, but if you must use tables, by all means go ahead. But there will be a catch in doing so… just don't nest! A table here or there will allow for proper functionality, just don't get carried away. Keep your tables to main level only, and stay away from nesting within. Keep it to a minimum and you should be good to go.
7. Click Click: Links are of utmost importance when designing a website in general, but especially when taking mobile-compatibility into consideration. Think of how long it takes to load pages on your cell phone... now think of how many times you want to do that? I take it not many. Get the user to where they need to be, and do it fast. Make sure you think about how many clicks it takes to get to the more popular pages, and if its more than 2 or 3, rethink the path to that page. You wouldn't want to go through 6 links to get to information, why would your user? Keep it simple, or you risk the client losing patience.
6. Position:Absolute, I think not - With internet on our phones, we want to make sure the way we build our websites is very 'fluid'. We're limited to how many tables we're using to begin with, which results in a mostly CSS driven site. What you definitely want to stay away from is positioning elements 'absolute'. Make sure when using positioning in your CSS you are doing things that allow for more movement, to accommodate the constraints of your resolution size. Position things relatively, or float, or don't position at all. Just what ever you do end up deciding, stay away from absolute, as it is too 'definite' and unmovable… the opposite of fluid.
5. Lions & Tigers & Popups, Oh my… As if popup windows aren't annoying as it is, in the cell phone world they are non-existent. So the good news for the user is we don't have to avoid them any more, the bad news for the developer that created one, your information just got lost. So try and think outside the box, and stay away from the use of popup windows! Finally, an easy way around them: no compatibility.
4. Frames, that's so last year. Ok, more like 10 years ago, but you get the point. Let's get away from older technologies, as mobile compatibility is fairly 'newer', therefore integrating 'newer' advances in the industry. Stay away from frames, as you are limited to a small amount of screen real estate, and once your screen cuts off, so does your content. Frames allow you to scroll multiple areas of a website without the rest of it moving. Well not on a cell phone. You've got 1 scroll to use, and 1 scroll only…. Use it wisely.
3. Color Madness: It's bad enough we have to take into consideration the color differences amongst every computer monitor on earth, but now we throw cell phones into the mix. How many times have you designed an awesome looking purple site, only for the client to call and say, 'I hate the blue on my website' or you do a pastel looking yellow only to hear, 'That dark orange is horrendous'. Color is an issue we in the creative industry deal with daily, if not hourly. What you see on your computer isn't what your neighbor sees, or your parents, or your best friend. News flash, all monitors are different. But now we have to be especially considerate of the cell phone population as the quality isn't nearly as good, the size is a much smaller proportion, and overall color is not as vivid and bright. So when choosing site colors, make sure you take great contrast into consideration, what colors really 'pop' against one another. If you have text on a colored background, make sure the two colors create readability, and that if a cell phone only displays in black and white, your site can still be viewed correctly. So before you do a site in all green and blues, you may want to reconsider.
2. Content, how much is too much? Chances are if you're asking yourself this question, you have too much. The reality of it is, no one is reading it all, so why not give them just the basics? Minimize your content and only give the user what is important and what you think they need. Put the most crucial information towards the top, and the less important towards the bottom. Because of loading time and scrolling, you want to make sure the part they need to read is easiest to get to. All the fluff than follows!
1. Images, images, images… Enough said. What better way to get your point across than with images? It's not gonna do you any good on a cell phone unless you're smart about it. First of all size…. yes, it does matter. Your cell phone is already working as hard as it can to even browse the internet, don't make it choke on a high-res photo. Keep your photo size and quality to a minimal, stay away from high resolutions and big graphics. If possible, the combined image size on a single page should be under 10 MB. Secondly, in your image code, make sure you are specifying the height and width of your image, this is something we can get away with not having for the everyday computer, but cell phones must have it to ensure its displayed properly. Also, within that same line of code, make sure to always use ALT tags just as a back up plan, in case the images aren't displayed. Better to be safe than sorry. Lastly, make sure you are using supported formats, stick to .JPG and .GIF to be on the safe side. After all, what good is a website without all the pretty graphics, just make sure not to forget about load time, the way it displays, and functionality.
Now you should have no excuses as to why your website displays terribly on a mobile phone. Just these 10 points to consider can make a world of difference. Go on, try it!