Design Philosophy for a Mobile Website
As a preface to this page I should mention that my websites are coded in HTML/CSS with JavaScript for special functions (eg rotating banner photos) but I believe the underlying principles I suggest will still apply if you are coding with content diaplay packages such as WordPress or Joomla.
As I said in the introduction, there are two approaches to mobile site design which I call professional (large organisations) and amateur (small organisations).
Professional sites have ‘chameleon’ web pages which display content differently in the mobile environment – this makes them very complex but means that the content itself (for example, stock search results) is common to both environments. The site recognises the client's device (as decribed on the next page) and switches style sheets which exposes the content accordingly. The basic principle is the same as the application of a Print style sheet when a page is sent to the printer - the Navigation and Footer divisions of the page are set to 'display:none' as otherwise the menu links appear straight down the page as unordered lists (see here if this is a new concept to you). The chameleon page has innumerable divisions which run the two different renderings of the content - I have obtained permissin to show an extract from the Ipswich (Queensland) library home page here. You will see at line 701 the mobile version of the menu is executed, while the full screen menu appears from line 712 on. As I stated at the start of the paragraph the coding is very complex and will need very experienced programmers to handle.
Amateur sites do not change on the fly (but only as events change) so can run separate mobile pages in a sub-website. Google suggest that content display packages such as WordPress or Joomla can create chameleon pages in amateur sites, but that does not seem to happen and even when it does the page still has the same content, so extends down and down and DOWN, so the sub-site approach may still be best. In general the mobile site does not need to cover the gamut of the organisation's activities - for example, anybody wanting to check the constitution would not be well advised to do so on a mobile phone (especially as mobile browsers make tab switching relatively difficult). So the webmaster can choose those pages that a Google search would normally hit and/or those that members might want to access when on the move (we trust that they park the car before so doing).
Both my websites feature sub-sites with four easily maintained pages, targeted at the needs of mobile users. For SeniorNet they are:
- Home - SeniorNet's ethos and activities
- Membership - procedures and costs
- Training and Events - this page breaks the length rule but lists current upcoming workshops, social activities and courses, together with explanations of how training is conducted
- Contact - standard organisational contact information
For the Bach Society I provide:
- Home - details of and booking access to our next Concert
- Joining - costs and audition requirements for potential singers
- Ticketing - FAQ on possible problems with our booking system
- Contact - standard organisational contact information