You are currently browsing the tag archive for the ‘postaweek2011’ tag.

Thank you cards painted by Dalewood Middle School students

Thank you cards painted by Dalewood Middle School students

[Note: Co-posted on createathonchatt.wordpress.com.]

Last weekend I worked alongside thirty-seven fellow students and over forty professionals staying up around the clock doing good for Dalewood Middle School. The experience was nothing less than thoroughly satisfying and overwhelming.

CreateAthon onCampus enables design students to work side-by-side with professionals– designers, developers, writers, architects, interior designers (you get the idea)– and produce creative proposals for non-profit organizations. This year marked the first of many future collaborations between UTC design students, community organizations, and professionals for the benefit of Chattanooga schools.

The thought of working for twenty-four hours straight filled some of us with a bit of trepidation, I’m sure, not to mention the prospect of working side-by-side with professionals. The results far exceeded the expectations. Knowing we made a difference in the lives of the students feels great, but realizing the creative blitz itself positively influenced each of us who participated is even more remarkable to me.The concentrated energy and constant learning during the event fed each of us and propelled us to the finish, student and mentor alike.

Of course, the finish I just mentioned was the end of the twenty-four hours. For me, and I think for others, as well, I won’t feel we are finished until I get the chance to help implement some of the proposals we made for Dalewood Middle School. The excitement I feel in knowing that the work we did isn’t just pie-in-the-sky what ifs, but actually viable proposals that will start benefiting the school right away fills me with awe and I’ve found I’ve been dreaming about the new gallery and art center space. (More on those in the next post.)

I have heard from mentors and fellow students that they are looking forward to working on CreateAthon onCampus again next year. I know I’m not alone in wanting to continue after I graduate  when participation will no longer be a much anticipated requirement, but an amazing opportunity. In fact, I would equate the CreateAthon onCampus to a weekend crash course in teamwork, project management, application training, writing, people skills, and time management–all at the same time–with the whole being greater than the sum of it’s parts because of the collaborative energy expended to benefit a worthy cause. And, that is good for the soul.

Advertisements

Monet, Canal à Zaandam (1871)

Monet, Canal à Zaandam (1871) (taken with an iPod touch)

I’ve been reading a lot about the Impressionists and the Impressionist movement recently. A couple of weeks ago I decided to go to the High Museum in Atlanta to see the Toulouse-Lautrec exhibit and find out if there were any Impressionist paintings in the High’s collection. Happily, there were some and one of them is a Monet. My reaction to seeing the paintings in person was unexpected.

In my readings about the public’s response to the Impressionist paintings I was surprised by how overwhelmingly negative the response was. I can understand that not everyone would appreciate the new art style as not everyone has the same taste. These new works broke all the conventionally accepted rules for paintings, such as hiding brushwork to create a smooth finish and painting subjects with moral lessons or historical allegories, and that in itself was strange. However, it was the critics’ vehemence against the works that stood out. For example, Albert Wolff actually wrote of the second exhibition, “These so-called artists take canvases, paint, and brushes, fling a few colors here and there and add a signature.” Clearly, Wolff was expressing the modern-day saying “my two-year-old could do that” and didn’t think any time or training was employed in making the works. He even went so far as to accuse the exhibition of inciting abnormal behavior and wrote, “Yesterday a man was arrested on rue Le Peletier for biting passersby after leaving this exhibition.” This sentiment evokes the fear of something new causing madness and corrupting the public, especially the youth. It reminds me of the response people had to rap music or Andy Warhol’s works. In other words, different is bad and must be expunged.

We’ve all seen the most famous of the Impressionist works, such as Monet’s Bridge over a Pool of Water Lilies (1899) or Renoir’s A Girl with a Watering Can (1876), but I would hazard that most everyone familiar with these pictures has only seen printed reproductions. In print, you can’t see the paint built up on the painting; they just look like flat paintings that are a little hazy around the edges.

I knew I was already a little jaded with the Impressionists, so I decided when I got to the High to immerse myself in the Baroque, Rococo, and Romantic paintings on display before viewing the Impressionist ones. I wanted to see the progression of subject and technique over time. I marveled at the nigh-photographic quality of some of them. The fine brushwork resulted in a smooth painting surface that was exquisite.

Monet, Canal à Zaandam (1871) detail 1

Monet, Canal à Zaandam (1871) detail 1

After spending quite some time with these works, I turned a corner to find the Impressionist works and was unprepared for my reaction to them. I was angry! I suddenly understood why the reception of this style was so negative. The paint was pushed around on the canvas as if child had done it and was built up so thick on one of the paintings that the painting was no longer a 2-D representation, but a 3-D work almost like low relief.

Monet, Canal à Zaandam (1871) detail 2

Monet, Canal à Zaandam (1871) detail 2

I studied Monet’s Canal à Zaandam (1871) walking up close and examining the brushwork, stepping fifteen feet away and marveling at the whole. Wash, rinse, repeat. I must have been at that painting for at least a half an hour. The conclusion I came to is Monet was a genius. Although up close the brush work looks like child’s play, from a distance the whole of the work becomes apparent and had Monet tried to hide the brushwork the vivacity would have been lost.

If you haven’t seen an Impressionist painting in person yet, make sure and put it on your bucket list. It’ll change the way you view the world and in a good way. Fortunately, I didn’t end up with the urge to bite someone.

snow and grass

Whence cometh spring?

We’ve had more snow this year than in the last ten combined and I think I’m not alone when I cry out, “Enough already!”

The inch plus of snow that fell Wednesday night lingered all day Thursday in the freezing temperatures that persisted. The only exceptions were areas hit by welcoming, warming sunshine creating many “snow shadows” of buildings and trees.

The patches of snow with such sharp delineations prompted me to think about the boundary between winter and spring. When, exactly, does spring arrive? When the farmer begins work in the fields? When the weather’s warm enough to leave the heavy coat at home? I’ve worked on the farm in March and frozen my tuchus off. I’ve walked around in short sleeves in January and marveled at the day.

Where is that boundary and how do we know?

Copyright symbol

Copyright Symbol

I’ve been reacquainting myself with copyright and trademark law recently. While I knew that the creator of a body of work automatically and instantly owned the copyright without having to register it, I didn’t know there are limitations on what can be copyrighted. Expressing ideas in all ways, ranging from drawing pictures to writing text or computer code, falls in the realm of copyrightable material. What is *not* copyrightable are the ideas themselves. Inventions and processes can be patented, but not copyrighted. And, fortunately for everyone, ideas cannot be patented, either. Can you imagine if you had to pay a fee every time you thought of a pink elephant? We’d all end up bankrupt. (You’re thinking of a pink elephant right now, aren’t you? That’ll be one dollar, please.)

Trademarks and, the little known, servicemarks differentiate one company’s product or service from another. They allow us, as consumers, to distinguish between pink elephant kibbles on the market, however, they don’t prevent competition between manufacturers. Trademarks, like copyright, don’t have to be registered, but, obtaining a Federal trademark registration has several advantages, such as having exclusive use of the trademark nation-wide. Once the trademark has been registered, it is solely the responsibility of the trademark owner to ensure infringement of the mark is kept at bay. If exclusive use of the trademark is not constantly policed by the trademark owner, the owner will forfeit the exclusive use of the trademark. In other words, use it, but make sure others don’t use it, or lose it. Sounds like a lot of things in life, doesn’t it?

For complete information about copyright, check the US Copyright Office website. The US Patent and Trademark Office provides complete information on trademarks and patents, as well. Of course, if reading the extensive amount of information on the topics and trying to decide how it relates to your situation has you seeing pink elephants, I suggest you consult a legal expert in the matter.

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.

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.

Clearly, I’ve been a reluctant blogger. In order to change my habits, I’ve decided to make a commitment to blog at least once a week for the entirety of 2011. Rather than just thinking about doing it, I’m starting right now.  (Ooh, look at that. It’s my second post today.)

I know it won’t be easy, but it might be fun, inspiring, awesome and wonderful. Therefore I’m promising to make use of The DailyPost, and the community of other bloggers with similiar goals, to help me along the way, including asking for help when I need it and encouraging others when I can.

If you already read my blog, I hope you’ll encourage me with comments and likes, and good will along the way.

Thanks,

Robin Seaman

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?

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

Join 9 other followers