T2L5.doc.doc

401 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
401
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

T2L5.doc.doc

  1. 1. T2L5 Site Design Considerations: Displays Objectives After completing this lesson, you will be able to: • Recognize the most widely used monitor size and resolution types. • Describe how monitor size, resolution, live space, color and page size affect web page design. • Describe and justify design situations where flexible or fixed design approaches would be appropriate. • Understand the importance of considering the intended audience when making design decisions. • Describe what web page features gain the viewers’ attention. • Understand how web page design is affected by alternative displays. Introduction As a web designer, nothing can cause more frustration than seeing your design look totally different on someone else’s computer. As we learned in our previous discussions, browsers and individual user preferences (fonts, size, color, etc) can play a significant role in this appearance. Bur display technology also has an equally important role in the look of your designs when they are made public. Understanding the importance of display devices and their characteristics can contribute greatly to the success of your site. The following information will look at how site design directions can be influenced by display technologies and viewing conditions. Two characteristics of displays, which will have major implications for web designers, are monitor size (resolution) and color depth (number of displayable colors). But these are not the only consideration that site designers will encounter in the development of a web site. Designers must also consider a whole new spectrum of devices that are becoming more popular as our society gets much more mobile. These devices include such technology as PDA (personal digital assistants) and cellular phones, which now provide web-browsing capability. • Monitor Sizes and Resolution • Designing for “Live” Space • Monitor Color Considerations • Flexible and Fixed Web Page Designs • Choosing a Page Size • Design to Gain Attention • Alternative displays 1
  2. 2. T2L5 Additional Resources Designing for Different Resolutions http://hotwired.lycos.com/webmonkey/99/33/index0a.html?tw=design 2
  3. 3. T2L5 Monitor Sizes and Resolution Designers have a unique challenge, considering browsers have the capability to be resized to whatever dimension that will fit on the viewer’s display. This, of course, is only limited by the size of the monitor each individual has to display the browsers itself. Thus, there is no ‘on-size-fits-all’ approach like in traditional print design, designer must designer with an unknown target display device. For conventional print designers, this can be a quite frustrating dilemma since there are many considerations that are outside the control of the designer. One can certainly see why monitor resolution issues are among the most debated topics in web design communities. The conclusion is that there is really no one right way to design for the Web and design decisions should be made based on knowledge of your audience and the purpose of the site. The purpose in looking at monitor sizes is to help determine the optimal size for the Web pages being designing. Monitors come in a variety of sizes typically measured in inches. Typical sizes are 13”, 14”, 15”, 17”, 19”, 20”, and 21”. But the size alone is not a very good measurement for determining your Web page size. A more meaningful measurement is the monitor resolution. Monitor resolution is the total number of pixels that can be viewed on a screen. The higher the resolution, the more information can be displayed on your screen. Users can adjust the resolution on their machines via the control panel. Once you determine the number of pixels, you can begin to design your web pages with this mind. What is a pixel? It is the smallest unit of measurement displayable on the screen. If you think of the screen as a grid or matrix, it would represent one unit within that grid. These are some common monitor resolutions (width X height in pixels) supported for Personal Computers. This list does not represent all resolutions available; only the most common configurations. Macintosh PC 512 x 384 640 x 480 640 x 480 800 x 600 800 x 600 1024 x 870 832 x 624 1280 x 1024 1024 x 768 1600 x 1200 1152 x 870 1280 x 960 1280 x 1024 1600 x 1200 3
  4. 4. T2L5 To make this issue even more confusing, monitor size and resolution may have no direct relationship. The video card, which drives the video signal to the monitor, may support multiple resolutions. This is a function of the capability of the video card and the personal viewing preference of the individual. For example, a 17” monitor could display one of multiple resolutions (640 x 480, 800 x 600, or 1024 x 780) because the video card has functionality to support all those resolutions. Additionally, if the individual set his resolution to 640 x 480, the characteristics of the display are much different in appearance than a monitor set to 1024 x 870. A rule of thumb is that the higher the resolution the more information is displayed on the screen. This will have an impact on your screen images, in that the images will look smaller and crisper as the resolution is increased. If these same images are displayed at a lesser resolution the images will appear much larger on the monitor. Also, an image the fills the screen at a high resolution may be only partially visible at a lower resolution (because you are seeing less total pixels at one time). Because resolution is so important to the display of your Web pages, pixels are the most important measurement for web designers. Measuring in pixels provides the best way for designers to understand what their web designs will look like on monitors set to use various resolutions. Keep in mind that the most widely used screen resolutions are 640 X 480, and ~800 X ~600. Until recently, 640 X 480 was considered the most commonly available screen resolution (indeed, it was the maximum resolution many computers were capable of) and thus it was wise to design for this resolution. Lately, the ~800 X ~600 display seem to be gaining popularity. 4
  5. 5. T2L5 Designing for Live Space Once we understand how resolution works and its implication on the design of our Web pages, the discussion in not over. There are a number of considerations that impact your design that you must consider. One such concept to consider is that of “live” space. “Live” space is the actual screen real estate that you have to display your design. In determining the live space, you must subtract those elements of operating system and the browser which are displayed. These items are displayed when system and browser software are in operation (menus, applications windows, navigation tools, etc.) and reduce the amount of screen real estate available to display your design. The following illustrations and tables can be used as general guideline in developing your Live space design considerations. Remember these are just guidelines, they are not infallible. User preferences and individual browser setting will vary and alter the final outcome of how you pages might be presented. Maximum live space is a measurement will all available options hidden and minimum live space is a measurement will all options visible. Netscape Navigator Live Space Maximum/minimum resolutions for Netscape Navigator 4.0 (Windows 95) Monitor Resolution Minimum Live Space Maximum Live Space 640 x 480 623 x 278 635 x 380 800 x 600 783 x 430 795 x 500 1024 x 768 1007 x 598 1019 x 668 1152 x 870 1135 x 700 1147 x 770 1280 x 1024 1263 x 854 1275 x 924 Microsoft Explorer Live Space Maximum/Minimum Resolutions for Microsoft Explorer 4.0 (Windows 95) Monitor Resolution Minimum Live Space Maximum Live Space 640 x 480 623 x 278 635 x 380 800 x 600 783 x 398 795 x 500 1024 x 768 1007 x 566 1019 x 668 1152 x 870 1135 x 668 1147 x 770 1280 x 1024 1263 x 822 1275 x 924 Navigator Live Space Maximum/minimum resolutions for Netscape Navigator 4.0 (Macintosh) 5
  6. 6. T2L5 Monitor Resolution Minimum Live Space Maximum Live Space 640 x 480 603 x 313 617 x 402 832 x 624 794 x 457 809 x 546 1024 x 768 986 x 601 1001 x 601 1152 x 870 1114 x 703 1129 x 792 1280 x 960 1242x 793 1257 x 882 1280 x 1024 1242 x 857 1275 x 946 Microsoft Explorer Live Space Maximum/Minimum Resolutions for Microsoft Explorer 4.0 (Macintosh) Monitor Resolution Minimum Live Space Maximum Live Space 640 x 480 612 x 313 627 x 431 832 x 624 804x 459 819 x 575 1024 x 768 996 x 603 1011 x 719 1152 x 870 1124 x 705 1139x 821 1280 x 960 1252x 795 1267 x 911 1280 x 1024 1252 x 859 1265 x 975 6
  7. 7. T2L5 Monitor Color Considerations Color considerations also have a huge impact in displaying your designs. Just to review the basics, monitors display various numbers of colors. Color depth Colors displayed 24-bit 17 million colors 16-bit 65,000 colors 8-bit 256 colors 24-bit color images will dither when display at a lower bit depth. Dithering is a way to simulate more colors than are really present by adding a speckled pattern. There is a standardized palette of 216 colors that are displayed in the same on the Mac and Windows monitors called the Web Palette. These colors are used by web designers, when they want to have colors look to same for both platforms. Another color consideration, is related to designers who are primarily designing for monochrome or black and white display technologies. This is certainly a consideration for designer wanting to display on current PDA or cellular phone delivery. A rule of thumb is to design materials in high-contract to be able to adequately display these materials on B&W or grayscale devices. Remember only the brightness matters when designing for this potential audience. Another consideration is gamma value. Gamma refers to the brightness of the display, Generally speaking, Macintosh tend to have a deeper, richer color value but the same image on a PC tends to be washed out. Please refer to Topic 3, Lesson 8 - Graphic Formats for a full discussion on how color will effect your design. 7
  8. 8. T2L5 Flexible and Fixed Web Page Designs Another issue where there is considerable discussion today is on the topic of flexible versus fixed Web page design. There are advantages and disadvantages attributed to each approach. Likewise, the purpose for your site and the audience may be more suitable for one of these approaches. The following is a summary of the pros and cons of pursuing either of these approaches. Flexible Designs Flexible designs lend themselves well to Web page design because of the extreme flexibility of the Web medium. Because of the nature of HTML, text and graphics just flow into the available space in the browser. Thus, when browsers are resized the elements adapt themselves to the space available. Some designers see this as an advantage and incorporate these opportunities into their design. Other designers see this as a lack of control and want to exercise some control over the display of the information. Here are pros and cons for using flexible designs. Pros • Since the Web is a flexible medium and pages can be displayed in a variety of manners, based on multiple factors, flexibility allows for the customization of the design based on end user needs. • Use of white space is limited because information just flows into the design. Cons • Line length becomes unwieldy when displaying text on large monitors. Long lines are difficult to read. • Results are unpredictable in flexible designs. Tips for the Creation of Flexible Designs • You might want to consider using tables or frames in a flexible design to add structure for the display of your pages. • Tables are often used to divide the area in columns. By using percentages of the screen space, the columns and cells of the table will maintain relative proportions specified no matter the size of the display. • Frame can also be used as a method of breaking up your pages. Again, these can be specified using relative proportions. Fixed Designs Fixed designed Web pages provide more control over the user experience but provide less flexibility for the individual. Fixed designs will stay the same for all individuals 8
  9. 9. T2L5 regardless of the monitor size or the how the window is resized. This design strategy has its origin in traditional print design applications. Pros • Pages will look the same regardless of the monitor size. This is important to clients that want to present a consistent image to their customers. • Fixed length pages and columns provide a more control of over line lengths Cons • If the browser window is smaller than the design for the page, it will require horizontal scrolling to be viewed. Horizontal scrolling should be avoided because it is difficult to for the reader. • Type size is still an issue since users can set their personal preferences within their browsers. This will cause unpredictable result for fixed design formats. • Fixed designs, which stress control, are not in keeping with the nature of the web medium, which promotes flexibility. This makes it difficult to predictable design for Web pages like print design. Tips for the Creation of Fixed Page Designs • Use structural tables with absolute measurements specified in pixels as a means of creating fixed web pages. • Use Cascading Style Sheets in combination with fixed dimensions as a method of creating fixed web pages • Many of the HTML authoring environments have tools for developing fixed web page designs. • New Windows A frequently used method of controlling the design is to use new windows or pop- up windows as a method for creating a fixed page design. This method evokes the creation of a new window which will be opened at precisely the size indicated. This method assures that the contents will appear as designed. To do this the browser must be JavaScript-enabled. The JavaScript tells the browsers exactly how large the window will be when it is opened. This method is still subject to users preference set by the user such as font and font size. These can still cause unpredictable outcomes. 9
  10. 10. T2L5 Choosing a Page Size There is still some controversy over choosing of the optimal page size for your design. In the past several years, there has been a shift towards the 17” monitor as the de facto monitor size. Most new computer purchases will come stand with a 17” monitor, and can easily support an 800 X 600 screen resolution. Thus, many designers today design for 800 x 600 resolution live space - there's more room to work in! Other designers insist that there are many 14” monitors in existence and believe that 640 x 480 resolution is the optimal resolution and will design for the smaller monitor size. In the end, understanding your audience and the purpose of your site becomes critical in your design decisions. For example, if you are designing a site for PDA devices or for web designers, your design considerations will be much different and you will want to consider your decisions carefully. If you want to play it safe you can always design for the least common denominator - 640 X 480 resolution. 10
  11. 11. T2L5 Design to Gain Attention Many of the design principles uses in print design still have application for the web. These techniques have been worked out in the publishing industry though years of practice. Thus, designing for what a viewer initially sees is important in gaining readership for your site. Likewise, it is important to layout your site to imprint your key messages to your readers. A term carried from the newspaper industry to the web that refers to the first impression that a reader gets is : “Above the Fold.” This refers to the practice of placing key articles in the upper half of the newspaper to gain attention to key articles and information. Thus, in design for the Web you should consider placing some of these items in a prominent position to establish the importance of the information. • The name of the site (header) • The purpose of the site • Navigation tools • Key messages • Other important information 11
  12. 12. T2L5 Alternative Displays Increasingly there is a proliferation of new display devices for browsing the web. This will only increase as our society becomes more and more mobile and less tied to the cables that we are currently using to gain access to the Internet. This changing environment has significant impact on the way we design if we truly wish to design for all users to access our information. Two alternative display technologies are worth mentioning. WebTV The WebTV was one of the first devices to combine the broadcast medium (TV) and Internet access. This device combines a television and phone line with alternative browser technologies to provide a new sources for consumers to access the Internet. Some sites are being developed specifically for WebTV. This new medium greatly simplifies the access to the internet and reduces the technological literacy necessary to participate in the Web culture. WebTV has slightly different display requirements because it relies on the television resolution and all the imbedded limitations of that technology. The resolution is fixed at 544 x 378 pixels and does not permit the capability to scroll horizontally. Designers designing for WebTV also have the added limitation inherent in displaying graphics and use of color. Regular TV's resolution is low enough that small text is quite blurry in comparison to the computer. In addition, there are proprietary HTML tags that are required to specifically develop for WebTV. Hand-Held Devices The rapid growth of hand-held devices is also have a huge impact on the Web. This high growth industry has peculiar design implications. Hand-held device include a variety of devices such as palm-top computers, PDAs (personal digital assistants), and cellular phones. Many of these devices use what are called “thin clients”. Thin clients are browsers that run with minimal processing requirements and rely on server to do much of the processing. Hand-held devices are expected to be a huge part of the Web in future. The recently released Wireless Application Protocol (WAP) will increase the interest in accessing the Internet with a variety of hand-held wireless devices. 12
  13. 13. T2L5 13
  14. 14. T2L5 Displays Summary This lesson is designed for you to identify characteristics of display technologies and identify how these characteristics impact design decisions. When you are finished with the lesson, you should be able to conceptualize the following: • Monitor Sizes and Resolution • Designing for “Live” Space • Monitor Color Considerations • Flexible and Fixed Web Page • Choosing a Page Size • Design to Gain Attention • Alternative displays A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors. Monitor Sizes and Resolution The purpose in looking at monitor sizes is to help determine the optimal size for the Web pages being designing. Monitors come in a variety of sizes typically measured in inches. Typical sizes are 13”, 14”, 15”, 17”, 19”, 20”, and 21. Monitor resolution is the total number of pixels that can be viewed on a screen. The higher the resolution, the more information can be displayed on your screen. Once you determine the number of pixels, you can begin to design your web pages with this mind. Designing for Live Space “Live” space is the actual screen real estate that you have to display your design. Maximum live space is a measurement will all available options hidden and minimum live space is a measurement will all options visible. Monitor Color Considerations Color considerations also have a huge impact in displaying your designs. Here are some important things to consider: • Color depth - How many colors can be displayed. • Color palettes - There is a standardized palette of 216 colors that are displayed in the same on the Mac and Windows monitors called the Web Palette. 14
  15. 15. T2L5 • Black and white considerations - Designers developing for PDAs need to keep this in mind. • Gamma value - How bright are the images? The standard varies from platform to platform. Flexible and Fixed Web Page Designs In flexible designs, when browsers are resized the elements adapt themselves to the space available. Fixed designs will stay the same for all individuals regardless of the monitor size or the how the window is resized. Choosing a Page Size Many designers today design for 800 x 600 resolution live space - there's more room to work in! Other designers insist that there are many 14” monitors in existence and believe that 640 x 480 resolution is the optimal resolution and will design for the smaller monitor size. Design to gain Attention In design for the Web you should consider placing some of these items in a prominent position to establish the importance of the information. • The name of the site (header) • The purpose of the site • Navigation tools • Key messages • Other important information Alternative Displays Increasingly there is a proliferation of new display devices for browsing the web. Two examples are WebTV and PDAs. Both of these examples have unique display characteristics and must be accounted for in the design process. 15

×