Design Critique: htmlNode Framework

This is part of our Design Critique series.

The Original

This is a webpage our friend put together for a framework he built.

Design Critique

Design Critique Principals that were applied are in bold:

1. Keeping sizes and spacing the same makes your design feel polished.
2. Aligning everything to a grid adds structure and support.
3. The elements of Focus, Line and FIll round out a design.
4. Follow known behavior—your user should not have to be reeducated to complete simple tasks.
5. Put content and structure in a logical hierarchy, adding more weight to the more important items.
6. Line breaks are thought breaks.
7. Choose larger increments for shading and size so people can see the difference easily.
8. Make items in a series either more similar or more different.
9. Limit the number of typefaces you use.
10. Create and stay true to a color story.
11. Use awesome images in your design.
12. Create depth in your design.

New Design

Additional Design Critique Notes

• The first thing we did was apply a 960grid (#2).
• We broke up the text, giving it a stronger intro (#5).
• We found a great image (even though it’s unrelated to the code version of framework) (#11) and then used this as the basis for our color story (#10).
• To give it just a little more polish the title is in a tag that has a gradient, stroke and drop shadow (#12).

This work includes the photo “framework,” available under a Creative Commons Attribution license, © kaz k.

How to write a CSS nth-child equation

Today we are going to talk about the CSS pseudo selected “nth:child”. It’s my new favorite thing.

We are lucky enough to have two clients right now that have asked us to work in HTML5 and CSS3 and they don’t care one whit that (as one client put it), “my grandma can’t see the site on her old computer running IE 6″. So we’ve opened up the firehose and pushed ourselves to implement some new CSS tricks.

What we use nth child for

Since we commit exclusively to tables-less CSS and a 960 grid layout we use nth child a lot to float elements into columns – if you float three across with a margin-right of 20px, you need to remove the third margin so your widths come out properly:

We also use it for table rows when displaying a lot of data:

How to Figure Out the Equations

I’ve been roundly mocked by my family for my issues with basic math. Somehow I have a degree from the University of Utah and have always excelled at my classes, yet I cannot do long division (and I have a father who is a financial examiner and a sister going through vet school). Thusly I could not wrap my head around the equations for nth-child. I read a great article from How nth-child Works by CSS Tricks and that helped, but it was time to pull in the big guns. I called on my friend Mike Carey (aka Homeschool) to help me out. Mike has a particular gift when it comes to explaining difficult concepts to people.

Mike explained that you need to find and apply the pattern and the start point.

If you want the seventh item to be different then you can just number it (7):

if you want the 7th, 14th and 21st then you know it’s the seventh item starting with number 7, which is written (7n+7). This made no sense to me.

So Mike broke it down more.

You are looking for two things, the pattern AND where you want the pattern to start. The first part is the pattern. The second part is where it starts.

So then if you want:

Every 5th item to be different, starting with the #5, you write: (5n+5)

Every item starting with the 3rd to be different, you write (n+3)

Every second item starting with the 6th, you write (2n+6)

Practical Examples

Besides the couple of examples we started with we used this heavily in an application we are developing that has a lot of information tables. They look like this:

This is achieved by saying the first column looks one way, the second another and the third another. You cannot specify columns in CSS (only table cells [td] and rows [tr]) so you have to do it based on every third cell:

td:nth-child(3n+1) {background:#CEE3F2; … }
td:nth-child(3n+2) {background:#E6F1F8;}
td:nth-child(3n+3) {background:#EDEDED … }

(the above examples have been truncated, view the code to see full styles)

[Friday Favorites] Recap + Introducing [Tech Tuesdays]

Thank you to everyone that participated in our series Friday Favorites:

• Amanada Nelson — Amanda Nelson Photography & Design
• Dena DeBry — Buttonwillow•Six
• Erik Rowland — TimeMD
• Gudrun Enger — Good Füd Media
• J.W. Davies — Cook Martin Poulson
• Karen Kaminski — Axis 41
• Keith Denos — PRWUA
• Kira Griffin — Designer
• Laura Carrera — Carrera & Company
• Michael Carey — eBay
• Tauni Everett — Public relations and social media consultant

We got to introduce a lot of people who have helped our business succeed and we hope that we’ve made a few new connections for people. We also have a nice round up of good solid advice: mostly about being nice, or being patient, honest and positive while others to point you to Amazon Prime, social media, good food and good friends.

In case you were just reading it for the recipes, we’ve put together a recipe book. you could cook all of this into one meal (and don’t worry, if that meal is horrific you can always take Laura, Kira or J.W.’s suggestions) and chow down.

Download Friday Favorites Recipe Book

Or view the pages in the gallery:

(Let me know if you’d like a wire-O bound copy, I can make that happen!)

Introducing Tech Tuesdays

Our next series (and really, I suggest everyone create a blog series) will be Tech Tuesdays. This will allow us to explore and share with you tech we design and develop for—iPads, WordPress, Drupal, HTML5, CSS3, etc. And tech we use everyday—Evernote, Things for Mac / Things for iPad / Things for iPhone, BusyCal, Mobile.me and so on.

Happy Holidays & Thank you to our Partners!

Thank you to our 2010 partners. While they have all received this holiday card in the mail already—I wanted to give an additional shout out to everyone. We opted again this year to donate to the Lend a Hand program that provides heat in the winter and air conditioning in the summer to elderly and disabled Utahns.

Thank you for your business, you are our passion and our success. We wish everyone happy holidays and we look forward to doing some awesome things in the new year.

We will not be posting Friday Favorites for the next couple weeks, but we’ll be back next year with a few more!

Thank you!

We want to thank our clients, friends and family for the support and success. We hope you all enjoy a great holiday weekend!

There will be no Friday Favorites post tomorrow—but you can take a few minutes to see anyone you missed:

Michael Carey

Kira Griffin

Karen Kaminski

Amanda Nelson