The RedWings were jinxed when they sold these

Storytelling: Nostradamus has the seven-year itch

ASSIGNMENT
Visual Blogging - Storytelling and interactivity: your future vision.
You have 500 word and unlimited images. On your blog page, write your vision for the future of media. 100 years is too far away. What will we be interacting with in 7 years? Keep your focus on interaction and storytelling.

NOSTRADAMUS PREDICTS 2014

SHEDROFF'S 100 YEARS

Shedroff's 100 Years piece published in 1995 is a fascinating look 12 years back at the art and science of prognostication. 1995 was the year I got on the Internet (although I had been an AOL/Prodigy/Compuserve user since 1990).

Nathan speculated that in 100 years:

"Windows® will not exist (Bob® should be gone in less than 5)"

MICROSOFT BOB - LASTED JUST A YEAR

Ah yes, Microsoft Bob, born March 1995, the first major attempt to "humanize" the personal computer computing experience, a social interface that never caught on, the leading edge of Web 0.5.


Bob lasted just one year. RIP Bob. The future of media is people telling their own stories, in a format that will vary greatly based on the type of story. Computing in 1995 when Shertoff wrote his piece involved people interacting with their computers. Microsoft Bob might have been a good application for that, but computer users by and large are interested in interacting with other PEOPLE, not with the computer. Interacting with the computer is a means, not an end. Bob failed. But interpersonal interaction has developed exponentially.


STORYTELLING

The future of the media in 2014 will involve people telling stories. This will largely be amplifications of two developing trends, wikis and blogs. The wikis and blogs will be used both by journalists and the public, often interchangeably. The democraticization of technology will make the technical details of maintaining, designing, and publishing a blog (or adding comments on a blog with design elements) transparent to the user. There will no longer be a need to learn how to alter CSS for simple design elements as programming will automate this. The old media method of centralized mediation for storytelling will give way to the new media method of distributed mediation.

(image from Reichenstein, 10 Newspaper Myths Deconstructed)

WIKIS AND STORYTELLING
Wikis are computer applications that allow visitors to add, remove, edit and change content. The community can tell stories about individuals and events. After the Virginia Tech massacre, the New York Times noted that the wikipedia article on the massacre, which appeared instantaneously, was developed from the contributions of 2,074 editors, "... creating a polished, detailed article on the massacre, with more than 140 separate footnotes, as well as sidebars that profiled the shooter, Seung-Hui Cho, and gave a time line of the attacks." This community storytelling has itself become an invaluable resource for the mass media. According to the New York Times: "As unfamiliar as it may seem, the contributors insist there isn’t even a shadowy figure who becomes the mastermind of the process." Wikipedia has catalogued under its history the thousands of edits to the Virginia Tech Massacre, a history of the story-telling process. (For some reason, users Mark Chilton., Jcbarr, 24.225.83.222, Ineffable3000, Jehb, 217.42.244.60, and Theguvnorgc decided to tell my story on Wikipedia.)

BLOGS AND STORY TELLING
Since 1934, the News & Observer has carried its political column "Under the Dome" on a daily basis. This week, in an expanded version of the print column, (which will continue to run) Dome is now a blog. The political community has viewed this is as not just a useful attempt to expand the political news and take it to a wider office, but as a democratization of politics, which will enable others to tell their stories. Anglico, one of the main bloggers at BlueNC, welcomed Dome to the blogosphere, with his most telling comments: "I'm excited about this for lots of reasons, the most important being my favorite thing in the whole wide world: transparency. The blogosphere is one big happy fishbowl. We now have a direct line to a handful of people who play an important role in shaping the political agenda in North Carolina. And make no mistake, that's what they do. The stories they cover, the verbs they use, the angles they play, the things they leave out. It all adds up to agenda-setting, and I personally believe that's the name of the game .... With this new blog, the playing field gets leveled ... [i]n an open-source world ..." Anglico clearly envisions newspaper blogs that accept comments as a place for citizens to tell their stories, free of filtering.






Blogs will enable citizens to tell stories without filtering, whether in the comment function of a blog or in the writer's own blog, or as a guest post. Blog moderators can also promote comments to posts. For example, when the National Conference of State Legislatures' staff blog "Thicket at State Legislatures" posted on the effect of redistricting on voter turnout, I continued the story with my own comment inline. The moderator liked it so much he made it a guest post, noting "This originally appeared as a comment on Increasing Voter Turnout II. We thought it was important enough to publish it as a guest post." The comment became its own story, with the moderator promoting it from comments to the front page (until it vanished below the fold in a few weeks).

THE COURSE ENDS AFTER 16 WEEKS
In seven years, we will be interacting with each other. Interacting with the computer, while important for techies, will continue to recede for most web users as it is a means and not an end. Storytelling will be the key to media in 2014.

===============================
UPDATE APRIL 26: STORYTELLING NOT

(from Dilbert)

persona 2: Jimmy Hattricks

Jimmy Hattricks lives in Minneapolis zip code 55407. His neighborhood is an immigrant community, a lower income urban mosaic with a mixed populace of younger Hispanic, Asian, and African-American singles and families.

Jimmy was born May 11, 1981, the day of Bob Marley's death. At age 25, Jimmy has lived in Minneapolis for four years. Jimmy got his GED last year, he dropped out of high school and fled South Philly, playing backup guitar for several bands until he got into hip-hop music marketing. Jimmy's income is derived solely from being the leader of a street team, being paid by record labels, bands, night clubs, record stores, and performance venues to paste up broadsides publicizing albums, bands, and live peformances. He spends his time stapling or glueing them on utility poles, vacant buildings, and storefronts.

Jimmy lives in an urban row house, renting from an absentee landlord who lived in the neighborhood when it was all Italian immigrants. Jimmy is working class, with a household income of $34,070, including that from his live-in partner by civil union. Jimmy is very artistic, and is a practicing Rastafarian. He is an abstract thinker, and keeps up online with many cultural issues and music issues, especially the hip-hop culture. He is an advanced computer user, downloading both cutting edge and well established music of the hip-hop culture. He has a high-end Windows Media Center PC and a laptop with 2 Gig of RAM that he stashes in his car when on the road.

Jimmy has no brand loyalty, he will buy whatever is cheapest or castoff. He and his partner want to be recognized within the hip-hop culture. Jimmy is thinking of dropping the hip-hop record label street team and hooking up with the threadless Street Team.


Jimmy also enjoys reading about sports online, and is a big Minnesota Wild hockey fan. The arena is just a few blocks from his house. His birth surname was Wales, but he uses the surname "Hattricks" in his professional life to show his obsession with hockey. Jimmy is dyslexic, and sometimes has trouble reading information on the computer screen.

=========


Jimmy is a useful case study for the newspaper website. This is a region with a substantial minority population that has not been heavy newspaper readers. Jimmy has not read the print edition of the Pioneer Press or its online TwinCities.com for six months. With an accessibility issue, Jimmy represents that important user group as well. If Jimmy signs up with the threadless Street Team, he might be a potential advertiser on Pioneer Press/twincities.com as well.

Persona of Scott Kennedy

Scott Kennedy lives in St. Paul zip code 55105. His area of town is a collection of young, mobile urbanites, a Bohemian Mix that represents liberal lifestyles. Its residents are a progressive mix of young singles and couples, students and professionals.

Scott is 43 years old, a college grad, and a native of St. Paul. He spent a year in an PhD program in English before dropping out. Scott and his wife live in an urban area of St. Paul, in a two story Victorian era house. In another generation, Scott would have been a novelist, but is a manager of an independent filmhouse. His household income is $51,558.

Scott loves to entertain in his sprawling house. Scott is a lapsed Unitarian, and does not criticize the lifestyles of his customers or neighbors, who are an ecletic mix. Scott considers himself a Renaissance scholar, with a broad personal library collection of hundreds of rare volumes.

Scott is an avid reader, but is rarely online. He is open to new experiences, and has told his friends that he wants to start following indy films online rather than continuing his expensive subscriptions to the daily and weekly issues of Variety that arrive in his mailbox to be carefully catalogued away after a late evening of reading while he finishes a Havana cigar preserved from the 1940s.

Scott's computer still runs Windows 95, and its media viewers were last updated in 1999, as Scott is afraid to download programs lest picking up viruses. He has tried to use the Internet to follow films, and his manager recently set up a website for his art house.

Scott is fiercely brand loyal. He read the Pioneer Press religiously for 25 years, but cancelled his subscription six months ago when the paper editorialized in defense of Mel Gibson.

======================

Kennedy is a significant influence on the newspaper website redesign. He is a former subscriber in an area where newspapers are losing readership. He has broad connections in the community, and if he adopts the new website others of his ilk will surely follow.

spoiler:
Photograph courtesy Library of Congress, photographer Carl van Vechten

somber day at virginia tech

APRIL 17:

A somber day for all Hokies. The website has been revamped, images gone, only a small VT logo. The website conveys a somber tone.

---------------------

UPDATE: Thursday, April 19. The Hokie website is revamped again, this time an entirely black background with white letters, a highly emotional picture two columns wide on a 3 column layout with text 2x1 below the pictures. At the bottom of the page (not visible in the screen grab below) are text links to regular university functions. The grid is reinforced with a dashed white line running vertically between the columns, and with solid horizontal white line separators.





APRIL 23 UPDATE:

Classes resume, website returns to normal pre-April 16 colors on the top banner, but retains the right column of names of victims with white letters on a black background. A good transition back to the old layout.

Interaction design: Museums worst practices: Old Prison Museum

I'll refer you back to my best practices post to see the scope of the assignment.

The Old Prison Museum website (Deerlodge, Montana) is an example of bad interaction design.



It is basically a four page design, with a link for a self-guided tour, local links, and a contact page.

The interaction design is miserable. I can find none of the information my grandmother and son need. Only the contact page tells me even what city the museum is in. There is no information on parking, little on exhibits, nothing on accessibility or food. The design make the museum less attractive. The museum hours are listed, and the names of the tour guides. The grammar is atrocious, leaving a negative feeling: "Guided tour's are available."

The top navigation bar is consistent between the four pages, that's the only thing positive I can say.

Interaction design: Museums best practices: Holocaust Museum

Assignment
You, your mother (75 years old; with bad knees; sweet old lady, with a great sense of humor and interest in anything that he grandson is interested in) and your 15 year old (energetic and mercurial) son, Josh, are planning to visit XXXX city and go to XXXX museum for a 4 hour visit. You need to make sure that the trip to the museum will go well, so try to plan for any and all disasters before hand.
A few potential disasters or concerns:
Mom stresses about traffic and parking. She will nag you increasingly every minute that you circle a block looking for a space. What is the parking situation?
Mom's knees tend to ache after standing for awhile. She will want a wheelchair or to go back to the hotel. Can you get her a wheelchair?
Josh is bored by 'old-fogey stuff'. Is there a contemporary or bleeding edge exhibit that will win cool points in Josh' eyes - and how would you know if it is cool enough?
Josh always loves to eat and mom is happy to pay. Is there a restaurant/food option that might be attractive to both of them? Is it a cafeteria or a restaurant? Price?
Tour guides / audio tours... maybe you should get one of these and just not worry about keeping everyone happy. What's available? How much? Do you need to reserve in advance?
Is there really enough to see here for a 4 hour visit? Or should you plan for other events in the area - what else is close by?
Are there special events or performances that you should plan your visit around.

My best practices site is the United States Holocaust Memorial Museum. I've been there twice and am familiar with the area, so should have a feel for whether whatever advice I find is likely to be accurate.

I'm going to be looking for quick access to the following information:

1. Parking and traffic


2. Handicapped access


3. An appealing exhibit for a male teen


4. Onsite food info


5. Tour guides/audio guides


6. How much time can you spend there


7. What's nearby of interest


8. Any special exhibits at the museum

I start with the index page, which has enormous white space (well actually blue and white) on the left and right, so the site appears quite open:

The top Navbar appears quite useful, with a mouseover submenu that's just what the doctor ordered for my family visit.

19 menu choices appear on the "Museum info" slot, including the potential helpers "Plan a visit, hours, directions", "museum cafe", "Exhibition information" a FAQ, and contact info. Excellent navigation, this menu is front and center. Next step, see how many of my questions will get answered right away.

I start by going to the plan a visit page, which looks like it has the potential for getting me started

PARKING AND TRAFFIC

Wow, a "getting here and parking" link that has info that should calm down mom. There's a map with a blowup inset and a detail on parking that will let us know about wheelchairs:

"Parking: The Museum has no public parking facility. There is a paid parking lot at 12th and C St., SW (east of the Museum) which costs approximately $4 per hour, and hourly metered parking along Independence Ave. Area public lots fill early in the day, and street parking is restricted. There is no street or lot parking west of the Museum. Expect to walk three to five blocks to the Museum entrance if you choose to bring your car. Staff are ready to facilitate passenger drop off at the driveway by the 14th St. entrance for visitors needing personal assistance. There is also limited, four-hour bus parking available at D and 14th Streets. Accessible public parking: For vehicles bearing the appropriate access tags, the National Park Service has designated approximately ten accessible parking spaces at and around the Washington Monument, along Independence Avenue west of 14th St., and at the Tidal Basin parking lot."

How could we ask for more information?

ACCESSIBILITY

Two bites at this apple, a detailed page on accessibility that summarizes things nicely, and for those that obsess about it, a 26-page downloadable accessibility guide that's in .pdf. The site does not make the mistake of only offering this as a .pdf. The accessibility page told me right off that wheelchairs are available from the Check Room (wherever that is). The FAQ page tells me "Museum facilities are accessible to persons with physical disabilities. Elevators serve all areas, and each exhibition incorporates program accommodations (films are subtitled in English, and audio-only portions have text accompaniments). Wheelchairs and some visual aids may be borrowed at the Check Room free of charge."

CUTTING EDGE EXHIBITS

The museum's easily findable exhibition webpage carefully lays out all the exhibits. I'm sure the exhibit "Give Me Your Children: Voices from the Lodz Ghetto" will appeal to my teen son.

ONSITE FOOD

The top menu bar has an easily recognizable link to the Museum Cafe', with a menu and an online order form. Yum!

TOUR AND AUDIO GUIDES

The FAQ page tells the user "The Guided Highlights program offers tours to all interested visually impaired, blind, and blind-deaf individuals and their friends and families. The three-hour tours cover highlights from the Museum's Permanent Exhibition, using visually descriptive language, tactile reproductions of objects and architectural elements, and visual aids. Please make reservations for the tours at least two weeks in advance. Tours can be arranged for any day the Museum is open for times before 1:30 p.m."

HOW MUCH TIME CAN YOU SPEND

The easily findable FAQ page tells me "It can take several hours to see the entire exhibition, and most visitors spend about two hours. Selectively viewing the exhibition can reduce time. Visitors are free to explore the exhibition at their own pace... What if I only have an hour to visit? What can I see? While the Permanent Exhibition can take over two hours to visit, there are a number of other exhibitions, displays and resources you can visit for as little or as much time as you might have available. No entry passes are necessary for any of the items listed..."

The navigation and layout of the Holocaust Museum website is very appealing, especially given the somber nature of the exhibitions. The interface is wonderful, and easily navigable. The interactions design keep you on the site and tells you where you area.

Kudos to the web designers. Now, off to find a museum with a bad interface.

week 12: interaction design;Ultimate Toobars

The David Pogue podcast on TedTalks was enlightening. My favorite illustration of the absurdity of design elements carried to an ultimate was his illustration of what the screen of Microsoft Word would look like if you open all the toolbars. Not much room to type! Here it is:


(screenshot above from the podcast)
You could do it yourself at home by opening MSWord and going to the view>toolbars menu. The default has only 3 of the 20+ available toolbars active.

week 11: grids in bills at the NCGA

At the General Assembly, the documents I produce all have a simple grid structure, with four basic horizontal frames:
1) top of bill, includes the year of session, edition number, bill number, and history.
2) sponsor's name(s), separated by a horizontal line
3) committee referral (if any), separated by a horizontal line
4) text of bill, separated by a horizontal lines

All bills at the North Carolina General Assembly (of which we have produced over 2,500 this year) have the same identical structure, so the document is easily identifiable. Members, staff, and lobbyists all are used to the same structure, which was used in an identical manner when I got here 30 years ago.

UPDATE March 28, 2007:
Wait a minute, here's the document I should have posted, since the instructor is on the SILS faculty! Notice that one of the grid segments (sponsors) expands in size to fit the contents:

week 10: Activity centered design: online portfolio

ONLINE PORTFOLIO MANAGER AT USATODAY.COM:

Easy enough that a caveman can do it?

My activity centered design is setting up a portfolio at USAToday.com to track my investments. I know that a lot of news websites offer this feature to encourage site loyalty, but I did not know if USAToday.com offered one.

Sketching out the steps
I assumed the activity would begin with:
1) locating my holdings
2) getting the correct names of the stock and mutual funds
3) Finding out how many shares I wonder, and possibly even date of acquistion if the site tracked historical values
4) figuring out the stcok symbols, hopefully there will be a lookup engine
5) finding the feature at the website

and end with worrying even more about my holdings, rather than being blissfully ignorant of the stock market.

I hope that it will be easy!
------------------

Actual steps:
1) go to USAToday.com website

2) make a guess that the feature will be at "Money" so I click on the green Money menu bar on the upper left, getting me to the Money front.

3) Nothing on the first page visible, so I scroll down and just below I find:

Interesting way to present this. How did they get my portfolio already?? :)

4) I reach the instruction page by clocking on "log in here" and get:
"Welcome to USATODAY.com’s Portfolio sign-in page
Please choose one of the following:
1 - If you already have a USATODAY.com stock or mutual fund portfolio, sign in here.
2 - If you are a new user, start here to create your free USATODAY.com stock and mutual fund portfolios.If you don’t receive a confirmation e-mail in a timely manner, check your SpamFilter or Junk Mail folder. In some cases, Confirmation e-mails will get caught there. When you find it, just click on the link to confirm your registration.If you have a question or a problem, please go to: feedback.usatoday.com. "

5) I click on "new user", put in my selected user name and password, and go off to await a verification email.

6) By the time I log into my email, the verification email has already arrived. It avoided my spam filter. Yay! Here's what it says:
"Thank you for signing up for a USATODAY.com Portfolio! Please validate your e-mail address by clicking the link below in order to activate your Portfolio. [link deleted] If you are unable to access the above link from this e-mail, please copy and then paste the URL into the address field of your browser. If you do not confirm your e-mail address your Portfolio will not be achieved.Please Note:If you received this in error, and were not creating an e-mail address for your Portfolio on USATODAY.com.com, please accept our apologies. Disregard this e-mail and the Portfolio will be deactivated for this e-mail address after 15 days. "
Well designed!

7) click on the link, page returns "Thank you, your e-mail address has been successfully validated. Click here to log in"

8) Log in is easy, next screen is part 1 of 3 (as opposed to the wedding announcement page at the Roanoke Times that had six steps and my classmate thinks will drive off users) and I think most investors are willing to go through three steps


"Create a Portfolio (Step 1 of 3)

1 Enter a Portfolio Name:
You can have up to 10 portfolios. Create one at a time.
Choose a cash position preference: No cash position Cash position Initial Cash Amount $
About the Cash Position This is optional. Choose a cash position if you want to start your portfolio with a specific amount of money. Then, the initial cash amount you enter will change as you "buy" and "sell" stocks in your portfolio. "

[cash position, hah, it's too late in the month] This page is well designed for the user.
I name my portfolio "Gerry" and tell it I have $45 in cash (A $20 bill, $20 worth of the new Washington dollars, and five ones)

9) I'm at step 2:

"Create a Portfolio (Step 2 of 3)

2 Enter stocks or funds:
Enter stock or fund symbols (separated by spaces):
Symbol Lookup "[good, a symbol lookup, but this assumes some level of knowledge, what's a stock symbol?] "enter all of your ticker symbols at once. " [ouch, poor design, I'm going to have to write them down, can't cut and paste one at a time, poor design] .

Here's the lookup feature entry point (click on picture to get magnified view):

here's what I try -- "Disney", this returns "DCQCL - NYSE" this can't be correct, NYSE has one, two or three letters, so I try "Walt Disney" and get DIS, "United Parcel Service" and get UPS (sounds right), "Marriott" and get
MAR
Marriott Intl Inc New; and finally a mutual fund, "Evergreen" and get a list of 100 funds, find the correct one
EABFX
Evergreen Asset AllB FUND

so now I have gathered DIS, UPS, MAR and EABFX, back to the entry screen
Bad, I've wandered off somewhere, there seems to be no link back to the portfolio creation screen, try back three times, there it is.

type in DIS UPS MAR EABFX

10) I'm at step 3 and get this screen with the holding names prefilled, and it asks for purchase date, # of shares, and purchase price. (I don't know the purchase price, I'll try leaving that blank for three of the items, and I'll put in dates on two. I'm making up all this info. I then hit the "finish" button. I wonder why if I give the purchase date of the stock, their database can't look up the value on date of purchase?

I discover there are lots of different views to choose from, as well as "create custom view" "launch portfolio tracker" and "download to spreadsheet"

Process completed. here's one view of my fictitious portfolio (click on picture to get magnified view):

ACTIVITY CENTERED DESIGN
Using Saffer's analysis structure, I'd say the USAToday portfolio trakcer is an Activity-Centered Design. The designers focused on the tasks at hand, not on how the user would interact with them (User centered design). There were clearly a few steps NOT well user-tested, especially entering the ticker symbols and understaning the process involved. There were no easily visible help options. The location of the feature had very little emphasis on the site. Still, an attractive option for users. It would appear that USAToday.com had outsourced the production of the online protfolio to marketwatch, which might have caused some of the problems with integrating my progress through the process with where I was on the site. Interesting the outsourcing, I think one of the other class blogs for this week noted that the newspaper obit site they were searching had outsourced the feature to legacy.com.

week 9: banner created

Went into photoshop, took the image that I had on the earlier post and used it as the image for my banner, color picked the Carolina blue, reduced the opacity to make it lighter, added text in Onyx after picking the same dark blue color, added the border from Rameses, and uploaded it here. Now, I need to figure out how to make it the banner on the top of my blog.

By the way, the Carolina Blue border spilling into the letter "O" of "OLINA" was not intentional, but is a good transition and pulls you into the banner.

UPDATE: Done! Just went on my dashboard to "Page elements" and linked to the picture, it's now my banner. Someone had suggested I get rid of the awful color at the top of my blog, so I edited my CSS to get rid of that image, and it was replaced by the Rameses color.

week 9: My palette

I had to reinvent the wheel. In my post below, I showed how I modified the CSS of my blog to incorporate three colors from a picture that showed my emotion (Go Heels!) I forgot to actually create and post the palette I used. I went back to the picture, used color picker, and of course I couldn't remember exactly where I had picked the colors, so I got close -- you will notice that the color hexadecimals are not the same as listed in the post, but they are close enough for government work. I went into Photoshop, watched Serena's tutorial, and voila, palette above.

UPDATE: I am sort sort of moron. I had posted the exact hexadecimals for my three colors in an earlier post. In photoshop I just needed to paste these into color picker and I would have had the EXACT colors. Oh, well.

Carolina blue palette

I took the image from my last post, pasted it into Photoshop, cropped it and magnified it to show the individual colors. Highlighted here are several shades of blue (with Carolina blue in the lower right), and some of Rameses.

I started with one of the readings for this week "Create a template color scheme using a photograph" I took an image, and posted it to my blog so you can see what I started with. I then pasted it into photoshop, cropped a small area, blew it up, did a screen print, pasted it back into photoshop, cropped it, and saved it as a .jpg. This is my color palette, which I also posted to my blog per instructions. Back in Photoshop, I used the eyedropper, and sampled Carolina blue (a5bede), the darker blue border (102049) and Rameses (8c9684). I cliked OFF web colors only. I went into my blogger account dashboard, and went to edit the html on my template. Under body, I edited the background hexadecimal to be background:#102049; deleting a linked .jpg file as well. This is now my outer border, the deep blue. For Rameses, I added a subtle thin wrapper
#outer-wrapper { background-color:#8C9684;
then to get the main emphasis for my blog, Carolina blue, i edited in my main color
#wrap2 { width:700px; background:#A5BEDE;

I did not change any of the widths in any of these settings, and deleted any extraneous linked background files.
wow, I've edited my CSS

UPDATE:

Well, I finally got around to watching Serena's two tutorials on how to create a color palette, and discover I did it a different way and did not actually post my palette to my blog, so next week I'll go back and post my palette (as opposed to posting a swatch of the origin photo above!) I'll probably go and add the silver from the school colors to my pallette as well!!)

week 9: when I die I'll be a Tar Heel dead

I'm going to be using the colors in the photo above as the basis of my color palette

week 9 word: migration

week 9 word exercise: expansion

well, I just installed a trial version of Photoshop (first time using any image manipulation program) and here is my latest word exercise.

Module 9: word exercise: elimination

Modification of earlier post to do elimination as one word

Module 9: word exercise: elimination and migration

Coldtype: not a rock band (ems and ens)

I'm old enough to have set movable type (I always called it coldtype, which was wrong, coldtype was a later development) by hand on a printing press in 7th grade shop class (circa 1963).

As opposed to the monospaced font used in manual typewriters (Design Basics Index p. 238), most modern fonts have different widths for characters. When you set movable type by hand, grabbing individual characters out of a box and putting them in the composing stick, the width usually did not fill up the line, so you'd grab ems (blank metal the width of the letter M) and ens (blank metal the width of the letter N) out of the box to justify the line. When it was full, you took the locking tool to tighten your type, put it on the press, inked the pads, and let-er rip.

ems and ens in CSS

Nowaways, ems and ens have a different meaning, and have infiltrated CSS:

from Web Content Accessibility Guidelines Working Group

em: The foremost tool for writing scalable style sheets is the "em" unit, and it therefore goes on top of the list of guidelines that we will compile throughout this chapter: use ems to make scalable style sheets. Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash". The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M".
In CSS, the em unit is a general unit for measuring lenghts, for example page margins and padding around elements. You can use it both horizontally and vertically, and this shocks traditional typographers who always have used em exclusively for horizontal measurements. By extending the em unit to also work vertically, it has become a very powerful unit - so powerful that you seldom have to use other length units.
From wikipedia:
"An "em-quad" is a metal spacer used in printing presses. It is referred to by this name because it is composed of a square one em on each side. In these old-fashioned printing presses, this allowed the insertion of an em space( ) character between other typographical characters. It is also occasionally referred to as a "mutton quad".
The with of the em space ( ) is defined to be 1 em, as is the em dash (—) (more commonly used in American texts). By contrast, the narrower unit en (more commonly found in European texts) is half an em.
Online, the use of the em measurement has become more common; with the development of Cascading Style Sheets (or CSS), the W3C best practices recommendations within HTML and online markup now call for web pages to be based on scalable designs, using a relative unit of measurement (such as the em measurement), rather than a fixed one such as pixels ("px") or points."

CDC en espanol

I've posted a critique of the Centers for Disease Control (CDC) English language website. The CDC website is available in 10 different language. A screen capture of the Spanish language version from February 27, 2007 is posted above. Interestingly, while the basic layout is the same as the English language version, and also contains just four pictures, the CDC headquarters shown at the lower right of the English version is not on the Spanish version, replaced instead with a warm picture of an Hispanic family prominently at the upper left. The Spanish version also contains a horizontal link bar to versions of the site in 10 different languages, a feature missing from the English language version.

Week 8 web design critique: CDC.gov

Design features of CDC
The website of the Centers for Disease Control is designed to convey a minimum of emotion and a maximum emphasis on objective factual information. The screen grab above from February 27, 2007 is a simple layout.

Four column grid
The top of the page is a small horizontal band of black with white lettering covering site information, such as an about, an A-Z site index, and contact information, all flush left. The next horizontal band is much larger, and is the page title, "Centers for Disease Control" in large typeface, the name of the federal department deemphasized in smaller type, with a search box and a link to a Spanish version of the page. This section of the page is entirely white letters on blue background.
Below the top, the page design is four-column, a smaller column on the left (about 1/4 of the page width) entirely text based in the English-language version, with sub heads and multiple nested links. The left column is entirely blue letters on a tan background but with different levels of contrast -- the subheaders distinguished by a darker value of the background hue. The left column runs from top to bottom between the page header and footer information.


On the right are three smaller columns, each headed by a photograph. The links below the pictures are the same font as the page title above, but this time blue letters on a white background. Below this, the right 75% of the page becomes a centered 50% of links with a short description a smaller point type, the right 25% (balancing the left column) consists of a photo, news feeds, and schedules. The left column requires little scrolling, ending just below the monitor image, while the right side of the page disappears half a screen below the monitor bottom.
The very bottom of the page is a horizontal bar, again identifying the sponsoring agency, with blue type on a light blue background. The cross platform Usa.gov logo appears at the bottom in red, white and blue, copying the common themed logo of all US Government web pages.

The CDC website is designed to convey a minimum of emotion and a maximum of information. CDC is a scientific agency, devoted to study and dissemination of information. The page is very informative. There is little white space, though the left flush convention of each column of the page does leave some space on the right side of each column. There is little clutter, noise, or busy sections of the page. The page is organized as a grid, there is little freeform. The right 75% of the page does have significant information below the bottom of the initial viewing area, requiring scrolling.

Colors

CDC.gov uses blue as its primary color. Red and blue arrows appear as section markers, and blue background with white letters are also a design element. The red, white, and blue motif that anchors the page conveys the colors of the federal government and gives the page an official US government aura.

Photos

There is minimal use of photographs, four in all. Three are used to define information section, a picture of the globe effectively leading off a section on pandemic flu. The fourth picture is a stock photo of CDC headquarters, appearing at the lower right but above any scrolling area.

Analysis
The page layout draws the reader to the center with the three pictures. There is little flow to the page, however. It is highly text-based. The common use of color spreads the reader across the entire page. Larger typefaces point the reader to different page elements. The repetition of blue as eiher the background color or the color of the words keep the reader moving. The use of columns pushes the reader from top to bottom. With the heavy use of links, I would expect the reader to leave the page quickly when a point of interest is reached. The typical CDC user would be looking for information, not entertainment. I picked 12 random links from the page, 11 took me to a page with a similar top header, with a link back to the main page, similar structure, and similar color usage. The CDC website is clearly designed to convey a common theme and structure, keeping the reader informed and comfortable staying on the site.

Interpretation
I have little emotional response to the site. It is very quiet, not designed to excite the user. It is strictly factual, as befits a governmental science website. The themes amplify the reliability image and solidify the credibility of the site. The site should interest both the scientist and the lay person looking for information. The page is very serious and non judgmental.

Evaluation
CDC has solid design, consistent layout throughout, and is neither cluttered nor busy. The site uses CRAP well, the four basic principles of design from Robin Williams "The Non-designers Design Book", being Contrast, Repetition, Alignment, and Proximity.
CONTRAST - the site uses blue and white in different ways, sometimes white on blue, sometimes blue on white.
REPETITION - text links are well organized on the page -- blocks of link are set off from each other with headers with a darker value of the tan hue, with red arrows pointing to the right
ALIGNMENT - the design is clean. The pictures are aligned carefully, as column headers. The page is divided into four columns, anchored by a left column from top to bottom, three columns near the top right, and a fourth column down the right below the pictures. Both the top and bottom of the page are anchored with horizontal elements.
PROXIMITY - Text links are kept together on the left column. News and events are anchored on the right. Pictures are kept together in the center to anchor the right three columns. Links at the top and bottom of the page show information about the site itself and the sponsoring agency.

CDC is successful in its mission with solid layout and design. Other health information sites have different foci. WebMD is very busy, with a greater emphasis on graphics, images, slideshows. WebMD makes use of many more hues and color values, with no unifying theme. WebMD is designed to entertain and also take readers to its ad links (CDC has no advertising). The Mayo Clinic website is poorly laid out, with significant white space, no unifying color themes, and a hodgepodge of typefaces.

CDC en espanol.

The CDC.gov site in Spanish is discussed separately.

Colors for Historic Preservation

Benjamin Moore's paint chips scanned in above celebrate their historic preservation series, dozens of mixes designed to replicate specific paints from historic buildings -- kittery point green, van alen green, sherwood green, yorktowne green, tarrytown green, and lafayette green all harken back. Scanning in CMYK- based process colors allow them to be represented on an RGB computer monitor (though perhaps not with the same hue, saturation, and value). RGB files, however, can not be used to print process colors (Design Basics Index, p. 213)

Colors as Food

Orange juice, sharp cheddar and tangelo. Three foods. Three Benjamin Moore paint chips. Would these be choices for a kitchen wall? Who thinks up the names on the thousands of paint chips you can take from the hardware store and examine what they look in the different light in your house? It is important to understand that colors can appear different based on the light source they are viewed under.
Do the paint colors really remind you of the food they are named for?

The Color Mob: A joke, right?

Karen Strum's article: EXPLAINING COLOR TRENDS
COLOR MOB'S INFLUENCE ON MARTHA STEWART AND THE PASTEL COLORED PORSCHES (archived at imaginationstreet.com 2/2/2002, no link available) tells us:

"CMG, Color Marketing Group, is a diverse group of designers from every corner of the world representing a broad span of industries including everything from automotives to fashion. They meet several times a year at designated locations, stay in luxurious hotels, and determine in private meetings which colors will be fashionable in the up-coming years. An artist not associated with the 'color mob' is left guessing at what will be the next season's set of trendy colors."

This is a joke, right?

Week 5 Branding: Benetton: Cultural Relation

While the culture may be worldwide, it is still a niche, those willing to step out of the mainstream to buy from the cutting edge marketing of Benetton, forever defined by advertising images like the black woman breastfeeing the white baby, part of the infamous 1991 marketing campaign. Benetton was not advertising for sale the red sweater.

Benetton's images are multi-cultural. Even in its annual report, Benetton highlights consumers of all nationalities, such as the multi-cultural female above, with purple hair streaks to match the purple Benetton turtleneck. Benetton's marketers assume that the socially conscious need clothes to match their streaked hair, Rebel With Clothes.

Benetton has reinforced its brand with cutting edge images of social action, ecology, and race relations, clearly designed to target a world wide audience with leftwing sympathies. Benetton's corporate website says "Benetton is present in 120 countries around the world with a strong italian character whose style, quality and passion are clearly seen in its brands: the casual United Colors of Benetton, fashion oriented Sisley and the leisurewear and streetwear brands Playlife and Killer Loop ... Benetton has a long history of attention to ethical values and involvement in social and cultural initiatives. Perhaps the most visible are our institutional campaigns, touching social themes of wide international significance and often in cooperation with renown international organisations."

Benetton buyers surely see Benetton as a lovemark.