Designing pages for display on a mobile device

Having spent some time with only a mobile phone I have made a few observations.

Content displayed on a mobile screen should not only be readable the layout should be such that the content is obvious to the visitor and the menu system not dominant on the screen. In my earlier design on pages that I had a complex menu the mobile rendering was all menu and no content. This was not a good way to encourage the mobile user to continue with the page.

I have changed my phylosophy in that mobile pages will have different menu options that if the visitor were viewing the page on a bigger screen. My main thrust is to provide pages for developers or visitors that are more likely to be using a larger screen. However, I cannot ignore the fact that the majority of users are more likely to find my pages using a mobile phone.

Considerations for linking structure

Links to pages that are relevant to the mobile user, or rather those that are more likely to be found by them, need to be placed in the body of the page or in the link sections. The mobile user will not see the expandable menus at the top of the page.

Modifications of main menu for Local pages

In general the access of Local pages are going to be from those that have no interest in website design and administration. That being the case the use of the expanding menus in not sufficient to allow the required navigation of the pages. In fact the main menu can modified to relect that the page is a local one.

This would mean a seperate template or for me to re-introduce a contextual heading approach. Actually, this would not be too bad as the main menu only has the single entry for Design and Admin, which I am sure will ignored by such visitors. The lack of access to the expandable menus is the more salient issue. Additional menu items will need to be added to the main menu. I can then have the option of removing the Design and Admin accordian, of even the expansion of the Belchamp Walter accordian. I will have to try this on a mobile myself.

What Google Developers say:

The notes on the Google Developers page are largely aimed at eCommerce websites that organisations want to sell a product or service to those that access it.

The points relating to navigation are good and I have revised my mobile layout accordingly. My pages when viewed on a small screen used to be all menu, now I have an overlay menu that opens by clicking an icon. The main topic of the page is now visable when the page is first accessed.

Site Search:
This would be good thing to have especially on an eCommerce site.
The example of what works shows a Home Depot page, in my experience the search on that site is not particularly helpful.

Screen Orientation:
I have tried this in putting notes that the page may be better viewed on a larger screen. On a phone I have maintained the top menu bar when in portrait mode. In my experience phone users are reluctant to turn their phones on their side.