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.
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.
Although sometimes CSS causes problems for designers, it does more good than harm and can transform a simple, boring webpage into an internet masterpiece!