Travel Victoria – tourism blog

Tag: web design

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

     

  • Do you really own your website and its contents?

    Copyright
    Who really has copyright over your website and its contents?

    A few years ago, we had a rather eye-opening experience with some holiday property owners in a popular Victorian coastal town who were advertising their accommodation with us. They originally requested that we use text and photos from their own dedicated websites to create their advertisement. They were photos the property owners had taken themselves and wording they’d supplied to their web development and hosting company (let’s call them “Sneaky Internet Promotions“) to set up and maintain their website.

    Imagine our surprise when “Sneaky Internet Promotions” threatened to sue us for multiple incidents of copyright infringement for re-using material on their clients’ websites!

    What was happening here is that unbeknown to the poor property owners in this town, whenever they hired “Sneaky Internet Promotions” to create and maintain their website, they signed over complete ownership and copyright of all their material to this company. This meant that when the accommodation owners in this town took photos of their properties and gave them to “Sneaky Internet Promotions” to update their websites with, they lost all copyright of the photos and any information that appeared on their website.

    Why any web development or hosting company would want complete copyright ownership of its clients’ text and photos is something we’ll leave to your speculation, although it’s pretty obvious.

    The lesson here is that if you pay a web development company to create and/or maintain your website, ensure that the contract specifies that YOU own the resulting product and that the copyright for all material you supply (even if it is modified by them) remains with you. Otherwise you will run into problems galore if you instruct other websites, newspapers or magazines to copy text and photos from what you believe is “your” own website to create additional advertising for you.