Web Design Students
Millikin University

James Butts

Learning Review

http://students.millikin.edu/~jbutts/en301/portfolio

User Knowledge:

I had a decent background in web design before taking this class, but I feel like I picked up a few things about Dreamweaver that will make life easier. I also understand the design portion of the program a little better, which will allow me to help people that don’t like to work straight from code. I learned about user expectations: how elements of a site should and shouldn’t act.

Design Knowledge:

My designs this semester have been relatively simple. This has been because I’m still learning how to structure pages using CSS. I didn’t want to kill myself trying to do an extremely complicated design for each project. Also, the time span of the projects wasn’t always ideal for intricate sites with many features. I learned some about aesthetics of web design and usability in design, but I think it would be good to learn more about appearance of web designs. What path does the eye follow? Where is the best place for navigation, callouts, etc.?

Project Management Knowledge:

I’ve learned that in order to create a successful web design, you need to be in constant communication with the client. On the Prairie Avenue website, my group did not contact the church often to find out exactly what they wanted. We created the site based on their initial needs that they presented to us, but we did not follow up and seek feedback from them. Consequently, they were not impressed with the site we presented to them.

Tutoring Knowledge:

I think I could have done a better job developing this area during this course. Too many times I found myself rushed to just get my part done, and didn’t find enough time to help other people learn more about web design and implementation. I did offer some advice and answer the occasional questions, but I could have been better in this category. I hope that my presentation on CSS and web standards sparked some interest to get people researching those topics on their own. There are a lot of tutoring resources available for free at any time on the web, and I sometimes forget to utilize those when I’m stuck on a problem.

Individual Project:

I'd like to finish the back-end to my UCB content management site (www.millikin.edu/ucb). I would then like to apply a lot of the implementation of the CMS to a new design for InterVarsity Christian Fellowship.

Client Project:

Prairie Avenue Christian Church
http://students.millikin.edu/~jbutts/en301/pacc/

Lindsay Binkley, Jim Butts, Meredith Monti

We created our website for Prairie Avenue Christian Church in Decatur. Their biggest needs are to have some way to tell people where they are located and to inform people about the Dove Children’s Clothing Room.

We made a basic site that is primarily functional. It does not have a complex layout, and it is not graphic intensive. This is so that the members of the church can update it easily. We organized the layout with CSS in order to keep the content separate. This again will make it easier to update. Also, if a browser, for some reason, does not display CSS, it will look like an outline structure that is still easy to understand. Also, web crawlers will be able to pick up on things like the titles and links since they are actual text and not images.

We added a link to Google’s maps to give visitors a better idea of how to find the church. We also have a page devoted entirely to the Dove Clothing Room. The content itself is very flexible. The church members could change the text to fit their needs, but the basic structure will remain the same.

One thing we have not addressed is the desire for a calendar and photo gallery. We felt that the news section can serve for the basic need of upcoming events, and a photo gallery would be the last priority. We first wanted to focus on information, then begin on the other details.

We would still like to add image headers on each page to help illustrate the purpose of the page. For instance, we would have a banner of the Dove Children’s Room on the Clothing Room page.

We also need to add keywords and descriptions to each page in order for web crawlers and search engines to recognize the site better.

As far as our visual design, we wanted something simple that could be navigated quickly and easily by anyone in the target audience (we’re assuming a broad age range including 20 year olds and elderly people). We definitely wanted to include the red chalice, so we have featured it in the header of the site. Again, the text could easily be changed to fit the needs of the church more appropriately. We were more concerned with presenting a solid layout than organizing the details the content (which could likely be out of date by the time we had finished).

Hands On Training Tutorial Responses

Chapter 13

Chapter 13 introduces layout for forms on a webpage. Other than the jump menu, however, it doesn’t actually help you unless you can figure out how to run the scripts on your own. I think this chapter could have gone into a little more detail about how forms work without confusing the reader too much. They could have shown specific examples of forms implementing the CGI or PHP scripts they mentioned. Even for what it did introduce, it could have gone into more detail. For instance, they didn’t show how to make an input field read-only or make a field use asterisks for things like passwords. Overall, I think this chapter could use a little more content.

Magazine Case Review

Mayfly Case: Meredith Monti, Galen Broaddus, Jim Butts

URL: http://students.millikin.edu/~jbutts/en301/mayfly/

While designing our website, we decided on a simple layout. Little color and lots of space on each page was a way of mirroring the general way haiku are presented. We did not want to distract from the general purpose of the page with too many images and colors. We decided on a consistent theme for each page using the same layout.

We also tried to do our work efficiently utilizing a common CSS style sheet and layout out elements with that instead of tables. We used some of the artist’s cover work on our pages for accents and backgrounds. We wanted these images to be simple so that they would not distract from the Haiku; therefore, picked one that would act as a sort of border, and we added a bit of color to draw in the viewer a little more.

We added navigation to the left side of the page and labeled things clearly. We tried to work within a page that would not necessitate scrolling on most monitors in order to continue our theme of simplicity. On our recent issues page we are using images from the past three Mayfly magazines so that viewers can see recent covers and cover Haiku.

We decided not to show archives of past work for two reasons. We did not want to give the viewer everything; after all, it would be nice to sell some back issues. Also, we wanted the site to feature only the necessary information in order to keep it short and simple. To showcase the artist Lidia Rozmus, we took her chop and used it as the link to the page with her bio. While “hidden” links like this aren’t always a great idea, since people don’t always find them, we thought it would work in our case since the site’s layout is minimal, and viewers would likely look around for other things to click on. We also created a simple introduction page that we feel balances nicely between simplicity and abstraction.

Chapter CSS

I thought this was an excellent chapter. It does a great job of explaining the importance of CSS and how it can drastically aid in the efficiency of creating and updating a site. It showed good examples of how to manage different tags, classes, and styles. I think the examples would also make it easy for someone to understand CSS in the code itself. I liked that the authors showed how to make effective rollovers with CSS, but they did not work for me when I previewed them in Safari (but that could well be my mistake). Overall, I thought this was an excellent and easy to understand introduction into CSS. I do, however, wish that they would have mentioned more about the ability to use CSS to layout elements of the page itself (instead of tables).

Chapter 10

Chapter 10 does a good job of introducing rollovers. It covers many different types of rollovers, all of which use some sort of image swapping or replacement. I thought the authors offered a good tip by explaining the possible issues with preloading looping animated GIFs. I think this is a practical chapter that can add a nice touch to a website. However, it is easy for people to go overboard with rollovers that ultimately distract from the purpose of the site. All the rollovers in this chapter are generated with Javascript. There are also ways to achieve the same effects using only CSS, which would eliminate the scripting. I don't have much experience with CSS rollover images yet, but I have briefly looked at a couple examples. One popular method is to have both images combined into one image, then adjust which area of the image is visible depending on the mouse cursor's position and state.

Chapter 8

Chapter 8 delves deeper into the topic of layout—one of the most challenging aspects of web design (not the design itself, but the implementation). The layers section seems useful, but at the same it, it was difficult to get everything just perfect so that it would look right and work if you wanted to convert it to a table. I do like that the layers uses CSS to position the elements. The code could be cleaner, but it’s pretty good considering the user can basically drag and drop on the canvas. I’m not exactly sure how useful the tracing image is. It seems that if you were organized enough when you designed the site, you shouldn’t need it. Perhaps on more complicated designs with several elements to keep track of, it would make more sense. The author also shows how to nest fixed tables inside fluid tables to create an expandable menu. This is a good concept, and it can be applied to CSS layout as well. Overall, the chapter was a good push to start thinking about layout, but the functionality of Dreamweaver’s automation isn’t perfect, and it is useful to understand what is going on when you drag images around in the design view.

peer resume critique

Review of Galen Broaddus’ web resume:

Galen has organized his web resume into a very structured layout. He uses tables to place his text in different areas. He could set the table width a little narrower if he didn’t want the text to continue all the way to the right edge of the screen. Although he does use italics, I would also suggest using either some larger font sizes or bold styles in some places so that the text doesn’t all look the same. Integrating an additional visual cue to separate the different chunks would add to the overall effect. I would also recommend considering a different, clearer way to represent the dates in the employment history. As of now, they are somewhat isolated on the right side of the screen, and it may get somewhat confusing for the reader.

I like the topic indicators Galen has along the left side. Each section spans the appropriate topic. I do think the headers could be more pronounced, though. It may also be a good idea to add the headers in with the text body. Other than the side bar, there isn’t much to indicate which section of the resume you are reading. I like the bulleted points Galen used for his employment history section. Using an unordered list, he organized the key points of each of the jobs he had. I also like that he named his downloadable resume document GalenBroaddus_Resume.doc. This will separate it from other downloaded resumes that potential employers have.

Galen has his content organized in chunks for easy navigation. He has three categories: education history, employment history, and other activities. He also has links to each section at the top of the page. He may want to consider adding a back to top feature in the future as his page becomes longer. He uses a specific font, so he created images of the text in order to ensure that they’ll look correct on all monitors.

He has also set the font family to Helvetica. If that font is not available, the next choice is a sans-serif font. Arial Black is the last resort. I’m not exactly sure if this is correct, but I think the Arial Black should go before the sans-serif since it is more specific. If all computers have a sans-serif, the Arial Black option wouldn’t be necessary at all. Again, I’m not an expert on this subject, but I think it’d be worth researching.

Galen doesn’t appear to have inserted his meta tags yet, so I don’t have much to comment about those. I suppose he can use keywords that include his major, year of graduation, degree information, past employers, and the general area he’d like to work.

Chapter 7

This chapter shows the possible layout options that tables can provide. However, this chapter does not warn the reader that this method, though popular, is becoming increasingly frowned upon by web developers. It also doesn't mention that not all browsers support the "height=100%" feature. In any case, I found a few interesting tricks in this chapter. I like the Tag Selector feature that allows you to highlight blocks of code based on the hierarchy featured on the bottom of the design view. I also like the auto formatting options for sorting tabular data in the page. Finally, I think the ability to import delimited data could be very useful. Overall, I think this is a good chapter to go through in order to begin thinking about layout, but I also think a mention of the current debate on table use would help keep the reader better informed on the topic.

resume critique

GOOD EXAMPLE:
Sean Cooper is an interactive designer, and he has created a web resume/portfolio at http://www.seantcooper.com. I'm not usually a huge supporter of sites created completely in Flash, but I think this site is an example of an exceptional web resume page that utilizes his skill: interactive design. Sean quickly orients the users to his site. It's very easy to see what he does and what the site is about. A short description or keyword appears at the bottom of the site when the user rolls over links. Sean also has a link, pictured with a question mark, which explains the purpose of the website and gives background information on Sean Cooper. Sean's navigation is unique. He has creatively created four interactive balls that users can control by dragging with the mouse. Clicking each ball takes the users to another section of the site. Sean also features a "quick navigation" option that is more standard and can give users more direct access to the contents of the site. Finally, Sean's quality is excellent. He features solid, in depth examples of the work he has completed. Elements of his site also display his abilities as an interactive designer. For most of the games, he features descriptions as well as personal commentary about his work on the development. Overall, this site has quick and innovative orientation, unique and effective navigation, and appropriate and well developed content.

NOT SO GOOD EXAMPLE:
My current web resume is my example of a site that I don't like. At http://www.jameswbutts.com, I have created an online portfolio to have a web presence to show potential employers. In addition to the outdated content, there are many things I'd like to change. First, the orientation is mediocre. I do have an introductory paragraph explaining who I am and why I made the site, and I have explanatory text at the top of most major pages. However, other than the page titles, there are no breadcrumbs or methods of signifying which page you are viewing. Also, I think the title "Interests" is not quite appropriate for the site. Perhaps something like "Fields" or "Specialties" would be better. Navigation is fairly simple. I have a hierarchy on the left side that can jump to a few specific pages, but the pages themselves are probably too long. The content could be broken into subcategories and organized more efficiently. I could also have more anchors to jump to sections in pages like "Miscellaneous." The content quality could be much better. I have several examples of which I'm not particularly proud. I think I should narrow down the samples to show only selections of my best work. I may also have too much explanatory text for each section. I need to find the right balance of giving enough information, yet not going overboard with prose. Finally, the physical structure of the site is rigid and inefficient. The sliced images in a table (as opposed to CSS) load far too slowly, and anyone viewing only text could get pretty lost. Also, due to the inflexibility of the layout, the site looks awkward on high resolution monitors. Overall, this probably isn't the worst example I could find, but I think it is a good example to learn from because it looks good at first, but the overuse of graphic elements, the excessive examples, and the inflexibility can begin to deteriorate the quality of the site.

Evaluation of Galen Broaddus bookmarks page:

This page does a good job of compiling several resources into one easy to navigate page. The user can quickly become oriented to what the page is about. I do think Dr. Brooks’ advice about revising the prose for the introduction would have a strong positive impact on the page. I like the subheadings for each section. I think they effectively describe the sections to people unfamiliar with the material as well as reiterate the concepts for those more educated in the subject. (I think the ‘logic and fallacies’ section, however, had the wrong sub-header as of 9/21). Galen has even added additional information about each link, which not only reiterates which section the user is viewing, but it also gives more detail about the link. The links are also appropriately titled for the subjects to which they link.

The navigation on the page is simple and effective. The table of contents on the left side allows the users to orient themselves with the content as well as jump directly to a topic. When the users click these links, the section title appears at the top of the page, which also helps to keep the users oriented. The visited links appear white so users know which links they already clicked. I would suggest making the titles of the sections more prominent. As they are now, the sub-headers are bold and stand out as much as the section headers. Along with that, I would also suggest making the page title larger and/or moving the navigation table of contents down. Looking at the layout at this time, my eyes are drawn first to the navigation and then to the page title.

The content seems relevant to the topic of the page. The descriptions are brief and accurate. Many of the links go to other scholarly pages at different universities. The introduction, headers, sub-headers, link descriptions, and link content all seem to build on the main topic of the site. Galen has also included enough links to make the page a worthwhile stop for visitors.

My primary suggestions for improvement would be to edit the introductory sentences and to adjust the layout to make titles more obvious and pronounced.

Chapter 6

I think this chapter made it very clear that text will not look the same on every computer (unless it’s an image or controlled by CSS). I think the most important points are how to make font lists and how to format text using ordered and unordered lists. I think the drawbacks of flashtext outweigh the ease of creating it. I also think the necessity of a specific font can be debated, and it’s often not worth creating an image out of text if possible (mainly because they cause slower downloads and web crawlers and screen readers ignore them).

Website URL: http://www.simplebits.com

The author of this site, Dan Cederholm, also wrote Web Standards Solutions. I read his book at work over the summer (Interactive Services at Jones+Thomas), and I learned that my method of building webpages is ineffecient, ineffectual, and not at all compliant with current web standards. His website, simplebits.com, does an excellent job of organizing dynamic content in an easy to understand format. His style, ironically, seems simple, but I think it's excellent: not too graphic intensive, very functional, fluid, and aesthetically pleasing (not to mention he has some great tips on web design).

Author and designer Dan Cederholm’s website, SimpleBits (http://www.simplebits.com) excellently utilizes key features of solid web design. As the page loads, the viewer instantly gains a sense of what the site is about. Cederholm features a brief introduction that explains who he is and what SimpleBits does. Cederholm orients the user to where he or she is in the site by highlighting the menu option at the top of the page. This allows the user to easily see what page he or she is on in addition to other possible pages of interest. He also keeps a consistent footer that features a search bar, links to some of SimpleBits products, and information on books he has written.

Cederholm’s navigation method seems very simple. He has a set of links at the top of the page, including the common home, about, and contact options. The links have a rollover effect, but he has maintained the integrity of the text. He did not use flash or javascript to create the rollovers. Instead, he uses CSS styles to control how the link text should behave. When away from the homepage, the user can also click on the SimpleBits logo to return to the index page. Cederholm also integrates links within his text. He offers the “learn more” option when a small piece of a page is featured within another page. He also sets the titles of the “quickbits” section to external links delving deeper into the subjects.

The content in the SimpleBits website is far from filler. The site is filled with useful information, links to good sources, and features on upcoming news and techniques in web design. On the homepage, he features an excellent link, “Beginner's guide from a seasoned CSS designer.”

Cederholm does have a personal blog on the main page that isn’t always relevant, but it keeps the feel of the site personal. It contains info on his latest developments, what he has been doing, and things he’s learned. One entry tells about the a school that teaches the importance of CSS, web standards, and hand-coding for web design.

I think Cederholm’s overall design is both aesthetically pleasing and extremely functional. He chose good colors and simple logos. Also, almost every piece of his site has a purpose—there are not superfluous images to fill in the blanks. He organizes the pages very well so that the content does not overwhelm the user and yet showcase a lot of information on one page. He breaks up different sections and varies their presentation in order to separate them.

SimpleBits is an excellent example of good web design because it follows current web standards. Cederholm uses div tags and CSS to organize layout (instead of tables). His code and CSS correctly validate on the W3C site. He also offers separate CSS files for printing and fixed-width display. His navigation is an unordered list controlled by CSS. Cederholm uses CSS exceptionally to make sure his site appears appropriately on a variety of browsers.

This website quickly and consistently orients the user, offers effective and easy navigation, presents high-quality and well-organized content, considers nearly every browser and media type, and supports today’s web standards.

Writing Space Chapter 1:

Do you think word processors will diverge from the linear style they are now? Would users embrace or reject such an addition? If they embrace it, could an alternate style replace the current style as the mainstream word processing format?

Chapter Presentation: For the chapter presentation, I'd be willing to do mine on a subject not in the book. I was thinking I could present on web standards. Some possible topics would be "what they are and why they are important." Excellent idea Jim! This is approved for your presentation web page topic. —dr b

Chapter 5

This chapter explained in more detail how to make links. I had never used the “Point to File” option before. I thought that was an interesting concept, and I could image certain instances when it might be useful. I think the placeholder idea is interesting, but they should have showed how to create placeholders in the first place. I also thought it was good that they talked about different files that they had us link to (pdf, zip, sit). I think this chapter was a good overview of the different types of links you can insert on a page.

Chapter 4

I think this chapter was a good introduction to the overall interface of Dreamweaver. It shows how to insert images, make links, and start a site. I do like that they occasionally show the code that the program generates. My only real complaint is the way they make you choose files when making a link (as opposed to folders). For instance, you have to make a link to ‘chap_04/resources/index.html’ instead of just ‘chap_04/resources.’ I prefer the latter because the index.html won’t show up in the location bar.