Tags: santa

After An Event Apart San Francisco, which was—as always—excellent, it was time for me to get to the next event: Indie Web Camp Los Angeles. But I wasn’t going alone. Tantek was going too, and seeing as he has a car—a convertible, even—what better way to travel from San Francisco to LA than on the Pacific Coast Highway?

It was great—travelling through the land of Steinbeck and Guthrie at the speed of Kerouac and Springsteen. We stopped for the night at Pismo Beach and then continued on, rolling into Santa Monica at sunset.

The weekend was spent in the usual Indie Web Camp fashion: a day of BarCamp-style discussions, followed by a day of hacking on our personal websites.

I decided to follow on from what I did at the Brighton Indie Web Camp. There, I made a combined tag view—a way of seeing, for example, everything tagged with “indieweb” instead of just journal entries tagged with “indieweb” or links tagged with “indieweb”. I wanted to do the same thing with my archives. I have separate archives for my journal, my links, and my notes. What I wanted was a combined view.

After some hacking, I got it working. So now you can see combined archives by year, month, and day (I managed to add a sparkline to the month view as well):

• adactio.com/archive/2016
• adactio.com/archive/2016/10
• adactio.com/archive/2016/10/29

I did face a bit of a conundrum. Both my home page stream and my tag pages show posts in reverse chronological order, with the newest posts at the top. I’ve decided to replicate that for the archive view, but I’m not sure if that’s the right decision. Maybe the list of years should begin with 2001 and end with 2016, instead of the other way around. And maybe when you’re looking at a month of posts, you should see the first posts in that month at the top.

Anyway, I’ll live with it in reverse chronological order for a while and see how it feels. I’m just glad I managed to get it down—I’ve been meaning to do it for quite a while. Once again, I’m amazed by how much gets accomplished when you’re in the same physical space as other helpful, motivated people all working on improving their indie web presence, little by little.

Jason Santa Maria, AKA Stan, is the man. Here’s here at An Event Apart in Boston to talk about Thinking Small. He’s my warm-up man.

He begin in the 1980s; Christmas day in the Santa Maria household—Jason gets Castle Greyskull. One Christmas, his parents played a cruel joke on him. Instead of getting him toys, they got him books. But these books were better than regular books. They were choose-your-own-adventure books; classics like You Are A Shark and War With the Evil Power Master. The best part is that they are interactive. Of course you cheat. You go back and see what would have happened if you had made a different decision. Let’s look at the decisions we make when we are building website. Jason will show us seven small decisions that change the outcome of a finished website.

Be a thinker

Don’t just dive into moving shit around in Photoshop. Stop and figure out the problem before trying to come up with a solution. Take a look at the Enterprise car rental site. It’s not terrible but it’s also not exciting. It’s just bland.

Take a step back. Start with sketching. Sketching isn’t about being able to draw, it’s about being able to think. Jason started a Flickr group for people to upload one page from their sketch book, no matter how crappy it looks.

At the beginning of a project, get acquainted with it. Get a feel for the content.

Find the message

The difference between good design and great design is intelligence.

Sum up a website with a message, as if you were introducing a friend at a party—what’s important? Everything on the site should communicate that message. The White House website does this. So does A Working Library.

Be a reverse engineer

Come at things from a different angle. Jason played Layer Tennis recently with Derek Powazek. They decided to play around with the format by introducing three truths and a lie. This prompted new ways of thinking about what they were producing.

Take lessons from improv. Play the “yes” game in brainstorming sessions. Take what people are offering and add to it.

Plot it out

Jason comes from traditional graphic design background of grids and systems. Cue obligatory Vignelli quote. But how big should your grid be? Just because you can go to 960 pixels doesn’t mean you should. Don’t blindly approach grids from a set size. The space on the screen is a valuable design tool. You can use for your grid but you can also use it for whitespace. Brockman says:

The grid system is an aid not a guarantee.

There are other kinds of grids, not just columns. It’s about choice. How do you choose to fill that space? 960 pixels is not right for everyone. Stop and consider. Big Cartel feels small and approachable because it doesn’t go full width. That fits the message it wants to communicate.

Grids don’t necessarily have to be uniform. Yet most grid tools start from that assumption. It seems like a small decision but it effects everything further down the line.

Think horizontally, then vertically

Thing of the page as a delicious parfait. The design of Jason’s own site can adapt to the content. His grid is just some horizontal strips. The different sections can then work together or stand alone. Within each layer there are then sub-layers. Only then does Jason think about how things line up vertically.

Design systems, not pages.

Stop, modulate and listen

Jason wrote a 24 Ways article on modular layout systems. You can narrow page elements down to identifier, size and placement: what it is, how big it is and where it goes. You can then apply those things to class names. Have classes for identification, size and placement. Then combine those classes e.g. class="pic two left" or class="pic seven right". Clients like the self-documenting nature of this.

Be a matchmaker

The state of type on the web today is still questionable. The choice isn’t large. It’s as if Netflix only offered four films for you to choose from. But type on the web is going to change soon. The conversations are already happening. In the next six months to a year, you will see more of a push for understanding of type and how to use type. Jason has some rules of thumb when choosing typefaces:

• Don’t use two script typefaces together. Or two sans-serifs together (or two serifs together), for that matter. One of each is a good rule of thumb.
• Pair fonts from the same designer. Perpetua and Gill Sans go great together because they were both made by that loony Eric Gill.
• Find harmony and structure. Bedoni and Futura are very different; one is serif and one is sans-serif. And yet they share geometric forms.
• Conversely, look for contrast. Caslon and Garamond are too similar to use together.

Step by step, all those decisions add up. It’s like Stewart Brand says in How Buildings Learn. People don’t begin building a house and plan for adding an addition but over time, bit by bit, you add to the house. Buildings adapt over time. So do websites.

The small decisions add up even if you don’t realise it at the time.