Travel Victoria – tourism blog

Category: Mobile content

  • Make sure your website’s drop-down menus work on an iPad

    Apple iPad
    Getting those drop-down menus on your website to work on an iPad

    By the end of 2011, Apple had sold more than 55 million iPads worldwide. In many markets, sales of the iPad represented over 70% of tablet computer purchases. Therefore it is important to make sure your website is fully functional when used on an iPad.

    If you don’t have an iPad, one of the first things you can do is to view your website using the Safari web browser which is what iPads use by default.  Safari is available for Windows, Linux and comes standard on Macs.  You can download Safari for free.

    Unfortunately, using Safari on your PC or Mac isn’t quite the same as using it on an iPad.  One of the reasons is that “hover” events in HTML/CSS cannot be performed on an iPad. A hover event occurs when you hover your mouse over something, without clicking, causing an action, such as a menu to drop down. Interestingly, Android-based tablet computers emulate the hover action by allowing you to tap on the area which would cause something like a menu to drop down. This tapping is ignored on iPad and other Apple mobile devices.

    So if you have a website which uses a standard HTML/CSS drop-down menu (constructed using HTML list elements such as <LI>) and it relies on the “hover” event to make the menu items reveal themselves, then it probably won’t work on an iPad.

    There are many solutions which make the iPad behave like an Android-based tablet whereby clicking on a button will emulate a “hover” and display the full drop-down menu. Some solutions use JavaScript while others use code to try and detect if you’re using an iPad and work around it. There are many ways to accomplish this, however we began a quest to discover the quickest and simplest method of getting those drop-down menus to work on an iPad, and the solution ended up being trivial.

    To make a drop-down menu appear when someone taps on the menu button, all you need to do is add

    onClick=”return true”

    to the “A” tag within any list item (such as <LI>) that triggers a menu to pop up. This works for cascading menus as well.

    This simple workaround has no affect on people using web browsers on desktop or laptop computers – it just forces the menu to pop up on an iPad when someone taps on the menu button, which is equivalent to a click.

    We have verified this all works on a couple of websites we manage that use HTML/CSS drop-down menus:

    1. Beach Stays
    2. Dogs on Holidays

    Originally, the drop-down menus on those sites failed to operate on an iPad due to the missing “hover” functionality, making it impossible to access the hidden menu items and forcing people to go through the tedious routine of returning back to the home page to access an index of the website’s contents. Once we explicitly defined a click action to emulate a hover, suddenly those drop-down menus began working (when you tap on them) just like on a desktop computer!

    Due to the popularity of iPads, it is important to make sure all parts of your website work correctly on them, including those HTML/CSS drop down menus which are becoming quite popular nowadays.

     

  • Does your website really need a version designed for mobile phones?

    Mobile phone
    Is the smartphone outsmarting mobile-friendly websites?

    Back a few years ago, as people started acquiring mobile phones that could access websites, there was a push to create a separate mobile versions of websites, suitable for display on those small devices.

    The idea was to create a scaled down version of your website which was fast to load, given that at the time, internet access via a mobile phone was slow. Pages would be stripped back to just the basics, and they’d be structured to be narrow enough for a phone screen’s width, with high contrasting colours to work with the limited colour depth on mobile screens. Java and Flash content would also be removed, as would anything else more complicated than simple HTML elements.

    Fast forward a few years, and there are now reports that smartphones have penetrated 50% of Australia’s mobile market, with 60% of Australian mobile users expected to be using a smartphone by 2012.

    So given that smartphones feature high resolution screens and virtually fully functional web browsers, plus access to fast communications networks, does that spell the end of mobile-only websites?

    If your website is of a fairly standard design, like Travel Victoria, then you can probably save the effort of duplicating and stripping back your website to make it mobile friendly, as the original website should work fine with any smartphone. A smartphone’s web browser software will allow people to magnify pages that are too small to read on the phone, and there are options available to allow the phone to automatically optimise the way pages are displayed to fit the geometry of the phone screen better.

    However, not all websites are simple and mobile friendly. If your site makes use of Flash content, be aware that it is currently not supported on Apple’s iPhone, so you may consider making non-Flash alternative pages. If your site uses Flash extensively, or each page is simply overflowing with pictures, embedded videos and other complicated content, then maybe a mobile-friendly version of your entire site is still required so people can find out the information they need quickly without being confused with so much content on a small screen.

    With smartphones now easily handling most web content, we return back to one of the original concepts of the world wide web, which is to create websites in such a way that they can be viewed independent of the device being used. Creating separate mobile-friendly versions of existing websites goes against this philosophy.