Web Design Issues. Thane B. Terrill Summer 1999

Transcription

1 Web Design Issues Thane B. Terrill Summer 1999 This presentation covers some of the most common issues that are confronted by the serious web designer. Web design has many unique characteristics that make it challenging to work with. The first thing to remember is that the web is not a monolithic system. Rather, the web is an infrastructure on which a number of different technologies operate. Not only are the number of technologies involved vast, but there are few reliable standards. This results in a bewildering number of options -- some of which are dead-ends. After going through this presentation, please use the class discussion list to ask any questions that you still have. Please note that many of these issues are fairly contentious and that not everyone will agree with every conclusion reached here. In fact, this lack of agreement -- raising sometimes to status of a religious war -- is probably the only thing that the entire web development community has in common! 1

2 Web Editors Text-based editors Programs like HomeSite and BBedit providers the user full control but offers little help on advanced features. It often takes a few steps to know how you code with actually look. Visual Editors Programs like PageMill work on the assumption that everything can be done without seeing the code. Hard to fix when things go wrong Web development started off with simple text editors. Many web sites have been done with Notepad (Windows) or emacs (Unix). Soon programs began to appear that offered features that automated some of the more tedious tasks while keeping the text editor environment. The first developers were computer types and scientists. Once the power of the web became apparent to the general public, it was not long before many people wanted an easy way to design web pages. The answer was a new class of web design program that allowed the user to design the web page visually. This method uses the concept that if one places text and graphics on a blank screen in the way he or she wants to look, the program will do whatever it takes in HTML to make that happen. Professional web designers have traditionally -- if one can use the word traditionally in a field only a few years old! -- looked down on visual editors. Visual editors often create very unwieldy HTML code. Not only does this make for heavier pages but the HTML was frequently difficult to modify. While it is still true that text-based editors are still the ultimate in control over one s HTML code, many professional now supplement their work with a new breed of visual editor. Visual editors can allow the designer to see his or her work in real time. In the old days, the designer had to save the HTML code and view it in a browser. This multiple step process if obviously not as fast as working on a visual editor that shows the changes as they are being made. Professionals usually switch between the two methods. 2

3 New Web Editors Programs like FrontPage and Dreamweaver combine visual editing and text editing. The new editors allow for the addition of complicated processes via objects These objects add the code required to make an advanced feature work Site management and group collaboration features are now being added FrontPage is the ultimate in the of the development of visual editors for the non-technical designer while Macromedia s Dreamweaver is the new breed of visual editor intended for the professional. The primary difference between the two programs is how pre-existing HTML code is handled. FrontPage 98 has no reservations about taking a page that has been creating elsewhere and modifying the code and file names to suit its own system. Dreamweaver recognizes that the code it sees is most likely the result of careful tweaking by a serious HTML designer and thus should left alone. 3

4 Common Image Formats GIF & PNG-8 used for images with few color variations and basic patterns does not lose information can be animated often used for buttons and banners JPEG used for photographs and other images that have great contrast will lose some information when the file is created jpegs can be reduced at many quality levels and displayed in several ways While it is enough to know that GIFs and PNGs are used for solid colors and JPEGs are used for photographs and for other images with lots of gradation in colors, a serious designer will also learn about the technical characteristics of each image format. Each image format uses a specific system to analyze and compress the source image so that it maintains the best appearance as the image s physical size is reduced (size in this case means 100k or 10k and not dimensions of the image). In many cases, the designer does not have control over which images are to be used. However, when a designer can pick his or her own images, knowledge of these image systems can make a significant difference. For example, the GIF system can better compress an images with horizontal strips of color than the same image turned so that the strips are vertical. Knowing that horizontal stripes are fairly cheap in terms of file size, can allow the designer to do some impressive design that actually does little to increase the download time of the page. It s important to remember that the web is one of the few areas that the characteristics of the component files are important to the viewer. In a magazine, the reader does not care if the photographic was produced from a 5 meg file or a 200 meg file. The paper equalizes both images. This is not true on the web, the difference between a 50k image and a 5 meg image is the difference between the user seeing the image and not seeing the image. 4

5 PDF A multi-platform image delivery system based on the PostScript printing language Closely maintains the original document s appearance regardless of the operating system Does support security features (4.0 version supports digital signatures) Supports hyperlinks Byte-serving allows for one page to be downloaded at a time Free viewers and inexpensive creation tools PDF is a format that has yet to come into its own. It s a powerful tool that can solve many of problems inherent in HTML. Whereas HTML is structured on the concept that the design should be malleable so that it can be displayed on multiple platforms, PDF fixes the design precisely. Both systems answer the question of how to distribute information in a way to be viewed on multiple operating systems, a variety of monitor sizes, and an assortment of screen resolutions. The number of possible combinations are so vast that a designer can take little for granted. XML (extensible Markup Language) technology will present PDF with its first real challenge. XML allows for a preciseness that can match PDF. It will be interesting to see how the PDF format will respond to XML s challenge. 5

6 Some New Image Formats Flash (by Macromedia) is a vector based display system easily resizes to user s screen small image sizes can be animated PNG (8 & 24) is a replacement for GIF and JPEG. Live Picture ( multi-resolution display format allows for zooming and scrolling Flash and other vector-based systems bring a new range of opportunities to the web designer. A normal image is created by recording what each dot in an image is doing in order to create the desired appearance. A vector-based system creates an outline of an image using a set of lines and curves and then fills in the spaces with color. This system is very efficient for the right type of image -- a photograph would not be suitable -- and it allows for motion and resizing. Because a vector image is a set of mathematical equations, a simple recalculation can allow the image to shrink or grow -- even to spin around. At present, vector-based systems are not common since they require the browser to download program code that then reads the image. This is problem for older browsers and for those people not willing to download the helper program. Live Picture is an innovative system for handling the problem of how to show a great deal of information over a slow Internet connection. It uses what can be best described as progressive resolution. As one zooms into an image, an image server replaces the previous image with a new image of the zoomed in section. This selective downloading greatly reduces the amount of information that needs to be downloaded. Take a look at the demo found at 6

7 Web Languages Java - a full programming language with claims to support multiple operating systems Java Script - a text-based programming code that get interrupted by the user s browser Pearl - a text-based programming code that uses the web server s processor ActiveX - Microsoft s answer to Java Plugins -- Acrobat PDF viewer is one example HTML is frequently thought of as a programming language when in fact it is a markup language. Java, Pearl, ActiveX, and plugins are examples of true programs. Java was hyped to the pointed that it was to solve every problem a computer could have. Needless to say, nothing is a good answer for every problem. Java has proven to be too slow and difficult to operate on multiple platforms. The creed of write once and run everywhere has been replaced with the unofficial saying, write once, debug everywhere. This is not to say that Java is not useful. It can be very useful for doing fairly simple tasks on web pages -- like roll-over buttons and intelligent on-line forms. The idea that full-blown applications would be distributed over the web has been placed on the back burner after a few high profile failures by Corel, IBM, and others. Where Java is proving very useful is in the area of connecting old mainframe sources of information, like student records, with web servers. Even today, long after the supposed death of mainframe computers, 80% of all computer data is residing on a main frame system. Few people advocate the removal of mainframes as was once popular. The key is figure out how to integrate the strengths of a mainframe with the easy access of a web server. Java is showing itself adept in this area. ActiveX is Microsoft s system by which its applications can be moved into a web environment. On the Windows platform, it does compete with Java. It does not do a good job on other platforms and it has security issues that make it dangerous to use. 7

8 Browser Targeting Intranet / Extranet / Internet -- each has its own level of control over what can be asked of the user Required Functionality what is really required and what do you want just to look sophisticated Multiple Pages some or all of your site can be duplicated so that multiple browsers can be targeted Test your designs on multiple systems Designing a web site for an Internet audience is vastly different from designing for an Intranet audience. An Intranet is a web site intended only for viewing over an organization s private network. The designer can assume many things that cannot be assumed with the Internet. For example, the designer knows exactly the connection speed the user will have. Often, these speeds are many times faster than that used by external users. The designer can also specify which browser(s) the system will be willing to support. Having this knowledge allows the designer to create feature-rich web sites. Extranets have some of the advantages of an Intranet, but have the most in common with Internets. An Extranet is an Intranet that has been extended externally to a select audience. A distance learning class can be an Extranet. Access is limited and the designer can specify which browsers and plugins that will be supported. The Internet is a real jungle. Large commercial sites deal with the diversity of browsers and connection speeds by designing what are in effect multiple sites. The web server senses what the user has as he or she enters the web site and sends those pages that have been optimized the user s platform. Many sites have two or three versions of the same site. Another way to handle the same issue is to enter commands that some browsers will see but others will not. This has the effect of encasing several pages within one file. The ultimate solution is a unified standard for browsers -- but that goal is still elusive. 8

9 Web Site Statistics A web hit is the most inaccurate method by which to measure web traffic Volume is important, but the distribution of users throughout the web site is also important Are parts of your site being missed? Are parts of your site more interesting than you expected? Look for the screen resolution and browser versions of the visitors Web servers collect vast amounts of information about every action a user takes on a web site. These web statistics become the source of revenue for commercial sites and a useful tool for the web designer. Unfortunately, web statistics are not as meaningful as the vast quantities of data would lead one to believe. The well known web hit is perhaps the most over stated statistic. A web hit simply a record of one element on a web page being sent to a user. To increase one s site one only needs to increase the number of elements on a page. A page with 30 small pictures will therefore appear to be 30 times more popular than a page with 1 element. Always be careful when someone uses web hits as proof of popularity. Unique visitors are much more meaningful a measurement. Unfortunately, even this statistic may not be correct since many large corporations and Internet Service Providers make copies of popular web sites so as to increase the speed of web transfers. The user may think he or she is connecting to your web site, but in fact he or she is actually getting a copy off the corporate web cache server. These cache servers make the Internet more efficient, but throw a large monkey wrench into the web statistics evaluation. Web statistics are good for getting a general idea of activity, for seeing which pages are the most popular, for seeing if some areas of the site are being missed by the users, for determining which browsers and operating systems are most common, and for accessing the demographics of the population visiting your site. 9

10 Costs Many web sites appear to be free since the work comes out of other people s work time A small site done professionally should run between five and twenty thousand dollars Corporate sites often run in the hundreds of thousands and sites like the one that ran the Olympics are in the millions. Building a web site is often like bringing home a baby pet alligator. It starts out cute and manageable but quickly gets to the point where it sees you as its next meal. Many people start a web site because it is so easy to get started. In a weekend, one can have a web site of a dozen pages or so. After everyone congratulates you, they start requesting more content and features. If these features were not in the original design, the site frequently becomes an unmanageable mess that will have to be rebuilt at great time and expense. The other main problem is that the ease of which a site can be started gives management the idea that web sites are free. Everyone knows a 30 second commercial during the Super Bowl can run hundreds of thousands. Likewise, major web sites can cost millions of dollars. If possible, determine where your web efforts are heading and plan for that eventual reality and not just the first step. If your site is going to include thousands of pages and interactive elements, plan for these features now. The systems you will use and the budgets you need are best determined at the beginning. 10