4.2 Picking apart pictures and links: A technical overview

Working through the MacDonald book, Creating a Website: The Missing Manual, has brought me to an important point in web development — images and links. After all, what would the web be without correctly functioning graphics and links to interesting content and places? With that in mind, following are some of the finer points of dealing with these elements.

MacDonald notes that images are often found all over websites and this is a significant point to note because the more graphic-heavy a website is, the more trouble slow connections will have in downloading the contents in a timely manner. Elements from fancy fonts and logos to menu buttons with rollovers are all likely to be graphic elements. Enter optimizing images for the web. This step can't be emphasized enough because even fast Internet connections can get bogged down with huge files. The basics here are that images must be sized in a photo editor, like Photoshop, to ensure they are the correct dimensions and a resolution of 72 dpi before they are inserted into a web page. They can also be compressed to varying degrees; Photoshop's "save for web and devices" is great for this purpose because it offers a preview of how much image data will be discarded as you step down the quality to reduce the file size and it displays the loading time for a dial-up connection. These features let you examine the visual and consider the timeframe in order to make the most informed decision regarding the compression of each JPEG (GIF and PNG compress less, so this feature is not relevant for those file types).

Additionally, JPEGs are generally the file type of choice for pictures while GIF files are more appropriate for logos and line art. PNG files can be used to save images with transparent areas, however they are apparently not supported by older browsers, which I interpret to mean Netscape or Internet Explorer 4; I have mixed feelings here — sure the web should be accessible to the widest audience, but I have a hard time finding good reasons to run browsers that are extremely outdated. That said, GIF files can also support transparency, so I may reconsider my file-saving practices for the time being.

MacDonald emphasizes that transparent images do not always display correctly in various web browsers, however sometimes they are just necessary. His solution to avoid transparency by making the graphic background the same color as the web background is a good one, provided you don't ever change that color or use an image instead of a plain wash. Imagine trying to grab exactly the right area of a background image to paste behind a transparent area in a graphic. It would be somewhat difficult to ensure the graphic was lined up precisely with the background in order to avoid any jogs in the image edges. Besides that, he mentions how the edges can look crummy in a transparent image, but careful image editing will avoid this problem; making sure to create exact edges around a graphic  from which you are removing a white background isn't difficult in Photoshop, it simply takes a little time and patience.      

This is an example of several graphics with transparency; notice the edges of the photo border and the ink splotches (both scanned) have been carefully cleaned up. The text is also a graphic, but didn't require clean-up as it was typed onto a transparent background from the start:

In reading about inserting links into the code, let me start by saying how ecstatic I am that most of this is done automatically in a program like Dreamweaver. Even down to changing the color and properties of links, CSS rules can be easily created in Dreamweaver without having to manually add the correct elements to the code. That said, it is always good to understand what is going on in the background because eventually something will break and need to be fixed by hand. One discussion of note was MacDonald's description of how to add a link that opens in a new browser tab. He rightfully points out that many people find this annoying, but that at times it is necessary. For example, if I supply a link to my blog, which is hosted on Blogger, people would have to use the back button to return my site. Obviously they may never get around to that and might therefore miss out on the contents of my site. This is also true of other links to external websites. I have been experimenting with some code from DynamicDrive.com to incorporate this feature, but after reading MacDonald's instructions for doing this I might try it his way. Basically, it involves adding a tagged to the anchor element, and the code would look something like this:

(a href="LinkedPage.html" target="_blank"> Click me

As usual, the biggest issue here is making sure all those characters are entered perfectly.

Image linked directly from thumbnail displayed in a white window:

Image linked from thumbnail and displayed as part of a page maintains consistency:

Last, MacDonald covers the importance of checking links. There is little that is more irritating than having broken links — link rot — within a site. Even one broken link in an entire website sends an awful message and users seem to be less and less forgiving of this all the time. So, a website is an investment and it is imperative that it is checked periodically to ensure that it is working. The online link checker from the W3C is a fantastic tool for this purpose. It checked my website and verified all the links in 13.8 seconds, when previously I have been manually clicking through to perform such verifications. Obviously this is a great tool to employ for periodic website checks, especially for websites that are much more complex than mine, which is only at a few pages right now. 

Check out the W3C link validator here:
http://validator.w3.org/checklink

4.1 Color shock

Color is arguably the most significant element in any layout because it is likely the first thing users will notice and, ultimately, it will set the tone for how they perceive the contents of the work. Jason Beaird offers a good (and thankfully brief) recap of color psychology in The Principles of Beautiful Web Design-you know the stuff: white = purity, blue = calm, green = nature, and so forth. What he mentions of note here is that while people tend to have similar reactions to colors, each experience is still unique, depending a person's background, associations, and cultural factors. So, color psychology is a guiding force, not a rule, that can help designers choose colors that make sense and will likely impart the correct "feel" for the website contents or message.

Choosing colors is a little complicated, however, and can quickly become a mess. Sticking to a color scheme is a good idea, and should theoretically keep us from the tendency towards tackiness that I have mentioned before. That is, defining a palette that works should keep us from deciding that a little purple randomly placed here, a little pink over there, and a little green at the top would look nice. The key is harmony, not chaos. So, in his discussion of complementary color schemes (always a nice choice to create visual excitement) Beaird mentions discordant colors as a potential pitfall. Indeed, used poorly these close-but-not-quite complements can be difficult to look at. However, they can also create some visual excitement because they are highly contrasty but more unexpected than a true complementary pair; the key that Beaird notes is that they MUST be used sparingly.

With that in mind, I began to think of a notebook and planner combination that I carried last year-hey, inspiration comes from anywhere and everywhere. In fact, the planner was a light lime green and I was beyond excited for the calendar year to shift so that I could begin carrying it to meetings with a muted red, hand-tooled leather notebook. The combination was striking and I got more comments to that effect than I care to repeat here. Anyway, with that in mind I decided to use this concept of red-green discordant complements to see if it could work as a web color scheme. I went to the Well Styled Color Scheme Generator 3 and selected my lime green hue from the color wheel (#2CFF00, if anyone is into hexadecimal color values) and picked complement from the menu of schemes. Sure enough, it generated a selection of colors that included the too-bright exact complement, as well as the more muted red (#A60010) that pairs beautifully. Why does this work? Because the combination is unexpected and fresh, which is what good design is about. The main problem I have with straight complements is that they often scream out sports team, or in the case of bright red and green, holidays.

An important side note here is that not all color combinations work in just any configuration. Universal usability can become an issue with many colors-more, in fact, than you would think. Certain colors are just hard to read together because the contrast levels are insufficient. This is especially true for people with less than perfect eyesight, and it is worth checking the contrast levels before using poor text-background combinations. The Snook Colour Contrast Check is a good tool for this purpose because it gives you a definitive Yes or No as to whether the colors pass the W3C criteria that they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen." In this case, the answer is no.

Check out the Snook Colour Contrast Check here:
http://snook.ca/technical/colour_contrast/colour.html

Fortunately, the beauty of creating a color palette is that I'm not stuck using only my complementary colors, which I don't really want to use as a background-text combination anyway. Instead, I'll add some tints and shades to create a more rounded selection of colors that are harmonious, but will offer me other choices. In fact, Making the background white is probably a good choice to offset the intensity of my colors. That way they can lead the viewer's eye around the page without bombarding them with intensity. Simplicity is key here, and my color scheme will remain with white, black, and a few shades of red and green. The Colour Scheme Designer has another great feature that allows you to preview the look of your chosen color scheme in both light and dark versions (basically, the main color as a "dark" background or white as a "light" version of the page). In this case, while I would change some of the specific color placement, the preview gives me a great idea of how my color choices would look.

Here is my color palette with green as the predominate color on a light background webpage:

Here is the same palette displaying red as the predominate hue, also on a light background:

Check out Colour Scheme Designer here:
http://colorschemedesigner.com/

I really do like this color combination. It is bright and fun and definitely not what I normally gravitate to in design. It is possible to use these colors in a way that accents rather than overpowers, and the tools outlined here are a tremendous asset to testing and choosing the specific values that look right. That said, I am going to save this combination for another project. As Beaird notes, there are more elements to consider in a design, and I think this particular combination will wind up competing with the photographic content I plan to include in my website. Harmony of all elements is the key, and so for now my search for the perfect palette will continue on.

3.3 Numbers and trends

I've spent some time over the last couple weeks writing about web creation basics and great design examples, so today I'm going to devote a post to numbers and statistics resources related to the Internet (and statistics about nearly everything else as well). Obviously such data plays a large part in understanding web usage trends and audiences and can be important in understanding demographics in relation to design considerations.

For starters, the websites with the largest bulk of information have a three-column design. ICANN, Nielson, CAIDA, and the Pew Research Center sites all employ this format in order to squeeze a tremendous amount of data into a relatively small space. The Pew Center homepage, in particular, makes relatively good use of this design to showcase the wide diversity of trends that they track. Everything from Internet usage to the "daily number" which, today, tracks the fact that less than half of Americans feel a television is a household necessity, and yet purchases of flat screens are on the rise—how fickle we are in our opinions and actions and how useful that distinction between the two must be to retailers.

The Pew homepage does a good job of balancing the negative space with the text- and image-heavy columns but even so it takes a moment to adjust to the packed page. The use of bright banner style headers helps to organize the information and cut down on a cluttered feel, and makes it possible to present all of the latest information in one place that is relatively easy to scan. The navigation is clear and organized, which is imperative for a site that presents this volume of content. The statistics related to technology tracked by the Pew Center are especially useful because they offer some insight into who is using the Internet and for what, as well as general attitudes towards technology. This is obviously important (at least for larger organizations) in gauging what Internet services and resources will offer the biggest payoff, as well as gauging where the target audience might be. For instance, if you have a service that targets foreign-born Latinos, it would be useful to know that the Pew has discovered that "while 85% of native-born Latinos ages 16 and older go online, only about half (51%) of foreign-born Latinos do so." Obviously, exclusively Internet-based access would not be an effective means of outreach to this population.

The Pew is a great resource because all the information is well researched, socially significant, easily accessible, and free.

Check out the website here:
http://pewresearch.org/

The Internet Traffic Report is another statistical resource that is worth a look, but this time the data is all technical. Essentially, every five minutes the website updates with a fresh view of data flow around the world. Why should you care? On a large scale you can track significant issues and slowdowns in traffic that might be affecting particular geographic areas; on a smaller scale, you can investigate your own troubles in connecting to websites and determine if it is a problem with your local connection or a general slowdown in some particular region of the Internet. The website is really straightforward with no frills. It measures Internet traffic and that is what it presents. A couple cool features though, allow you to add the live stats to your webpage or to download a Windows compatible version to track the stats in real time without visiting the website (no Mac support here though, which is an issue that, albeit a common one, is still a problem).

Check out the website here:
http://www.internettrafficreport.com/

Another simple website that tracks basic stats is Internet World Stats. Just as it sounds, it offers data on Internet access numbers worldwide. What is useful here is the ability to put information in perspective. For instance, while total world Internet users are approaching 2 billion in number, the percentages according to population are telling; Africa may have almost 111 million users, but that represents only about 11% of the population. It really spotlights the reality of Internet access (and by extension information access and communication) in a global context. This data may also be useful in clarifying assumptions. For example, Asia may have over 800 million users, but that represents only 21.5% of the population; this is in contrast to common beliefs that Internet access in Asian countries is much more widespread.

Check out the website here:
http://www.internetworldstats.com/stats.htm

On a more complex note, the Cooperative Association for Internet Data Analysis (CAIDA) fills an important role in bringing together organizations, from commercial to nonprofit to government, with the goal of sharing information that can help the Internet infrastructure grow in a manageable and organized manner. This is certainly an oversimplification of the role this organization plays, however the best way to get a sense of the diversity of projects, recommendations, and theories this organization investigates is to check out the website. It has a wealth of information that is organized into easy navigation tabs-publications, research tools, data, etc. and is a great resource for scholarly research, although the diversity of papers and datasets can be overwhelming. This is definitely a repository for all Internet-related research topics imaginable. 

Check out the website here:
http://www.caida.org/home/ 

In general the information above is enlightening, although it is more immediately useful in a scholarly context or to a large organization that needs to more carefully weigh Internet audiences and access issues (I have no illusions that thousands of people around the world will need or want to access my website). Still, all of this data helps to shed light on actual usage trends and some of the more resource intensive sites provide a lot of good information about not just audience, but the structure of the Internet as a global entity. Gaining a better understanding of this sheds a lot of light on the communication potential and currently realities of the Web.

3.2 Layout

"Good design transcends technology."   
                  - Jason Beaird, The Principles of Beautiful Web Design

The first chapter of The Principles of Beautiful Web Design is a testament to the idea that design is about communication, and that effective communication is both easy to use and understand, as well as aesthetically pleasing. Beaird gives an always-timely review of the principles of art and includes commentary and illustrations of how these principles can be applied effectively to web design layouts. In general the book is laid out with good design in mind, underscoring that the principles covered are universal, transcending both web and print materials. The cover of the book in itself showcases good design by exhibiting unity in the choice of of complementary text colors, which mirror the logo colors. It also utilizes proximity in the close clustering of the paper cranes in order to have the three items appear as a single group, as well as repetition of the folded paper shapes; asymmetrical balance is evident in the large size of the main title block relative to the smaller cranes, which carry equal weight because they are repeated in a cluster.

Perhaps more importantly, the cover exhibits layout according to the classic rule of thirds, which Beaird explains extensively in chapter one. The paper cranes occupy roughly 2/3 of the space from left to right on the bottom half of the page while the title block occupies roughly 2/3 of the space from right to left on the top half of the page. The remaining third of the page in each area is left as negative space, which helps the overall design breathe and focuses attention on the contents of the positive spaces.

So why the rule of thirds? Because it is a good rule of thumb for producing harmonious layouts. For example, take this quick scribble from my sketchbook:

Even though it is only a compilation of crossing lines, it has more visual interest on the page because it follows the rule of thirds. The two straight lines at the left-hand side of the page show a rough division into thirds. Notice that the bulk of the drawing appears in the top 2/3 of the page; additionally the densest area of lines is concentrated in the middle third of the page while the lines in the top 1/3 are bolder, but used sparingly.

Applying this to web design, here is a basic layout for the main content and navigation areas of my site using the rule of thirds:

 










Obviously, the gray box represents the area where the appropriate content would appear. Notice that this box occupies roughly 2/3 of the area from the right edge of the page. The remaining 1/3 of the page is left as negative space to help balance the content area. The logo takes up 1/3 of the horizontal space at the top of the page. Of course, while the design is harmonious, it is not the most dynamic layout ever. I will definitely go back and play with the page elements to see if I get something a little more exciting. The rule of thirds, after all, is a guiding layout formula but it isn't intended to lock design into blocks, per se. Visual elements that occupy certain spaces and land at certain points (like eyes or text hitting on a "third" grid marking, for instance) hold more weight because our eyes are naturally drawn to those areas, but this isn't a hard and fast rule. Playing with the placement of some elements while keeping others along the main grid lines should help create a harmonious and simultaneously engaging design. We'll see...

3.1 Cascading style sheets and coding by hand a little more

Every keystroke matters. One thing coding by hand does is eliminate laziness. Even one forgotten bracket or letter can make a page display wrong. Cases in point: I just spent several minutes figuring out why I inadvertently managed to change all the text into a headline format. The culprit? I forgot the slash in the closing tag. I also managed to lose my image, but fortunately realized quickly that I simply accidentally moved the image into a different folder while reorganizing files. And more disturbingly, I typed test/css instead of text/css into the style sheet link because the title was close to the file name test.css; that one took me a surprisingly long time to locate. These problems were easy enough to fix, but the point is that everything related to web design and coding requires extra attention and care. Any misstep adds a lot of time spent trying to locate the problem.

Matthew MacDonald does a good job in chapter six of explaining the value of using style sheets to control the look of webpages. In fact, he breaks down the distinction between savvy web editing and clunky code into using style sheets or not. Basically, in the best design scenarios the XHTML document defines only structural elements of the page, such as what is a header while the style sheet defines all the formatting rules, such as font colors and styles that make the page unique. A browser grabs the style sheet along with the web pages and applies the rules consistently. Here is my simple page from an earlier blog, created using TextEdit. The style sheet was also created in TextEdit and shows how adding a link to the header code of the webpage file impacted the look of that page:

The "h1" designates that the style rule applies to level one headings, which you see below in the brown, centered, italic heading:

Now the real magic, of course, has to do with overall application. All kinds of rules can be applied to the external style sheet that will govern elements such as the look of different areas of text, colors, spacing, and so forth. When the style sheet is applied to a multipage website it helps to add consistency to the overall site. It is also possible to embed style sheet directions into the XHTML code by way of inline style. As MacDonald points out, however, this creates a bulky line of code and if you wanted to change multiple elements on various pages, you would have to apply this method to each instance where you wanted that change to occur—obviously a time consuming endeavor. Overall, it is very clear why CSS is useful and since it is even easier to apply within a program like Dreamweaver than it is to code it by hand, it is a powerful tool for managing the look of a website.

2.4 Basics

It's worth noting here that while code is infinitely fixable, it isn't always fun to try. Every character has a function and the MacDonald text offers the timely reminder that while while browsers may be capable of fixing forward slash/backslash confusion, such an error in coding can prevent page elements from displaying. The mantra here is don't get lazy with your typing—it really does matter.

Chapters three and four of MacDonald's Creating a Web Site offer a practical overview of hosting-related topics and tools for authoring a webpage and deserve a little attention here. While I already have a web host (GoDaddy) and a domain name (the ever popular www.myname.com format), reading about the components of how this stuff works behind the scenes was, dare I say, really interesting. For starters, I didn't realize that a browser actually goes onto the web and grabs the IP address from the DNS catalog (Domain Name Service) in order to decipher a domain name like www.rebecca-fitzsimmons.com; I also didn't realize that each computer on the web has a unique IP address. On a side note, this knowledge is awesome because now I am starting to understand all the tech speak in discussion forums on justin.tv that revolves around how a banned user—like one that has a channel streaming copyrighted animated Batman or X-Men episodes—makes it back online at that site. They apparently work around the system identifying them by acquiring a different IP address through a proxy. Anyway, in general understanding the routes that information travels is helpful in wrapping my mind around how computers communicate over the Internet.

Moving on to domain names, according to MacDonald I have committed one of the cardinal sins of choosing a domain name—I have used a dash. My choice was rebecca-fitzsimmons.com as opposed to rebeccafitzsimmons.com because it is easier to read. I understand his rational that people get confused by dashes and forget them or think they are underscores, however I also think that we must be close to getting over that confusion. Is it really that difficult to find the correct key on the keyboard? I have to have more faith in people than to think they would give up over these kinds of typing setbacks. That said, I stand to lose very little if someone abandons an attempt to access my personal website; if I were running a business site I would take his advice to heart and pick an easier to type version. As for his other recommendations, he rightly points out that picking an odd domain like .biz or .net is a bad idea. I had this same conversation the other day with my aunt when she asked me if she should select tastetheworld.biz or tastetheworld.info for her web storefront since the .com version was unavailable. I don't think I would be wrong in assuming that most people are unaware that these domains even exist. Instead, I told her to pick a close name with a .com, like MacDonald champions, and she went with tastetheworldonline.com; not the loveliest title ever, but at least people will be more likely to find the site.  

For web hosting, I have found GoDaddy to be a good service, and MacDonald lists it in his suggestions. There is a range of plans and the basic hosting is cheap and more than sufficient in terms of features. Beyond paid service, though, MacDonald does cover free hosting services; the most notable features here are the insurmountable issues that can crop up, from ad banners and content limits to lack of FTP support and lots of down time or slow loading that can make your site seem non-functional. Enough said— paid web hosting seems well worth it just have a modicum of control and consistency.

For web creation tools I own Dreamweaver, but I still like knowing about the freeware versions of products out there. I had no idea that Nvu was last released as KompoZer, but I do know that I have seen some techies with cool websites detail the creation tools they used on the site, and I see KompoZer mentioned rather frequently. This seems like a good endorsement to me, plus there is definitely a cool factor involved in creating something amazing using just freeware and coding knowledge. Maybe one day I can aspire to that. In the interim, Dreamweaver works just fine.

I was interested to see that MacDonald was able to explain the basics of creating a webpage in four separate editors simultaneously. Of course, I suppose as more people seek out both free and paid software it makes sense that a lot of the features would work the same and be located in intuitive places in the toolbars and menus. That level of standardization is definitely a plus, especially if you have to work back and forth with different programs (like at home and at work, which is usually annoying). Anyway, that's all I need to say here about hosting and creation tools. MacDonald breaks it all down and provides a great overview for anyone that needs pointers on getting started. Now, moving on to more complex matters. . .

2.3 My foray into grasping code

In my last posting I mentioned that the World Wide Web Consortium (W3C) has outlined and continues to update all kinds of standards related to the web; here is a perfect example:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This line of code (a document type definition [DTD] or doctype) at the beginning of a webpage tells the browser what standard was used to write the page. In the absence of this code the browser will just assume the whole page is written in the older HTML language, which can pose problems when it comes to proper rendering of the page. The particular line of code above conveys the message that XHTML 1.0 standards have been used, with the "strict" meaning that 1.0 has been followed to a T and no HTML elements are present. This is essentially the gold standard in web design because HTML is being phased out. XHTML 1.0 "transitional" allows some HTML elements to be used in the coding, and inclusion of "transitional" in the code clues in the browser. According to Matthew MacDonald in Creating a Web Site: The Missing Manual, the strict version of XHTML is now the most commonly used; I checked out the code on a few different websites using the page source view, and sure enough, while I found examples of the other types, strict was by far the most common version in use.

Interestingly, however, I did notice that all the pages I've created in Dreamweaver were automatically coded using XHTML 1.0 transitional (although there may be a setting somewhere that I haven't found that changes this automatically). This default suggests we aren't quite at the tipping point where HTML elements are so uncommon and cumbersome as to disappear. In fact, MacDonald points out that there is already an XHTML 2 standard that, when finished, will completely break ties with HTML. But while W3C is ready to take the next step, finally cutting ties with an old and enduring language is a little more daunting to browser software companies. In response, a competing standard is being developed (X/HTML 5) that preserves compatibility with HTML. So, we'll see who wins out because this is a pretty big step; the battle between competing technologies and standards is timeless though. Think Beta and VHS or Blu-ray and HD DVD—epic battles. For a techno war that is even a little more current, Gene Steinberg of TechNightOwl suggests that, "Apple wants to purge Flash from the online world," and is taking steps to exclude support from popular devices like iPhones and iPads. He adds that, "as the installed base of people who can’t view Flash content grows, it’s only a matter of time before more and more sites decide to drop it and use other methods that are compatible with all or most browsers." The forward march of technology standards and supports never ends… So, we'll see if the W3C wins out sooner rather than later on the XHTML standards front.

Check out the rest of Steinberg's Apple-Flash article here:
http://www.technightowl.com/2010/02/apples-not-so-secret-plot-to-change-technology-standards/

Moving on to the nuts and bolts of code, here is my first webpage created the old school way using TextEdit (with no Dreamweaver automatic code in sight!). Delving into tags and elements is actually extremely useful since eventually you have to look at the code—even in a WYSIWYG program. Besides, learning why you can't just type along and add line breaks without coding them is priceless (like a reality check that the spacing on your computer will not look the same on all others, and that you are not the center of the web universe).

This is the result of my use of italic, bold, and image tags in a basic page (without ANY extras, like meta tags). Still, it is pretty cool to see how this looks as code and in the display:

In the past I have enjoyed checking out the coding behind various web pages, although a lot of it reads like a foreign language. This little exercise has been surprisingly enlightening in terms of how various tags work. Perhaps more importantly, however, this activity and the MacDonald text have driven home the notion that code is dynamic and pliable, and while it might take a little time and work, any error can be found and eliminated with a little deleting and typing. Kind of a liberating idea.

2.2 Great reminders about usage (a.k.a. channeling simplicity and usability)

In reading chapter two of Matthew MacDonald's Creating a Web Site: The Missing Manual, I got a good reminder about all the different elements that must combine to make up a successful site, ranging from basic pages and hyperlinks to fancy extras such as animations and decorative buttons. However, the most important point made here is perhaps the most difficult to follow: Keep it simple.

I am unsure why humans tend towards tackiness in design when given the chance. I have mentioned several times that I prefer the look of clean, open design and yet when I do a print layout I initially tend to add more items than necessary; I also get sucked into all the different possibilities when confronted with animation and multimedia capabilities. (We are almost all dazzled by eye candy.) A significant step in my design process then becomes paring down elements. I know I am not alone in this because I have read over and again in design literature that if something doesn't serve a purpose it probably functions as excess. MacDonald further points out that too much glitz isn't just poor quality from a graphic standpoint, but that a lot of extra nonfunctional elements can actually alienate your viewers. This is a powerful message.

Beyond the look of a website, simplicity can also equate to better functionality. MacDonald focuses on consistency as an important element in helping users to understand the logic of a website. This is so important and yet so easy to overlook when you get caught up in your own thought processes. Single navigation bars, similar headings and page structures are essential to adding unity to the design, as well as to helping users navigate with ease. The Internet has made information available at a click, and it has also made us more impatient and less willing to look around. If the structure doesn't immediately make sense many people will leave the site; all the carefully crafted contents in the world don't matter if nobody sticks around to view them. That said, simple and elegant navigation and design does not have to mean simplistic. A beautiful website that takes a few clicks to understand is fine, as long as the navigation is then consistent within the site.

In talking about simplicity, it is important to mention standardization as well. The W3C (World Wide Web Consortium) is a group dedicated to developing protocols and guidelines that help to create high quality standards for the web, mostly dealing with web technologies. This is important for ensuring widespread access to contents. For example, the W3C is constantly seeking to address discrepancies in how websites are displayed by various browsers. Of course, complying with certain standards on the designers end can only help make pages accessible and functional to the widest audience, which is an obvious goal of putting information on the Internet in the first place. The website for the W3C is a great resource for learning more about web standards and updates to those standards, all of which are clearly explained. For example, the recommendation on Cascading Style Sheets reads:

2.1.3.4 CSS – Cascading Style Sheets

Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements, by assigning styles to element types, self-defined classes of elements or individual instances.

Stylesheets can be used to consistently define the appearance of an entire site. Following the introduction of CSS, the W3C recommended that layout-specific features in HTML be phased out and replaced by stylesheets, creating a simpler and more structural World Wide Web.

Even if you aren't as interested in keeping up with the latest recommendations, the W3C website is a great place to learn some of the language associated with web design. They are in the process of adding an extensive number of pages that define terms such as HTML or internationalization. Each page follows a template that offers a basic definition, examples, links to learn more about the topic, and information on the status of W3C activities related to the topic. This information is written in an accessible form and seeks to bring much-needed simplification to the techno-jargon associated with web design. This is an incredibly useful and extensive resource, and the tutorials offered through the W3C schools help solidify this terminology into practice. 

Check out the websites here:
http://www.w3.org/

http://www.w3schools.com/html/default.asp

So, the conclusion I've drawn here is that it is essential to remember to keep user needs and compatibility issues at the forefront of your design concerns and to remember to keep things simple and elegant so that your message can come through.

2.1 The search is on

I have ventured into the world of free CSS templates and layouts this week. (CSS, for anyone not familiar with the tech shorthand, stands for cascading style sheets.) The main thing I adore about the Internet is how freely people share resources with one another. From tutorials and fonts to free graphics and web layouts, the world is awash with customizable designs and resources. Free CSS, for example, is a website that includes 120 pages of free CSS templates in all kinds of layouts and color schemes. Since these templates are customizable, it should be easy to benefit from the built-in navigation bars and page elements while still tailoring the look and feel of the page to my personal tastes. In the past I have created templates from scratch, but there is no doubt that a pre-made template will help streamline the process.

I have not found the right template yet, however I have ruled out certain overarching design choices. I like clean design and open—but purposeful—space on a web page. Purposeful space means it helps to create an airy feeling without looking like something belongs there; for an example of non-purposeful space look at the Free CSS website in the area beneath the social network buttons. The empty white box with a gray outline looks like it should have a graphic or some other content appear upon rollover. In fact, I wondered for a while if my browser was simply not displaying some content and I found myself annoyed at having to scroll down the page (on every page) past the empty block in order to see the menu of style sheets. This was a really bad design choice.

Speaking of clean design choices and appropriate use of space, any page with too many separate elements placed near one another usually looks like a jumble.  Most of the templates that utilize a three-column structure in the body of the page function this way. The long skinny columns and differing content jammed onto a single page usually creates visual clutter. I much prefer a top navigational structure, perhaps some sub-navigation buttons on the side, and one or two main areas in the body for content.

For example, a great template on Free CSS is Busy, by lhoylhoy:

I am also not a fan of an extremely busy background behind the page area. Most of the great web design I have seen uses either a solid color that relates to the page color scheme or a relatively simple background texture.

Check out Free CSS here:
www.free-css.com/

I have also been considering color choices for my web page and have been experimenting with Adobe's free Kuler website. This site allows users to browse public themes as well as create and share unique color schemes. The schemes can be downloaded for use in design work. What I love about this site is that you can upload an image and create a color scheme based on that image. An automatic generator will pick dark, medium, and light values from the image and compile them into a swatch. This swatch can be further customized by selecting a hue and clicking elsewhere in the picture to change that particular element. This provides a great way to create a color palette for a web page that ties into the background image in order to unify the design.

I am leaning towards a more subtle, earthy palette, as seen below, in Beachy and Prairie scribbles, but also tried out something bolder with Post it, just to keep my options open. I also made each color profile available for public download because I love that I can contribute to the spectrum of free resources out there.

Beachy:

Prairie scribbles:

Post it:

So far Prairie scribbles is my favorite, but I intend to keep trying out other schemes until I find the best one to complement the contents of the site I am putting together, which might mean something a little more neutral (maybe the ever popular black, white, and charcoal).

Check out Kuler here:
www.kuler.adobe.com/#

1.3 And a few more websites for the week

A couple more websites were assigned for review during week one, and they actually both yielded some exciting finds elsewhere on the web. First of all, Websites That Suck is an aptly named site that seeks to teach quality web design by exposing people to the REALLY awful stuff that is out there. Truly, it is amazing how tacky people become when they are confronted with flashing, bobbing, swirling, rotating graphic possibilities. Seriously, just because you can animate something and add twenty colors, it doesn’t mean you should. One of the terrific resources available at Websites That Suck is the checklist of fatal web mistakes—make any one and the site is a flop—and the checklist of potentially fatal mistakes which, when made en masse, also spell the end. I have to say, though, I disagree with these items from the latter list:

•  Our site doesn't use white or off-white color for background
•  Our site doesn't use black text
•  Our site uses graphics as links

Seriously, if every website was some variation of white with black text the web would be a personality-free place. Also, I really feel that linked graphics are appropriate as long it is clear what will be at the other end—think about cropped thumbnails that open image pages. Do you really want to click a text link called “John in Studio” rather than a cropped version of that picture? I don’t think so.
Beyond that, Websites That Suck is an all right page. It is certainly not pretty, but it does the functional job of showcasing the egregious designs out there. I believe it is meant to showcase some poor design choices itself, but honestly, it can’t even come close to the bad design it features on external sites. Given that, I would rather see a beautiful, sleek design dedicated to displaying the horrors out there. The juxtaposition of good and bad would make the point stronger

Check it out here:
http://www.webpagesthatsuck.com

Speaking of bad design choices, the real treasure that emerged from Websites That Suck was the George’s Township Civil Defense EMS website. It was the “daily sucker” today and it actually hurts to look at it. In fact, I am still blinking trying to make sure that what I see is real. They have literally tiled a crummy picture of an ambulance next to a dingy building as the background. Also, midway down the page it reads, Fayette_County_Ambulance_Service, and those underscores are not mine. There are no additional pages beyond the index, which is unheard of (it is the web and that kind of indicates stuff is linked to additional pages within a site). All the external links are broken as well. Now, granted, this site is so bad it might actually be a hoax; I could see someone creating a site just to make it onto Websites That Suck in the same way people without talent try out for American Idol. Fifteen minutes of fame is fifteen minutes of fame—no one said it had to be positive.

Check it out here (or don’t):
http://www.georgestwpems.org/

To offset the visual assault I took a look at FWA (Favourite Website Awards). This website is neatly designed, and I guess they do believe that black and white is right, because they seem to have followed that white background/black text rule from the “potentially fatal” checklist detailed above. That said, the use of neutrals, namely black, white, and dark gray, is extremely effective here. Everything, down to the custom Twitter and Facebook buttons, falls into this color scheme. The effect is a clean space to showcase the real contents of the website, which are details from external sites judged to be examples of good design and/or innovative content. In fact, this website is actually beautiful (almost Zen) in its simplicity because nothing competes.

Check it out here:
http://www.thefwa.com/

Of course, with a website devoted to showcasing other effective websites there was bound to be a more intriguing find.  Sure enough, the exciting element of the session was an external website from the Vitra Design Museum called Hidden Heroes. This website is beautiful and functional, although it breaks many of the rules of classic good design. In fact, some people with short tempers might get frustrated with the site before ever seeing the contents; if you click around a little, however, it is easy to figure out and well worth the effort. The only downside here is the gratuitous use of sound effects when you scroll over elements. The sounds can be turned off at the bottom of the page, but it would have been better if the audio was as subtle as the timeline or gallery text. An audible whisper would have been lovely; as it exists now the sounds are gimmicky and just plain garish.

The site itself is a companion to a traveling exhibition of everyday products that are so ingrained in our lives as to be invisible. Everyday heroes of great industrial design like Scotch Tape and Post-it Notes are the features. The site itself contains photos, trivia, background, and interactive graphics that accompany each product. The unique element is that you can design your own exhibit.

The index page has a central strip of color bars surrounding a box with the exhibition title. Scrolling over the bars yields an object name and thumbnail in the title box; clicking a bar adds it to your custom tour. Once done, you click “enter exhibition” for a personalized gallery of objects. The navigational elements are hidden behind tabs at the sides of the page, which is supposedly a design problem. In this case, however, it keeps those elements from cluttering the sleek bar of text that opens to pages about the objects. Sure, some people might be a little confused at the navigational structure; some people might not understand that grabbing the object bar and pulling it to the side will expand it; some people might miss the subtle gray “gallery” text. But all these elements make the page unique and beautiful. It is in itself designed to be a work of art, and art does not have to play by the rules. Besides, anyone that can’t spend a few minutes wrapping their mind around a slightly new navigation structure probably won’t care about the fact that art is supposed to push boundaries. No big deal. The rest of us can revel in the fantastic concept.

Check it out here:
http://www.hidden-heroes.net/