Week 7 reading: Texture

The Chapter was worth reading, but rather limited in scope.  He defined the elements which make up design in general and texture (Point, line, shape, volume and depth, and pattern), and spends a lot of time talking about each.  Then goes on the show and discuss some specific web designs and how texture was used to support the goals and feel of the page.  Finally he goes through a sort of “Photoshop Tutorial” about how to create a pattern and set it up as a tool you can use at any time in the future by using the “paintbucket” tool option.  For a chapter titled texture, there was not a whole lot of good meat, but at least it got me thinking in terms of texture.  I guess that was the point.  I was amused when he mentioned that he started out web design in the tenth grade.

I guess I’m not a “spring chicken” anymore:  When I was in tenth grade a computer was a very large building and the web was only the wildest dream of a few guys who probably lived in secret bunkers.

Point becomes a line becomes a shape, which may have illusion of volume and depth.  repeated may become a pattern or texture.  Defining backgrounds in CSS we have five attributes: color, image, repeat, attachment and position .  Ie. background-color  background-image background-repeat.  Repeat and position may have x and y coordinates.  Cautions us not to mix keywords, measurements, and percentages in our definitions.

The Web 2.0 standard is typified by large type, gradients and plenty of white space.

OLA design and Storyboard.

As much as this seems like a bunch of extra somewhat pointless work ( could be working on my project, for example), I do notice that I’m developing a little bit of ease with some of the technical aspects of the job.  Some things which seemed daunting earlier (like FTPing the files) now are pretty obvious.  So anyway here it is…My OLA storyboard and comp.

Revised FOGE Storyboard

Click on the image and see the storyboard at the FTP site.

Week 7 On-line reading

Daniel Wil-Harris on typefaces:  You can use any typeface as long as it is big enough.  San-serif should be used for type because serifs tend to take up too much space when used on monitors.  “Hinting” is a process where individual pixels are controlled when the font is of a certain size, and can have a big effect on how font designs look on the screen.  Suggest a font should have an x-height one pixel more than half the font size. Tracking can control the spaces between letters to avoid the touching of characters.
All in all Verdana and Georgia top the list of readable fonts.  other examples are given and critiqued.

Monotype Imaging on fonts: This article had an animation that wouldn’t stop in the left sidebar.  If this weren’t an assignment, I would have closed the page out immediately.  That just drives me nuts and I think assigning this page was a special form of torture.
There is a division between text and design fonts.  So if you want to use a text font at Design size, make sure to preview it and check out how it looks…some features which work at a small scale look bad when enlarged. Serifs are often the first details to suffer from enlargement so try San Serif.  Also: choose heavy weights, ajust spacing and kerning.  When using a design font as text:  Do a legibility check, examine the details, open up the spacing, size, track and kern.  Tracking and kerning have to do with the adjustment of the spaces between letters.

Dive into Accessibility. This article sets up a program of specific steps to make your site more accessible in the following ways: Perceivable, operable, navigable, understandable, robust. These steps are numbered so that one can deal with them one day each and be finished with the entire program in a month.  Below are some of the main points which are addressed. Most of this stuff is way over my paygrage, but interesting to think about.
Use http://www.vischeck.com/vischeck/ to see how your web page looks to colorblind people.  Make sure there is enough contrast  colored text is readable and that links are expressed in other ways than color alone.
User “real” links rather than Javascript “psuedo links”  not all browers support javascript
Add titles to links.  Use access keys/define keyboard shortcuts.  Don’t open new windows…it negates the “back” button.
Define acronyms at least once and set mouse hover to define acronyms.
Use “real” captions.  Use <th> rather than <td> tags for days of the week headers on calendars.
Every table should have a summary.  Specify and empty alt atribute with an empty string…not a space.
Use real lists.  Provide text equivalents of images and image maps. Use real horizontal rules.  Use relative font sizes.
Create an accessibility statement.   Label form elements.  Identify your language. Construct meaningful page titles.  Provide additional navigation aids.  Start sentences with a capital letter.  Start HTML with a DOCTYPE.  Present main content first.  Use real headers.  Make everything searchable.

The Tao of web design…John Allsopp: Style sheets and the tension between the web as it should be and the web as we know it.
Web design should not be constrained by the wisdom and knowledge learned in the print world…it is different.We need to rethink our role and abandon the need for absolute control of the page, rather embrace the ebb and flow of a flexible medium.  Adaptability is accessibility.
Think of what the pages do…rather than what they look like.  Fonts:   In CSS specify proportional to body rather than absolute.  Layout elements such as margins, spacing, widths, indentations can be specified as percentages.
In general think in terms of flexibility rather than absolutes.

Dreamweaver Chapter 6

You can see my abouttea.html here.    brewing tea here…  aboutus here.

The following are notes I made on CSS from Chapter 6…it’s fairly overwhelming, thought the only real trouble I had was forgetting to put the # (octothorpe) before the color designations…It took me a while to figure what I had done wrong.

A RULE has two parts:  Selector and Declaration Block
A DECLARATION BLOCK may contain multiple declarations each consisting of two parts:  PROPERTY and VALUE.
a declaration  is followed by a Semicolon and the Property and Value are separated by a Colon.
a Declaration Block is contained by curley braces{ }

Rule
Selector {property1: value1; property2: value2;}
Instant CSS Reference: Shift F1 or Window>reference in Dreamweaver.

Types of style sheets: 1)  Embedded…part of HTML document, 2) External…stored in a seperate file, 3) Inline…are part of HTML and override some other style definition.

Set up properties in Page Properties, which became items in <style>.  moved these to a CSS style sheet and then was able to easily apply all these properties to another page.

The CSS Styles panel is the control center for all the CSS and has two modes:  ALL and CURRENT.    The CURRENT mode seems handy for clicking around a document to see what rules are applied to different parts of the document.

type selectors redefines how a particular HTML tag (<p>, for example) is rendered throughout the document.  Selectors are may be grouped and should be separated with a comma.

BAM!!!  All of a sudden:  Descendent Selectors… This takes me right over the edge!  What the…?  A descendent selector contains any number of regular selectors separated by spaces.  Yeah…Right!

The octothorpe (#) identifies a selector as an ID selector, which is used to style one specific element on a group of pages.

Now we get on to tag inspector and another level of complexity.

Class Selectors; most used (and abused) selectors
Oh Boy!  Psuedo-class selectors.   Often used with link states. lovehate LVHA  :link, :visited, :hover, :active.

About Domains and Search Engines

There are three levels of domain: Top Level (TLD) such as .com, .biz, .org, etc; secondary, which is the URL; and third level, one example of which is “www.”   Who knew?  When one goes to choose a domain name it is important that your TLD should be .com, though adding other TLDs might be fine as well; because .com is  most commonly recognized and used.  It is worthwhile to try to have keywords for your enterprise as part of your URL.  In addition, it should be unique, easy to type and remember,and short if possible.   Avoid using numbers or hyphens…avoid trendy names.  Make sure to check that you are not infringing any copyrights.  It is easy to check availability of names…most hosts such as (godaddy.com or networksolutions) provide this service at no charge and results are immediate. When you go to register your url there is a world of choices.  Network solutions is one mainstream company who has been in the business for a long time.  For a full list you can go to ICANN…the Internet Corporation for Assigned Names and Numbers.

There is a lot to learn about search engines and the assigned reading really did a bit more than scratch the surface…really a lot more than I could absorb.  I learned that there are basically two types of search, crawlers and humans, as well as hybrids.  Crawlers are automatic programs that search the web.  I’m not sure quite how the human thing works, but you do have to submit your information to these groups. I found a really cool tool, which is just one of many out there:  insert your URL and the tool will search your site and show you what it is the search crawlers are seeing. This was in the list for class. There is so much here, I hope when I go back to working on this for my web site I can find it again.  Hey!  Why not?

Color according to Beaird

Beaird, in chapter two gets into how he goes about getting color into his layout, beginning with making a choice of what he calls the base color.  Psychology of colors comes into play as we should take in to account the associations certain colors have for us.  Beaird breaks down the color associations in a simple sort of way: Red is passion, orange is happy, yellow is energy, green is nature, blue is openess, purple is power, white is purity, and black is elegance.  Of course he does go into a bit more depth than this, but not too deeply.   He makes the point that we should take this in to account.  As we move on from the base color we have to apply a bit of understanding of some color theory:  Colors are warm or cold, light or dark, and vary in saturation.  Colors may be organized in terms of red, green, blue  (rgb)or other systems such as cyan, yellow, magenta, black(cymk), or the traditional red, yellow,blue primarycolors with also adding in the secondary and tertiary colors.  These colors may be applied to the base color according to a variety of schemes:  Monochromatic, analogous, complementary, triad or tertiary.   Beaird mentions a great little tool color picker which is available free online which will lay theses schemes out for us with the hexidecimal codes laid out for us…might be very handy. I certainly bookmarked it in my browser.  Then these colors are applied to the various areas of the web layout.  He also makes a point about type which I like, which in to use a grey instead of black for text.

Link to FOGE comments

Link to FOGE comments

About that FOGE Site

st1\:*{behavior:url(#ieooui) }
<!– /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;}

The foge.org website has a lot going for it, and probably a lot of problems. I actually like  the way the navigation buttons open up to a lot of choices.  One thing which often frustrates me with web pages is the difficulty of finding the calendar.  The FOGE.org calendar was easy to find, I thought.  the pages opens up to their logo agaist a black background, whis is pretty stunning, especially if you are in love with deep space; then will go to the home page in a few seconds unless you click on the page, in which case you get to the home page right away.  The home page is quite busy and it is hard to find any place to focus.  One doesn’t get any real sense of what the organization is all about without exploring several pages.  I found the white type on a black background hard to read and many pages had no images…just hard to read type.  I think I would have the pages upen up to a light colored page with dark lettering.  The theme of dark space should be carried throughout, but the text should not follow that theme.  I guess someone was thinking of the letters of the word as like stars in the sky, forgetting that most of us get lost when we look at the night sky.  It wasn’t really clear that the organization was trying to attract corporate interest.  When I encountered subfolders of links which referred to board members and corporate interests I was a bit confused.  Perhaps the navigation links on the left side should have been organized so that they were divided up into different categories for the three intened audiences.

The kids web page was very sparkley…great for kids and a nice animation, if that is what you call that.  But as is the case with many of the pages, the “look” was different from the main “look.”  In fact the page didn’t even sport the FOGE logo.  Several pages turned out to be cul-de-sacs with no way out except the “back” button.

I’m not sure why the FAQs are pdf.s but that could be changed.  this page seems to have grown without anyone making sure it all hung together.  The whole thing needs to be restructured and redesigned, possibly keeping some of the more popular themes.  Here is a storyboard with some version of what might be a bit better, While still staying with the original concept.

Week Six

So here are a couple of animated banner’s.  I found Photoshop easy to use for this sort of animation.  I had had bad results in the past because I didn’t use the “Save as Web and Web Device” option.  I felt so good about this project that I went ahead and did another banner using my own files.   One can click on these images to see them animate.

Now I know… if you want your animation to “riff”  the files you use must be a GIF.

I’m still a bit confused about the requirements for posting about our Final Project idea.  I thought the idea was to have an in-class discussion before going on to the final plan.  In any case, I’m pretty committed to completely redoing my own Homewood Pottery web page. I want my homepage to incorporate a composite design I’ve been working on.  I’m trying to figure out how to do the navigation and whether or not to use an image map.  Possibly both.  I will have links to a number of different pages, including:  Pottery, Sculpture, Painting, Murals, Raku, Music, and a shopping page as well as the usual About Us, Contact and so forth.  The reading we’ve been doing on optimizing for search engines is beginning to percolate into my brain…it would be nice if I could actually incorporate some of that into my pages.

Also of interest was the article by Milissa Torquini about designing pages to not only allow for scrolling, but to actually encourage it by cutting off the image and text at the bottom of the page…usually around 570-600 pixels.  According to Ms. Torquina, studies have shown that most people do scroll all the way to the bottom of the page.

Danny Sulivan had a fairly long article with tips to get found by search engines.  Very important to get the keywords into the title.  Of course we want our key words in the metat tags of the head portion of the pages code; but it is also important that these words are used on the pages where they will be found:  At the top of the page.  Key words should be strategic…at least two words long and never generic.  Repeat them as much as possible and in context.  Include key words in “alt” tags.

Andrew Twiggs article on Font (among other things) got me to thinking:  I’ve been using Verdana because I read somewhere that it was a good “default” Font.  btu now I hear that Arial and Georgia are the two main choices.  Oh well, I guess Arial is pretty much like Verdana.  In the past I had been drawn to more exotic fonts but I find that using simple fonts makes the rest of the design process easier.

Well….so much for all that.  I guess I’ll mosey on and see what else I have to do and put it into another post.