When the Moon Hits Your Eye, Like a Big Pizza Pie, That’s Amore…

The creative and strategic rationale behind Mini-Site #2: Using CSS Layouts to Stylize Recipes is simple. The images were chosen based on certain criteria. Firstly, they were chosen based on their ability to accurately illustrate the final product of each recipe. Secondly, they were chosen based on their size, i.e., 406×305, which is neither too big nor too small. The typefaces used include Parisienne and Simonetta, which are appropriate due largely in part to the fact that we feel they are representative of the Italian theme present within the recipe choices. Similarly, the color scheme was chosen based on a quick Google search titled “Italy Color Schemes,” which directed us to Santa Clara Design and their interpretation of Italian color schemes, as shown in the image below:

ASSISIcolorpalette1

Romantico!

Colors choices were also influenced by the old Olive Garden logo and its use of various shades of purple. Menus were stylized based on Kayla Knight’s article in Smashing Magazine titled “Planning and Implementing Website Navigation,” in which she stresses the importance of primary and secondary navigation, and cites exemplary websites and how they implement various navigational techniques in a variety of different ways. Originally, our nagivations were stylized based on those found in Business Catalyst, but these proved to be somewhat complicated. So, we based our navigational code after that on W3Schools, which proved to be much simpler.

Screen Shot 2015-02-26 at 7.25.20 AM

Mmm… Mmm… Good!

CSS/HTML5 is advantageous to those who hope to reach an audience online for a variety of different reasons. In his article titled “Why We Should Start Using CSS3 and HTML5 Today,” Vitaly Friedman says “many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies.” Furthermore, “many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work.” However, from a designer and/or developer perspective, CSS3 and HTML5 provides “a more open playing field… more exciting and innovative landscape” in which to attract new clientele, and “probably less work involved because we don’t need the many hacks and workarounds we’ve used before.” In addition, as Mozilla Developer Network mentions in their “CSS media queries” page, CSS media queries allow designers to tailor content “to a specific range of output devices without having to change the content itself.” For a full list of powerful CSS features that are worthy of our attention, including rotational sliders, background patterns with CSS3 gradients, flexible height, etc., see Vitaly Friedman’s article on Smashing Magazine titled “Powerful New CSS Techniques and Tools.”

Readers are encouraged to visit useful resources related to CSS/HTML5 development in order to expand and contemporize their coding knowledge. Here are some of the resources we find particularly useful in our coding endeavors:

  • Eye Dropper (available on Google Chrome) for all of your color picking needs
  • Dirty Markup, which allows you to tidy your HTML, CSS and JavaScript code
  • TextFixer, which allows you to convert your text to HTML with a click of a button
  • Smashing Magazine, an online magazine for “professional” web designers which keeps you up-to-date on the latest and greatest advancements in CSS/HTML5
  • A List Apart, which, similar to Smashing Magazine, “explores the design, development, and meaning of web content, with a special focus on web standards and best practices”
  • W3Schools, an accessible website dedicated to CSS/HTML5 and JavaScript tutorials
  • Finally, Prefix free, which allows you to “break free from CSS vendor prefix hell!”

These are just a few of the amazing resources on the web related to CSS/HTML. Feel free to venture into uncharted territory. Happy coding!

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