Information Architecture
A website should be built around its users. In my research I found that a tutorial should be easy to use, simple to navigate, and actually teach something. I hope that my design facilitates all three of those goals, they were at the origin of my design process.
Here is my design document.
And freehand drawing of my projected
page layout
and
content.
Sorry for the poor quality scans, but major thanks to lightbox for the image displaying code. I have been a fan of lightbox for a long time and it felt great finally using it!
This project will be graded on the basic design, organization of information, content, navigation and use of CSS (both text and positioning). Also must a separate linked page must be included documenting what I have done in each category. So although my design document covers most of the topics I will provide a paragraph for each.
Basic Design - Mostly covered in the design document and in the above paragraphs, I wanted a tutorial that was easy to navigate to help in the learning process. The navigation menus would show completed portions to encourage moving forward in the tutorial.
Organization of Information - By using tabs the organization is quite clear. Each tab represents a different section of the tutorial and pages with content toward that subject are placed inside of that tab. Also tabs are a well recognized and familiar concept to most computer users so they serve as an excellent global navigation.
Content - Plenty of it can be found in this tutorial. The tutorial itself unfolds much like a story (or so I think). Rather then just stating facts I tried to make the tutorial a little more interesting. The content is pretty straightforward.
Navigation - The tabs are the main navigation. Inside each tab another submenu is revealed. Visited sites have a distinct appearance to show that a task is completed. The one issue I had with navigation is displaying in this secondary menu what page you are currently on. I developed a javascript method that worked but pushed it aside in hopes of just using PHP later to dynamically create the pages and perform the same feat with just a single extra CSS rule.
CSS (text) - My design uses very little color. The majority of the website is (near) black text on a white background, a common and easy to use combination. However I do use color to highlight portions of the page that are important. I think that links and terms standout rather well with their text styles and code fragments are also easy to recognize and the colors help the reader differentiate between user input and output from the computer.
CSS (positioning) - The layout, with the
exception of the tabbed menu is fairly fluid. The title and tabbed menu
are both positioned absolutely, but to make the title fluid it is positioned
with a percentage from the right side. The two columns both are liquid
but are not absolutely positioned, in order to make the footer clear the
height of both columns they are floated elements. The website displays
properly in all popular browser on both Windows and Macs.
My CSS is 100% valid! No awful hacks needed.
Changes in the Final Version
I did not see a need to make major changes to the final version. However I did add a few features that I wanted in the original but without complete access to php I neglected to implement them. I did follow through for the final and made the features using javascript (menu.js) and a little DOM knowledge. Now you can see exactly where you are in the site from the menu! There will be the usual black bar next to the section you are in, helping you again with navigation and usability.
After some heavy reading on shell scripting I added TLDP to my related links section. I also added some content in the tips and tricks section! Of course I updated and corrected a spelling error I missed in the title of one page (ouch!).
Enjoy,
Joe Pecoraro