My name is Nick Pruitt. I’m a web designer, as in I do graphic design and front end development for things on the internet. I’m also a chronic doodler, and my coffee most likely tastes better than your coffee.

You can define UI very precisely. An interface is a place where two things meet: the human and the computer. The computer has functions it can perform. The human needs inputs and outputs to take advantage of those functions. The interface is the arrangement
of inputs and outputs that enable people to apply the computer’s functions to create outcomes they want.

Sensibly Filed In:

Service

Be humble and think of yourself second. Remember that, ultimately, what you create is being used by humans. Remember that work, especially when serving the Church, is an act of service to God. Stay out of office politics and don’t participate in office gossip, because both are toxic. All of your actions should be motivated by love.

Flexibility

Create systems that are flexible, that adapt and are accessible, and that are easy to change and update. Be willing to admit you were wrong about something and change your mind. If changing direction is the right thing to do, then do it.

Craftsmanship

Care about what you do. Do your work with excellence. Sweat the details. Ask for critical feedback on designs and for code reviews. Don’t be lazy or apathetic.

Focus

Remember the goals that your designs should be satisfying. Make certain that you are solving problems and that those problems are the right ones to be solving. So much time can be wasted by solving the wrong problems. Secure your time to focus on one thing. Be intentional in the things you choose to do and, more importantly, in the things you choose not to do.

Education

Ask for help if you need it. Be ready to invest in someone and offer help when they ask. Read the manual. Write the manual. Learn continuously. Share what you learn with one another. No knowledge is sacred or hidden. Our industry does not stand still – neither should you.

Responsibility

Take ownership of your work. Don’t wait for someone else to do your job. Don’t wait for other people to tell you what to do. As far as you are in control, go do it. Hold yourself and others accountable for the work they are supposed to complete.

Trust

Trust other people to do their jobs, and anticipate excellence. Share your work when you are overwhelmed. Always be ready to support one another.

Shipping

Excellence is the balance between perfection and production. Ship early and often, and start making something real as early as you can. Ideas are wonderful, but finishing something and actually shipping it is more valuable. Code wins arguments.

Initiative

Ask yourself where you can add value. If you think of an awesome idea that will benefit the site or the team, then do it. If things are ever slow, don’t sit around and wait for projects to come to you. Think up something awesome and create it. If nothing great is happening around you, then go make something great happen.

Fun

Have a sense of humor. Take time to do something fun or you’ll lose your mind. Don’t take things too seriously.

Sensibly Filed In:

Let us face a truth together: coding an HTML email is maybe one of the worst things ever. At least, that’s how I think most people view it. I find it a strangely interesting challenge. It all depends on how you look at it, I guess. On one hand, you are relegated to using old outdated methods. The excellent Campaign Monitor Guidelines — which you simply must read if you’re going to code an HTML email — states that you should expect to take your coding skills back a good decade. That means inline styles, forgetting about using floats for pretty much anything, and, yes, using tables for your layout. But on the other hand, because of these limitations, you can get away with just about anything, which is interesting. You can do the ugliest, hackiest thing ever, the kind of thing that makes you wake up in a cold sweat in the middle of the night, and so long as it works, it’s pretty much okay. This is kind of awesome in its own strange way. Pull off an awesome end-result, even with lots of ugly, and you can be proud of your work.

So when I was tasked with figuring out a mobile solution for our email campaigns, I was both intrigued and a little intimidated. How with decade old techniques could I do this? But then again, how with decade old techniques could I do this? It was fun to figure out. At the outset, we decided to support the email clients listed in the Campaign Monitor CSS Support Table short list. For me this means, forget you Lotus Notes, and forget you Blackberry.

In the end we are really pleased with the results. Here is the email, and here are a few main points on its construction.

The magic of align=”left”

The main question I had going into this project was, “How will I do this without floats?” Floats come in handy when you’re building responsively, following the pattern of starting with stacked elements in the narrow, mobile context, and then floating them as you have more screen real estate and having them appear all nice and side-by-side. But CSS support for floats is fairly abysmal in the clients we chose to support, leaving us with the question of just what to do.

Yeah, I know that's a gross simplification of responsive design. That layout is only one component of it. That it's not all not stacking and unstacking stuff. Even that it's not solely about hitting certain viewports because you just make a bunch of fixed width layouts. I get it.

Basically, this all depends on the design, and for the design of this particular email, going to Stacksville is the right thing to do. So there.

Turns out the answer is simple. You can just use <table align="left">. Yes, our ancient friend align="left". Not since my days of working in a horrible, outdated, inhouse CMS at my first job have I used it. This humble bit of history is what makes all the stacking in the responsive email possible. When there is room for both elements, they appear side-by-side. When there isn’t, we make the width of those elements 100% and let them stack. This is surprisingly effective. But how are we getting the 100%, you may ask? Why, what a nice segue to my next point.

Media Queries, of course

The next piece of pulling off this responsive email was the obvious inclusion of media queries. How is this obvious when most email clients render pages worse than Netscape did while you were still looking at Star Trek fan pages in your mamma’s basement over the extra phone line? As fate would have it, mobile email clients in general have way better CSS support than their desktop brethren (looking at you Outlook 2007/10/13, you miserable sonsofshamsters!). So we can use media queries and some well placed classes to make it happen.

I set up a main table to be the background and contain everything and then nested tables inside that with a class of inner. Then I topped it off with a class of flex on images that I wanted to resize. After that, the bulk of what I needed to start seeing things work and resize was handled with a surprisingly small amount of CSS:

Remember that the !important is — well — important because you are overriding the width of the table for wider resolutions than are specified in your inline styles on that element. Hey, I warned you it was gross.

The swapping banner trick

The main banner at the top was getting too short and the text too small at lower resolutions, so we decided to use this as an opportunity to serve up an image just for mobile users. There is added bonus here too if we can highlight the coupon code, so someone can just pull up the email at a store to redeem it. Generally, you can pull this off by hiding the img and setting a background image on its containing element with something to this effect.

But in our case, I wanted it to be clickable and scalable. So simply switching it out inside the <td> wasn’t going to cut it. So I did the unthinkable. I put it in there twice in the HTML. I know, gross. But in the world of email, I just wanted to survive.

Note that Gmail doesn’t understand display:none;, so I set the width and height to zero to hide the mobile version. But then Outlook doesn’t understand either of these methods, so I ended up having to add a conditional comment just to hide this from Outlook 2007/10/13. Then it would be hidden in Outlook through the conditional comment, and from everything else through the CSS.

This was by far my most grevious sin. On my next responsive email, I would like to try hiding the image inside the link element and setting a background image on it. Then maybe both could scale in peaceful harmony using some kind of background-size trickery. I know it’s an email and all, but it would at least be cleaner and leave those with crappy clients a nicer fallback. Deep down Lotus Notes users are human, so how can I completely turn my back on my brothers? I have more of these scheduled, so more to come on that soon.

The cool trick of the spacer

This is so blatantly obvious and simple that I almost didn’t include it, but I think it’s cool so I’m doing it anyway! There were certain situations where I needed more space around an element at lower resolutions, say some text that got a little too close to the edge of the screen.

Voila! Insta-add-space-only-when-you-need-it-class! This also performed quite well because mobile email clients actually understand margins where many desktop ones don’t. How novel a concept.

Litmus Test

Our last step is to run the email through Litmus for final testing. Litmus is a seriously awesome and easy testing tool for running this stuff through email clients quickly. I lived in it my last day of development, and it worked just great. So here we are looking good on mobile and on desktop, and working in our clients of choice. And because Litmus is cool, you can view the results of the test here.

Sensibly Filed In:

Oh, how I love this article. May it bring us all down to earth and put us to actually making things that solve problems and add value—a novel concept in some circles.

When you go too far up, abstraction-wise, you run out of oxygen. Sometimes smart thinkers just don't know when to stop, and they create these absurd, all-encompassing, high-level pictures of the universe that are all good and fine, but don't actually mean anything at all.

These are the people I call Architecture Astronauts. It's very hard to get them to write code or design programs, because they won't stop thinking about Architecture. They're astronauts because they are above the oxygen level, I don't know how they're breathing. They tend to work for really big companies that can afford to have lots of unproductive people with really advanced degrees that don't contribute to the bottom line.

Sensibly Filed In:

When given serious responsibility, we tend to take it seriously and almost always rise to the challenge. The best organizations know this well. They don’t assign tasks to their people, they assign responsibility.

Sensibly Filed In:

They don't write to fill up space on a page. They write to fill up your head. There is nothing inherently interesting about liquidators, leather, or farmers. They can make themselves boring, or they can make themselves interesting. Words do that job. Woot, Saddleback, and Polyface have all chosen to be interesting and engaging. They don't hide behind jargon. They aren't insecure. They aren't afraid to tell you who they are.