A Single Article
Read it, comment, and share it with your friendsTeaching Web Design, part 1
Today was my first day as section instructor for INFO 130: Intro to Web Design. It was intense.
I walked my students through creating a basic webpage (no styling, just content) and explained the purpose of the doctype, html “lang” attributes, head, and body. I then demonstrated the course website and showed them how to use the course tools and WinSCP to upload their assignments via FTP. Somehow I managed to blaze through all of this and everyone at least convinced me that they had no problems following along. I guess I’ll find out if that was true eventually.
Since I finished with time to spare, we had 15 minutes to cover the real fun part: talking about well designed sites. I was able to put up 2 great sites and have the class discuss them. The points the students mentioned are summarized here:
- Flock.com
- 1. Students liked the color scheme. Good bright colors, and a small, consistent color palette that works well.
- 2. Students also really like the Flash module on the front page. They liked how you can view small videos of Flock in action and load each one without visiting a different page.
- 3. Students liked the persistent navigation that makes it easy to get to each section, or back to home.
- 4. Students did not like the extensions page. They complained that the extensions page does not give any information about what extensions actually are, and therefore the page is not helpful at all.
- 5. Students did not like the change to red text headers on the Blog page.
- 6. Students liked the fresh use of images (Flickr and author photos) on the blog.
- 7. Students found the blue line across the top of the page to have a jarring effect, making it appear as if there was extra content above it. They claimed it made them want to scroll up.
- 8. Students were not used to the [blog] menu being on the right, they said they preferred left-side menus.
- 9. Finally, students mentioned that the menu on the blog page is too long!
- Overall, they were all pleased with Flock.com, and they each found different things that they liked or disliked.
- Yahoo.com
- 1. Students felt there was too much content on the page.
- 2. Students liked the used of visual icons with text-based links. They found them to be a big help with navigating the site.
- 3. Students liked the well-aligned, clean grid layout.
- 4. Students liked how most of the content was presented above the fold.
- 5. Some students liked the “change colors” feature, others found it to be an annoying gimmick.
- 6. All students agreed: they hate Flash advertisements. Many (about 75%) admitted to blocking them with their browsers.
- Overall, they had mixed feelings about Yahoo.com.
Good feedback from a great set of users!
Get a Trackback link
2 Trackbacks/Pingbacks
Other blogs referencing this article11 Comments
Responses to my articleI find your approach to teaching web design interesting, mainly because it’s the same way I would probably end up doing it. I’ve thought about it occasionally and I always came to the conclusion that you have to teach it correctly from the start, I probably wouldn’t go into much detail about the doctype or lang attributes in the first class (unless asked) but i’d have them included in the examples (much like when being taught Java for the first time they don’t really bother explaining all the parts of the code samples until you understand the important parts).
It sounds like you’re already onto a winner, i’m keen to see how the rest goes.
Well I have to tell you that I am just following the syllabus set up by the department. I am infinitely impressed by the professors, including the current lecturer who has less than a semester’s experience with XHTML and CSS. From lecture 2 he was already explaining semantics, machine-readability, and device independence. The students are not touching CSS until week 2. I’m going to dig up some lecture slides to show you guys, you would love them. If anyone is thinking about a good place for InfoSci, Cornell is my recommendation.
I would also learn to them:
HTML 4.01 strict
depreciated tags? what is that?
Why XHTML has no real advantage (for most webpages) over HTML though WWW promotes XHTML
UTF-8 (versus eg ISO 8859-1)
useful metatags ??
importance of links, headings, alt, title for SEO
code indentation
structuring a webpage so it is readable on Dustins Naked Day
Johan: I would love to cover all that stuff, but unfortunately it’s not in the syllabus. The course teaches XHTML 1.0 Strict, and while it’s nice for them to write valid, well-formed XML, it bothers me to no end that they honestly think they are using real XHTML. Oh well
You could of course go around that and point them to useful websites to explore.
Like quirksmode.org, 456bereastreet.com, … (you can fill in the dots)
Johan: i’m sure we’ll all be doing that. in the meantime, c, what do you mean ‘intense’? also i find it interesting that so many of these kids choose to block flash ads, or that they know how to (they are taking intro to html). someone should tell yahoo etc.
“intense” means that I was so nervous, I almost exploded. It’s natural for me to be nervous when I am speaking in front of a crowd, and I at least think I managed to control it.
Christian, what did you mean by “it bothers me to no end that they honestly think they are using real XHTML?” I may just be misinterpreting, but isn’t XHTML Strict real XHTML?
No. It’s all about the interpretation by the machine that is parsing it. Real XHTML is only when the XHTML markup is served as application/xhtml+xml. Then the browser interprets it as XHTML and uses all the processing features that an XML parser offers. If it is served as text/xml (the only way IE 7 and below can understand it), then it is parsed as classic SGML-based HTML, and what actually occurs is the following:
In short, you are writing Strict XHTML only to serve it as HTML, and you are dropping support for any limited SGML parsers that cannot handle these incorrect tags. It’s a scary situation altogether. You can read sending xhtml as text/html considered harmful for more insight.
Very useful feedback from your students, this results are really interesting. It will be good to go on with this practice!
(Hey! This Live preview feature was really cool!)
I prefer teaching XHTM to HTML 4.01 if the following condition is met:
Students save their files with an .xhtml extension. That way FFox (and all good gen 7 browsers) will treat the page as real XHTML. From day one they are taught the value of proper nesting of tags, etc. Everything that is enforced in XHTML 1.0 strict is IMHO good practice for HTML 4.01 as well. Should the student in the future wish to use HTML 4.01 or serve XHTML with an HTML MIME-header (perhaps for JavaScript reasons) he or she has hopefully developed good coding practices.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.