http://stewpenguin.alumnaie.net
There’s my website, showing off all the current consoles on the market, sorted by company. I used notepad for the HTML and CSS, using resources on the internet, either asking friends or looking up tags on google. I tried to use CSS for formatting as much as possible, but ended up using a table for aligning text where I wanted to. The colours worked on the browsers I tried, except for IE, which messed up spacing and colours a little. But it still worked on Firefox and Safari for me, I forgot to test in Chrome, but seeing as it uses a similar renderer to Safari, I’d assume it works there too. Obviously, in a much more professional project, I’d test thoroughly on all browsers, but this is a casual topic, and decided to cater for browsers I think that my target audience would use.
Video games are a knowledgeable topic for me, and as much as I would’ve liked to do all the consoles in existence, I wanted to keep the site minimalistic. Using plain colours for the website, with brighter colours making important bits of data stand out, and using a very standard layout for the data, with a banner, navigation bar and a tiny footer with more information, like links to more sites, or just more information on the generation and why I chose the topic.
I chose to cater more towards Firefox and Safari for my target audience, assuming they only use IE for downloading a new browser. Instead of having a huge, comprehensive site filled with data on video games, I chose to have something that would just be interesting to look at; more of a concept website than a useful one. I took the time to make things line up, and tried for a subtle way for a person educated in video games to know which brand they’re looking at. I wanted to avoid nitty gritty data, like which console has which CPU, how many SKUs each console has. I only went into detail about major hardware revisions, such as the DSi, and the latest update for the PSP.
I built a template for the website first, getting the layout just right. I decided to use images in the nav bar instead of text, to force the user to see the 8-bit-esque font, and to help with the spacing. The background images came about asa way of making the website feel a little more inhabited. Orange is a personal favourite colour of mine, and it contrasts well with grey, which may be overdone in websites, but I find it handy for making a website have my own personal touch. Also, orange and grey don’t have a direct connection with any consoles on the market, with them being either black or white.
More than anything, I used this assignment to learn more about CSS, and to brush up on my HTML. I was rather surprised with the quality of the result, as well as the amount of HTML I remembered.
. Anyway, dinner is cooking, so I’ll post more later.