My portfolio site and accessibility

As I've been working on my portfolio website, I've realized through todays readings that I'll need to update a few things in order to make my sites more accessible. Putting my website through the WebXACT accessibility checker, I knew that my biggest shortfall was twofold: I lack proper meta tags and I haven't included ALT attributes in any of my IMG tags. So I'll just put two more things on my "to do" list. Oh, and I forgot some width and height measurements for some of my gifs: this isn't a problem in my instructional site yet because I don't have any gifs or pictures yet. I'm still debating if I will use some.

I also learned something new about coding in the readings. It's important to include the "/" at the end of the url if the href is going to an index.html file. Apparently, the browser has to make two requests from the server to follow a link if the last "/" is missing.

In general, the design principles in the readings today really didn't deviate too much from what Garrett had talked about, but they each had their own pet peeves that they aired out. I honestly don't think much of that one gentleman who advocated for programming a site so that it could be viewed by Lynx. However, I do agree that it does make a site more indexable and thus should at least be attempted. Also as a result of this man's design principles, I might also consider using a script to display different (aka smaller) navigation images depending on the resolution of the client. My portfolio site looks ok at 800x600 (it looks great in 1024x768), but it might not look as cluttered with smaller navigation images at 800X600.

Oh, can I also get an Amen! to all of the writers who mocked colorful and busy backgrounds!

But my favorite assigned website was the graphic design website! It wasn't too deep, but gave a great outline on basic design principles. It reminded me why I like working with Photoshop so much and how flash can be a mixed bag of nuts. It was, for a flash site, simple and well done: but it took me a while to figure out where the contextual hot spots were. I learned from the site that I picked warm hues for my color palette: I was actually going for that. The interactive color wheel was terrific and I'll definitely use that as I finalize the color of my instructional site (I currently have primary colors, and I knew from the beginning that this wasn't exactly what I wanted). I also found the bit on typography to be fascinating (as I took some websites to task...cough...Drudge...cough...for poor typographic choices). And now I know what a serif is: it's those little nubby things that make letters fancy, like the things at the bottom of the t at the beginning of the next sentence! This font that I'm writing in is a serif font (although the serifs are small). Speaking of fonts, I also want to share a great website: Font Freak. It has tons of free fonts!

Webstyle Guide Thoughts (cont'd)

More thoughts on Webstyle Guide elements:

2) In terms of instruction, everyone should have read the Site Design Themes section: especially the teaching and instruction subheadings. I find the graph on user contact time, found right here, to be very illuminating.

Basically, user time and narrative non-lineararity (if that is a word) are proportional: Increased user time with and an increasingly non-linear narrative style requires a much more focused user. Such an application would be appropriate for a higher education audience. For my website, I'm in the "Training" bubble. According to this graph, a linear narrative would require more user contact time -or- if I want more user contact time, then I would have to increase the linearity of it. I think that's great, but I take exception to the site's assertion that having contextual links is a bad idea in terms of instruction: it's distracting. I concede that it may be a bit distracting for some users, but I really think that many would take advantage of contextual links and use them only when necessary. Also, I also think that tabbed browsing changes this assertion, too. A user can click on contextual links and a tabbed browser will load the page in the background while the user focuses on the current content. In my website, I think I provide a good balance between linearity and contextual links without giving the user an undue burden.

3) Typeface/Typography section: I didn't think that fonts would be so fascinating. But, since I've been harping on about certain website's poor choice of font, I thought I'd explore this heading. Here's the page. I didn't really know much about the serif vs. sans-serif fonts: serif is the traditional print font while sans serif is better for computer monitor viewing. If one wants their user to print out the webpage, then a serif font is useful. Serif is also useful for headlines (as in a newspaper) and small print on screen. All the rest should be in sans serif. As applied to my least favorite website, drudge.com, how does it stack up? I looked at the code and opened up Drudge's style sheet file. For headlines and small print, sure enough, he uses a san-serif font for headlines and small print (Helvetica and Verdana). For normal text, he uses Courier New (which is a font that was originally designed for IBM typewriters: if you remember, it was the kind with the ball) which I would assume falls under the "serif" category. Here's more proof that Drudge is just "wrong." He has it switched around: for normal text he should use a sans-serif font while using a serif font for headlines and small print. No wonder I get a headache when I go to this site! (Ok, it's the politics, too). For my website, I'll make sure to keep that distinction: sans-serif for normal text, etc. It's this little detail that I haven't thought of before that caught my eye. Oh, I might also want to implement a "print this page" link somewhere in my instructional website: it would combine all the steps in one content area of my site and arrange them on an easily printed out page.

Webstyle Guide Thoughts

Webstyle Guide rocks! It's very comprehensive and concise. As per my assignment, I'll take three of his sections and apply it to my own website:

(I'll write one element now, and I'll have the other two posted tonight)

1) In the interface design section, he makes a great observation about the difference between print media and web media. Since print is linear and the web isn't, each page has different standards in terms of metadata: what is the page about and where does it belong. In a book, you might have the book title, chapter title, and page number on each page. Since it's contextual and physical, you know who authored a particular page because the book, as a self contained information object, will have that information on or inside the cover. A webpage, according the Webstyle Guide, is a freestanding page: since everything is hyperlinked, metadata and contextual information should be included on everypage. Why on every page? Most people follow links to a page that is, contextually, in the middle of the content set. If there is no metadata included on the page, then the user is at a lost about who, what, where, when a piece of information is written. For my website, I need to put such things as authorship and "Updated XX/XX/XX" so that the user has that metadata on hand. Other metadata, title and contextual, will also be provided via the site navigation and setup. A user would know where they were at in relation to other steps/subjects in my instruction due to the navigational tabs at the bottom of my site, and they title will always appear at the top of every page.

5 Websites I don't like

As far as design and style, I'm going to choose a wide range of websites:

Website #1: "Simplicity doesn't do it justice."

http://www.library.cornell.edu/newhelp/res_strategy/citing/apa.html

This is a website that tells students how to do APA form correctly.
It's a simple looking website, but unfortunately, the content is plentiful. The problem is that the navigation and it doesn't fit well with the content. The only links to be found are at the top and they go to anchor tags. When a tag is clicked, you have to scroll back!! Booo!! I would fix this in one of two ways: 1) use sidebar navigation (with expandable side menus) 2) use "back links" to be able to go back to the content navigation links. This is an example of when simplicity goes wrong.

Website #2: "Too much navigation"

http://www.fark.com

I actually love this website. Well, it's the content I love: it's a great aggregate of funny and amusing news tidbits. However, I hate the side bars. There's way too much going on. I'll actually forgive the website for the right side bar: it needs to have advertisements to stay operational. I just wished some content links weren't mixed in with the ads. I'm not sure if they're internal or external links (and you have to be careful with external links nowadays) because of they're proximity to the ads. On the left bar, there is just way too many links! I really think Drew Curtis didn't think about the scope of his website and it got away from him: and now it's link mania. I would reorganize the navigation links so that they are more general: like replace user centered links with a "User Services Link" or all of the forum/chat links with a "Talkback" link that leads to a portal. The link headings help, but there are just too many to navigate efficiently.

Website #3: "Metaphor gone wrong"

http://www.drudge.com

I hate this website. Not only do I hate the content, I hate its presentation even more. This is what Garrett would call a literal metaphor gone wrong: Drudge uses a newspaper metaphor that gets out of hand. The middle left content area isn't that bad: but I don't know which ones are top stories and which ones are older. Plus, the font is hard to read: it's too blocky. Plus, what's with the "..." Is it necessary? I know it's a newspaper/"hot of the wire"/"more on the fold" symbol, but there are so many of them it makes the page look visually cluttered. Lastly, the links on the bottom are horrible. What are these links and why should I care? At least Fark had link headings. Actually, they're blogger links on one column and on another, it's columnist links: but I'm a political junkie. What about the casual reader?

What would I do? I would clean up the font, eliminate the "...", and clearly mark my navigation. He needs to demarcate his content and navigation areas better. New York Times does a much better job at the newspaper metaphor.

Website #4 "Lack of User Centered Design"

http://bb.siue.edu/ (sorry you need to login to see this one)

I hate the blackboard forums. It takes a user and clobbers them over the head by saying "you will view this content our way or no way." Forums are supposed to be interactive and facilitate the free flow of information. But it doesn't let the user customize how that information is presented! You can't have an asynchronous conversation if you can't engage multiple parts of the discussion. How does BB prevent the free flow on information? Currently, it only displays the post title: and we all know, post titles are less than descriptive of the content of the post. In addition, it doesn't display the actual post until you click on the subject line link: if titles are incomplete, wouldn't it be better to have, at least, a portion of the post displayed?!

What would I do? I would prefer to see the whole thing (and have long posts that are collapsible) in addition to seeing the entire post of the replies. It would be so much easier to read and reply this way. Currently, you have to make multiple clicks or open multiple pages (in my case, multiple tabs in Firefox) to gather the required information from other posts to formulate a cogent reply! Gah! I should at least have the option to display the forum in the current way, a comprised way (i.e. seeing part of the post), or the posts in total (see dailykos.com for a good example of this).

Website #5: "Why should I care about this site and how is it organized?"

www.arborheights.com

I feel bad for not liking this website as it's an elementary school's website. However, my experience with most public school websites is that they're poorly done (which might mean they're done by students, and that is very forgivable).
What's wrong with it? If you landed on this page, would you be able to figure it's purpose? You know it's an elementary website, but why did they make it? There's no clearly defined strategy or scope. And, this is reflected in their choice of skeleton and navigation. There is no organization for navigational links! Which links are important? Which links are internal/external? How are the links organized? The icons are cute, but they're obviously placed in a 5x4 table with no meta unity.

God, I feel like I'm beating up on a little kid. But where are the mentors/teachers?!

What I would do? Simple: they could keep their basic skeleton, just add another row on the top that puts cute navigational headings and organize the links so that they belong under the proper subheading. They also need a mission statement of some sort: why is this website here and what purpose(s) does it accomplish for the school? I think they should also organize the links so that they're pertinent to their users: students, parents, and faculty.

What about my website? I'm trying for simplicity in my websites. But simplicity doesn't mean a lack of navigational options (and complexity doesn't mean tons of links). In my instructional website, I want people to navigate according to either their step in the process and navigate contextually (links in content). I think that will accomplish simplicity without being too simple.

Chapter 7

With the re-orientation of my instructional goal. Chapter 7 really doesn't impact it much: at least for the instuctional website. The surface of my instructional website will have a uniform palette that mimics a stop light (green, yellow, and red). Here's a quick link to my website. Although the colors I have on it right now aren't aesthetically pleasing, I'm currently experimenting with Photoshop to find richer, more contemporary hues of red, yellow, and green.

The true test of my website, according to Garrett, will be the eyeball test. Will someone's eyeballs go to the bottom row of links (they're currently just Step 1, Step 2, etc. text) and navigate the site as I've designed it OR will they get confused as to where to go next?? Secondly, I've included in my grid/skeleton (make sure you view it in full size) another navigational tool that does "Next Page" and "Previous Page" linear navigation, but I haven't implemented it yet. Why? I want to keep it simple, and I'm worried that if I put it in there, that the simplicity of my site will diminish. I'll do some user tests to see if including it will add or detract from the user experience.

Long Delayed Update

Well, my subject matter needs to be altered a bit. For the last two weeks, I've been struggling with PHP and a lack of Dreamweaver at home (MX never worked, and my 30 day trial period with 8.0 is up). What I set out to do was a bit too ambitious. A part of Garrett's book was that you need to be realistic and flexible with your strategy and goals, and luckily, my goals are flexible enough so that I can change my strategy slightly without changing the underlying structures much.

What I am able to do is implement a pre-written open source PHP gallery called Gallery 2.0. And that's the nature of my instruction on my instructional site: I'll instruct someone to implement Gallery 2.0 and how to customize its look and feel. It's a dynamic photo gallery and it comes with pre-set templates (the default look and feel is minimal). Here are the challenges (and they match up with what I originally set out to do). 1) Find an appropriate web server 2) Install Gallery 2.0 3) Customize the look of Gallery 2.0. The program is several megabytes: customizing it requires being able to change style sheets and templates (not Dreamweaver templates). Actually, digging around subdirectories and code is in order to customize Gallery 2.0.

The last two weeks, I've been working with Gallery 2.0 and applying it to what I've learned here in IT486. What's left is this: McGurk's Photo Gallery. Actually, one should probably go to the McGurk's website to see how it works within the greater website. I've only accomplished the color palette conformity aspect: it looks like it's a part of the website, but in terms of uniformity, it comes a bit short. The banner should be centered, the links need to be on the top row, and there needs to be some white space around the edges. By figuring this out, my instructional website will teach someone to go through this whole process with ease!!