Week 12-CSS Exercise

Here is what I did with the assignment:

 http://bcts-potomac.aacc.edu/128b/06/Week_12/website/sample-design_jeduvall.html

First, I swear that the space between the header and the main content wasn’t there when I had it on my hard drive.  For some reason, when it went “live”, it really screwed something up.

What took me forever (and what I still didn’t figure out) was how to “float” the banner over to the right side.  I thought that everything was in order, but for some reason, I never could get it.  I was tempted to copy it right from the “completed” file, but that’s what I did with the sidebar navigation.  Besides, how would I learn anything if I just copied the code?  (I know–”where’s your merit badge, Boy Scout?”).

So, yes, this looks pretty crappy and unfinished.

Final Project Comps

Feel free to comment/give feedback/rip apart/et.al…

This was my first attempt.  I have a tendency to do a “Mondrian” thing, which I thought was from my vast knowledge of art.  Then I began to realize that I watched “The Partridge Family” when I was a kid WAY too much.

The black, of course, stems from Johnny Cash’s persona.  I decided to use arbitrary symbols for the navigation (with text, of course, so people don’t get completely lost).

What I don’t like about this one is the flatness.  So, I made another one that addresses that issue:

I like this one a lot more, though it still needs some work.  I wanted sort of a metaphor for a bar/honky tonk; an environment familiar to the songs of Johnny Cash.  Since I’m using a tiled background image, I didn’t want to get too crazy with the wood grain, so I just used a basic color, put some noise into it, and put a motion blur on it. The result?  A smaller image, but it still doesn’t translate well as woodgrain, and without that, it’s hard to imagine this being a bartop. (Right now, it looks like a bulletin board).

The bar mat at the top works for me, but it’s one big image.  I may just make a texture map with one of the little rubber “cones”.  The perspective won’t be as convincing, but it’ll load a lot faster.

The napkin on the bar was set up for text/mission/what the hell is this thing?, but I don’t think it works.  First off, it needs to be rectangular, and you don’t see many rectangular bar napkins.  I considered a coaster, but most of those are round, making it a textual nightmare.  I may just have to go with a white background in the middle for the text, and metaphor be damned…

Week 11: Dreamweaver Exercises

As many of you found out, there is a descrepancy between the book (which is for DW and the CS3 we use at the college.  At the beginning of Chapter 9, it says:

“Choose Insert/Layout Objects/Layer”

I’m sure that you found, there is no such animal. 

Jenn Schuster gives this suggestion: 

<You can view the Insert menu (in the top Options panel) and choose the Insert DIV button. A DIV is essentially a layer  (or they are used to create layers).

You can also go to the Insert > Layout Objects > Div Tag>

Okay, here are some of my examples:

http://bcts-potomac.aacc.edu/128b/06/week11/chap_08/css-teapots.htm

http://bcts-potomac.aacc.edu/128b/06/week11/chap_08/rounded.htm

http://bcts-potomac.aacc.edu/128b/06/week11/chap_09/layout.htm

 As you can see, “rounded.htm” looks like crap; I’m thinking that this is another descrepancy between DW8 and CS3.

Week 11: “Search Engine Placement Tips”

Okay–the last entry (maybe it’s been the last few entries)–I’ve bitched and moaned about different forces on the Internet coming together to set rules for design.  While I’m not crazy about conformity for conformity’s sake, I don’t mean to imply that there are no “rules”.  And I don’t mean to say that we should design exactly what we feel in our soul, and let the masses be damned.  There is a reality; we have to feed, clothe and shelter ourselves, and it takes jobs and money.  And when we design for a living, we design for other people who are trying to communicate ideas other than our own.  A “bend, but don’t break” attitude is in order here, and it’s up to the individual to decide where the breaking point is.

Ah–that feels better, doesn’t it?  Now, on to the article…

This is a pretty sensible article, and good groundwork for designing for better search engine results.  I brought up (during my “field trip” on my Project Profiler) a case of a competitor’s web site that was aesthetically pleasing, and had a lot of information.  It’s a shame it was done completely in frames, so that most search engines can’t find it at all.

I’m glad that most search engines have spam controls.  About 2 years ago, it really didn’t matter what I was searching for–I’d always go to some porn site with about a thousand words typed at the bottom, to trick the search engine to taking you there.  I don’t notice that anymore, and I’m glad.

The most important point to take from this, I think, is to define your site; look for the things that make it unique, and make these words your target keywords.

Week 11 Reading:”Blasting the Myth of the Fold”

This was an interesting article; what I always find the most interesting is the amount of research done to see exactly what it is people are doing when they go to a web site.  If someone published a newspaper, or a book, or even a brochure, it would be pretty difficult to see how many people flipped the paper to read below the fold, or how many people skipped Chapter 4 of the book, or how many people just read the front and the back of a brochure, and tossed the rest.  But with the technology today, we can do exactly that.  And that’s a good thing, right?

Maybe.  I personally think, that for the most part, it sucks.

All this information trickles down into design studios and art departments, and before too long, someone running the department is telling his staff, “Now, the latest data says that a majority of the people won’t read this, or won’t scroll down to this, or won’t click here”.  So what’s that give us?  Design for the masses.  Information given for the most response.

So, what’s wrong with that?  Isn’t the idea of design and information communicate with as many other individuals as possible?  Maybe.  But look at all of the art movements in history–Dada, Bauhaus, even Impressionism.  All of these movements went against the populist; sometimes purposely, but other times, it was just a case of someone following a “different drummer”  Are we becoming a consumer driven pack of lemmings?

Milissa Tarquini’s point is; forget about the fold.  I’d take it a bit further.  I’m not going to say that the data which shows that this trend works and that one doesn’t is irrelevant; just don’t take it to heart.  If you’re designing for the masses, then work it into your design.  But there are a lot of people popping up, giving out rules on how to design. 

Week 11 Reading: “Information Interaction Design”

One thing I noticed right off from this article:

It was a lot of reading.

In fact, as I was reading it, an old “Beavis and Butthead” cartoon kept popping into my head; Butthead is “reading” the directions on a tube of glue; “uh…………………words……………………….words………………………words……………………”

Basically, the article was a call for designers to not merely “design”, but reach a little further in communicating information, as that’s what designers do.  Whether it’s a web site that explains how to build a treehouse, or a logo for a restaurant, information is being transferred.  Sure, it’s great to come up with a beautiful, elegant design, but if the intial idea is lost, then the design is worthless.

I especially liked the point about good communicators having a background in theatre–see, Mom, I told you that Dramatic Arts degree would come in handy some day!

I agree with the article, but it did seem a little wordy, as I may have mentioned before.  It really seems that successful design increases with teams working on the project–this team provides the information/data, this team translates that data into a form that’s accessible, this team takes that form and puts it into a sensorial form, etc. 

Week 10: “Think Outside the Font Box” and “Dive Into Assessibilty”

I decided to combine these two readings to (1.) Save space, and (2.) comment on two readings that really have a lot in common.  Mainly, how much planning MUST go into a web site before you even open Dreamweaver.

Take the font article; there are fonts that are “safe at any size”, there are fonts that look like crap when enlarged, but look great small, and then there are fonts that are unreadable at smaller sizes.  What we really need is a program that we can run like Spellcheck within DW–when we use a font that will have sizing problems, the program will notify us, and even give us a suggestion of a similar font that won’t give us problems.  But for now, I think the only way to really “catch” this is to run the site through all types of situations–different browsers, different text sizes, etc.  They’ll probably incorporate my idea in about 5 years, and in 2012, they’ll sit around and say, “Remember 2007, when they had to test out web sites by hand?”

The “Dive Into Accessibility” article really got into some things to think about when building a site.  I have to admit, I didn’t read this article (okay, BOOK) all the way through–there were about 20 chapters.  But the different situations to consider when building a site that will be accessible to all the impairments out there is positively mind-boggling.  I mean, you could say you’ve designed your site with the sight-impaired in mind.  But there’s the sight-impaired person whose computer “talks” to them; there’s another sight-impaired person who uses a Braille keyboard; another can see objects, but not the correct colors of objects.  And all of these situations have different solutions.

Of course, I can hear some corporate meeting going on right now, where someone is arguing, “Why should we bother with that, since they don’t even fall into our demographic anyway?”  Where do you draw the line?  I’d like everyone that wants to get something out of my site to be able to do that, but web developers probably come to a point where they say, “Enough–I just can’t cover any more bases!”

“The Principles of Beautiful Web Design”

Like I mentioned a few posts back, I did get Jason Beaird’s book (we had to read an excerpt from it; layout and composition, the “rule of thirds”, he’s making a site for “Florida Country Tile”–any of this ringing any bells?).

Though I was going to buy the book, I got home last night to it sitting on my kitchen table, with a note:  “Happy Birthday, Granddaddy!  We love you, Kylie and Makenzie”. (Since Kylie is 11 months old, and Mak is 6 months younger, I’m thinking that my wife may have had something to do with it…)

I’d recommend the book highly–whether you’re a seasoned professional, or someone without a lot of art experience, there’s a lot of valuable information.  I just finished the “color” chapter, and while color theory, the color wheel, etc., can be a bit boring, Beaird presents it in a way that’s readily accessible.  It’s got me thinking about “alternatives” to my final project.  Part of the project is on Johnny Cash, and I was surprised by this quote in the book:

“When I think about black, for instance, I think about Johnny Cash, tuxedos, and Batman.  When I think about Johnny Cash, his dark clothing, deep voice, and sorrowful songs give a tangible meaning to the mental associations I perceive between the man and the color… “(pg. 43)

Kind of weird, huh?  Okay, maybe it’s not so weird.  But it makes me feel like I’m on the right track with my project.  But the weird thing is this; I originally designed the project with a black background, but now that I’m reading the “Textures” chapter of the book, I’m re-thinking the black!

Anyway, it’s not an expensive investment, there are a lot of illustrations and links to web sites (yes, I know that you can’t link directly from the book to the sites.), and I really think that it’s going to help me with future projects. 

And no, I’m not getting any portion of the royalties by passing this information on to you.

Oh, and thank you, Mak and Ky!

Week 9: Chapter 7-Typography

I like this book; so much so that I recommended it to a friend who is teaching herself DW.  The more we work with CSS (and the book is really nuts about it), the more it makes sense.  I can understand why we shouldn’t go “class-happy” (from the last chapter)–too many classes, and you might as well edit each page, one at a time–which is what CSS was designed to stop!

So, having a chapter on typography so involved with the CSS scripting (if that’s the proper termonology) really reinforces the CSS process, which I appreciate.

Of course, it’s the same ol’ story with web typography–you’re limited to the fonts the user has installed.  But wait!  What’s this??  By using Flash Text, you can use any damn font you please!!!

Well, not quite.  If you use it for all of your text, you can kiss your search engine results goodbye–most search engines (if not all) don’t recognize Flash text.  “But”, I thought, “I can still use Flash Text for my navigation (since it has an unusual font), and (I think) I can still make adjustments to the navigation globally using CSS!!”  (I don’t care much if a search engine has trouble finding “About Jed”…)

So, I tried to put it into practice.  Okay, first roadblock–the machine I’m logged into at AACC doesn’t have my font (”StencilSans”).

No problem–I’ll just use another font for now, just to see how the Flash Text works.

I followed the book instructions, and opened my masterpiece in IE.  No text–just a broken link.  I must have missed a step.

So, I tried it again.  Same thing.  “Maybe IE doesn’t support Flash Text”, I thought, but I couldn’t figure out why that would be.  So I opened it up in FireFox.

Another broken link–but this one was a little more specific.  There was nothing wrong with the link, but the computer I was logged in on didn’t have the Flash player installed.

Sometimes, it’s the simplest thing that takes the longest time…

Week 9: Best Web Sites of Feb. 2007

I was a little disappointed by this article at first; I have a tendancy to think “Best DESIGNED Web Sites”, rather than merely “Best”.  These sites are, rather, the best sites for some “outside help” towards building your own site.  I’m interested in the Ajax scripts, as my final project site will have a photo album, and I’m not thrilled with the one you can create inside of Dreamweaver (it defaults to a white background with Times Roman text, whereas I’d like it to fall within the scheme of the site), nor am I thrilled with the Flash “widget” you can create with Dreamweaver (rather than fading photos in and out, it runs the gamut of annoying transitions; window blinds, barndoors, etc.)  Now, if there was a way to adjust either of these two, I wouldn’t have to mess with an Ajax script.  Of course, I could set the whole thing up in Flash, which may be my only alternative…

I also liked the “Logo Design Trends of 2007″.  Isn’t it funny how 2007 has evolved into it’s own genre, without making any noise about it?  I guess it’s been the same for other trends; I doubt that there was a newspaper article in the Times in 1953, saying: ”ATTENTION:  ALL DESIGN MUST BE DONE IN PINK…”

The article about “Web 2.0″ logos intrigued me, mainly because I’ve never heard the term “Web 2.0″.  Luckily, I have a link to “Wikipedia” (because we all know how reliable THAT is), and found out about “2.0″… (no, I’m not telling you!  If I can look it up, so can you.)