a) Understanding the Web Design Environment
Your Web site design must be portable and accessible by users who have a variety of
browsers, operating systems, device platforms, and physical abilities. Many designers make the mistake of testing in only one environment, assuming that their pages look the same to all of their users. No matter how much Web design experience you gain, always remember to test in different environments and with different users, even when you feel confident of your results.
You can avoid portability problems by coding. Viewing your pages in multiple browsers, testing on the available operating systems, viewing on all possible devices, and using different input devices ensure that your site is accessible to the greatest number of users. Consider analyzing your audience and building a profile of your average user.
1) Browser Compatibility Issues:
One of the greatest challenges facing HTML authors is designing pages that multiple browsers can display properly. Every browser contains a program called a rendering engine that interprets the markup tags in an HTML file and displays the results in the browser. The logic for interpreting the HTML tags varies from browser to browser, resulting in potentially conflicting interpretations of the way the HTML file is displayed. As a Web page designer, you must test your work in as many browsers as possible to ensure that the work you create appears as you designed it. You might be surprised to see that the results of your HTML code can look different when viewed with various browsers.
HTML authors do not have the luxury of knowing the user’s operating system or the age and type of browser that will be used to view their Web pages. You may never be able to achieve the exact same look across all the browsers that are available, but you should try to minimize differences as much as possible so that the greatest number of users experiences your design as you intended. The more you work with HTML and CSS, the more you will realize that slight differences inevitably occur from browser to browser that may not matter to the user.
To make sure the greatest compatibility of your Web pages across multiple browsers, follow these guidelines:
ü Follow W3C standards — Use HTML and CSS correctly and consistently.
ü Validate your code —Test for syntactical correctness and coding errors.
ü Know your audience—Create designs that are accessible, readable, and legible.
ü Test your work in multiple browsers and devices —Test and retest as you develop to
mitigate problems as they occur.
2) Connection Speed Differences:
The user’s Internet connection speed has traditionally been a variable that Web designers
could not ignore. If pages download slowly because they contain large, detailed graphics or
complicated Flash animations, users may click to go to another site before they see even a
portion of content. If you are building Web sites for a global wide audience, you still need to
plan your web pages so they are accessible at a variety of connection speeds.
3) Browser Cache and Download Time:
All Web pages are stored or located on computers called Web servers. When you type a Uniform Resource Locator (URL) address in your browser, it connects to the appropriate Web server and requests the file you specified. The server serves up the file so your browser can download it. The first time you visit a site, the entire contents of the HTML file (which is plain text), every image referenced in the HTML code, and any CSS style sheets are downloaded to your hard drive. The next time you visit the Website, your browser downloads and parses the HTML file from the site. The browser checks to see if it has any of the specified images stored locally on the computer’s hard drive in the cache. The Browser’s temporary storage area for Web pages and images is called as Cache. The browser always tries to load images from the cache rather than downloading them again from the Web.
You can take advantage of the browser’s caching capabilities by reusing graphics as
much as possible throughout your site.
4) Device and Operating System Issues:
People use endless combinations of monitors, computers, and operating systems on desktops and mobile devices around the world. The best method for dealing with this variety is to test your content on as many systems as possible, although this may not be realistic for the student or beginning Web designer. Remember the following points about different computer systems:
ü Monitors and display software – Because of many technical and physical reasons, the colors you choose and images you prepare for your site can look significantly different on different machines. Screen resolutions and sizes, colors, and video hardware and software all affect the look of your Web pages.
ü Browser versions – Not all browsers are the same on all operating systems. Often, software companies release new versions of their browsers based on the popularity of the operating system or competition between vendors.
ü Font choices – Installed fonts vary widely from one computer to another. Choose fonts that are commonly used; otherwise, if a font you choose is not installed on the user’s machine, it will appear in a default typeface.
b) Designing for Multiple Screen Resolutions
You can never know how users view your work because you do not know the screen resolution of their monitors. A computer monitor’s screen resolution is the width and height of the computer screen in pixels. Most monitors can be set to at least two resolutions, whereas larger monitors have a broader range from which to choose.You don’t have control over a User screen resolution is a factor. The current most common base screen resolution (Expressed as width × height in pixels) is 1024 × 768 (around 30% of world’s monitor), but this is rapidly being replaced by larger monitors that display at 1280 × 1024.
1) Wide-Screen Displays:
The new wider screen real estate has changed the way designers are building their page
layouts, moving away from flexible layouts that can adapt to different screen resolutions to
fixed layouts that display pages consistently no matter the user’s resolution. Designers are
moving to fixed layouts because of the extended landscape shape of the newer monitors. If a
Web browser is maximized in a wide landscape screen, you must account for a tremendous
amount of horizontal layout space in your Web design.
2) Handheld Devices:
In addition to wide-screen and standard monitors, many users now have handheld devices
such as the iPhone and iTouch that they use for browsing the Web. You should test your Web
site designs on these devices as well as desktop and laptop computer monitors. Designing for
3) Flexible Page Layouts:
Flexible page layouts, also called fluid layouts, are designed to adapt to different screen resolutions. Flexible layouts can work especially well and are simpler to design for text-based content (like Wikipedia). They can pose a variety of design challenges, based on the type of content and complexity of the page layout.
Advantage of flexible design is the ability to adapt to lower screen resolutions. Although users who have their screen resolution set to lower than 1024 × 768 are becoming increasingly scarce, the ability to adapt to lower resolutions and smaller browser windows or device displays means users have ultimate control over how they interact with your content.
4) Fixed-Width Page Layouts:
Fixed-width page layouts allow the designer to control the look of the Web pages as if it were a printed page, with consistent width and height. Most current fixed-width layouts are designed to stay centered in the browser window, regardless of the user’s screen resolution. Fixed-width page layouts have become a popular choice because of the increasing variety of screen sizes and resolutions and the relative ease of constructing fixed-width designs compared to flexible designs.
Flexible designs are:
· User controls the view of the content
· Less chance of horizontal scrolling
· More flexibility for multiple devices
· Better suited to text-based layouts and simpler designs
Fixed-width designs are:
· Designer controls the view of the content
· Allows more complex page layouts
· More control over text length
1) Balance Design and Content:
When planning the design of a Web site, access to your content and the needs of your users should always guide your design decisions. Web development teams often comprise many people, each with their own idea of what is important in the current Web site project. Within your company or design team, various stakeholders contribute to the design of the site. The customer has their vision of the finished Web site they are paying your company to design. The designers want to build a site that showcases their design skills. The development team wants to include the latest technologies. The publishing and editorial teams want to highlight their content. Advertising revenues may determine placement and design of ad space on the page.
2) Plan for Easy Access to Your Information:
Your information design is the single most vital factor in determining the success of your site. It determines how easily users can access your Web content. The goal is to organize your content and present it as a meaningful, navigable set of information. Your navigation options should present a several variety of choices to users without detracting from their quests for information. A visitor to your site may choose to browse randomly or look for specific information. Often users arrive at a page looking for data that is low in the hierarchy of information. Sometimes users arrive at your site seeking a specific piece of information, such as contact information, product support, or files they want to download. Anticipate and plan Website Design principles 10 for the actions and paths that users are likely to choose when they traverse your site. Provide direct links to the areas of your site that you find or expect to be most in demand. Remember that users want to get to your site, retrieve their desired information, and move on.
3) Use Active White Space:
White spaces are the blank areas of a web page, despite of the color you choose to give them. Use white space deliberately in your design, in preference of the second afterthought. Good use of white space guides the reader and defines the areas of your page. White space that is used purposefully is called Active white space and is an integral part of your design because it structures and separates content. The Active white space is the strongest part of the design. White space is any area of the screen that does not have content, regardless of your background color.
Passive white space comprises the blank areas that border the screen.