The Joys of Coding….& Eating

Centered on “an evening meal,” Minisite 2: Using CSS Layouts to Stylize Recipes targets young adults, who were just starting in the workforce and needed quick, delicious meals that fulfilled both their food needs and desires. Because of this target audience, Minisite 2 was built both by trial and error and by a creative and strategic rationale that focused on creating a simple, yet inviting site. Using the color-hex website, I found the color palette evaeva, which uses shades of warm colors — specifically oranges, pinks and browns — and a  touch blue. The typefaces add to this theme and are from Google fonts; for the pull quotes, the typeface is “Indie Flower” and is both distinct and casual. The typeface of the header is “Architects Daughter” and is still fun, but unlike the pull quotes’ font, the style does not mirror handwriting. The content’s typeface is the basic serif font, which was chosen because of its high readability. All of the typefaces have a variety of weights and good x-heights, which provide great variety for design options. The images for each recipe were found on their original webpages; because all of them focus on the food or drink, they are stylistically consistent. To create more consistency, I cropped all of the images to be 250px by 250px. When it came to stylizing the menus, I decided to have a similar layout as many other sites. The top navigation bar has the main, overview pages, while the left sidebar is the navigation for within a distinct category. For instance, the left sidebar for the Mocha Java Cake page has options for the other dessert recipes and for the “About Desserts” overview page, while the top navigation bar still shows the options for the overview pages. Most users tend to prefer this style of layout, or at least, I do, because it always provides a connection between the content of that page and the related content of the other pages. In addition to this style choice, each recipe page has one main block of content headed by the pull quote, while the overview pages have two columns of content  and the pull quote is woven in.

Margarita recipe page. Notice the perfect borders, which do not appear when uploaded to the server.

Margarita recipe page. Notice the perfect borders, which do not appear when uploaded to the server.

CSS and HTML5 provide a foundation for web developers to build off of and use to collaborate with each other. Because HTML5 and CSS are the standards of the web, designers have a basic platform, which enables anyone anywhere the opportunity to get involved. At the same time, it allows greater creativity and connectivity. A website can work on any browser — when it follows the standards — and for this reason, gives everyday people the power to connect with anyone. The people have the power. And designers give them that power to reach a huge, diverse audience. Furthermore, both of these coding languages are still expanding. They are versatile and malleable. In “Responsive Web Design,” Ethan Marcotte discusses how the malleability of web design’s foundation — specifically CSS — forces designers to think outside of the box. Designers have to constantly think of new ways to fix the old foundations to fit into the new web. The article goes on to state that designers should focus on “fluid grids, flexible images, and media queries” as these form the technical ingredients that create responsive web design, and will allow the design to finally shift with the channel. But to achieve this responsiveness, not only do the techniques have to change, but also the thought processes of the designers, who have to continue to keep up with the ever-changing technology.

In order to achieve great designs, readers should look to the following resources. The first tool is the color-hex website — mentioned above — that provides millions of color options, their hexadecimal codes, and user-created palettes that provide for quick and easy color themes. The second tool is Paul McCarthy’s article “Print Stylesheet – the definite guide,” which lays out the basic steps to creating a user-friendly print stylesheet that changes how the webpage will be printed. When it comes to checking and editing one’s code, one can look to two different sources: Dirty Markup and Tidy HTML. The website, Dirty Markup, allows users to paste their code –HTML, CSS, or Javascript — into the window and the site provides a way to automatically adjust the indent, spacing and print margin of the page. Tidy HTML, on the other hand, proofreads one’s HTML and provides a list of errors and warnings. All of the resources mentioned above help to ensure that one’s code is user-friendly, aesthetically pleasing, and correct.

Although sometimes CSS causes problems for designers, it does more good than harm and can transform a simple, boring webpage into an internet masterpiece!

Advertisements
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