Project Style Sheet

 

Anyone can and should contribute to this page.

 

 

Capitalizations

35W Bridge (I disagree that bridge be capitalized...Michelle) (I've seen it pretty consistently as "I-35W Bridge" in the presentations I've blogged. I favor that nomenclature, but regardless I think we should keep the capitalization on Bridge because we are effectively using it as a proper noun. -Jim) ( I agree with Jim, the word bridge should be capitalized. Almost all of the resources I've encountered refer to it as "I-35W Bridge" so that seems this form may be what we ant to stick too.-Stephanie)

• I tend to agree that we are using "I-35W Bridge" as a proper noun and have also noticed that is the most frequent treatment. (Sara)

I agree that the noun or phrase "I-35W Bridge", is used pretty often in that treatment, however, as long as we are consistent I really don't think it should matter all that much. (-Hilary)

 

Bridge 9340

City of Minneapolis

 

Abbreviations

Mn/DOT

NTSB = National Transportation and Safety Board (Sara)

MPCA (MN Pollution Control Agency)

MWMA (Mississippi Watershed Management Organization)

 

 

Jennifer:

Page Style

Header

Bold title

First word capitalized only

Sub-headers in italics

• I would suggest reserving italics for editorial purposes such as titles of published works because it is generally considered less legible. (Sara)

 

 

 

Amber's...

 

Grab the readers attention during a quick scan by using headings, lists,

typographical emphasis for words or sections you wish to highlight.

 

Think about turning wordy explanations into a concise list of steps.

Stick to the point.

 

Learn and possibly use Cascading Style Sheets (CSS). These could be

helpful in defining the visual layout.

 

Left justify the paragraphs with their header also left justified.

 

Text line length should be restricted to 50-70 characters.

 

...End of Amber's

 

 

Page title size Large, bold

Header size medium, bold

Body Text size small

Image/video/chart caption size x-small

I also agree with other posters: Sans-serif font (Verdana or Arial)

Site Colors: Maroon and Gold?

 

 

Update! As Krista noted, we can't use CSS directly in this version of pbwiki. However, we can standardize and get a great look easily enough without that. Take a look at the Environmental Page for an example of a color template. Because it seemed the majority opinion, I went with generally riverine colors (blue/green tones). I used this tip to insert the uniform background color (#dddddd). Headers are set to #005533. Body text is set to #000033. All of it is very easily editable, and we could add additional tones for subheaders and captions. I looked at this color sheet for my choices, and if you google it there are a million other examples out there. One strong opinion: Body text need not and should not be flat black. The darkest tones of blue and green (or maroon, etc...) offer all the readability of black, but very subtly add that extra style element of color.

 

 

one last note... -I'm all for CSS-. Google found me a demo site that lets you visualize CSS nicely. Though some of you might find it helpful too.

Whoever found the demo site: THANK YOU! I'm really excited to try it out. Here's a question that I still have: Can we import style sheets into the wiki? (Sara)

 

 

 

Sara

 

1. CSS

I agree that we should use a CSS to take advantage of its important benefits: consistency, efficiency and adaptability.

2. Page Layout

a. I suggest developing a grid with columns dedicated to titles, subtitles, and body copy, to navigation and to graphics.

I would like to suggest specific measurements but I will need to familiarize myself with pixel widths first!

b. I would suggest adopting a layout that is familiar: navigation on the left, body in the middle, graphics to the right?

3. Typestyle specifications

Specify several typestyles that are defaults both PCs and Macs:

a. Body: Serif fonts_Times New Roman, Times, New York

I've changed my mind about this suggestion! I think Verdana works really well for text.

b. Heads & Subheads_Verdana-, Helvetica- differentiated by size and bold as well as dark hues

4. Type size specifications

I agree with Jim's suggestion of using size and bolding to distinguish titles and several levels of subtitles.

Question: The web style guidelines we read gave several good suggestions to ensure accessibility: allow the

user to set the base font size in their browser and we base various sizes on "em" unit to ensure scalability.

I am not familiar with the "em" unit. Does this wiki allow us to follow these suggestions?

5. Leading

a. Define a set amount of space before and after each level of headings and subheadings to set them off from body copy

b. Set body copy on 14.5 pt. leading—if it is possible to define leading that way.

6. Paragraph style

a. Justification: I agree that all text including titles and subtitles should be left justified

b. Line length: 50-70 characters

c. I suggest designating new paragraphs with a blank space vs. indenting the first line.

I think bulleted lists and other special type treatments are more legible within blocks of unindented text.

d. Text cell widths: appr. 365 pixels

e. Use adaptable text block widths. The reading seemed to argue this was the best way to address accessibility issues.

7. Treatment of titles

a. I agree that we should capitalize the first letter of the first word only.

b. Consider using dark hues of palette to add visual interest but avoid mistaking colored text with links.

8. Color palette

a. I wrote comments about this elsewhere here but to summarize: consider using a river-related palette of blues, greens, greys and browns.

b. Keep background color soft and subtle to maximize contrast with text.

c. Avoid using strong colors throughout to emphasize photos.

 

Sara end.

 

 

 

Michelle:

 

I think:

• We should use Verdana as the font.
• That yes, like Amber said, we should use a CSS to help keep the format/layout consistent, and text should be left aligned and right ragged.
• That we should use variable width tables or tables that use percentage values, but not nested tables.
• The background should be white and the text should be black--no black background please because it is hard to read (I think) and might be misconstrued as morbid. As for heading colors and sidebar, I don't have an opinion, just nothing too garish.
• That links to other sites should open in another window.

 

Accessibility issues...or all the things you never think about, but should be grateful for, because you can see and use your hands

• I like the idea of an alt tag for photographs, but I don't think it will work for some of the more complicated images (e.g., twisted steel debris). How do you describe that accurately in 10 words or less. Maybe the D-link is the best option for that.

 

*

*

 

 

 

Anthony:

 

 

 

• General: (I liked Jim’s suggestions for basic elements.)

 

 

• Font: (Unlike in the web style guide I think we should use a sans-serif font for the body since serif fonts can sometimes seem blurry on computer screens.)

Actually, now that I'm paying closer attention to the appearance of fonts on-screen, I tend to agree that serif typefaces can appear more blurry. I think I vote for Verdana for body text, too. (Sara)

 

 

 

• Body: Verdana, small

 

• Page Heading: Times New Roman, large, bold
• Section Heading: Times New Roman, medium, bold

 

 

• Background: light bluish grey (much like the background of this page. White can be overly harsh and hard on the eyes in large quantities.)

 

I agree with the comment about the harshness white backgrounds. I am familiar with studies that show soft colors are less stressful to read. (Sara)

 

• Links: blue, underlined with purple after use, typical link effects.
  • (I agree with the idea that links to other sites should open in another window while links to pages on-site shouldn’t.)

 

 

 

Tracy:

 

 

• Background: I think that we should use a white background with black text since it is easiest to read and grey can appear a bit plain and boring.
• Format & layout should remain consistent. All text should be left justified including titles and subtitles.
• I agree with Jim in that it would make sense to incorporate maroon and gold since the colors are associcated with MN.
• Titles be bold and we should capitalize the first letter of the first word only.
• Aim at being concise and wordy about the information we present.
• Typestyle: Topics and subtopics should be Times New Roman and body should be Verdana.
   
  I feel that the usability of our site should be made priority, because if it is difficult to use people will leave. Our homepage must clearly state our purpose and what you can expect to take from it. We must clearly grab the readers attention by emphasizing headings and lists.
   
  I agree with Hilary that it would be good to use common words to describe things.
   
  Emphasizing photos by using subtle colors would make for a great visual. It would really grab the audiences attention.
   
  Links should be underlined in blue.

 

 

 

Jessica L:

 

• I agree that the background should be a pale neutral color, but not white. (Arial)

 

• Use line spacing rather than indentation for paragraphs. (Verdana)

 

• Suggest river associated colors such as blue, grey, green rather than university colors. Black text. (Comic Sans)
• No real opinion on the text type - verdana is easy to read and looks good - but going to have to disagree with some above and vote for the same font for headings (not times, etc). (Times New Roman)
• Also vote for tabbing and pop-ups. Most people prefer tabs now - so we should consider that. (Impact)
• On Stephanies name tagging comment - I think that we must use our name as one word or else it will count as two tags...? (Courier New)

 

• After considering each of the fonts here, my votes go to arial or verdana. The really wide fonts make me crazy because if you want to print something they take up too much space - also too much scrolling needed. Times is harder to read.
• Thanks for doing this little experiment with typefaces! It's really instructive. My screen renders Times New Roman in an infitisimal size. Consequently, I'm changing my vote to Verdana for body text. (Sara)

 

 

 

Hilary:

 

• Font: I believe that all the text should be in san serif font, because the readability is better. However, a serif font is supposedly intended to help lead the eye from left to right easier because of the tails. I vote san serif though.
• Background: I believe that it would be better to use either an off-white background or a grey background like this one, because white backgrounds just make eyes sore after awhile.
• Leading: There needs to be an appropriate amount of leading between lines, so that the text remains clear and concise.
• Format: All text including headers and body text should be in block text and left justified.
• Paragraph Style: I agree with Sara I believe that line length should be 50-70 characters long, because any longer than that will decrease clarity.
• CSS: We should definitely use this to keep style and consistency.
• I think the biggest concern should be figuring out what tags or common words are used to describe something, and then narrow them down to one. For example, the word rubble is used to describe the scene, but so does debris. Which terms should we use?

I agree on the importance of using consistent terms for our tags. We currently have a huge cloud with a number of very similar words with only a few references. There seems to be a lot of opportunities to consolidate these terms. What would be the best way to tackle this project? We each take on the words that are related to our topics? And would it make sense to work on this now or after we have begun populating the wiki with content? (Sara)

 I think after we get the wiki populated with content... so that we have less to filter later. (-Hilary)

 

Stephanie:

• Font: I worry about the font choice a little. I would highly recommend staying away from Times New Roman specifically, I think it is overused and can be rather dull. Personally, I really like Palatino Linotype, it is clean and professional but soft so it is easy to read on screen and in print in the event that visitors print materials.

I have to pose a question rather than a suggestion because I'm not familiar with typography in this medium: Is Palatino Linotype widely available and if not, does that mean that the text of the wiki would be rendered in a default font in the reader's browser? I guess I'm not sure what the implications are. (Sara)

• CSS: I am the biggest fan of CSS's and think we should definitely use one to help keep the site uniform and to help preserve sanity in the process. Great Suggestion Amber!
• Pop-ups: I've been watching the pop-up discussion above and I think we should use them. Separate tabs are also helpful in some instances though so we should not forget about that. Almost everyone has a browser with tabs so it should not be a problem. As for the pop-ups, we can use them for larger images. For example, sometimes there is a thumbnail of a photo on the pages and when you click on it it pops the photo out into a separate window. One of my favorite tricks with this is to use Javascript to set specifics on the pop-up such as no scroll bars or size it exactly to the size of the photo. Anyone have an opinion on this?

I agree with the suggestions to use pop-ups. I think your favorite trick is excellent. I don't think I've used a site programmed to present photos that way and now that I know it's possible, I definately think we should do that! (Sara)

• Headings: I think we should use small caps, it allows the heading to stand out more than just increasing the font size but isn't as harsh as all caps.

Personally, I love small caps but is this a treatment that may not render properly across platforms and via different platforms? Unfortunately, I have no experience designing in this medium to know ... (Sara)

• Background: I agree with the rest of the class in general, we should probably stay away from using bold colors since it can wear down on your eyes pretty quickly. I also think we are going to have some pretty powerful photos and we should let them be the main focus.

I think your suggestion to emphasize photos visually is very important and I think we can accomplish this by using a subtle palette of colors. (Sara)

• I just wanted to touch on Hilary's last point, I think we should work on a sort of "universal" list of tags that we really want to stick with for the most part. We can obviously branch out from there so that the wiki is easier to search and use but we should have a strong, accepted base. Finally, one more point regarding the tags. I think we should come up with a way to do names. When looking through all of the material we have already tagged on del.icio.us I noticed that we have different tagging style for names. Should we do them all as one word such as "JohnSmith" or should be break them up as in "John" "Smith"? Does anyone have a really good suggestion for this? I've seen it done both ways all over the web so I'm not really sure.

I think this is another important issue for our style guide to cover although I am not sure what the best solution is either except to ask does one seem more intuitive than the other? It seems like using both names is best for readers given the breadth of our audience. I tried treating that sort of tag like this: John_Smith. It keeps the names together although it looks kind of awkward. (Sara)

 

 

Hoang-Uyen:

• Page colors...Background and text: White background with black text is probably the simplest/easiest. However, if we want to go with themed colors...I like Jim's idea of Maroon & Gold for a Gopher theme. For a patriotic theme, how about white background with blue text with red tabs/links? There's always the earth colors--blue, green, white--white background, blue or green text and blue or green tabs/links.
• Font: "The sans serif and serif fonts are meant to represent the most popular font types used on the web today. (Bernard et al)" Comic Sans MS and Tahoma and Georgia are calling me for some reason! Body should be size 10 or 12. Headings should be larger size.
• Paragraph Style: Block not indenting and adequate spacing between each line (1.5?) and double spacing between each paragraph

 

David:

• Page colors BG/TXT: I think we should do a psuedo dark blue BG (0x001177) with silvery text (0xCCCCCC) and links should highlight to yellow (0xDDDD11).
• Font: Given the limited choices in fonts, Veranda is the best for this site. I personally like Comic Sans best out of that list, but it wouldnt be appropritate for this site.
• PG Style: Non indented, block style; segregated sections by marginal end to end lines, width of 1; Navagation bar on left, flush top to "banner" and roughly 900 pixels down. It should fit completely on the page without the user needing to scroll to reach the main information. Most pages should require minimal scrolling for the user on a 1024x768 screen with window fully expanded. Enter site should be centered in the window rather then flush left/right. This improves "comfort" for the user. If we can, we should try and make "collapsable tabs" for easy navagation. It is unreasonable to make each of our headlines on different pages, but we should be able to minimize the amount of content displayed on a single page by having the topics collapsed and accessable on click. I think I have seen this feature in a wiki before, but we'll have to find it. It might be a plugin.

 

 

Jessica L disagrees...Perhaps we could go with something related to the river (blue?) for color, but text should be black I think.

re: Site Colors:**

A. Color Palette

I like the idea of burgundy and gold because I'm all about consistent visual branding and we are at the U. But I also like Jessica's suggestion of choosing river-related colors: blues, greens, gray and brown. Perhaps we could reach a decision by thinking about the choices this way:

• Is a significant message of this site our relationship to U of MN? If so, using the school colors would be a very effective way to communicate that message. I think that we should keep our page separate from the U simply because I think it will detract from our overall goal of drawing attention to the bridge collapse. Also, I think that the Maroon and Gold gets a little overdone and that viewers may take the page more seriously if they see it as something other than a school project.- Stephanie

• If using the color palette to communicate messages about water, the river and the environment is more important, a blue-green palette would be more effective.

• We could also consider a solution that communicates both messages. This is probably not the optimal choice because it risks confusing the primary message but I think it could be accomplished through careful prioritization of the messages. For example, perhaps the UMN logo can be part of the header, the header can be burgundy while the predominant colors are blues and greens.

In any case, however, the background colors should be subtle to allow for sufficient contrast with the text.

B. Color for text

• I recommend black as well. It provides the most contrast.

• To add visual interest to the page, perhaps we could consider using dark hues of blue, green, gray or brown for titles and subtitles.

(Sara)

I do like the gold and maroon ideas... when I think of river colors... I think morbid.  Don't ask me why, but the U's colors are a nice touch because it unifies all of us as a team at the University. (-Hilary)

 

After reading this weeks reading I have really been considering how to make the site more usable. I'm a little stumped as to this but I'm worried that if our pages get to long they could deter the readers. What if we consider using sub-pages for longer entries. When I was looking through most of our pages and they are getting pretty long, I think the pages would be more usable if we could provide short pieces of information and they link to other locations. Anyone have any more suggestions on this? I'm stumped but the readings really made me think more about usability and utility and I think we are lacking on both of these.- Stephanie V

 

 Create your own educational wiki!HelpPublic, not yet premium Privacy Policy RSS