Week 1: Likes and Dislikes - Webpages

A Page I Like

Page: League of Legends page
Genre: Gaming
Category: art

• Beautiful rich images
• On mouseover, parts of the page highlight and extra details are shown, revealing something visually interesting. For example, the branches down the sides of the page. These touches do not convey any content.
• Images of champions are monochrome but on mouseover become richly coloured. This indicates to click, on which an information screen opens up. The wall of text wasn't so enticing. It was two paragraphs of text with no title or indication of what it was about without reading it. It's white on a dark blue background. I find it very hard to read white on a dark background and find I am reluctant to try.
• There is a video modal. The video player has the controls visible, which I find very important. I very quickly stop watching videos when there is no indication as to how they are. Around the video player is ice. It is a small but it adds interest to the page.
• The social sharing and branding icons at the bottom of the page seem completely out of place.

A Page I Don't Like

Page: Audible
Genre: Sales
Category: inaccessible, printed page

My main dislike for this page is from a functional point of view. The site sells audio books. The page consists of a large image which contains information about the site followed by a paragraph of text. The information in the image is not relayed in any other form on the page. Because it is an image, when enlarging it, the text becomes fuzzy. This site is not accessible to those who have visual impairments either requiring large text, or the use of a screen reader.

This page does not take advantage of the media. It looks to me just like a printed page put online.

A New Project

Background

Last year, CSS Zen Garden became 10 years old. I'm not quite sure why I went there again recently but it took me back to when I first made a webpage, back in the 1990s. That, and the consequent pages, were to distribute information to my students so that if they missed a lecture they could still access all the material they needed. This was for maths. No support for symbols. To get past this, I made images of the mathematics by taking screenshots of LaTeX and I painstakingly included images in my pages. I made as little into images as I could so there were symbols for less than or equals to, or subset or union. I was somewhat obsessed with my pages passing tests. I checked my page with Bobby, which checked for accessibility, and the W3 validator, which checks for correct markup. I'm sure the html I wrote back then was horrible. Without CSS, formatting was done using tables embedded in tables embedded in...oh dear, yuck!

In 2003, CSS Zen Garden made its appearance. Oh how I admired those pages. The feeling of wonder I felt back then comes so easily when I think of the beautiful sites that could be created from the same page. How I longed to be able to do something so beautiful but I didn't. I had done some very basic css to get away from those horrible tables, but by then I'd left my job and the need to make pages was much diminished.

Today

Now, 10 years on, we have so many more tools at our disposal. CSS is so much more powerful. Browsers can display more. The new pages on CSS Zen Garden are so much more amazing than ever. The creativity shown by these amazingly talented people is wonderous. The interactivity and interesting features included in the page makes me want to stay there and just play. I want to learn two things.

1. What is it about the pages that I love? What makes me want to stay? What makes me want to play?
2. How, technically, are the pages created?

For the first part, I'm going to pick two pages, one I like and one I don't like and try to work out what I like and don't like. For the second, I'm going to pick a page from CSS Zen Garden and investigate how each feature is made.