Week 3 Summary

September 23, 2012 at 2:29 pm (Web Design)

This “week 3” summary is coming a little late.  I attended an amazing herbalism conference in Mormon Lake, AZ (TWHC).  There was no WiFi, very little phone service and I was nearly killed at least twice.  Although it was well worth it for the wealth of info I acquired,  I’m struggling to catchup.

This week we focused on using CSS to control the appearance of our webpages and the importance of optimizing images for the web.

CSS

Cascading style sheets use statements, containing a selector and a declaration, to describe the appearance of a page.  (e.g.  body { background-color: #FFFFFF; }).  They can be placed inline (within the HTML tag), embedded (within the HEAD section) or in a separate, but linked file with the extention .css.  External stylesheets are the most efficient because they allow for more flexibility, especially when changing styles for sites with multiple pages.  They are linked within the <head> as follows:

<link href=”styles.css” rel=”stylesheet” type=”text/css” />

Here are some links to our CSS lectures:

https://angel.aacc.edu/AngelUploads/Content/USER-jmschuster/CAT274/module06/css-visual01.html

https://angel.aacc.edu/AngelUploads/Content/USER-jmschuster/CAT274/module06/css-visual02.html

Default browser settings vary from browser to browser and can be problematic for designers.  There are many resources for CSS reset styles to avoid these inconsistencies.

http://sixrevisions.com/CSS/a-comprehensive-guide-to-css-resets

http://cssreset.com

http://meiert.com/en/blog/20070922/user-agent-style-sheets  (older style sheets)

Information on individual browser quirks can be found at:

http://positioniseverything.net

These are great resources, but the best practice in dealing with these issues is to be flexible and work around them.

Any text or html editor can be used to write CSS.  A great, free, multi-platform editor is Aptana Studio 3 (www.aptana.com).  When writing, white space is usually not recognized and lines of code can be supplemented with informative comments as long as they are within /* */ symbols.  No white space should be left between measurements and units, however.  Detailed information about CSS selectors and properties can be found at http://www.w3.org.

Information regarding which CSS properties are supported by each browser type can be found at:

http://gs.statcounter.com

http://quirksmode.org

http://caniuse.com

http://reference.sitepoint.com

…or on the sites for the browsers themselves:

http://developer.mozilla.org/en/Mozilla_CSS_support_chart

http://goo.gl/meLlc

http://www.opera.com/docs/specs

http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

Image Optimization

There are three image file formats used on the web:

GIF:

  • stands for Graphic Interchange Format
  • “lossless” compression-id’s patterns of similar pixels within the image
  • well-established default format for web
  • allows for transparency and animation
  • best for type, vector, flat and hard-edged graphics
  • 8 bit, 256 colors

JPEG:

  • stands for Joint Photographic Experts Group
  • compression can be adjusted to find the best balance between file size and image quality
  • “lossy” file compression- throws away subtle color differences-cannot be reversed
  • best for continuous tone images-photos, blends, gradients etc.

PNG:

  • stands for Portable Network Graphics
  • “lossless” compression
  • there are two varieties- 8 and 32, but 8 is used for web
  • Fireworks allows for transparency for PNG8
  • best for simple web images and true transparency

Optimization of images is important to reduce download time.  Slowly-loading pages will be avoided by users.  In order to optimize, open the image in a program like Photoshop (industry standard for editing and manipulating traditional photographs) and:

  • reduce physical size
  • reduce colors/adjust the palette
  • adjust compression-find a balance between quality and file size
  • set resolution to 72dpi and color mode to RGB
  • ideally, web images shouldn’t exceed 12KB

Other image optimization programs:

  • Fireworks-industry standard for vector graphics
  • Photoshop Elements-amateur program for photos
  • Lightroom-industry standard for photographers
  • GIMP-free
  • Graphic Converter-shareware for Mac
  • Paintshop Pro-low $ for PC

Optimization tips specific to file format:

GIF: adapt palette for best results

JPG: start with 50% and nudge up or down

PNG: adapt palette for best results, choose alpha transparency in Fireworks

Images are added to HTML using the IMG tag:

<img src=”folder/filename.jpg” /> – relative link   OR

<img src=”http://www.sourcewebpage.com/filename.jpg&#8221; /> – absolute link

Here is a link to our lecture on links and images:

https://angel.aacc.edu/AngelUploads/Content/USER-jmschuster/CAT274/module03/links-images-lecture.html

Pulling everything together, we read an article, which laid out the “toolbox” for creating a visual hierarchy in your webpages.

http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/

We continued with our resume assignments this week, incorporating CSS and images and utilizing the color schemes we created from images using http://kuler.adobe.com.  I opted for my jellyfish theme.  It’s not ideal for a resume, but I find it to be the most interesting to work with and it seems to pair well with white text, white borders, and white circle bullets, which resemble bubbles.

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: