Continuing with Going Mobile : The Viewport, I made the required changes to almost 450 pages on my site for the World Chess Championship. As long as I was making a global change -- the first since Bye, Bye, About.com! -- I also changed the title on all pages.
The old titles had info about the site first, followed by info about the page, e.g. 'World Chess Championship : Index'. This worked in the days before tabbed browsers, when the title of the page was the title displayed for the window. With more modern browsers, the title is displayed on the tab and is often truncated when there are many tabs. Showing info about the page first, e.g. 'Index : World Chess Championship', means the titles on the tabs are more likely to be different when there are several tabs open for the same site. The new page headers look something like this:-
[TITLE]Index : World Chess Championship[/TITLE]
[meta name=viewport content="width=device-width, initial-scale=1"]
After making the changes, I checked some of the pages using Google's 'Mobile-Friendly Test' (mentioned in the 'Going Mobile' post). My 'Index' page still produced the message
Awesome! This page is mobile-friendly.
Page appears not mobile-friendly
- Content wider than screen
- Links too close together
Since those two pages are structured the same as the main 'Index' page, there's more to this than meets the eye (there always is!). More tests to follow...