Tea Time (Mini-Site #2)

18 Feb

Making this mini-site was a lot of fun for me thanks to the freedom we were given in making our designs. I decided to go with a “Tea Time” theme, basing my content around tea, cookie, and pastry recipes. Visually, I worked off the idea of blue and white Chinese export porcelain, specifically tea cups.

Screenshot of a recipe page

Screenshot of a recipe page

One of my biggest “issues” is my visual OCD. I like to make everything harmonious and clean, which means it’s not unusual for me to nit-pick over colors for 30 minutes. Sometimes I’ll get things to where they look good, but then I throw a wrench in the whole layout by trying out more “what if” scenarios and designs.  I’m not sure if this is a good or bad thing to be honest.

Another thing that caused a little trouble came to my attention when I thought I had completed everything. Previewing the finished site showed that the main content section (from the header to the footer) was shifting slightly horizontally between some pages. At first I couldn’t figure out what was causing it, but then it hit me: the scroll bar! Some pages were too short and did not have a scroll bar, while the longer pages did. When the scroll bar would appear it would shift the whole page slightly. At first I tried adding {min-height:100%;} to my CSS, but 1) I felt like that was a lazy fix 2) I didn’t like all the extra white space at the bottom of the shorter pages. In the end, I opted for {overflow-y: scroll;} to make the scroll bar appear by default, regardless of the page length.

Overall, I had a fun time with the assignment!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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: