Smartboy's Site

A look at some of the problems I've faced with redesigning my theme and how I solved them.

So, for the past few days I have been working on revamping my website's theme so that it is more compatible across multiple browsers and screen sizes. Originally, I had been using percentages to make my site scalable, which does have the advantage of being simple conceptually. However, at the same time, it doesn't lend itself well to fine tuning such as with my navigation bar's width. This was because I had been using images for the borders instead of CSS elements, which meant I had to employ hacks to position my other elements within them. In order to correct this, I decided to take my theme in a different direction, as I was inspired by Adapt.js, a small project created by the creator of the 960 grid system.

960 grid system tackles the problem described above by fixing the website's width at 960 pixels. 960 was chosen because it is highly divisible by many numbers, which worked well because it uses columns to help with the layout of elements on the page. Because the width was fixed, percentages weren't needed, and one could use simple pixel values to modify the size and position of an element. This was made easier by having default column widths declared by the class "grid_*" inside of an element with the class "container_*" ("*" being a wildcard in both cases).

Adapt.js was created because, while 960 pixels was a very useful width, it was less than usable on modern, higher resolution monitors. There would be a lot of wasted space on, for example, a 1680x1050 pixel resolution monitor, where 720 pixels of the 1680 total pixel width would be unused, given the web browser is maximized. In design, too much blank space can be just as bad as too little space, so you can probably guess why designers were hesitant to use this, despite how much more usable it would be.

Adapt.js helped aleviate this problem by allowing people to use multiple static widths instead of just one. It does this by dynamically loading different CSS files based on your screen resolution, which are able to be specified by the designer or developer. So, for example, one of the provided CSS files provides a 1200 pixel width, while another is 780 pixels. The variety means that not only can you address the large monitor problem, but you can also tackle the booming mobile device platform without creating a separate site (though the latter may not be advised depending on the type of site).

Using Adapt.js as a base, I began to hack at my site and use the multiple CSS files to my advantage by putting size-specfic code in each of the CSS files. In addition, I used two div elements with CSS3 rounded borders and box shadows rather than images to create my borders. This, along with some cleaner position: absolutes for the footer, some modifications of widths and padding for the #Content div, and a modification of the base font size to facilitate my us of ems, allowed for me to pump out a mobile, small screen, and large screen version of my site.

So, that is it for now. The new theme should be up soon, though if you are crafty enough, you can easily find it among the pages on my site. Have a nice Tuesday. :)