While this site was designed primarily using aesthetic trial and error, there were certain aspects that took quite a bit of time to get right. For instance, when I think of a bake shop or baking in general, I automatically think of comforting pastel colors. I knew I wanted pastel colors but in order to choose specific colors, I turned to a chapter in The Principles of Beautiful Web Design written by Jason Beaird titled “Color” (2007). The final site went with a double complementary color scheme, incorporating the desire for using pastel colors by choosing a purple, a blue-green, a yellow, and a pink. I also chose to make my headings, top navigation bar, and selected links white–Beaird says white is “the color of perfection, light, and purity.” In order to make the main body text stand out from the pastel colors, the font-color was changed to a navy blue instead of the stark black default. This seemed to lighten the page and make it more consistent with the navigation bars and headers.
As far as image types, I used the images from Southern Living of the finished desserts they had made and kept them as large JPGs. Because each of these images had a professional feel with a background that made the dessert stand out, I decided that making the image backgrounds transparent was not necessary or consistent with the clean-cut feel of the rest of the page. I also made the images large to accentuate the deliciousness of each dish. In addition to choosing clean, large images, I also chose to round the corners and get rid of the sharp default corners of each element to stick with the softer, comforting scheme. To go along with the baking scheme, typefaces were chosen to look like handwriting. For the headings, I chose to use the Google typeface “Crafty Girls”, a loopy sans-serif. For subheadings and the top navigation bar, the Google font “Droid Sans” was used as another sans-serif. The two typefaces compliment each other yet still have similar characteristics, a trait that Jessica Hische claims in critical in her article, Talking Type. Finally, all lists and paragraphs in the main body used a Google font called “Indie Flower.” This typeface was chosen because it follows along with the handwriting/baking mood and because it is very easy to read in long paragraph blocks. The x-height seemed to be just right, another essential factor for paragraph typefaces according to Hische, and it provided good line spacing without having to tweak in CSS.
While many languages can only be used to their entirety on certain browsers, CSS/HTML5 have a high potential to target a wide range of audiences on a wide range of devices. One example used to target different devices is media query, a feature introduced with CSS3. As Rob Gravelle explains in his article about targeting specific devices with style sheets, the days of “browser sniffing” are gone and media query is in. Media queries can check a device’s width and height, width and height of the browser window, orientation, resolution, and more. It gives web designers the capability of reaching a multitude of audiences with a fully-operating site.
Because technology is advancing at such a rapid rate, new quirks and tricks are coming out every time you turn your head. On top of media queries, CSS3 also gives web deisgners the capability of using Speech, where text can be stylized with voice-volume, -balance, -rate, -family, -pitch, and speak and cue-after. Although this particular feature seems to only be available on the Opera browser, it is a novel idea that may be able to more conveniently and effectively reach a visually-impaired audience. Other interesting “latest and greatest” CSS tricks can be found at CSS3.info.