→ CSS Architecture

One of the things I love most about the work I do is that I’m constantly learning.

As I work on web applications long-term more and more and my role shifts from being a “designer who can develop” to a “front-end developer with a background in design”, writing better CSS is constantly on the front of my mind.

And by better, I mean CSS that scales across an application more easily and presents content more beautifully on more devices, both past, present and future.

I’ve been soaking up as much knowledge as I can. There’s been a lot written about this subject lately, but Jonathan Snook’s book and Harry Roberts’ article Code smells in CSS have stuck out as being especially helpful to me.

My First JavaScript Plugins

This fall I released my first two JavaScript plugins on GitHub. They’re both rather simple, but I find them really helpful in my work and my hope is others will too.

Responsive Table Headers

My usual way of handling tables for narrow viewports in responsive layouts is to convert the cells into block elements. This is very easy to do with CSS and I find the table usually remains very readable, except when the table has a header.

Instead of being on top, the header cells now need to be repeated multiple times inline next to each of their respective body cells.

Responsive Table Headers is a jQuery plugin that automate this DOM manipulation on the browser side and keeps the markup cleaner and more semantic.

Check out the code, docs and demo at the GitHub repo.

Format SymbolSet Stars

I pre-ordered Symbolset as soon as I saw it. The idea to make a semantic symbol font for the web using OpenType ligatures was brilliant.

I quickly found myself using their star symbol in ratings systems. With Sybmolset, you literally put the word “star” in your markup when you want to show a star. For ratings, i would rather output the more semantic and backwards compatible “4 stars” for a rating instead of repeating the word star multiple times.

Format Symbolset Stars is a JavaScript plugin that automates this DOM manipulation on the browser side and keeps the markup cleaner and more semantic. If you have Modernizr installed, it checks for support of @font-face before making the manipulation.

Check out the code, docs and demo at the GitHub repo.

→ America's Finest Timelapse

I grew up in a pretty rad city…

→ Joy: The Fight vs The Dance

Jon Foreman:

The “dancing” at SOMA was easy to learn. Throwing my fist in the air with the rest of the pubescent throng, I found that I could fit in just fine.

Needless to say, I loved this article, and the anecdote about the mosh pit at SOMA was just the beginning.

I do so often choose the fight over the dance, I settle too easily for insignificant victory instead of reverberant joy. I find it especially absurd that I do this in marriage, when I know “my wife and I are struggling for the same thing.”

A Response to the Kony 2012 Backlash

Invisible Children’s Kony 2012 campaign has been all over social media since it launched. I’ve also seen a lot of links to a critical response entitled Visible Children as well and felt I should respond to some of the arguments that were put forward.

I would consider myself a lay person on this subject, but I have traveled to LRA affected countries multiple times and have spent hours upon hours researching and following the development of the LRA over the last six years.

While I disagree with the author’s assessment of Invisible Children as a non-profit, I’m going to only write about the arguments he makes against the execution of the LRA Disarmament and Northern Uganda Recovery Act that President Obama signed into law on May 24th, 2010 and IC’s support of the plan of action stated in that bill.

These are the primary statements he makes that I disagree with:

“Both the Ugandan army and Sudan People’s Liberation Army are riddled with accusations of rape and looting, but Invisible Children defends them.”

IC doesn’t defend, deny or even attempt to hide the problems with human rights abuses that exist inside the Uganda government, the UPDF, nor the SPLA. I haven’t extensively researched humans rights abuses in the UPDF, but I have trouble with the idea of one group’s human rights abuses being used as a reason to allow another one’s far greater abuses to go on.

“Kony is no longer active in Uganda and hasn’t been since 2006.”

What country the LRA is residing in is irrelevant. Invisible Children doesn’t claim that Kony needs to be apprehended for the betterment of Ugandans and their most recent project was in DR Congo. IC’s redevelopment focus is centered in Northern Uganda because that’s where the overwhelming majority of those affected by the LRA reside.

“Any effort to capture or kill [Kony] will almost certainly result in many children’s deaths, an impact that needs to be minimized as much as possible. Each attempt brings more retaliation. And yet Invisible Children supports military intervention.”

I can assure you everyone at IC is painfully aware of this reality.

The reasons stated is one of the chief reasons why the LRA Disarmament and Northern Uganda Recovery Act was drafted. The only way to capture Joseph Kony without creating a major threat to the innocent around him is to use sophisticated military intelligence gathering methods to prepare an unpredictable ambush. This is something the UPDF is incapable of doing on their own.

To me, the writer also seems to be implying that IC supported Operation Lightning Thunder in 2008 / 2009. That was never my impression when that operation was going on. A peaceful resolution with Joseph Kony has been pursued exhaustively. The most recent talks collapsed in 2008 in Juba. I remember the heartbreak of all of us who were advocating for peace when it happened.

Kony used the time of peace to regroup his armies and then launched one of his worst offenses in recent memory six months after the Juba talks ended.

Popular support of military intervention has come after every other conceivable option has been attempted without success. Something isn’t always better than nothing, but it is in this situation, I believe it is.

To close, I will point you to a video of U.S. Ambassador to the United Nations, Susan Rice, so eloquently telling MSNBC’s Rachel Maddow why she supports the President sending military advisors.

Cocoa Trees Are Like Easter Eggs

Seven times in Genesis 1 God steps away from His creation and declares that “it was good.”

And do you know what’s rad? I know the feeling. It’s that addicting rush that every artists gets when they step away from the canvas and look to see something starting back at them that they finally don’t actually hate, but are in-fact, pleased with.

Sure, when God declared this He had just sculpted Mt. Kilimanjaro rising out of the Serengeti, designed the human immune system, invented physics and made a cocoa tree and said “I can’t wait till they figure out what they can do with that.” Even so, when He created me He declared that I was made in His image and I think He knew that one day I’d grow up to love creating things.

Sure, my photographs, posters and interfaces look like a two-year old’s crayon scribbles compared to the grandeur of His creation, but like in so many things, I love that He lets me come along for the ride.

As I create, God desires for me to worship and know Him more; He is the ultimate creator and I am simply operating in His likeness. I imagine it being like myself as a child with my plastic toy golf clubs following my dad outside; we’re doing the same thing, but I’m hitting whiffle balls with plastic clubs and he’s hitting golf balls with metal clubs.

I don’t want to leave the impression that I just pray and then beauty just starts bursting forth from me, quite the opposite. As with most-everything, a God-centered approach doesn’t spontaneously make it easy, the heavy challenges still remain. The blank canvas still feels like a castle wall that I need to break through and once I’m through there are plenty of other obstacles waiting for me – self-doubt, short-sightedness, and my own limitations (perceived or otherwise) to name a few.

All that said, I don’t think God blesses us with the ability to make things just for our enjoyment. Everything that comes from above has an outward push to it, and as artists and designers, I believe God has left us with an influential role in determining what our culture deems to be good and what it deems to be bad.

Where there is hate, pride and injustice, we must expose them to the light.

Where there is love, humility and justice, we must propel them forward.

Artists and designers have the unique ability to declare good the work of others, whether it being a part of ending a war, empower communities with clean blood and water or hanging the way people bank.

While it may feel like darkness reigns, goodness still abounds. His redemption song is being sung all over the world, sometimes by people who can’t identify it yet, and the more people who hear it, see it, experience it and know it – the more who will come to know their Creator as their Savior.

These are ideals that I strive for in my work. I wish I could say every day that I wake up and work and live this out, a lot of days I just wake up and work. Grace is a wonderful thing. But I’m a huge believer that if you don’t have ideals that you’re striving for, the status-quo will only continue to reign.

Adding a Separator to wp_list_categories

In WordPress, if you’re displaying your categories list inline instead of block, odds are you’re going to want to be able to define some HTML to separate the outputted items. Since wp_list_categories doesn’t include a separator argument, you need to do a simple PHP string replace to add one in.

I didn’t see any answers to this question on the WordPress forums so I thought I’d post the code I wrote here.

<?php
$needle = '</a>';
$separator = '<span class="pipe">&nbsp;|&nbsp</span>'; // fill in your separator here 
$cat_list_args = array(
	'echo'  	=> __( 0 ),  // sends output to variable
	'title_li'	=> __( '' ), // removes title of list (optional)
	'hierarchical'	=> __( 0 ), // makes subcategories not show as inner list items (optional) 
	'exclude'	=> __( 1 ), // excludes uncategorized (optional)
);
$cat_list_arr = wp_list_categories( $cat_list_args );
$cat_list_mod = str_replace($needle,$needle.$separator,$cat_list_arr); // switch to $separator.$needle if you want separator inside a tag
echo $cat_list_mod;
?>

On a related note, if you want to hide the separator of your final list item, CSS pseudo-classes makes that super easy.

nav li:last-child .pipe { display: none; }

Interlink Conference

Interlink Conference Logo on SketchbookThis weekend I flew up to Vancouver, BC for Interlink Conference. Normally what goes in my sketch book stays in my sketch book but I thought I’d make an exception and type out some of my notes from the main Friday sessions. I will post links to the videos as they’re released over the next couples of weeks. I hope this post can give people an idea of what was discussed and refresh the memories of those who attended. I apologize in advance to the speakers if these notes don’t encapsulate the greatness of your talks or miss any of your points.

Frank Chimero

Frank gave one of the the best talks I’ve ever heard about the greater meaning and purpose behind what we do. He has been on a hiatus recently to re-discover meaning in his work and part of that has been the creation of his new book The Shape of Design. He shared insightful and heartfelt lessons from his time of discovery.

Near and far – these are the two sides of the design process that we alternate back and forth between. This concept can be seen more specifically in the pairs of how / why, making / thinking and execution / strategy. In web design, these often materialize as markup / structure, responsive / context, SEO / reach and Photoshop / aesthetic.

When looking at this concept in terms of time, it can be broken into three parts:

The Message: this has an infinite length.
The Format: this is the way the message is being communicated right now.
The Tone: this is the matchmaker in the middle.

Design is not problem solving because it’s “answers” aren’t repeatable (like in math). Instead, we create responses to problems.

Frank’s new word, “The Glory Form”: the best possible response from a particular person at a particular point in time.

Culture: a target that if you hit it moves.

Final thought: we are to create designs that are good, valuable and make people’s lives better.

I left Frank’s talk with a renewed excitement to be a creator of things that people see and use that have an impact on their lives. As I do my daily tasks, I need to remember to constantly step back and see how what I am doing is helping to accomplish a larger goal. I want to be conscious of defining what that larger goal (the message of infinite length) is at the beginning of the project so that I can measure it’s success, and most importantly, I want that greater goal to be something I believe makes people’s lives better.

Denise Jacobs

Denise’s talk was a great way to start the day. She discussed tips on how to remain inspired in a lifestyle where our creativity in constantly being tapped out.

Externailize your inspiration – think “what does this design need to be?” instead of “I need to design this.”

Being right keeps us in place.

Inspiration and doing feed off of each other.

Elliot Jay Stocks

The premise of Elliot’s talk was “just because we can, doesn’t mean we should.” He showed numerous examples of websites following trends for the sake of following trends that just create a lot of visual noise. He then began to discuss how we address that.

Constantly asking why is how we break out of trends.

Learning how to educate clients is key for defending your decisions. Thinking about how to defend your decisions makes you make better decisions.

Perceived affordance: what makes a button look clickable.

A fluctuation between web and print design is good for staying inspired.

Recommended video: Tim Brown - “More Perfect Typography”

Whitney Hess

Whitney’s talked laid out a list of ten universal principles of UX design, showing good and bad examples of each in both the real and web world. I definitely recommend checking out her slides to supplement the list below.

UX is the establishment of a philosophy about how to treat people.

Universal experience design principles:

  1. Stay out of people’s way.
  2. Create a hierarchy that matches people’s needs.
  3. Limit distractions.
  4. Provide strong information scent.
  5. Provide signposts and cues.
  6. Provide context.
  7. Use constraints appropriately.
  8. Make actions reversible.
  9. Provide feedback.
  10. Make a good first impression.

The purpose triangle – knowledge, ethics and empathy.

What are your company’s principles?

Sarah Parmenter

Sarah shared resources and lessons learned from her years of experiences as a iPhone application designer, both in the native iOS format and by using web standards (this talk focused on web standards). Her slides included a lot of great tips and resources. Below are a few notes from the beginning of her talk.

ADS: Application Definitoin Statement. To make – list all features and all target users, filter through to make ADS.

Even good ideas can create scope creeps that damage good projects.

Tip for color schemes – overlay primary color 25% over all colors for a more harmonious palette.

Jonathan Snook

Jonathan’s talk was entitled “CSS Takes On The World.” His Work is on the cutting edge of what’s possible with CSS. His talk listed numerous examples of common tasks done usually now with JavaScript that can start to be transitioned into CSS. Some of these include:

  • Drop Down Menus (using CSS Pseudo Classes)
  • FAQs (using CSS Target Pseudo Class)
  • Tabs + Slides
  • Form Validation
  • Animations
  • Better Data Tables (using display:table and flex box)
  • Width Conditionals

Mentioned: jQuery Transitions + jQuery Masonry

Gavin Elliot

“A Better Process”

Gavin began his talk showing a video of a German teenager bashing in his computer. We all laughed. Why? Because we’ve all been there when Photoshop crashes and we forgot to save.

He then talked about a dance we designers know all too well, “The Photoshop Shuffle,” where you spend hours moving things around only to still hate what you’ve made six hours later. Process definitely came up a lot during the day, but Gavin’s talk covered it the most. He showed photographs of his A3 sketchbook as he was working out a layout and user experience. It reminded me of the sketches I did for my PureVolume Mobile project in school and how the Photoshop work on that project came so easily after I worked everything out on paper first.

We don’t design websites, we design systems.

DELI:

Design by Decision
Design by Emotion
Design by Language
Design by Iteration

Simon Collison

“A Dialect of Our Own Design” (slides)

Simon started out going through a brief history of our visual dialect. He used lots of examples of simple shapes in relation to one another and their frame to show how those relationships establish a visual grammar that dictates meaning and perception.

In regards to semiotics:

Symbols are specific and clear.
Icons rely on shared understanding.
Indexes link to an object but don’t depict.

What’s next for the web? The web’s frame of reference is very malleable. Simon showed examples from the fine art world of artists breaking out of the rectangular frame. He then showed examples of specific sites that are pushing the boundaries of what the frame of a web experience is.

Stop thinking in pages. Responsive (or adaptive) design is the new way of showing complex information.

Simon showed a slide of a diagram from an early Macintosh manual explaining how scrolling in the browser worked. It got me pondering that perhaps thinking about the roots of your expectations in interactions is how you can come up with ways to radically change those interactions.


The day ended with a fun night in Gastown enjoying some British Columbia micro-brews with my new-found design nerd friends. On Saturday night the Vancouver Canucks were playing in Game 2 of the Stanley Cup Finals. I met up with one of my friends from Art Center who is a Vancouver local to go watch the game at a pub downtown. The Canucks won in overtime and a 2km long party of 70,000 people in the streets erupted! Here’s a little video clip of the final goal if you missed it. It was an unforgettable end to a great weekend filled with great discussions on design and hanging out with incredible, down-to-earth and passionate people.

Update: All the talks have now been posted up on Interlink Conference’s blog.