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.

Advertisements

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.

Enhancing Usability

We are continuing to journey through Professional Web Design: Techniques and Templates.  This week we explore Chapter 4, Enhancing Usability.  According to the author, the average Web site visitor only views the home page for 10 to 20 seconds.  It is imperative that a home page be easy to navigate and read.  A convoluted home page almost always guarantees a user will not stay long as we are in a higher functioning time period.  It is important to keep the user in mind when we are designing Web pages.

When designing a Web page, it is important to user typical names for navigation.  Don’t try to get too fancy or creative with naming pages or it can end up causing confusion and/or frustration for a user trying to navigate a Web page.  Remember that not everyone shares the same mind set so it’s usually best to keep names simple and to the point.  Also, keep in mind that the more times a user to has to click through a Web site to get the information they are seeking, the longer they have to search and this can cause the user to want to seek the information elsewhere.  The author also explains how to avoid “linking out” a user of a certain section.  This can happen when a user clicks a link expecting to be navigated to one place and yet ends up in another.  This can happen when a designer has linked a page incorrectly or hasn’t created that particular page and in essence links another in its place.

Another idea the author explores in this chapter is the idea of Cascading Architecture versus Flat Architecture.  Flat Architecture has long since been the norm of Web pages.  This involves placing all pertinent information and links of a Web site on the main page.  This causes the user to click very little while visiting a site.  Unfortunately with Web pages growing as vast as they have become, the user ends up with an overloaded Web page full of links and finds it difficult to find the information they seek.  They have to resort to slowly scrolling and this can be irritating and time consuming.  This is where Cascading architecture comes in handy.  Instead of throwing all the information in the user’s face in one swoop, the user instead finds a navigation system that allows them to target the information they seek.  Scrolling is also more limited as the information is broken down into chunks instead of one long Web page.

Things to Consider Before Beginning

I am continuing to read “Professional Web Design: Techniques and Templates.”  So far, it has been a very informative read and I definitely see myself applying the techniques and tips I have been acquiring once I begin professionally designing web sites.  I am enjoying the additional knowledge that I am gaining from the book and am glad to be able to share it for everyone in my Web design blog.

In Chapter 3, we begin to explore the items one should be consider when designing and planning a Web site.  One thing the author points out is that it is important to be “logical and practical” when planning a Web site.  One must consider the client’s needs as well as the practicality of implementation.  A client may have certain ideas and demands that may not fit the scope of the type of Web site that they may need.  Remember to keep the appeal fresh and professional.  A Web site should convey the company’s message in a proficient manner.  Also continue to remember the audience that will be visiting this Web site.  The longer a Web page takes to load, the less time the company may have before they lose a potential customer who grows impatient waiting. 

A larger Web site can benefit from the creation of a well designed flowchart.  If a Web page only has five or fewer pages, it may not be necessary to create a flowchart as it is easy to visualize the layout.  When creating a larger site consisting of 10 or more pages, it is absolutely essential to create a flowchart to keep the planning organized.  This way the designer has easy way to visualize the layout of the site.  Once the design is complete, the designer can also implement the flowchart on the Web site as a site map, which many users find beneficial.

Designing for Past, Present, and Future

Often designers can get caught up in trying to design a Web page that has a large audience and is pleasing to everyone.  There are so many different browsers used these days, that it can be difficult to keep Web pages compatible with all of them.  In all honesty, it is best to just keep up with the most popular browsers such as Internet Explorer and Firefox.  This is one of the many advantages with using a CSS designed site.  The Cascading Style Sheets allow multiple browser compatibility with more relative ease. 

Another problem that can inhibit a Web site is keeping in mind users who may not possess a newer faster processor.  A user who has an older computer may experience slow low loading times when trying to access a newer flashier Web site.  In order to keep a larger audience, it is important to remember that all users are not the same.  Also, remember that newer versions of JavaScript and other computer applications may not always be up to date.  While most users today have access to high speed internet, there are the occasional users who still use a dial up modem and this can cause slow loading times on image rich sites.  Large images will load in a lower quality in slower speed enviroments.  This is important to keep in mind when considering using large images on Web sites or for backgrounds.

Professional Web Design: Techniques and Templates

It’s amazing how the design of a Web site can completely change your mood.  An intricate Web site that is well formulated with an easy to read interface is enjoyable to encounter.  How often have we entered a poorly designed website that was difficult to navigate only to leave disgruntled and unsatisfied.  Have you ever began exploring a deceptively attractive Web site only to find it had no links or was missing pertinent information?

While the Internet is still relatively young, it has encountered numerous technological advances in recent years.  It can be difficult to keep on track of the latest advancements, but keeping a Web site fresh and interesting is important to ensuring that users will continue to return and that new users will be curious.

When designing a Web site, it is important to remember who your audience will be.  While you won’t be able to please everyone who comes to your Web site, it is important to keep track of current trends and ideas.  At best, a Web site’s purpose is to provide information to the user.  The purpose isn’t to entertain the user with a graphics rich flash movie unless it is essential to the Web site design.  Keep your sites attractive and interesting but do not bombard a user with unnecessary fonts and graphics.  Remember that graphics heavy sites that can take a long time to load, even on today’s faster Internet.  It is important to keep a Web site professional and simplistic.  Less is more.  Remember that the main purpose of a Web site is to share information.