Blog Post #7 | Website Dissection

The Site

emotions by Mike

The website I chose to dissect is a freelance portfolio website called Emotions. I like the use of whitespace in the site and the format is really interesting to me because most content for websites that I see are centered and this one is off centered by a graphic and by leaving a lot of open space on the left side of the screen.

HTML

wireframe

organization

The homepage of this site is built using nine divisions.

  • The wrapper that holds all the information of the site.
  • A division nested inside called “all” that holds the main graphic, all the pictures and content.
  • A separate division just for the main graphic that is styled in css.
  • The division for the content that holds an unordered list for the navigation, the header, and a division for the text content.
  • The text division which is nested inside the content division contains the about the site, the divisions for the line graphics and the thumbnails for examples of work. The examples of work are listed as definition lists and use javascript for pop-up windows.
  • A division called empty which doesn’t have any content inside
  • The footer

CSS

backgrounds

The green background for the website is made using two different images. There is one small repeating background image to make the two shades of green that you see for the background and the navigation. That image is placed in the body and repeated along the x-axis. To create all the shadowing for the website, there is a large background image placed in the wrapper with a transparency to get that shadow effect.

To create the feet that you also see in the background a seperate image was created and placed as a background image in it’s own division that is floated to the left. The same technique is used for the background in the content. Although it seems like one seamless background it’s broken up into sections to get that depth and shadow.

navigation


When first looking at the site I assumed that the navigation was built using sprites. When looking into the css of the document, each list item for the navigation are different classes and the image replacement for the navigation are different images instead of one sprite image.

content

Basically all the titles and headers and the footer use the image replacement technique except for the written content using the Tahoma,Arial,Helvetica,sans-serif font family.

The rest of the site pages use the same organization and techniques

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: