Welcome back! If you missed it last month, I introduced the concept that mobile-ready websites aren't that difficult to achieve. You can click here if you'd like to have a read of Part 1 and then return here for some real-world examples of the concepts touched upon in Part 1.
On to the examples!
Don't worry; I'm not going to hit you over the head with code here. You may not be a developer reading this blog but rather someone in charge of developers. In this instalment I'm going to provide you with examples of methods that websites used to follow to present data to the end-user and then provide you with the alternative – and more compatible -- methods that will keep your content accessible to more devices.
Required mouse-over effects are bad!
Mouse-over effects are great -- if you are surfing the web with a mouse or a trackpad. Today, many website visitors are surfing your website from their mobile device which doesn't provide the concept of a visualized pointer icon that is dragged around the screen and used to “point and click” at elements on that screen. Instead, mobile visitors simply “tap” the screen to interact with elements on your website. Mouse-over effects have their place and I myself still use them. However, the big no-no here is related to mouse-over effects that spawn other, interactive controls.
Case-in-point: drop down menus! I don't have enough fingers and toes to count the number of websites I have visited even in the past week that neglect to give mobile visitors access to the links contained within drop down menus. At the very least, drop down menus need to provide a main link on the primary menu item that takes the user to a list of sub-links that would normally be accessible inside the drop down menu. This small, yet significant change will give your mobile visitors access to all of your content links if your site uses drop down menus.
The lesson here is simple: don't stop using mouse-over effects, just make sure they don't represent the only method of accessing your content.
Video -- and subsequently, audio -- should play on all devices.
This is probably one of the most important lessons in mobile website development. It's also one of the most aggravating issues for mobile visitors when a website's video does not play. I touched upon this in the previous post, but one of the root causes of internet video problems is websites that depend on the Adobe Flash plugin to present multimedia content (video and/or audio). With the advent of newer web technologies, such as HTML5, relying on the Flash plugin is a thing of the past. Flash absolutely has its place on the web, but it is also absolutely not required. A great example of a way around relying solely on Flash (or QuickTime or any other multimedia plugin) is the jQuery plugin named jPlayer. It will render video and audio player controls on practically every platform on the market and is adding support for more, daily.
The lesson here is also very simple: you don't have to stop using Flash, but it wouldn't hurt to make your website's video and audio content more accessible to the current and up-and-coming mobile devices.
That's it for now, but there is so much more to come!
Stay tuned to my posts as I intend to revisit this topic now and then as it is one topic that never seems to get old. Hopefully by now you've started to realize that "mobile ready" doesn't have to mean redesigning your entire website for viewing on mobile devices. There is a lot of middle-ground achievements, like those listed above, that will win over your mobile visitors right away.