The problem

One of my pet peeves in WordPress is that the menu system only allows you to “Automatically add new top-level pages”, and does not offer the same functionality for new child pages. This limitation isn’t too big a deal for small websites, but if you’re filling in a customer’s website with many subpages, it can be quite tedious to add all of those subpages to your custom menu manually.

In my opinion, the lack of this functionality is quite illogical (I’m not the only one), and I think this functionality certainly deserves to be integrated into the WordPress core. However, this enhancement has been postponed.

There are several plugins out there that try to solve the problem, such as Gecka Submenu and Add Descendants As Submenu Items. However, those plugins do not actually add any subpages to your custom menu, but instead just show the subpages when wp_nav_menu() is called in your theme. This is fine for some use cases, but in the admin Menus Screen I actually want to be able to rearrange/configure/delete all of my menu items, including the subpages.

The solution: Auto Submenu

To solve the problem, I wrote my own plugin called Auto Submenu, and have publicly released it. The plugin is extremely easy to use:

1. Install the plugin.
2. Activate the plugin.
3. New child pages will now automatically be added to your custom navigation menu.

Installation

Download and install Auto Submenu via the WordPress Plugin Directory: http://wordpress.org/extend/plugins/auto-submenu/.

Usage

When activated, the plugin will do its magic whenever you publish a new child page. If the new page’s parent is placed in a custom menu, then the new page will be added to that menu too (one level below its parent). Should you wish to reorder or delete the new page from the menu, you can simply do so on the admin Menus Screen.

The plugin does not have any settings. Auto Submenu will just work for all custom menus where the “Automatically add new top-level pages” setting is enabled.

A mobile website is a website that is specifically designed to be viewed on a web browser of a mobile device.

The mobile internet is booming. The share of mobile internet users is ever rising, mainly thanks to affordable data packages and the introduction of smartphones (e.g. Blackberry, Apple’s iPhone and Google’s Android phones). In The Netherlands, for example, it was found that a whopping 10% of the population regularly uses the internet on their mobile phone (February 2009).

Mobile challenges

Would you like to make your website accessible to mobile internet users? Then keep in mind that developing for the mobile web is very challenging, much more so than creating a regular website. Some of the challenges include:

• small and variable screen size
• unknown support for cookies
• unknown support for JavaScript / AJAX
• limited support for CSS styling
• slow connection speeds

Recommendations and guidelines for mobile sites

Jamo Web Creations is specialised in making mobile websites that take these factors into account. Drawn upon personal experience, we recommend the following general guidelines for making a mobile website:

Do not try to port all of your regular website’s functionality to your mobile website. Think about the following question carefully when organizing your new mobile website: How does the mobile user differ from the regular user? Try to accommodate the mobile user as best as you can, and leave out all the options that are unlikely to be used. Performing this exercise well results in a mobile site that provides a clear overview, is easy to use, and helps the user reach their goals as quickly as possible.

Use a “liquid layout” that will look good on all mobile devices, independent of their screen width and height.

If users need to login to make use of (parts of) your site or service, keep in mind that there are mobile devices that do not support persistent or session cookies. The best way to deal with this is to check whether or not the visitor’s browser supports cookies. If not, you should dynamically modify all links within your website to pass along the user’s session ID in the URL.

Using JavaScript and/or AJAX on your mobile website is an excellent method to provide interactivity without forcing the user to load a new page. It will make your website faster and more usable. However, not all mobile phones support JavaScript. Therefore, mobile sites should degrade gracefully if JavaScript is not supported. For example, with regard to using AJAX, you should make use of both default actions for links and forms, as well as so-called onclick / onsubmit event listeners.

Not all mobile browsers support CSS styling as well as regular desktop internet browsers. Again, your website should degrade gracefully if certain style attributes are not fully supported. Your pages’ HTML should therefore present its content in a logical order, and make use of semantically correct HTML elements. An easy method for checking this is by disabling all CSS on your mobile website and see if the pages still make sense.

Keep the total page size as small as possible. Connection speeds of mobile devices are generally slow. To provide a satisfactory user experience, pay enough attention to the resulting page size, including all elements it contains. Here are some tips to help you accomplish this:

• Use only one external CSS file.
• If using JavaScript, use only one JavaScript file.
• Minify and gzip the contents of your pages, style sheets and JavaScript.
• Do not include any unnecessary images.
• Resize images to a mobile-friendly size (as a guideline: use a maximum of 200 pixels in width or height).
• Avoid including JavaScript frameworks, such as jQuery or Prototype. Although they certainly make building JavaScript functionality easier, these libraries are generally too bulky for the mobile web.
• Unless your pages’ content is highly dynamic, make sure browsers can cache your content.

Test your mobile website extensively. Make sure the markup is valid. View your mobile website on a variety of different mobile phones to ensure that the most popular mobile phones and browsers display your website correctly, and to make sure that everything works as it should be. There are also several mobile browser emulators available on the internet: use them. And finally, find a handful of actual mobile internet users and let them test your website for usability.

Need help?

Get in touch with Jamo Web Creations to have your mobile site developed or improved.

Further resources on mobile web development

Getting started

• A Beginner’s Guide to Mobile Web Development
• Designing for the Mobile Web

Best practices

• W3C Mobile Best Practices
• Global Authoring Practices for the Mobile Web

Speeding up

• Caching Tutorial for Web Authors and Webmasters
• minify

Emulators

• Opera Mini Simulator
• .mobi mobile Emulator

Validators

• W3C mobileOK Checker
• ready.mobi testing tool