Fluid Layout Design

I've completed the basics of layout and chosen a basic colour scheme for the site. With the layout I followed my philosophy of using a fluid design so that the same code could be viewed on a screen of any size and be equally usable. The benefit of this approach is that you only need to code (and pay for) one design rather than create one site for laptops/desktops and another site for mobile devices. Then there is the question of whether to create a mobile application which is yet more expense so needs to be evaluated from a standpoint of technical need and budgetary constraints.

From a technical perspective the creation of a separate native application is only necessary if mobile users of the site require a deal of complexity (as with games). Most web sites are relatively simple so creating mobile friendly web sites is the most economic and practical way of solving the question of having a web site display equally well across different device types.

So far this seems to be working. To do this I made three divs that float on the page in a horizontal line. I set the width of the center div as a percentage of the containing div (45% give or take). I also put a min-width on this main content div of 300px so that on mobile devices it does not take the width from the percentage (too small) but defaults to the 300px. For the divs on either side of this I set a min-width 200px and max-width of 300px which keeps the divs a uniform width on mobile devices. This layout allows the divs to fall underneath one another on screens of less than 500px width for ease of use.

To ensure all elements are fluid all margins, padding and font sizes are also expressed as percentages rather than fixed values. Initial browser testing is in IE 9, Safari 5.1, Chrome & Firefox.

I am using Phonegap with Android SDK and Eclipse to test how the site displays on mobile devices. I am using the Android emulator because the Eclipse Classic IDE it runs on is free however it was a significant job to set it up so that all these components work together.

Links
Responsive web design: a project-management perspective

A New Beginning

Welcome my portfolio web site. This is an ongoing project which will change and grow as an example of my current and increasing skill with web development using XHTML, CSS, RSS/XML & JavaScript. I hope to introduce PHP and build a database into the site as time goes on.

I've decided not to go with using HTML5 because I do not feel there is enough browser support for it to make it a viable choice for the average development project. The other major decision at this point was to make the page display the same across all screen sizes so I am using percentages for my page layout width and heights. It will be interesting to see how this plays out.