CSS: That’s Amore!

Part 1: Design Rationale

The goal of this mini site was to present recipes and information about broad categories of food in a stylized fashion, so an appetizing color palette was a key piece of the design. Oranges and reds were chosen because they are known to stimulate appetite (confirmed in the Beaird reading). Red specifically is an “indulgent” color, which seemed appropriate for the often indulgent nature of the Italian pastas and desserts that were a focus of the pages. The greenish yellow hue was a tint of an analog to the orange, thus the colors complement each other. Finally, the background image of a dark wood was used to evoke feelings of a dining room table. The warmth of the colors makes the page feel inviting. On the recipe pages, images were chosen based on the way they presented the food: namely, they are all close-ups with warm color schemes–making the food depicted seem appetizing.

For the first level of navigation, a horizontal menu at the top of the page was chosen. Within these broader categories, a sidebar was styled to include a second level of navigation through the various recipes. Separating the two menus helps the user to mentally separate the two levels of navigation. A deeper shade of the same orange color was chosen as the highlight when hovering over the links for both the navigation menus, keeping with the color scheme. When on the page, the hover characteristics are permanent in order to help the user differentiate between pages. I chose a standout cursive font for the banner, sans-serif font for the menus, headings, and pull quotes, and a serif font for the copy. I thought the cursive font was whimsical but still fit with the feel of the page. It was used sparingly in order to allow it to stand out. In choosing serif and sans-serif fonts, x-heights and letter spacing were important factors, as well as weights that complemented each other. My favorite aspect of the design of the overview pages is the use of oversized quotation marks in the pull-quote. As Sven Lennartz writes in Smashing Magazine, styling pull quotes this way helps the user to better understand the meaning of the text block.

Screen Shot 2015-02-27 at 1.15.36 AM

Screen shot of the “above the fold” section of the Soups Overview page of the Italian Comfort Foods mini site.

Part 2: CSS and the Future of the Web

CSS and HTML5 make a formidable team. Together, they are immensely powerful. The ability to control the layout of several HTML pages with one CSS file makes editing layouts much simpler. These programming languages are being used now to create web apps– websites that have consistent layout across multiple platforms, including mobile interfaces. As devices become increasingly portable, this ability will become increasingly important. CSS is a useful language for this type of web developing because a CSS stylesheet allows precise control for all pages it is linked to. Relative size units can also be incorporated into CSS, which will prevent the separate elements on the site from changing positions when transferring to a mobile interface. Relative units ensure that the size of the page elements and their arrangements remain intact. CSS styling will be able to yield a consistent layout across all layouts, including Oculus Rift.

Part 3: Useful CSS Finds

When designing this website, several explanatory websites gave me pointers that allowed me to style the pages the way I wanted. First of all, I used w3schools.com’s explanations for how to make a menu bar. Ι extrapolated some of this knowledge in order to properly style my side navigation bar. Furthermore, I found Simon Collison’s article on 24ways.org that explained in detail how to create the large curly quotation marks of the pull quotes. Finally, I was having trouble getting the second line of my list items to indent in line with the rest of the text. I searched around the internet and realized I needed to enclose my list items in unordered list tags. Once I discovered this, I had already done the coding on all of my HTML pages, so I didn’t want to have to re-type all of the list items and URLs. For this, then, I used Listify, which is a really great website for creating long lists. Listify formatted my links quickly and included opening ul pags as well as a tags. Other than this, no real problems were encountered.

This entry was posted in Uncategorized. Bookmark the permalink.

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