Week 4 Summary

September 24, 2012 at 12:34 am (Web Design)

We began this week with a more detailed overview of CSS.  We added the properties of id and class, which can be used to identify unique elements and groups of elements respectively.

http://css-tricks.com/the-difference-between-id-and-class/

We also examined the pros and cons of different web layouts, including fixed-width, fluid, elastic, hybrid, responsive and fluid/elastic grids.

http://www.vanseodesign.com/css/css-layout-patterns-part-1/

We learned about CSS conflicts with regard to the cascade, inheritance and specificity.  For instance, embedded styles only override external styles if the link to the stylesheet is below them in the head section.  Child elements always inherit the styles of their parents, but can be overridden by specific styles and the last style applied wins out over any conflicts.

We perused an article, which reviewed image optimization and listed 12 useful tools.

http://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers/

Next we delved into typography.  The average end-user only has access to about 40 standard fonts.  Designers need to be flexible in their font choices because the end result will ultimately be dependent upon the client machine.  We reviewed two articles on typography and common web fonts:

http://www.sitepoint.com/anatomy-web-fonts/

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Also, we discussed the CSS properties, which control type:

  • font-family: specific font names, serif, sans-serif, monospace, fantasy or cursive
  • font-weight: bold, normal
  • font-variant: small-caps
  • font-style: normal, italic, oblique
  • font-size: absolute or relative-pxs, ems or %

Keep in mind that default browser settings can affect font-size and results can be cumulative.

Font stacks are lists of preferred fonts, which will be tried in order until a supported font is found.  This gives the designer some control, while still allowing for flexibility.

font-family: Georgia, “Times New Roman”, Times, serif;

All font names must be capitalized and spelled correctly.  Names with more than one word must be enclosed in quotes.  A generic font-family is ideally listed last.

http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml

http://ilovetypography.com is a really informative and interesting blog on typography.

We integrated all of these skills as we completed our resume projects.  The final versions included fluid layouts, which utilized float and clear properties to position the various elements.  Unique id’s were assigned to the page sections to make this process possible.

The project also called for a footer image derived from the web image used to create the color scheme and found at the top of the page.  As I was clicking around in Photoshop to transform the images, I came across an awesome new feature called “puppet warp.”   With a name like that, I just had to try it!   The tool allows you to stick imaginary pins in the image and then manipulate it around them-stretching, twisting and compressing.  I think I’ve found my new favorite tool:)

Advertisements

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

%d bloggers like this: