Designing a website can be fun! However far too often I see sites that have way to much info packed into one page. Your site should be easy to navigate regardless if it is a classic or mobile site.
Mobile Web viewing is no longer the exception to the norm. There were 1.2 Billion mobile web users worldwide in 2011, and that number is going to increase very fast in the coming years so having a mobile optimized site is essential for every business. Some thing else you should make note of is that in the U.S., 25% of mobile Web users are mobile-only (they rarely use a desktop to access the web). The up side to all this is that mobile browsers are getting very powerful so gone is the era where you need to strip your mobile site of all of design and aesthetics you’ve work so hard to develop. After all, the colours, logo and feel of your site are more a part of your brands image than ever!
Yes you can overhaul your site entirely and change it to something called “responsive web design” which can make your website easier and cheaper to manage, while giving mobile users a better experience. This allows you to create one design that will fit almost any screen and device type, and can also enhance your search visibility.
There are also an number of small tips that can help you optimize your site for the mobile world. Here are a couple of things you can do to make your site more mobile friendly:
A. Adjust your menu’s
Make your drop down menus larger than you would think so that they can be touched cleanly. Make sure lots of space (“margins”) around the words in the menus and drop down menus. This is a fairly generic piece of advice but it’s something I always encourage beginners to consider when designing mobile websites. For desktop web design, I tend to use hovers quite extensively and occasionally go beyond simple visual hints and actually use them to trigger some functional event.
Think about how this event will transfer to mobile, touchscreen platforms. Suddenly, there is no hover. You’re either tapping on an item or not, there’s no in between as there is with a mouse. Does this mean that you shouldn’t use hover-based functionality? Not at all, just remember to make sure that your site still functions perfectly on a mobile device.
This doesn’t always require much work. Ultimately, I encourage you to perform tests wherever possible to really get a feel for how your site will work. For instance, I recently published a tutorial on creating an expanding navigation menu that slides open on hover. I instinctively thought that the menu would be useless on an iOS device since there’s no hover event, but it turns out that the iPhone and iPad automatically translate it to a touch event, leaving the menu perfectly functional.
B. Make sure links are buttons or at least bolded fonts.
This can be done in your sites CSS easily. It also makes your site look better put together and cleaner.
C. Use a Fluid Blocking Layout
Fluid layouts have been around for years now. Long before mobile browser optimization came along, several web designers and developers looked to this technique as the solution to the problem of multiple viewport sizes. Create “Blocks” or areas on each page (with a large enough margins) that house each message or call to action. That way when someone double taps on their screen, the iOS of Android browser knows to centre on that section of the page.
D. Use Mobile Friendly Technology
Stay away from flash and other proprietary functionality. The mobile web has presented a number of compatibility challenges for designers and developers. The main item that gets the most press is that iOS simply refuses to support Flash, but it doesn’t stop there. The web is full of proprietary plugins such such as Microsoft’s Silverlight that similarly can’t be installed on some mobile platforms. To account for this, be sure that your site doesn’t depend on these technologies to function. If they do, you’ll have to serve up a special mobile version to compensate. For instance, YouTube (a formerly Flash-only site) now utilizes a special HTML5 video player that functions extremely well on mobile platforms.
E. Add The Apple Touch Icons
This one is a little iOS-centric but it never hurts to tailor to custom platforms where possible. It requires a minimal effort and makes your site much more prone to be kept on an iPhone/iPad user’s home screen (especially useful for web apps). Safari on iOS allows users to not only bookmark a page in the traditional sense, but also place it next to all of the other icons in the home screen grid. To ensure that the icon that Safari grabs is formatted properly, it’s best to create your own.
General Website Tips:
1- Clean up your site. Simplify your messaging on each page. Unless your Wikipedia you don’t have that much information to convey. Make pages flow and easy to read.
2- Convert your site to HTML 5
Flash is out. HTML 5 is in. It’s more robust, less proprietary, can do more with less and faster cause it’s simpler and built into the DNA of the internet instead of having to download a plugin to make an additional feature function. Convert now, it’s easy!
3- Use consistent web safe colours that compliment each other (Learn more at http://www.colorcombos.com).
4- Don’t use more than 3-4 fonts on your site (that’s good advice for any graphic design!)