View Single Post
  #14 (permalink)  
Old 08-22-2008, 07:03 PM
subsystems subsystems is offline
WebProWorld Pro
 
Join Date: Mar 2005
Posts: 121
subsystems RepRank 2
Default Re: What about the monitor?

I struggled with the fluid design method and was never happy with the looks of the sites I made. There was always something wrong somewhere. Text didn't wrap nicely around pics in every condition.
I didn't like the fixed sites either because on some small screens the user must scroll left and right a great deal. On larger screens with the browser maximized the page looks like a postage stamp in the middle of a bed sheet.

Then it hit me. There are really 2 seperate issues here. Text and image sizes need to be scaleable and the width of the content needs to not overfill or underfill the browser.

First thing that is not too difficult to address is the text and image scaling. Basically you give the visitor 4 different predefined choices of text size that they can choose from and you also adjust the image sizes so things scale well. Somewhere near the top of the page (maybe in the header block) have several small graphic rectangles with different sized capital A's in them, smaller to larger. When you hover over the different sized A's have it say Small, Medium, Large and Largest. Corrisponding with the 4 different sized A's, you have 4 different css files. One with fonts at say 8px on up and images that whose height and width are set small. On up to the largest css file where the font size is 20px and the image height and width are set larger. If the visitor clicks the smallest A on the page, it sets a temporary cookie called contentsize and sets it to small. Then when the page loads dynamically replace the linked css file in the html tags containing the small text sizes with whichever one corrisponds to the value of the cookie.

So now the visitor can change the text size but only to predefined and pretested settings. Now you can bullet proof each of the content sizes and be sure things look nice no matter which of the 4 choices the visitor wants.

Sounds good so far but there is another trick that works really well.
Often the most desireable layout is the 3 column design with menus in the left column and content in the middle and right columns. On pages where you want more detail in a larger area you just combine the middle and right columns into 1 double wide column.
But with the fixed width columns on wide monitors you end up with the postage stamp problem.
The solution is similar to the way to fix the text sizes. The trick is to have predefined column widths and allow the user to change the number of columns to predefined numbers. Say 2, 3, 4 and 5 column layouts. So in the 2 column layout you have the left menu in the first column and the content in column 2. In the 3 column layout you have the content in columns 2 and 3 or combine columns 2 and 3 and drop a panel so it fills columns 2 and 3. Then in the 4 column layout you add in column 4 a series of panels containing other info. Like top 10 lists, or promotional items etc.

Now to change the layouts it is trickier. You use little column graphics like the text ones above except these control the number of columns in the layout. You need to set a cookie for the number of columns 1, 2, 3, 4 or 5. You then dynamically adjust what to include in which column for each of the layouts. If you make your content in panels you can simply drop the panels into which ever column you like for each layout.

The key here is to have a standard column width in px. Say 180 or 200px. So your 2 column layout will be 400 px in total width. The 3 column layout is 600px, 4 is 800px and 5 is 1000px. Lastly, for handheld screens you can just use a 1 column layout. Make life easy.

The advantage of this layout method is you always know the width of the columns so you always know your left menu is 200px wide you can premake everything to fit and you know it will look good. If you need a section that is wider than 200 px simply make it 2 columns wide or 3 columns wide etc. You adjust your layout so a panel drops in to 2 or 3 columns instead of just one. Once you get your panels to look good you know they will drop into the different column numbers and nothing will get messed up.

One last point, since you have 4 text sizes to test and 5 layouts you'd think you may have to test 4 x 5 or 20 different looks. Not really, since the column widths are known you only need to make sure the 4 text sizes fit well in the standard column width. Then you only need to test the 5 different column layouts.
It really doesn't take that long to bullet proof the site. You bullet proof the panels for cross browser issues. Check the layouts and text sizes as well and you are good to go.

Last edited by subsystems; 08-22-2008 at 07:15 PM.
Reply With Quote