Creating CSS Designs

Ten years ago, HTML was all the rage when it came to designing Web sites.  In recent years, CSS-based designs have become preferable.  With today’s sites becoming larger and more expansive, it is becoming necessary to minimize the amount of time needed to update and reformat these sites.  This is where CSS has become useful.  Not only is the time needed to update pages shorter, but the code used is also more compact and loads faster.  All of these are major perks to using CSS code over the old HTML.  Even though CSS is not supported on as many browsers as XHTML, it is still widely becoming the norm for Web site design.

Two of the main tags used in CSS-based design are <DIV> and <SPAN>.  These are known as containers used to wrap around blocks of code.  The designer creates different styles for each container and these can be used throughout multiple Web pages in a site with minimal code.  It is wise to test CSS-based designers in various browsers in order to determine if the code used works properly in each browser.  It is important to remember that not all users use the same browser and new browsers are appearing all the time.


Understanding Graphics

When designing Web sites, it is important for a designer to properly understand how to save and compress graphics.  There are two types of images used on the Web: Vectors and Bitmaps.  Bitmaps are most commonly used and are also known as PNG, GIF, and JPG.  Bitmaps are composed of pixels unlike vectors which are composed of lines and curves. 

If a designer is creating an image shape such as a circle that will be composed of lines and curves, it is wiser to use a vector as it can retain the detail that a bitmap image cannot.  However, the bitmap is the more commonly used image format as it can compress and display millions of colors as well as is more widely supported than a vector image.

When saving photos for the Web, a designer should almost always save a photo as a jpg image.  While it may seem to be a big concern as to the quality of the image, it isn’t always necessary to save a jpg image at the highest quality possible.  The human eye cannot usually distinguish the loss of color in a smaller file.  Text images should be saved as GIFs or PNGs unless a photo is under the text.

What is Needed to Build Mortised Sites

When building Web sites, it is important to understand how to mortise a Web site, which is essentially piecing a site together.  The images, links and content on a site should complement each other in a perfect harmony to get the best usage.  One way to do this is to mortise images.  This requires the design to place two or more images together like a montage to balance each other.  The point is to make sure the images when placed on the page are coded correctly so that the user doesn’t end up seeing spaces between the images or images jumping around the screen where they aren’t intended to be.  Such malfunctions can cause frustration for a user.  Many have experienced this and can all attest that it looks unprofessional.

The advantage of image mortising is that instead of one large image downloading onto the screen, the image is broken down into many smaller images so that it will load faster and can be saved in its highest quality format.  Correct placement and coding is imperative to pulling this feat off.  One way to achieve this is to use a container.  This helps keep the images from bouncing around the page.  A combination of XHTML and CSS can help.