Saturday, February 2, 2013

The value of CSS

When I look at the current state of my "About Me" site, the only thing that visually resembles me or my personality is my photo. The blue links, black body copy and questionable typeface tell a visitor to my site nothing about me as a person, and only quite negative things about me as a graphic designer. This is one of the values of CSS. It allows a visitor to a site to get an immediate feel for the product, service or information that he or she has used the Internet to research. While content is obviously very important, aesthetics are the first thing a visitor to your webpage will see, and from there he or she can decide whether or not to dive into your content. While I believe this is the greatest value of CSS, there are several other reasons to use them:
1) You don't have to edit individual elements in a site, you can create a whole bunch of different style sheets for your site and then try each one to streamline the process of changing the appearance of your website. You only need one style sheet per website. 
2) You can taylor user experiences based on device. For example, you can control how someone views your website on a desktop browser and a mobile device. Making your website mobile device friendly is almost a requirement in the age of the smartphone and tablet. 
3) Rest easy knowing that your website is going to look the same if viewed in Internet Explorer, Safari, or any other browser. This ensures that users will get the same visual experience that you create in CSS no matter what. 
Here are a few ways that I would like to change the appearance of my personal "About Me" website:
1) Change the typeface used! I discussed how questionable and somewhat ugly the HTML default typeface is above, so I would like to use CSS to change the typeface to a more modern sans serif.
2) Change the color of the typeface. I would like to tie in some of the colors in my current photo that I chose and apply them to the body copy typeface as well as change the color of the links in my body copy. 
3) Put my photo off to the right and my body copy sitting next to it on the left. Since I'm looking to the left in my photo, I want my text to sit to the left of my photo to tie the homepage together into a visual package.
4) Style my social media list horizontally across the bottom of the page with icons for each outlet.
5) Create a drop cap on the first letter of my body copy on my homepage. 

No comments:

Post a Comment