Who doesn’t love bacon? Even vegetarians that have tried bacon at one point in their lives can’t deny that bacon is absolutely delicious (they may understandably disagree with the process used to make bacon, but that’s beside the point). This is why I decided to create a site dedicated to the wonderful things that can be done with bacon. The sizzling, grease-popping goodness of bacon is what inspired this webpage from <html> to </html>. The color palette is meant to mimic the main colors seen in bacon. The dark red colors in the site mimic the meat of the bacon, while the yellow (#ffe26b actually, but let’s just call it yellow) that rests within the dark red mimics the fat that resides in between the meat of the bacon. In order to keep the color palette from being too much, I kept the background of the page white. It is much easier on the eye to read text on a white background as opposed to a brighter color. As for the navigation interface, I wanted to create a user experience that is pleasing not only to look at, but to use as well. Dr. Delwiche had great suggestions on making sure that it is easy to tell what page the user is currently on and what path was taken to get to that page. In order to achieve this, the font color of the link in the main navigation bar that the user is currently on is changed to yellow, while the rest remain white. As for the side navigation bar, the links that the user is not currently at have a font color of yellow while the link that is currently being visited has a font color of white with a white border to further make it stand out. Choosing the fonts for a site is one of the most crucial parts in the designing of a web page. For this page, I wanted the header to immediately send the message to the viewer as to what exactly this page is about. What better way to do that than use a font that is made of bacon strips (Bacon Bad from dafont.com)? For this part of the page I had to create a PNG image on Photoshop of the text and place that image on top of the dark red header banner. For the other headers of the page, I used the Merriweather font from Google font and the Montserrat font from Google fonts was used for the rest of the page. Montserrat serves as a great font for pages that are going to be using some smaller font. For the footer of this page, there needed to be a font that could be small enough to fit in the small footer of the page, yet still legible for the viewer. Merriweather serves as the perfect serif alternative to Montserrat. The only thing that seem to set these two apart stylistically is the serifs. For this reason, I decided to use Merriweather for the headers of each of the pages because serif fonts give a much more formal introduction to the pages while the sans serif Montserrat allows for a much smoother and informal reading of the material itself.
Many websites (like the site discussed above) are built with a fixed width that limits its use among multiple platforms. How is it that web designers can break through these limitations and create a more responsive web page that works among multiple devices and platforms? The following excerpt is from IBM mobile web developer Jeff Bail’s article titled “Use CSS media queries to create responsive websites”:
“Static websites with fixed widths are quickly being replaced by responsive, fluid designs that scale up and down depending on screen size. With a responsive design you can present a usable interface no matter what device or screen is accessing the website. A responsive design also “future proofs” the website by responding to varying screen sizes, which are changing rapidly as new smart phones and tablets hit the market. The primary means of achieving a responsive design is with CSS media queries.”
But what exactly are CSS media queries?
“Media queries, which are part of the CSS version 3 specification, extend the functions of media types and allow for more precise display rules in style sheets. A media query is an expression that evaluates to either True or False. If True, the styles it contains will be used. If False, they will not. This simple logic, made powerful through the use of expressions, gives you more flexibility in applying custom display rules for specific design scenarios.”
Media queries can be used for many things in web design. It can help decide whether to display a smart phone web page in landscape or portrait mode, it can be used to automatically set the height and width of the webpage to fit whatever screen it is on, and many other things! This doesn’t even begin to scratch the surface of what media queries is capable! The best part about media queries is that it is compatible with most modern browsers (including those on smart phones). The only modern browser that is not compatible with media queries is Internet Explorer 8. Why they decided to bury themselves in a hole there is beyond me. Visit this link to see a list of modern internet browsers that are compatible with media queries.
Not every aspect of web design is as difficult as it is made out to be. Sure it may take quite a bit of time to be able to figure out the more advanced aspects of it such as media queries, but almost anyone can make a basic site if they really push themselves and put their mind to it! Here are some helpful links for anyone who already has or would like to dive into the basics of web design:
- “14 Tips for Better Pages” from about.com is a great place to learn about the very basic first steps of designing a web page.
- “How to use basic web templates from about.com” will help you understand more about how the web page is laid out and how to manipulate that layout.
- “Color Hex” will be a helpful tool when turning your wonder color palette into CSS.
- “Text to HTML” is a great tool to help you turn you regular text into perfectly formatted HTML. Just copy and paste!
- Mozilla Developer Network’s David Hyatt’s guide to writing effecient CSS will help you write your code in an effecient and effective way that is easy for you and your peers to understand.