When CSS and HTML5 Come Together, Magic Happens

The “My Favorite Snack Recipes” page was designed to have a home-like feel. As the food designated to fill the desires of a hungry, tired 22 year old, the colors and design was meant to reflect a calming, home vibe. The images were based on real images of the foods, taken from the Food Network site or Bailey’s websites. The only verifying done was to make sure

This is the recipe page for Tyler Florence's Grilled Cheese

This is the recipe page for Tyler Florence’s Grilled Cheese

they kept up the positive theme, and when they passed that test, they were included. For the typefaces, the main titles were meant to look like handwriting, as if a person has handwritten her own favorite recipes to share with others. The other font was meant as a nice-looking serif to go along with the somewhat sloppiness of the first font.

CSS provides a great way to implement creative designs into a web page. Without CSS, websites can get the content across, but it appears boring and it is hard to draw attention to the items that really matter. Especially as consumers continue moving to various different devices, using responsive design in CSS could come in very handy designing for all of these platforms. In Kayla Knight;’s Smashing Design article, titled “Responsive Web Design: What it is and how to use it”, she details how this form of design bases itself on automatically responding to users preferences, instead of designing for every single set-up. In general, however, CSS can be used to design a website in such a way that your attention is automatically drawn to the most important information, or otherwise make the website more interesting. The most interesting and usable the site, the more likely people will stay on it longer and learn more about the site.

If someone were to want to get started in the world of creating websites using HTML5 and CSS, there are many helpful websites. To transform content into HTML form, there are sites such as Code pal’s Listify and Text Fixer. The Listify site, found here, allows someone to paste in the text they want, then decide what type of list they want, whether they want to ignore digits or not, and other options. It explains how to use it on the bottom of the site, and it generates HTML list content. The text-fixer, found here, allows users to insert many paragraphs worth of content, which it will let you decide if you want to use just paragraph tags, break tags, or both. It can also encode accents and similar characters if you ask it to. Additionally, for figuring out the CSS and designing layouts, especially with floats, David McFarland’s book, CSS: The Missing Manual, provides a thorough run through of how margins, padding, and floats work in the context of CSS. Finally, if you have a website that seems to be working, but it takes a long time for the page to load, it may be worth skimming Jamie Mason’s Net Magazine article, “Optimize images to boost performance”, in which he discusses various ways to optimize images to make them smaller so web pages load faster.

Overall, CSS can be a very useful tool for designing your webpages in a user friendly way, and the possibilities CSS can be used for are seemingly limited only by one’s imagination.

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