Assignment 1 Justifications / Reflections

I thought I'll write this before I forget, and I'll probably use this for the video recording of my website for the portfolio.

After deciding on the template for my website, I used it as the background image and placed the title, contents and navigator on top. Initially, I wanted to make the background image center and relative-positioned, so that the website will look more balanced regardless of how the user changes the browser window. However, I didn't want my contents to be relative-positioned as well, because they'll move when the user adjusts the browser window, which is distracting, especially for the text-wrap to change. I couldn't keep only the background image relative-positioned, as the contents will then be misaligned with the background. As a result, I decided to make everything absolute-positioned.

Also, I wanted to use tables for my layout initially, but I had problems positioning the elements inside. I guess I could have read more tutorials, but that was very time-consuming. Thus I used AP Div tags to contain my contents, as I could then drag them around, as in Photoshop or Illustrator. I did read in one tutorial that this is not a good idea as some elements may be misaligned if they are relative-positioned or in tables, but I did not encounter this problem as I put everything in AP tags, so they'll all stay where they are.

As a result, I only used CSS for the links color and the font, as well as for the print.css. I hope this is enough to meet the requirement.

For the color of the links, I only used orange on rollover, as I felt my website is simple and does not need to indicate visited links for the viewers. They can probably remember which pages they have seen. Inactive links are gray in color.

I did not want to risk using an obscure handwriting font which the end user may not have on their computers, so I used the common Arial font for the text. However, I kept the handwriting font for the navigator as I wanted to keep the same style / feel of the website template. I used rollover images for these, as I didn't want to spend time looking for another handwriting WOFF font, as we have learned in Presentation 1. I am also not confident of using WOFF.

I wanted to remove the background image for the print version initially, until I realized that the browsers (Safari, Firefox and IE) all remove the background image automatically. Hence I just removed the title from the print version (as the top left hand corner already contains the name of my website), and moved the contents and navigator higher up the page. I kept the navigator as the title of my works are not included in the contents. To make the printed page more coherent, I added a divider between the contents and the navigator. However, there is no divider for the “About” and “Contact” page as the contents are short. I also changed the font from Arial to Times, a serif font that is easier to read on paper.

I thought if users want to print my web page they'll probably want the text as well, so I neither created a print.css with just the image of my works, nor increase the size of my works for the print version. If users just want an image of my works, they can simply right-click on the image itself and print that. They can also scale the image if they wish to.

On a side note, I realized IE doesn't print the navigator, unlike Firefox and Safari, but since we're designing for Firefox I guess that is not a big issue...

For website navigation, users can click on “Works” where the sub-menu appears and they can view my design process. They can click on the “>>” arrows to navigate the design process. However, if they wish to go straight to the final design, they can click on the link “skip to final design” at the bottom of the image. I didn't want to start with my finals as I thought less people will look through my design process otherwise.

I changed the background image for the storybook as the storybook has to span across two pages, partly to mimic people reading a physical book, but also due to some of our illustrations spanning across two pages. Hence for the storybook page, the link “Little Peanut” in the text opens a new window with a wider piece of “paper” in the background image. A new window is used because the wider “paper” does not allow space for the navigator. Thus if users want to access the navigator after reading the storybook, they can either close the new window, or click on the title, which brings them back to the home page (i.e. “About” page).