You are currently browsing the category archive for the ‘Web Media’ category.

I’ve been studying about web accessibility lately and have been thinking about how the frustrations I run into on websites I visit would be compounded if I had a disability. By extension,  I’ve renewed my patience with my grandmother when it comes to the web.

I frequently use the keyboard to navigate around pages. If that was the only means of interfacing with the computer I had, there are several websites I wouldn’t be able to use at all because the creators failed to include “focus” as a state when setting the display of links in the CSS. Without the “focus” state specified, keyboard navigation can be difficult or impossible. If you don’t know where you are, there’s no telling where you’ll end up when you press RETURN.

I know someone who has severe sight problems and can basically only see one letter at a time on a large monitor. For him, surfing the web is probably easier using a screen reader. For those who need a screen reader, if the document has no structure, i.e. there are no headings, ordered lists, or tables (for tabular data only, folks!), then the user won’t be able to know what’s most important on the page or that the random items being read are actually in a table.

A relative of mine has hearing loss. It’s not profound, but it is enough that it affects how he uses the web. He’s less likely to listen to a podcast, since the audio on those isn’t always clean. But, more importantly, he then has no access to the content because, more often than not, there is no transcript provided. Fortunately, in my research I came across a website that will provide a free transcript for any podcast submitted. This is a real boon, since most transcription services charge, and quite a bit I might add.

Universal accessibility remains an ideal to which we should aspire, a fitting topic to be thinking about on this MLK day. If web developers make it a priority to ensure their mark-up is validated, that will be a good first step. Beyond that, pledging to adhere to the W3C’s Web Content Accessibility Guidelines (WCAG) to at least level A conformance will go a long ways to making the web accessible to all.

Advertisements

As promised, I’ve got 6 web sites today looking at good design and bad design. Of course, it’s all relative. I had a hell of a time getting these pictures to look just OK in the previous post and I imagine this one won’t be any easier. That’s the downside of working with a template – it’s not always the right fit. So while this could be construed as the pot calling the kettle black, I do realize my layout leaves a lot to be desired. I’m just not letting that get in the way of getting the post out the door. (I’ve promised myself that any post started *will* get posted.) On to the comparisons, and keep in mind these aren’t the worst or best I’ve ever seen – just the ones I’ve seen today:

Web Sites with Poor Design

  1. Poor Design - online print site Ex 1

    Poor Design - online print site Ex 1

    Online Printing site: At first glance this is not bad. There’s a nice order to the informational images near the top. However, the block of text below those is too dense. The line length is too long to comfortably read, the line height is too close, and the font size is too small. Also, the left column of navigation buttons is almost overwhelming.

  2. Poor Design - online print site Ex 2

    Poor Design - online print site Ex 2

    Another Online Printing site: Obviously, this page isn’t plagued with densely packed text, however the pricing table is almost impossible to read without holding a piece of paper up the screen so your eye can follow the line to a particular data point. Not to mention, the font size will make your eyes cross trying to discern that much information.

  3. Poor Design - online print site Ex 3

    Poor Design - online print site Ex 3

    One more Online Printing site: I’m not saying online printing sites are notorious for poor design, I’m just showing what I’ve found. This is the home page, scrolled down the page just a bit to show the absolutely dense section of text that *no one* will actually read. Add to that the plethora of little boxes all around and I’m not sure where to look first.

Web Sites with Good Design

  1. Good Design - Ex 1 web design site

    Good Design - Ex 1 web design site

    Web Site about web design: This is one of the definitive sites for reading about good web site design, so, as expected, it has a nice layout. There’s plenty of white space for the eye to rest and the layout is reminiscent of an upscale magazine. (Actually, for good layout, this site is in my top ten favorites.)

  2. Good Design - Ex 2 movie rental site

    Good Design - Ex 2 movie rental site

    Online Movie Rental site: For ease of use, this site is tops. That ease of use springs directly from the layout. If the layout is so dense that it’s hard to find what you’re looking for, then the layout is a FAIL. There’s an immense amount of information on this page, but the layout ensures it’s not overwhelming.

  3. Good Design - Ex 3 blogging site

    Good Design - Ex 3 blogging site

    A Popular Blogging site: Again, lot’s of choices on this page, but they are not so densely packed as to be a turn off. The information is accessible and nicely ordered with enough white space for each element to be independent, yet part of the overall layout.

Well, that’s all I’ve got. Do you agree or disagree with the reasoning behind my choices? What are some sites that stand out for you as particularly good or bad? Let me know in the comments.

Since I began studying design in earnest a year and a half ago, I’ve gotten in the habit of noticing lay-outs of printed matter and comparing that to websites I visit. I’ve looked at website design with a shrewd eye for years, but it’s only recently that I’ve been making the comparisons with print.

Print Matter

Here’s six pictures of different layouts, from magazines to newspapers to ads, showing both good and bad layout. As I said when I was 5 and forced to eat everything on my plate, “Worst for first.” We’ll start by looking at what I consider sub-par design. These are by no means the worst examples of design I’ve seen, just what I came across today.

  1. Example of bad layout design - mailbox flyer for rental store

    Example of bad layout design - mailbox flyer for rental store

    Mailbox flyer for rental store: This piece has way too much going on, there’s not much white space in which to rest your eyes, and it’s difficult to tell what the main focus is. Yes, it’s advertising all the amazing things you can get, but the text is small and I spent all of 5 seconds looking at it before tossing it aside because it required too much energy.

  2. Example of bad layout design - mailbox flyer satellite TV

    Example of bad layout design - mailbox flyer satellite TV

    Mailbox flyer for satellite TV: This isn’t all bad, the main parts of the offer have sufficient padding around them. My big objections are the top where it looks like a salesperson ingested too much company propaganda, got too excited about more than 150 channels, and threw-up up on the page, much to his boss’ dismay. Then there’s the fine print. I always object to fine print because it’s impossible to read, but at least it’s usually at the bottom of the page. This ad includes fine print in the boxes of the main offers. Ugh!

  3. Example of bad layout design - ad page weekly alternative paper

    Example of bad layout design - ad page weekly alternative paper

    Ad page on back of weekly alternative newspaper: This is also not horrible, especially considering the source. I include it here because it’s just not good. There’s too many colors and typefaces, not enough white space. Yes, the ads are competing for attention, but they end up all loosing the fight because it’s too much trouble to look at this page and glean anything from it.

Now on to the good design. Again, these aren’t the best layouts I’ve ever seen, just what I found today.

  1. Good example of design layout - weekly alternative paper

    Good example of design layout - weekly alternative paper

    Weekly alternative newspaper: Considering the type of publication, this is a decent layout. It has a comfortable line-length so reading isn’t too arduous. There’s a nice pull-quote to draw the reader’s attention and there’s enough white space to give some breathing room while not too much to drive up the costs of a small paper. It’s a good compromise.

  2. Example of good layout design - designers magazine

    Example of good layout design - designers magazine

    Magazine for design professionals: This is a magazine I’ve gotten for years and have always enjoyed reading. The layout affords breathing room and the artwork is not crowded. There’s quite a bit of white space on the page, giving the feel of a higher end publication.

  3. Example of good layout design -tutorial magazine

    Example of good layout design -tutorial magazine

    Magazine for digital manipulation of photographs: This magazine caters to artists and designers who want to learn more about the programs they’re using. The layout of the tutorials is clean and organized. It’s easy to follow the steps and see the process from beginning to end.

So, there’s 6 examples of printed matter looking at layouts and paying particular attention to white space – the empty space on the page. Without it information gets lost and reading is too hard.

The next post will look at six examples of web sites and compare the layouts, and the use of white space, to the printed examples.

Example of quirks rendering mode

Example of quirks rendering mode

Way back when we were putting square pegs into square holes, everything worked well.  Then one day the keeper of the holes into which the square pegs were placed realized the holes were made incorrectly and were not conforming to specific standards. To remedy this situation and ensure holes and pegs would work far into the future, the keeper made a new set of holes. Unfortunately, the pegs wouldn’t fit, because they, too, were not conforming to the same specific standards. Since these pegs were very popular, by peg standards, the keeper was forced to create a way for the square pegs to fit into the now round holes.

This is a really simple explanation for the existence of “Almost Standards Mode.” In reality, the pegs were web pages and the holes were browsers. In 2002, Netscape was ready to release a new version of their browser which would render HTML more closely to W3C standards. Conforming to standards is good – it ensures more universal access to the web. However, in testing, Netscape discovered sites whose design was based on images inside tables would be utterly broken, and that was a large portion of the web.

Example of standards rendering mode without table border

Example of standards rendering mode without table border

To illustrate how the pages were broken, let’s look at some before and after examples. I’m using screenshots of a page created using tables for layout purposes. I’ve mentioned previously that I have made pages using tables for design, and it’s true. So did most everyone else at the time.

The example page I’m using is similar to a file I used to teach table creation in Dreamweaver 4. The source code has no DOCTYPE defined. This was in 2000, before DOCTYPEs were universal. I have added a 1 pixel border to the table to make it easier to see what’s going on. In actual use, god forbid, this would appear as a seamless picture.

The first image shows the page with without a DOCTYPE specified. With no DOCTYPE specified, the browser automatically renders the page in Quirks mode. This means that non-standards compliant HTML will render properly. The images in the table will be displayed without any white space around them because the table cells automatically shrink to fit the images.

The second image shows the same page with a DOCTYPE of HTML 4.01 STRICT in place, which results in standards-based rendering. Standards-based rendering means that the images will sit on the text baseline by default resulting in white space below the images inside the cells. (You can read a well-supported explanation of that here.) For pages which rely on sliced images butting up against each other to create a seamless picture, this creates an utterly broken page. In the example, you can see there’s a beautiful white line in the middle of the picture. The third image shows the table border displayed again and the white space in each cell.

Example of standards rendering mode

Example of standards rendering mode

Eric Meyer is the hero who saved the day by creating Almost Standards Mode and has a lovely, detailed post about how the new mode came about here. And, this page has a great explanation of how and why to implement the different modes.

So, what’s the upshot of all this? Use round pegs from now on and you’ll not have to worry about it. But, when someone comes to you with an antiquated square peg, you’ll know what to do.

Biscuits (cookies or bread) on a plate

Who wants a biscuit?

Up until recently, the way a lot of people learned HTML was by checking the source code of a page and seeing how it was written. While this is an excellent way to “get under the hood” and really get your hands dirty in a learning experience, there are some drawbacks.

For example, as with learning the meanings of unfamiliar words from context, there’s always the chance that the true meaning of the word, or, in our case, the actual use of an element, will be misunderstood. That’s especially true if the element wasn’t used correctly in the first place. Many a web page has been written with poor semantics, either out of ignorance of correct tag usage or because of the that’s-the-way-we’ve-always-done-it attitude, and learning how to write HTML from those pages just perpetuates poor semantics.

Why should we be wary of semantics and write semantically correct HTML? Good question. Let’s start with what semantics means. Semantics refers to proper meaning. If you are talking about what you had for snack and tell someone you had a biscuit, you could be talking about a cookie (if you were British) or a type of bread (if you were American). In order to understand the meaning of the word “biscuit” you must know the context, in this case whether the speaker is British or American.

In the realm of HTML, there is only one context (conveyance of information) and everyone who writes HTML understands it. This is, of course, where my analogy starts to break down. So, if everyone understands the context of HTML why are good semantics important? To understand that, we need to go back a bit in time and look at how HTML was first used.

The basic elements of HTML (<p>, <h1>, etc.) format text in specific ways. The  <p> element always starts text on a new line and includes a line break with each use. The <h1> tag formats text as very large and includes a line break. People started using the tags not as ways of identifying the different parts of information, but as formatting elements to get the text to look the way they wanted. Back before CSS, designers even used the <table> element to format a page in a grid, with each cell of the table containing a sliced up piece of the page. With this use of tags, the actual meaning of the element was lost. In other words, semantics be damned.

So back to our question: why are good semantics important? There are several reasons, ranging from accessibility to cost reduction. We’ll explore a few of them here, along with some specific examples of HTML tags and their proper use.

First, accessibility. Enter the text reader. This is a device that allows sight-limited people to browse the web. It reads each page, not by reading the text of the page as we see it, but by reading the tags in the source code to get oriented and then reading the text defined by the tags. As I understand them to work, the text reader looks in the source code for a title (<h1>) to read before reading any other content. If what is defined by the <h1> tag is not actually the title of the content, but instead, something trivial that the page designer wanted to be larger and set apart from the rest of the content, then you can imagine the annoyance and frustration of the user at not being able to parse the information on the page and find what he is looking for.

Let’s look at three examples of HTML tags and how they’re used with proper semantics.

Blockquote

The <blockquote> element defines a block of quoted text. This is useful to a sight-limited user because the text reader reads the tag and the content is defined. As for formatting, the <blockquote> tag starts a new line and indents the content contained in the tag. The tag allows attributes to further identify the content, namely, “cite” and “title”, which make the content that much more relevant to the user. In proper use, the code looks like this:

<blockquote cite=”http://www.famousquotesandauthors.com/authors/f__d__roosevelt_quotes.html” title=”Franklin D. Roosevelt”> “Freedom of conscience, of education, of speech, of assembly are among the very fundamentals of democracy and all of them would be nullified should freedom of the press ever be successfully challenged.”</blockquote>

and the output looks like this (note that the quote itself is indented and when the mouse hovers over the quote, the assigned “title” attribute appears.):

Example of blockquote tag output

Code & Preformatted Text

The <code> element defines computer code and allows the browser to display the code as written rather than render it. This is useful for writing tutorials, etc, and browsers display the content of the <code> tag in the default monospace typeface. One caution, however, is make sure the line length isn’t so long that the line gets cut off or causes a horizontal scroll bar. (The blockquote example isn’t contained in a <code> set because it got cut off.) In proper use it looks like this:

<code>
&lt;p&gt;This is an example of the paragraph tag and it contains an example of the &lt;em&gt;emphasis&lt;/em&gt; tag, which displays what’s inside the container in italics.&lt;/p&gt;
</code>

and the output looks like this:

example of code tag output

To display computer code with good code formatting, use the the preformatted text tag. The <code> tag set is nested inside the <pre> tag set and forces the browser to retain the spaces and returns written in the source code. Proper use looks like this:

<pre>
   <code>
      h2
         { font-size: 2em;
           font-family: arial;
           color: orange;
           border: 3px solid red;
         }
   </code>
</pre>

and the output looks like this:

example of pre tag output

The designer doesn’t have to deal with any other formatting and the content is properly defined. You’ll notice there’s a difference in how the two examples are displayed. This is due to how WordPress CSS handles the different tags. Both, however, are displayed in fonts other than that of the body copy.

Back to Good Semantics

In the past, these tags have been used to display text as indented, monospaced, or with  the spacing in the source code, not necessarily to define the actual content of the page. Using HTML elements for design defeats the purpose of the tags and renders them useless for content management. In addition, misuse of the tags and not following good semantics practice can lead to code bloat and cost increases.

Modern practice in creating web pages uses HTML to define the content and CSS (cascading style sheets) to format the content. With this ideal, code can be simpler, cleaner, and easier to manage. If HTML is used to handle the display of the content, then every time a change needs to be made to the display someone has to go through the code line by line and make the changes. This can take hours and be very costly.

If the formatting is handled externally by CSS, then it’s an easy change of the whole site. Only one line needs to be changed in order to make all blocks of quoted text render in blue serifed font, as long as the HTML tags have been used properly. Applying that change is as simple as defining <blockquote> in the CSS to be blue and serifed.

So, you can see how practicing good semantics makes the web a friendlier place, both for users and authors. Now, who wants a biscuit?

Team Ninja pitching our Adobe challenge project

Team Ninja pitching our animated ad to the Adobe Challenge judges. Photo credit: Leslie Jensen-Inman

A week ago Saturday I went to Amped in Atlanta. Amped was a hack day following the Web Directions conference, which is something I had never participated in before, and it was the first ever 10-hour hack day. Hack days, traditionally at least 24 hours long, bring together a wide variety of technologically savvy people to quickly solve posed challenges. I wasn’t sure what to expect and, since I had so much homework to finish, I was even considering not going. I’m so glad I went.

Several of my classmates attended, as well, and I decided I wanted to get on a team comprised of people I didn’t know. I figured since I had practically the same skill set as most of my classmates I’d learn more and be better able to put my own skills to use on a different team. So, pushing myself out of my comfort zone, I put my name and phone number on the board under “Have Skills” and set about waiting.

The team that contacted me was wanting to enter the Adobe challenge of creating an animated advertisement promoting open web. (Open web, put succinctly, is using cross-platform technologies to create websites that anyone can use. The sites can be viewed equally well on computers, mobile devices, TVs, etc.) We also worked on two other projects and entered three additional challenges. Those projects involved re-imagining how football games are viewed in the age of internet enabled TVs and creating a PalmOS app for GT students to access the student directory and have instant contact via phone or email from within the app.

I found working under such tight time constraints invigorating and realized that I was able to think more creatively in that atmosphere than I normally do. Of course, part of that was bouncing ideas off of my teammates, who were fantastic to work with.

The hack day also gave me a chance to meet industry gurus and learn a tremendous amount from them. Doug Schepers lent his expertise in SVG to our project – talking with me about ways to prepare the graphics and Ruby about the best ways to implement our plans.

Throughout the day, mini-workshops were held on all of the relevant technologies and topics making the learning environment one of intense collaboration as one team member would attend a session and debrief others on the team. Relly Annett-Baker was on-hand to discuss content strategy and I talked to her a bit about the particular wording on our ad.

Thanks very much to team members Ruby Zheng, Faried Amani, and Oge Nnadi. I had a great time working with you guys. Maybe we can do it again next year. Also thanks to John Allsop and Maxine Sherron from Web Directions for putting on an amazing event and to the sponsors, Adobe, Palm, and PayPal, for making it possible. I’m definitely looking forward to attending again and again.

Wireframe for a website

A hastily drawn wire frame for a fictitious site.

I’ll always be the first to admit that a blank page scares me because there’s no structure on which to start hanging ideas. When designing web sites and web pages, that’s where wireframes are a lifesaver.

In order for content on a site—and on an individual page—to be relevant, easy to consume, and quick to find there needs to be agreement between the designer, the clients, and the site users. Wireframes provide the opportunity to have a dialog between these three entities, albeit usually the site user is in the form of a developed persona.

I’ve used wireframes from the beginning and have never considered creating a website without first sitting down with the client to discuss the needs of the site and how to navigate it.  But, I’ve only used wire frames for the site navigation. Having just read Shades of Gray: Wireframes as Thinking Device by semanticwill, I’ve realized that there’s so much more I can do with wireframes to make the design and implementation process of web site creation easier and more enjoyable. (It’s never fun trying to get somewhere when you have no map and a deadline.)

Wireframes are great for proposed data location on an individual page, which takes into account the relevance of the information and it’s hierarchical position in context with other information elements. Often there’s disagreement on the position of individual elements and wireframes offer a visual perspective that can help answer questions like, Is this where customers expect to see this kind of information? or What is the best place for this type of information?

Like creating thumbnails and roughs when working on a graphic design solution, wireframes allow the designer to try different ideas in order to determine the best information layout. And, clients appreciate seeing the proposed solution rather than listening to a description of it and trying to imagine what it will look like.

With an “updated” tool in my toolbox, I’ll be better able to meet the client’s needs and, just as important, enjoy the process.

I had the opportunity to hear John Allsopp speak today about the future of web design. John is a web evangelist, author, speaker, and teacher of CSS. And, his enthusiasm for the future of the web is contagious.

As I previously wrote, my interest in the web started about 18 years ago, when the web was in it’s infancy. Bad design abounded causing limited access to information and frustration for designers and developers alike.

John took us on a history tour of the web, which sounded a lot like the “we had to walk barefoot uphill – both ways- to school when I was your age” speech a lot of us have heard from our parents as kids. But, in terms of browser capabilities in the 90’s and early ’00’s, that’s certainly how it felt.

Creating functional, good looking sites required lots of graphics that had to be cut and precisely placed to reduce the page loading time. One large graphic might actually be 4 smaller ones. If a link to a graphic was broken, 1/4 of the picture was missing. Animation was limited to GIFs and, really, it was best not to use it at all.

CSS (Cascading Style Sheets) was introduced in 1995 allowing developers to control the look of a site for the whole page instead of element by element.This was a major breakthrough. It’s use expanded with CSS2 in 1998. I started learning CSS2 just before I changed course for parenthood. At the time, I was amazed by what CSS made possible.

After seeing what John demonstrated today, I’m chomping at the bit to learn CSS3. Editable type independent of the user’s computer?!? Wow. GPU generated background gradients?!? Neat. Clean, beautiful animation that adds to the user’s experience?!? Unheard of – until now that is.

Pair CSS3 with HTML5 and the future of the web looks amazing. I’m excited that I no longer have to trudge uphill -both ways- to make great looking websites.

Densmore Typewriter ad 1896Writing is everywhere – boxes, bottles, billboards, magazines, newspapers, flyers, email,  and websites- to name a few places. There’s one commonality between these disparate forms of writing: they use language. How each form uses language differs greatly and each has different expectations from the reader’s point of view.

Writing in newspapers and magazines is informative, educational, and opinionated depending on which section of the paper, or what kind of magazine, you’re reading. We, as readers, expect newspapers and magazines to have high editorial standards and be written clearly. OK, you got me there. I don’t think Us or People consider their editorial standards much, but I digress. Generally, we read these materials at leisure – over coffee in the morning, waiting in a doctor’s office, or riding on public transit.

From other printed ephemera (boxes, bottles, billboards, flyers, etc.) we decidedly expect less. The copy used on them is primarily for persuading – “Buy XYZ because it’s chock full of vitamins and minerals!” (Gee, I didn’t know foot powder needed vitamins and minerals.) The copy on these sources is written for accessibility and generally has a friendlier approach. These materials are typically read in passing – walking down grocery aisles, driving down freeways, grabbing the flyer off the windshield in the parking lot before tossing it in the back seat.

Websites, while including all genres of printed material, are read differently. We go to a website for information, to answer a question, to complete a task, and in doing so we expect to access that information or perform that task quickly and easily. Anything that gets in the way of our purpose is, at best, annoying, if not downright frustrating.

Across all these disparate forms of writing is an overarching expectation – good grammar. Reading something that’s well written imparts a sense of confidence in the information. If the writer misuses their, they’re, and there can we really trust him to know what he’s talking about? Likewise, if the writer’s writing lazily and using netspeak are you going to respect his opinion or knowledge?

In exploring writing, I came across a blog post on how to write a good first message for an online dating service. The number one rule was “Be Literate.” Messages that used netspeak, had gross misspellings, or bad grammar (or all three!) didn’t get a a response. I can’t agree more. Well written messages, articles, etc. give confidence to the information and, more importantly, eschew obfuscation. (One of my favorite phrases, because it doesn’t follow it’s advice.)

I was first introduced to the world wide web in 1992 by my brother. I found it fascinating and wonderful and compelling and ugly and awesome. And, it was something very few people knew about. I remember when I lived in Chicago, my brother and I would always point out the URLs we saw in ads, usually on the sides of buses, because they were so rare.  That was 1993/1994.

Homepage for Morgan Adams website (2001)

Homepage for Morgan Adams website (2001)

Fast forward a bit, and I had the opportunity to put my fascination to work. I had learned quite a bit about website construction and disliked most of what I saw. (If you’re ever curious about early website “design”, check out the Wayback Machine for some gross examples.) I started creating websites, for pay even, and getting complements on them, which was even better – not that I’m dissing a good pay check, mind you.

What I liked most about my work was making the information accessible. Most people were putting wizzbangs and fugliness on the sites to make them eye-catching, but in turn, rendering them almost useless. My mission was to make clean, simple, useful websites that gave people the information they wanted in the least amount of clicks.

Injury Law page of Morgan Adams website (2001)

Injury Law page of Morgan Adams website (2001)

Fast forward again to today and that’s still my goal. However, I’m playing catch-up because I took some time out to be a stay-at-home parent and the technology passed me by. When I went back to work I was mainly working on internal sites for clients where I was not the developer, but the maintenance tech. So, I can’t wait to find out the answers to questions I’ve wondered about, but not found the answers to, like why was <bold> replaced with <strong>. I know it’s standard now, but haven’t discovered the reasoning behind it.

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9 other followers