It’s a problem of our time. The range of human knowledge today is so great that we’re all specialists and the distance between specializations has become so great that anyone who seeks to wander freely among them almost has to forego closeness with the people around him. The lunchtime here-and-now stuff is a specialty too.

~ Pirsig, Robert M, Zen and the Art of Motorcycle Maintenance, 1974

Jeff Sebring - Web Design ✦ Development

Just because a particular method of providing a user interface has been popular in the past doesn’t mean it’s even usable today. The hardware people are using to access the websites you are building will continue to change and evolve far faster than you can anticipate.

Websites of the Future

As responsible people who build websites ( I don’t think designer or developer are accurate anymore, got a new Pronoun? ), we have to start accepting the chaos. I don’t want to build websites that won’t work in 2 years when a new way to interact with them is standard.

We’ve gotten past the flash. Everyone hows why that is evil now. The next evil doer, in my opinion is the mission critical hover state.

Design Critical Menus

Every website has a goal, or set of goals. The main menu of a website is generally going to be critical to these goals, and where the dropdown menu lives.

I treat the masthead of a website as the most valuable piece of real estate. The ONLY links or text to go in the header should be something you need to have available on every page of the site.

What Menu?

The elephant in the room here is that touch devices don’t have a hover state. Your dropdown menu will never be seen from a phone or touch computer.

When you consider that the hover state only works with a cursor, there are a lot of fairly common design techniques that fall apart.

Links will always work

One of the most important elements of the web is the hyperlink. This is what makes it a web.

Dropdown menus revolve around the CSS :hover state, and often jQuery, and are essentially a hack. For quite a while, they were a great way to tuck away a submenu. That was when the only device to really interact with a website was a full sized PC or laptop. The little smart phones before the iPhone could browse, but nobody really expected to be able to use a website efficiently with one.

Obviously, there are many websites that need complicated menus and ways to divide choices without overwhelming users. The way to proceed is with good, old fashioned CLICK, and a little more creativity. Only display what you really need. The website doesn’t have 20 high priority goals.

Use things like the jQuery UI Accordion which requires a click to display the contents, and indicate that there are contents without a hover.

Back to Reality

There are going to be many clients who continue to require these horrible things. The best we can do is inform them of why they aren’t the best idea today, and find alternatives that provide better results. Given the rise in use of tablet computers like the iPad, this isn’t very difficult when compared to a design that didn’t take them into consideration.

Jeff Sebring - Web Design ✦ Development

Modernizr creates an html class if the feature is available in the browser rendering the page. Just wrap your styles with the selector for the feature you’re using like so:

.textshadow {
    .widget h3 {
        text-shadow: -1px -1px 0 #aaa, 2px 2px 5px #3a3a3a;
    }
}

If you really want to go the extra mile for performance, use Modernizr’s built in YepNope.js conditional loader to load feature specific stylesheets or Javascript only when they can be used.

Jeff Sebring - Web Design ✦ Development

• MIT 6.00 Introduction to Computer Science and Programming (2008)
• MIT 6.001 Structure and Interpretation of Computer Programs (1986)

Don’t let the dates of these throw you off. Programming hasn’t changed much. You will be able to apply these to any language you may be using. The 1986 version uses LISP as a demonstration language, and the 2008 version uses Python.

You will be encountering a large amount of math. To be honest, I understood little of it, especially listening semi casually, but I was still able to grok the concepts being shared.

Jeff Sebring - Web Design ✦ Development

Writing every day

I’m one of these pathetic bloggers who really enjoys writing, but doesn’t do it much. I’ve got plenty of great excuses too:

• I’m busy working
• I need to finish “insert one of my many side projects here”
• Usually three paragraphs in, I realize how dumb of an idea the post I’m writing is.
• I want to stay “on-topic” with what I’ve written about before
• Someone else wrote about it better

Ok, these are all really lame reasons to not write. The real reason is that I haven’t gotten into the habit of doing it. It’s always hard work to form new habits. It’s like Merlin says, “You gotta work the taint Johnny.”

A journal will be a great way for me to get in the habit of writing every day. By putting my thoughts on paper, I will solidify, and give more respect to my ideas, and life in general. Hopefully this will lead me to share more ideas here on my blog.

Look at your thoughts

One of the biggest benefits of a journal, in my eyes, is that it gives you a chance to actually look at your thoughts. Both the act of writing them down, and reading them can give you a new perspective on them. Some things you think one day might seem ridiculous the next.

For this reason, I’ve decided to start each day by reading the previous day’s entries, and commenting on them. By forcing myself to look at what I was thinking, I can review the conclusions I may have come to. We all know hindsight is 20/20, but how much do we use it to our advantage? How can we give our ideas, activities and thoughts more measured attention? Start a personal journal.

In order to reference entries in comments, and make it easy to review, I’m using a simple numbering method, combined with symbols. Each day starts at 01 ( I doubt I’ll ever need 3 digits in a day ), and may prefix the number with a symbol to signify what the entry is relevant to.

Writing on paper

As a web developer, I spend A LOT of time typing. I write code and emails all day for a living and fun ( the emails aren’t as fun as the code ). The last thing I want to do is write a personal journal into text files. Aside from my affection for stationary and fine pens, the act of handwriting has a quality of it’s own that I really enjoy.

Creative people often forget how beneficial it can be to exercise different parts of their mind. Working with your hands, and the control needed for handwriting can be a sort of meditation. You are forced to pause and formulate your thoughts more. For a computer geek like me, typing doesn’t require any thought. Words spill from my fingers onto the mechanical switches of my klackity Tactile Pro sometimes faster than I can compose them well.

Make a commitment, use an ink pen

When I first picked up the journal to start writing in it, I started with a pencil. I thought it would be good to be able to rewrite, and make sure it’s neat and tidy. That was a big mistake. I spent about 20 minutes writing and erasing before stopping, and getting a pen.

There is something telling about the way you write. Some people make a career out of analyzing handwriting. Perhaps over time, I will be able to look at the way I write each day as a journal entry in itself, telling me things about myself at the time of writing them that I might not be aware of, or wouldn’t write. Was I having trouble staying in the lines, was my script nice, or sloppy? Did I write in it after a few beers?

I also decided I want it to be perfect in the way that it is just what I wrote at the time, no erasing or editing. Don’t pull a George Lucas on your journal. You deserve the original article when you look at it later.

Whitelines Squared

Of course, starting a journal, I need something to write in. Having a ridiculous fetish for paper products, my needs were pretty specific.

My journal needed to fit the following criteria:

• hardbound
• clean black cover
• book ribbon
• heavy graph paper
• environmentally friendly
• size A5 ( 6 x 8.5 inches )

With this in mind, the Amazon navigation lead me to the Whitelines Hard Bound A5 Notebook. It has everything I wanted, aside from the clean black cover, but the orange stripe doesn’t bother me, as it’s using Futura, and the orange is a nice contrast to the black cover. It’s not surprising that they would be so beautiful, and enjoyable to write in. Whitelines was founded by a Swedish designer named Olof Hansson.

The killer feature of the Whitelines, is the . . . white lines. Instead of a high contrast blue grid on white, the paper is shaded light gray, with white lines. I find that the white lines provide guidance, but are not too demanding, or distracting. The words are what stand out, not your guidlines.

Though I am not really a stickler about recycled paper or finding out “how the sausage is made”, I prefer to give my money to companies who take responsibility for themselves. Whitelines makes the following statement about their paper processing:

And not only is Whitelines working harder to support you and your ideas, but it is working harder to support the environment; the paper is processed and printed in a mill in the South of Sweden with zero carbon emissions.

If you are considering starting a personal journal, I hope this pushes you over the edge. When you’re old, looking back at your life, you’re more likely to wish you had started a journal than to think it was a waste of time.

Jeff Sebring - Web Design ✦ Development

It’s an exciting time to be building websites.

Jeff Sebring - Web Design ✦ Development

What is happening is that the server has not received any data, and your session timed out.

There is an easy command that takes care of this when you connect:

ssh -o ServerAliveInterval=60 username@domain.com

This will send the server a bit every 60 seconds if you don’t, keeping your connection alive indefinitely.

Jeff Sebring - Web Design ✦ Development

Another key point of Jeff’s talk was that it’s best to just get things out as soon as possible, and continually improve on it. The way your product or service is used will help guide you.

Speed of iteration beats quality of iteration.

~ Jeff Veen – WordCamp San Francisco 2011

Jeff Sebring - Web Design ✦ Development

My other favorite new gem, Forge, contains an option in it’s config.json file to enable LiveReload when watching a folder.

I had no trouble installing this on my Redhat Linux server, and running the extension in both Ubuntu and Windows 7 Chrome and Chromium.

Jeff Sebring - Web Design ✦ Development

This is a great alternative to moving to a separate part of your file or switching files and finding the right place in your media query for your new rule.

Sass Nested Media Query Example:

#sidebar    {
    width: 100%;

    @media only screen and ( min-width: 480px; )    {
        width: 33.33333%;
        float: right;
    }
}

Becomes:

#sidebar    {
    width: 100%;
}

@media only screen and ( min-width: 480px; )    {
    #sidebar    {
        width: 33.33333%;
        float: right;
    }
}

Jeff Sebring - Web Design ✦ Development