A roundup of useful links

Jim Thatcher has revised and updated his tutorial on how to comply with Section 508. It’s a ten section course in accessibility. JimThatcher.com

Project Seven has a free tutorial on Q Tabs, or navigation tabs with scalable graphics. The tutorial includes downloadable files and graphics. PVII Q Tabs

The New York Times (NYT) has embraced the blogosphere with its Blogrunner section. The NYT cherry picks from blogs it considers accurate or authoritative and displays them collected by topic. One such topic is technology. NYT Blogrunner: Technology A personal favorite post from the Technology blogs is New Classroom War: Teachers vs. Technology.

An article by Milissa Tarquini at Boxes and Arrows takes on the myth of above the fold design and thoroughly blasts it into oblivion. Blasting the Myth of the Fold

A new and discounted deal on Mac software each day. You save money and you learn about the newest Mac apps. MacZOT

Source order and mobile users

One of the most important and least noticed facts about CSS layouts for sites meant for mobile users relates to source order. The elements of a web page—header, main content, sidebar, footer, and other such divisions—can be written in the the HTML in any order and laid out anywhere on the page using CSS. This means the main content div can be first in the HTML source in many layouts.

For mobile users who may be viewing a page without the help of CSS, seeing the main content first can save considerable time and many clicks to get to the relevant part of a page. If you look at this page with CSS turned off, you will note that the links at the top of the page are first in the source order. One of my goals in adapting this page for mobile users would be to either 1) use CSS to put the links last in the source order while still displaying them on the page under the title graphic, or 2) put a skip navigation link at the beginning of the list of links that would let a mobile user jump right to the first blog entry.

Review: Pro CSS and HTML Design Patterns

Jun 16, 2007 by

Web Teacher


buy at amazon

Summary: use with intelligence

★★★☆☆ Michael Bowers wrote this book (Apress, 2007) to provide design patterns in web designs that the book cover states will “increase creavitiy and productivity.” While design patterns can indeed save you time and effort, I both love and hate the way the book goes about providing the patterns.

First I’ll tell you about how the book works, and then explain why I have mixed feelings about it.

There are over 350 patterns in the book. Included are such patterns as creating conditional stylesheets, right-alignment of elements, treating block elements as inline elements, creating equal sized content columns, making drop caps, displaying callouts and over 300 other patterns. For each pattern, you get suggested HTML and the CSS to create the pattern from the provided HTML.

The author suggests that you take the reusable patterns and “simply drop them into your code.” While I think that the patterns are a valuable aid in helping web designers solve specific design problems, I have a problem with the idea of just dropping the book’s code directing into your page.

My problem is that almost every pattern uses a class. That class is assigned to every HTML element involved. A major erruption of classitis would result if some intelligence wasn’t used to adapt the patterns.

A reader with a background in CSS, who could see how to use the CSS needed to create the design element with intelligence would make best use of this book. With appropriate CSS savvy, a user could adapt the CSS pattern so that it could be applied to a page using descendent selectors instead of with an omnipresent application of classes.

Review: The Principles of Beautiful Web Design

Jun 9, 2007 by

Web Teacher

Summary: CSS for design

buy at amazon.com

★★★★☆ This book by Jason Beaird (Sitepoint, 2007) discusses some of the principles of design and explains how to implement those principles using CSS.

It covers some of the same ground as the popular design for non-designers books by Robin Williams, but takes on new topics. And explains how to write the HTML and CSS to make it happen. It even includes some hints for chores in Photoshop. The book has chapters on layout and composition, color, texture, typography and imagery.

As for using it to teach, the book could not stand alone as a semester’s core for a design course. However, it would be a good resource in a general web design class. It’s a slim book and a fast read, so it would be easy to use to supplement other assignments.

35 Designers x 5 Questions

It’s a long read but full of CSS tips, design ideas, font ideas, and recommended books. 35 Designers x 5 Questions | Smashing Magazine. These are the questions:

  • aspect of design you give the highest priority to
  • most useful CSS-technique you use very often
  • font you use in your projects very often
  • design-related book you highly recommend to read
  • design magazine you read on a daily/weekly basis (online or offline)

Of the 35 designers invited to participate, 2 were women. But who’s counting?

Green Manifesto applies to web design, too

This article: WorldChanging: Tools, Models and Ideas for Building a Bright Green Future: 1000 Words: A Manifesto for Sustainability in Design is interesting in an environmental sense, and right on the mark for designers. I think the major points, with one or two exceptions, apply equally well to web designers. How about some of these?

  • First Do No Harm. Think about the consequence of your design, and how it affects diverse users.
  • Stop Making Crap. Stop feeding the cycle by teaching new designers how to make crap.
  • Teach Sustainability Early. “Design education is at a crossroads, with many schools understanding the potentials, opportunities, and obligations of design, while others continue to teach students how to churn out pretty pieces of garbage.” Yep.
  • Screws Better Than Glues. See this post: The Joy of HTML

There are other main points in the article at World Changing. Do you think any I omitted apply to web design?

Technorati Tags:

SXSWi Saturday Recap

Here’s an end-of-day recap of what I saw and heard today at SXSW Interactive.

A Decade of Style

Doug Bowman, Molly Holzschlag, Eric Meyer, and Chris Wilson from Microsoft.

Eric Meyer’s last name was misspelled on the card in front of him. He asked the audience for white out and amid jeers such as "What’s white out?" a fellow named Austin stepped up with a container of white out and Eric corrected the spelling of his name. Advice for speakers: always start a panel with a good laugh.

Eric showed a timeline of browsers and other milestones and pointed out that the first draft of CSS 3 was in 1999.

The discussion was based on a series of questions. The first was: When and where did you first encounter CSS? The stories the panelists told went back into the early days of CSS, almost before it was on anyone’s radar, and before there were any browsers to support it (so why do it?) Things have changed a bit, as they pointed out.

Next questions: What was it about CSS that made you stick with it? Doug mentioned enjoying beauty created out of nicely structured HTML. Molly, who was being asked to write about it, said she worked on learning it because other people wanted to know more about it. Chris said it was about the structural semantics of HTML. (He also confessed to being responsible for the mystery element above the html element–hence the * html hack.) Eric answered that he appreciated the ease of it and how it simplified things. Then he started writing about it and has never stopped. A couple of the panelists also mentioned being drawn to CSS because it provided universal access to information.

What’s your favorite CSS property? Chris quipped "scrollbar color," for a laugh, but later owned up to the truth: margin. Molly’s favorite is the display property. Doug went for a laugh with text-decoration: blink, then admitted his real favorite was background. Eric likes clip, because it’s a lesson in what can go wrong. He also likes overflow.

How did CSS survive its first five years? Molly said it was because the amount of presentational HTML needed to make a document look the way she wanted was just unmanageable. CSS, to her, was just less work. Doug said that even though it was picked up slowly, the concept was there and powerful and remained because it was so powerful. Chris said it was just sexy because of what you could do with it. Eric mentioned that some functionality was there (fonts and colors) from the first, and gradually its promise was realized. Molly mentioned that there was a legacy that made sense from print and styles used in print.

Name one or two moments in CSS history? Zen Garden popped out of several mouths immediately. A show of hands from the audience agreed on Zen Garden as the single most important development in the progress of CSS. Eric said IE5/Mac because it was the first breakthough browser. Eric mentioned Todd Fahrner. Molly said Rob Shandinase (sp?) from Blue Robot and Eric Costello from glish. Doug mentioned Owen Briggs from the noodle incident. Chris mentioned a man from Netscape who worked with Microsoft whose name I didn’t catch. Doug also mentioned the CSS Samurai.

What’s the biggest missing piece in CSS? Shouts from the audience were for display: table. Chris mentioned a good test suite. Molly mentioned column based design. Doug wants variables and constants and appropriate tools.

Has the CSS working group lost their way? Molly says they are bringing in designers for the first time, which is a good step. Chris said that it’s tough right now because the spec doesn’t have enough detail and there is no test suite that works. Molly said the W3C has lost its way and it’s a trickle down problem. Fresh perspective is needed. Chris, who is the chair of the new HTML working group, said that there are some valuable things about the W3C that we really need. Doug said that designers don’t usually communicate with the W3C, but Chris pointed out that the W3C is trying to be more open to input from people outside the group.

What’s the hardest part of CSS? Chris said compatibility (and backwards compatibility) because fixing things causes backward compatibility problems. He just tested the top 200 websites in the US, and 49% were in standards mode. This is very different from 2003, when only about 1% of the top websites were running in standards mode. Molly said it’s difficult for designers to design with CSS because there is so much to learn. Doug referred back to the missing pieces in layout and not having proper tools. Eric said the inline layout model.

How does designing for CSS differ from designing in general? Doug said CSS is not a design tool.

Turning Projects into Revenue

Ted Rheingold, Chanalyn Victor, Tara Hunt, Gabe Rivera, Ryan Carson.

Nothing new is going on with online business. All the old rules still apply. The possible ways to make money online are still advertising and sponsorships. At lot of traffic is needed to use AdSense for making any money. Sponsorships are not about impressions. You get a lump sum for one year and it may be a better way to make money when you can’t provide a lot of impressions.

Affiliate programs make some money. Most people have stopped using them. Selling goods is another way to make money. Sell something you make yourself such as software. Sell songs, ringtones, coloring books, etc. You can also sell services such as web hosting, web storage, consulting, run a conference, etc. People also sell subscriptions and virtual gifts online. An interesting idea is micro-donations or micro-sponsors.

Right here is where my battery died. Sorry for the short report.

Kathy Sierra Keynote

She’s a star, she’s filling 3 huge rooms and it’s still crowded. She’s nervous, she’s over here by where I’m sitting with Tom and Dori, exchanging encouraging conversation with Dori. The guy next to Dori is Bert. I’ve been talking to a guy named Andy in the row behind me who works for Austin power. Okay, there Kathy goes up on the stage.

Kathy starts with, "Why are you here? How many are live blogging? We could strap those people into a chair and everyone else could leave. You are the ones who make the products that make this whole thing unnecessary to be here, so why are you here?"

What is the thing about being with real human beings? It might be smell. If we want applications that have a loveable quality, they need more humanness, maybe not smell, but something human-like. She had people stand up if they were designers. Then if they were coders (with some overlap) and if they were money people. Then she asked each group to introduce themselves to someone who is not in their group. That, she said, is why we are here.

Help users get together with each other offline. Make software interactions feel more human because face-to-face matters. The more people get together offline and build community the more the passion for their product grows. Use meetup.com for everything.

The computer needs a way to know when the user is confused. In real life when someone looks confused, you ask them a question. The program needs to know real questions real people ask and attempt to provide these answers. Get the right context ASAP and give the user an understandable set of questions. She said we should write like a person talks when we speak to users. Especially use the pronoun "you."

When Kathy talked about writing like a person, she showed a bunch of photos of people to write like: Scoble, Tom Negrino and, OMG, me! If it hadn’t been so crowded in there, I would have fallen right off my chair.

She concluded by saying to remember that we need to be helping people learn and get into that flow state sooner. Find ways to solve problems for them when they get confused. The people who are successful help their users (or learners) move quickly from thinking they suck at something to thinking they kick ass at it. Lower the suck threshhold to create passionate users.

Unleashing CSS: How I Learned to Stop Worrying and Love IE 7

Christoper Schmitt.

He gave us some rules:

  1. Say no to betas
  2. Know your adoption rate
  3. Take an inventory
  4. Keep ’em separated
  5. Kick ass

The adoption rate for IE 7 has been very fast thus far. Use of IE 6 is falling off fast. Many bugs can be ignored now with IE 7. Keep your bug fixes separated with conditional comments. Then figure out what you can do with IE 7 to help you kick ass: :hover on block level elements, alpha transparency on PNG and other new things that have been supported for years by other browsers.

He gave a small demo on how to use PNG transparency. He showed some code for styling input fields in forms that use attribute selectors. Impossible in <IE7. He talked about fixed backgrounds.

Each time someone said something he liked in the audience, he gave them a free copy of his latest book. Very cool.

Technorati Tags: sxsw