Step 2

This page has been put together by following Dev Mobi guide ,The Mobile Web book and the XHTML MP Tutorial

I have decided for the purposes of experimenting to commit the web classic blunder when changing from standard web design to mobile web design. This is to miniaturise a webpage or web site.

Cameron Moll points to a very good article by Barbara Ballard about considering the purpose of the mobile web page or site. The first option should not be to design a small version of everything that is on the current web page viewed on a pc. I feel that it will be helpful to deliberately make this mistake to understand why it is not a good idea. There are two changes to the original css file, adding no display to the body tag and adding sidebarads tag also with no display. This is how it looks in some emulators on dev mobi

So, straight away I can see why this is not a good idea to make it miniature, at the moment,the photo is hiding the menu let alone the rest of the content, even if this was a smaller photo there would still not be room for everything on the screen. There is also far too much content that even with a relative sized font, to fit on the page so that also means there is too much CSS for the content as well

It displays with a graphic and menu using Openwave 7 generic simulator, but you would still need to scroll down to the content and is raises the question of whether the graphic and menu are needed at all, because every other web page in Aydin Design (on Nicola's side) would also look the same

This is how it looks in all 3 simulators using a linked stylesheet, imported mobile stylesheet and mobile doctype:

So this is first attempt at creating a simpler page, although this still doesn't answer question of whether it should even exist as a separate page at all.It includes the following changes:

• a separate stylesheet with less styles (no breadcrumbs,no contentr div), font as smaller instead of small
• link to the stylesheets with a link to the main aydin stylesheet with media as screen and separate link to aydinmob stylesheet with media as handheld
• images 40% less and specified as inline styles within the html
• navigation removed, for the purposes of this page have put home link and refs link to reduce the need for additional hyperlinks in the content, at the bottom of the page

I have not been able to make the page display on the emulators at dev.mobi yet, but Ruadhan on the dev mobi forums kindly tested it on a Nokia N70 and said it displayed ok. This is how it looks in the openwave emulator

Please feel free to download both files.

If you don't have access to the web on your phone, you can test how the code looks in using the emulators from the list on dev.mobi