Web Development Blog

Designus Fixedwithidus: A web design that has a standard and measurable width, where the content is laid out in a fixed state, and does not change orientation when resizing the browser window.

Designus Fluidious: Sometimes called a 100% width design, full width design, variable width design, etc, this web design does not have a standard measurable width. Rather, the width varies depending on width of the containing window, and the content in the design shifts in accordance with this to fill the entire space.

Fluid Design Pros

• It fills up the space in the browser, never hear a client say, “Why is there all this empty space on the sides?”, again! This alone is almost worth it.
• If designed well, it can work good with most monitor sizes.

Fluid Design Cons

• It’s difficult to design this kind of design well, because, in reality, when you start placing ads or images around content, there is a minimal width that the browser can go before it scrunches the text to only a few words per line. There is nothing more annoying that a huge ad block or image that pushes the text to only a few words per line next to it.
• Since it fills up the browser, you can’t control line length and text can become harder to read.
• You’ll have a harder time designing the placement of other items on the page because you’ll need to account for the fluid design. For instance, if you have two images embedded in the content, both floated left or right, you’ll need to test how it looks at high resolution and low resolution to make sure the images don’t mess up the design.
• All in all, fluid designs are more difficult unless you are doing a largely textual site.

Fixed Width Pros

• You have a definite format which can really help when laying out ads and other elements on the page.
• This is a subjective one, but I think that a fixed width helps to frame the visitors mind in the structure of your site. In other words since it is always the same, they will have an easier time navigating, and understanding the layout of the site.
• You can develop a fixed width design faster (at least I can). This also includes development after the initial design, like content design.

Fixed Width Cons

• It will only look good at your target resolution and above. Anything smaller will have the dreaded horizontal scrollbar. Some designers have created designs where the main content is 780px wide, and there is a 210px bar on the right of that. This makes the content fill the space at 800×600 and ‘hides’ the extra content for people who are privileged enough to have a larger monitor. I don’t know what I think about this approach. On one hand its cool, but on the other hand, if that information can just be ignored, then why is it there?
• You’ll get the annoying, “Why is there so much empty space on the sides, other websites aren’t like that”. You can either go into a lengthy speech about browser widths and target audience, or indulge them in the secrets of fluid design.
• If you have a large table of data, then putting that in a fixed width can be a problem, but with new techniques like LightWindow javascript, this doesn’t have to be an issue anymore.

So what is my take on this? Well, I’ve been advocating the pros of fluid design for awhile, but after working with 3 fluid designs on a regular basis, I can tell you that they are kind of a pain in the ass. Especially if you have an eye for design, I think the fluid width is going to mess with your brain because you just can’t lay out content and have it stay that way. Also, regarding ad placement, lets say your content is 500px wide at 800×600; perfect for a 468×60 banner at the top or bottom of it. Well if you choose a fluid design, that ad is going to look really awkward if the content is 720px wide at 1024×768. You might want to stick a larger ad on top of that content, but you’d be messing up the design at smaller resolutions.

My current recommendation is to stick with static designs. The worst con for this is that you are leaving people out who have lower resolutions, but don’t kid yourself, your fluid design might not be very usable at small resolutions either. If you have a fluid design, look at your stats to see what people are actually viewing your site at. No one, and I mean zero people view this site at anything less than 1024×768 (I was shocked when I saw that, because I’m used to at least 20% at 800×600). So why create a fluid design when I think the text becomes hard to read at resolutions above 1280px wide, and the text gets crunched at 800px wide? It’s just not making much sense to me anymore.

1 Comment »

This is a video tutorial I created to showcase an online css formatter and optimizer. I’ll apologize in advance for the poor audio quality towards the end of the video (I’m still learning how to do this), but I don’t think it detracts from the overall message of the video. I’ll see if I can’t spend more time with camstudio to get it set up right. Can’t wait for the next version to come out.

Anyway, if you are creating large CSS files it is a good idea to compress them once a site goes into production mode. In fact, using the compression tool can save you space even if you don’t want to compress it down to one line, so it is always a good idea to do the minimal compression since it will save you some space. The tool I used is located at http://floele.flyspray.org/csstidy/css_optimiser.php, but doing a quick google search yields many results (the code for this must be open source since the same form is on many sites). Enjoy…

video removed…use the new css formatter on DEVTRENCH!

No Comments yet »

I recently had to create resizeable Flash animation that would play full screen. Here are the steps to creating a full screen flash animation:

• First of all, the most important aspect of this is to create a flash animation with vectors only. If you create one with bitmap images, when you resize the animation your bitmaps will look bad.
• Make sure your flash movie doesn’t have a Stage.scaleMode set to “noScale”. This property would be set in your actionscript somewhere and has been a problem for me in the past. Once I used flash code that I didn’t write, and this piece of code was hidden pretty deep in it. It made me want to put my head through the screen when I found it.
• Set the Stage.scaleMode to “showAll”, “exactFit”, or “noBorders”. You can do this in the action script, or in the embed parameters. Here is an explanation of what each of those properties does. Since I normally link straight to the swf file when doing this, I set the scaleMode in the flash file itself. Example code:

  Stage.scaleMode="showAll";

• Use javascript to call the full screen window. Use this code:
  <a href="example.swf" onclick="window.open('example.swf', 'flashwindow', 'width='+ (screen.width) +',height='+ (screen.height) +',resizable=yes,left='+ (screen.availWidth/2-0) +',top='+ (screen.availHeight/2-0) +'');return false;">Open Flash Window...</a>


Here is a full screen flash example of what the above code can do:

Open Full Screen Resizable Flash

That’s about all there is to it. If you have specific implementation questions, just contact me.

No Comments yet »