MAXIMIZING SCREEN SPACE AND MINIMIZING BANDWIDTH

One of the most complicated aspects of web design is developing a website that would be viewable in all sizes.  It is not enough to just aim for a tasteful design aesthetic and highly relevant content - flexibility and optimization should also be considered.
Screen resolution is not the best starting point of figuring out the optimum display size of a web page.  One must consider that there are other page elements that could reduce the size of a viewing area:

• Browser windows that are not maximized – Keep in mind that many users are into multi-tasking.   Several browser windows could be open at the same time and not all of them would be maximized.  
• Standard toolbar areas – Be careful not to discount approximately 120 pixels worth of vertical space that would be occupied by the URL input field and navigation buttons.
• Windows status bar – Many users find it more convenient to have a visible status bar on screen.  It would probably take up a small amount of space but regardless of size, it should still be considered.
• Sidebar area – Well-known browsers like Internet Explorer, Netscape, and Firefox provide users with this option for bookmarks, search tools, site details, and such.  Sidebar areas usually take up 160 pixels worth of horizontal space. 
• Browser companions – There are programs and toolbars that provide users extra information like related sites and page data that could also require a substantial amount of space.

A better starting point would be the viewable browsing area - defined as the area in a user’s browser that a web page occupies.  This is the reason why web developers tend to insist on absolute positioning or relative positioning, wherein the pages contract or expand to better fit different browsing areas.  Even if different user experiences could not be avoided, you could still aim for consistency in getting the website message across.  There are many ways to accomplish this:

• Centering your content – This is one of the easier ways when it comes to fixed-size layouts as it would only require distributing the main contents within the central area. 
• Positioning the less significant content on the right side – With the assumption that it is more convenient for users to scroll vertically than horizontally, you could place your main content and main navigation areas on the left side of your page.  Less important factors like ads and extra features could be placed on the right side.

 

• Using a fully flexible/liquid page design – As already mentioned above, this method allows your web page to contract or expand.   Another good thing about it is that its HTML coding is not complicated.
• Designing an axis-oriented page – This would entail a layout where the starting point is on the center of the page and the other points just take off from there in different directions.  
• Enabling compression/expansion of features – If your site would work better with extra features, you could still optimize space by giving users the option to maximize or minimize such features according to his/her needs.  For example, some users might want to have the search feature emphasized while others would prefer to rely on traditional navigation.
• Using variable surface areas/moveable components - Somewhat similar to the previous method, you could include content boxes that users could open or close.  Doing this would not have to ruin the proportion of the design because by increasing the size of one content box, another one would decrease.  Another option would be the use of content blocks that the user could arrange according to his preferences by clicking on and moving them within the page.
• Arranging multiple columns for text-heavy sites – This method is ideal for online publication sites because too much text in just one column could discourage the user from reading further.
• Combining the aforementioned methods

The next step to maximize screen space is to minimize bandwidth consumption.   Consider your monthly bandwidth as an important step because not paying attention to it would cause you problems in the near future.  When you exceed your monthly allotted bandwidth, you would have to pay extra fees in addition to not allowing users to view your website for a certain amount of time.  It would be better if you take measures to avoid these unnecessary and major problems.
There is a simple formula to determine how much bandwidth your website would need: [total size of website] x [number of visitors per month] = monthly bandwidth consumption
Based on the formula, in order to minimize bandwidth consumption you either have to decrease the size of your website or monthly visitors.  Since you put up a website to advertise your business to internet users, reducing the amount of your visitors is hardly the ideal solution.  The question therefore is how to minimize bandwidth consumption by reducing the size of your website?

• Keep things simple – Rich web content like audio and video files, flash presentations, etc. take up a lot of space.  If such contents are truly necessary, use a different server to host them.
• Keep downloadable files to a minimum – Downloads would increase your bandwidth consumption.  Again, if these downloadable files should be included in your site, store them in third party storage sites.
• Put your news feeds in a different host – Some websites depend heavily on their news feed feature which tend to be hosted by a separate server to save bandwidth.

• Avoid clutter in your coding – Make sure your coding is clean and remove all the unnecessary spaces and tags because they would your website size bigger without good cause.
• Use efficient scripts – They use up a lot of resources so make sure they would work well.  Also, static pages are better than dynamic pages because the former could be cached. 
• Take advantage of caching – Caching makes it faster for users to access their frequently visited websites because certain portions of those particular websites would already have been stored.  The good thing about this is that you could control what files could be cached and the amount of time they would be cached.  With that in mind, set aside the large, necessary files for caching. 
• Optimize images – Save your images in GIF, JPEG, or PNG format.  Do not use a resolution higher than 72dpi.  Crop your images carefully and have smaller/thumbnail versions of large, heavy images ready at hand.   

 

References:
Screen Size for Website Development
Maximizing Website Viewability
Fixed vs. Fluid vs. Elastic Layout
Ways to Minimize Bandwidth Consumption
How to Minimize Bandwidth Usage?