Week 4 – Web Redesign Process: Wireframe and Sitemap

Wire frame and Sitemap:

3 articles:

1.  http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

In this article, La gives a short description of overflow, which prevents content from wrapping around a floated element when the element does not expand.  To do this, type in the CSS property {overflow: auto;} or {overflow: hidden}.  Although this is a powerful tool, some of the disadvantages of using overflow are that when using overflow: auto, the content can expand to the width of the boundary of the container causing a scroll bar to appear.  One way to solve this problem is to use overflow: hidden, but this can cause some content to be cut off because it exceeds the border of the container.  In order to override these problems, the author suggests to either add a word-wrap: break-word to the container, which will force text to wrap onto a new line, or use set the max-width of the image to 100%, which will resize the image to fit the max width of the container boundaries.  This article was helpful for me because it reiterates the concepts of how to use floats and overflows in CSS when coding my website.

2.  http://coding.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/

In this article, Spooner reveals that web designers can push their designs to the next level with some new features of CSS3.  One of the new features is border radius where instead of square corners; designers can now make their border corners rounded.  CSS3 also allows for border images where file images can be used as a border for an object.  Two other features are box and text shadow and transparency with RGBA and opacity.  These are powerful tools because they eliminate the need to first style in Photoshop before transferring the image to the CSS, and these features can be coded directly into CSS.  Finally, the last feature of CSS3 is the ability to use custom typefaces in web design.  So far in class, I felt that CSS was a rigid tool that only allowed for certain design elements to appear in web design especially when picking typefaces.  After reading this article, I realized that CSS actually gives designers freedom to design their web pages however they want as long as they can implement their designs through code.

http://css-tricks.com/css-sprites/

A CSS sprite is one image that is made up of an unlimited number of images in which only parts of the image are displayed.  This is like the “on” and “off” button we made in class, but without having to slice the image up.  Instead, the image shifts around to reveal the part you want displayed on the page.  Before sprites, each item in the CSS would have an anchor tag, but not the background image, but now with the sprite, the background image has the anchor tag while the items are coded to just shift positions.  This is advantageous because sprites help lower the number of HTTP requests, which in turn reduces the response time helping a webpage load more quickly.  From this article, I learned that by implementing sprites into my CSS, I do not have to go into my Photoshop document and slice each individual item up.  Instead, I can make one big image, create an anchor tag to the background image of my CSS, and just shift the image around.  Not only this, my webpage loads more quickly and efficiently.

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