Dish Conference is Feb 25-26

Just wanted to remind you that the AIGA Dish Conference is February 25 and 26. There are some great speakers and a portfolio review. If you sign up by February 20th, it’s $35.

Reading for February 21

Please read the following for Monday:

• Containing Floats by Eric Meyer.
• Myths and Misconceptions about Grid Systems, by Antonio Carusone
• Zeldman, Ch. 9 and review Ch. 10 again.

Exercises 3, 4, 5 (Floats)

Download exercises 3, 4, and 5 to your machine for Wednesday, February 15.

Web sites for Geometry of Pasta and Jon Tangerine

The first site I want to include on our class blog is for Geometry of Pasta.. I think this site works very well even though it is only black and white. There are 2 things I especially like:

1. The page that has all of the different types of pasta on it- Each piece is clickable and takes you to information about that pasta type.
2. The logo- Although it is an image and not styled with CSS, it is still an example of how we can add a variety of type to our web sites even though the type choices on the web are somewhat limited now.

The next site I want to talk about is Jon Tangerine's site. I picked this site because I was inspired by his logo. It is just content and is completely styled with CSS. You might think that it is an image built somewhere else, but it is not. His logo inspired the way I handled the title in part B of project 1 for class.

Web 1 Exercise

Download the exercise here. We will upload your changes manually to the site.

Site in development

Browser Tools for Web Developers

Here are links to the browser tools I’ve mentioned in a few classes:

• Safari has a dedicated Developer menu that you can turn on. Go to Safari > Preferences > Advanced and check “Show Develop menu in menu bar”. Now you can use the Develop menu to turn stylesheets off, show the Web Inspector, etc. You can also right-click a particular element on a web page and choose “Inspect This” to see that area of code and the styles that are being applied to it. (This “Web Inspector” is active by default in Chrome).
• The excellent Web Developer Toolbar does similar tricks and more, allowing you to outline elements, view a page’s CSS, etc. It’s available for Firefox and Chrome and gets installed as an extra toolbar — in Firefox it’s a big toolbar with icons, but with Chrome it’s a subtle Gear icon off to the right of your address bar.

Project 1 Final Details

Hi everyone, here are some details about Project 1.

Submitting and Archiving

• Both parts of Project 1 are due on February 16, in class. I will pass around a flash drive and have you copy your files onto it. Please make sure you have your final files at the beginning of class: I recommend bringing them in on a drive and having backup copies in your email or on the server, just in case.
• Unless you have (reasonable) objections, I will be posting your projects to the website so the class can view and learn from them.
• To help with that process, please name your files as follows: Create two folders, one called lastname-project1a and the other lastname-project1b. Inside each, put files called index.html and style.css. Don’t forget to update the <link> tag in your HTML to refer to the new name of the CSS file.

Criteria for Grading

Remember that this project is both about writing valid, semantic code and employing compelling, refined, or inventive typography. As you get closer to finalizing your projects, please take into account the critiques you heard from the class in the past two weeks: in some cases this is a matter of small tweaks to spacing or fonts, with others it’s a matter of making bigger choices about what your design is trying to accomplish.

In no particular order, here are the core questions I’ll be asking:

• Does the HTML and CSS validate? If not, is there a clear reason why not?
• Is the mark-up written to be semantic and structural, rather than presentational?
• Has basic care been taken to proofread the text for transcription errors, extra spaces, etc.?
• Have proper HTML entities been used for non-ASCII typographic characters like curly quotation marks, apostrophes, dashes, ellipses, fractions, etc.?
• If appropriate to the design, have typographic “finer points” been observed? Do the quotation marks hang, do drop-caps line up with their baseline, have small caps been used?
• Does the typography retain its legibility and character if the text is resized up or down a level?
• Does the typography — not just choice of typeface, but also the measure, leading, type sizes, arrangement, and color — convey a thoughtful idea about, or approach to, the particular text? In other words, do the whole set of typographic “moves” add up to a coherent design?

Feb 9 class canceled

Hi everyone, class is canceled tonight due to weather. See you Monday!

Show and Tell Full Schedule

Here is the schedule for show and tell for the rest of the semester:

1 19	—
1 24	—
1 26	aaron
1 31	katelyn, don
2 02	xavier
2 07	rex, courtney
2 09	jill
2 14	adam a
2 16	eric
2 21	richard
2 23	mark
2 28	kelsey
3 02	steve
3 07	adam f
3 09	katelyn
3 14	(break)
3 16	(break)
3 21	(critiques)
3 23	(critique)
3 28	aaron
3 30	don
4 4	xavier, jill
4 6	rex, courtney
4 11	adam a,
4 13	eric, richard
4 18	mark2, kelsey
4 20	steve, adam f
4 25	(critique)
4 27	(critique)
5 02	—
5 04	—

Don's show and tell

This website, I think is really good, I like how the designer of the website molded it to Storm Thorgerson style. Each of the tabs for different pages has radial movements if you place the mouse on them, I think that's impressive since I can't do that. To me, I think the website is somewhat simple to navigate and I think it's clever that each piece of work has an eye on the lower right side, if you click on it it tells you info on how the work was made.

Reading for February 9

Hi all, please read the following for Thursday:

• BrainJar on CSS Positioning (just the first page)
• The CSS Box Model

The CSS Box Model

Here are tonight’s slides on the CSS Box Model.

Critique for Group B on Monday

Just a reminder, if you are in Group B, we will be reviewing your first project tomorrow night (Feb 7).

Group B (updated)

Adam Filer

Don Mann

Xavier Payne

Rex Runyeon

Courtney Spencer

Jill Thompson

Kelsey Ullrich

Steve Womack

Reading for February 7

Here is the assignment for Monday, February 7:

• Read Zeldman, Ch. 10.
• Continue working on both parts of Project 1
• If you are in Group B, get your prose text to the point that you can present it and get feedback from the group. Think of questions you want to ask the group, whether they relate to design or code or both.

Stories within Stories

On Wednesday, Adam's treatment of Kafka's Metamorphosis brought up the idea of creating new stories within books through typography. This is the book project I mentioned in class. Jonathan Safran Foer (better-known as a novel-writer) collaborated with designer Sara de Bondt to create Tree of Codes, a new work made entirely from the book Street of Crocodiles.

Read Good Magazine's post about the project.

My Three Website's

This first website is Muse. I am not sure what this website is about but this site was stumbled upon and it was so strange and different that I had to show you guys. Something I didn’t like about it was that you could only click on the hand to naviate and there was no real understanding of what was going on.

This second website The Sum was my favorite! This is an online portfolio and freelance company. I love the whole design and the navigation. It was so clean and clear. One thing I really liked that I have not seen before was their logo moved down the page as you scrolled down the page. It was always on the left side floating and never covered anything up. I thought it was really unique. I also liked that everything was black and white except their own work which was displayed in color.

This last website Morgen Thau Film. It was a movie website featuring this interactive timeline of events that were in the movie. I also loved the loading screen. Since it was a flash website it took some time for the site to load. While it was loading, it was not your average loading bar, it was a sentance and had sayings that kept your interest. This site amazed me from the beginning.

Typography Resources

• Elegant Web Typography, a presentation by Jeff Croft
• The Elements of Typographic Style Applied to the Web, Richard Rutter’s ongoing collection of Bringhurst rules
• Use the Best Available Ampersand, a blog post by Dan Cederholm

HTML and CSS References

A few of you were asking if there is a single list somewhere of common CSS properties and HTML tags. Here is what I found:

HTML

• HTML Dog: HTML Tags, nicely categorized

CSS

• HTML Dog: CSS Properties, also nicely categorized
• An alphabetical list of CSS properties from W3Schools
• Nice hierarchical/interactive list of properties from Cultured Code

Critique Wednesday

Please remember we will be doing a mid-project critique of the work of Group A on Wednesday. Bring in the current state of both texts and be prepared to describe your intentions for the design, as well as questions you have for the group.

Group A

Adam Agee

Eric Andre

Richard Cook

Mark Fentriss

Adam Filer

Karissa Goff

Aaron Johnson

Katelyn Joughin

Group B

Don Mann

Xavier Payne

Rex Runyeon

Courtney Spencer

Jill Thompson

Kelsey Ullrich

Steve Womack