Design Application
Before adding content to your mobile sub-site you need to define the page layout and size. I chose a page width of 600 (CCS px) and by checking with my smartphone I found that a font size of 1.4em gave a reasonably readable page (about an 11 point font on screen).
To retain the look and feel of the main site you should copy the full site style sheet and appply the above corrections to it. You will need to simplify the masthead division to fit the new format. I also changed the paragraph margin to 7px - this is equivalent to about a three point spacing between paragraphs. Because for most users the content is what they want to see (and there are only four pages anyway) I decided to locate the menu at the foot of the page so that they can read the content at the top. Note that the overall navigation is limited - after the home page the other pages only offer links back to home or back to the main site.
It is my belief that most web pages are best understood if they are only a page long; if the content extends more than 60 or so lines it is better to split the material across multiple pages. This certainly applies to a mobile site as scrolling is less convenient to the user. Within reason I have applied that principle to this dissertation!
Google suggest that you MUST set a viewport (in the Head section of
the page) to ensure that the smartphone displays correctly.
However, their suggested meta statement
<meta name="viewport"
content="width=device-width"/>
did not render correctly on my phone (or in Google's mobile friendly
test).
I found that setting the width to equal the page as I had designed it
gave the required result on all phones - that is
<meta name="viewport" content="width=600"/>
Another consideration is the page titles. You may nor be aware
that Google web crawlers take very little account of the 'description'
meta because it is so easily gamed - commercial sites use it to
advertise not only material they offer but material they think will
bring traffic to their site. The main search term that Google
extracts is the page title, since it is shown on the active tab so a
gamed title will be visible to the public. Thus your full site
titles should reflect the page content. Your mobile site titles
will probably echo those on the full site; I just put " -m" on the end
to signify this is the mobile version of the page.