After all, why in Heaven, Earth, and Hell should you go about re-creating things like buttons, grid layout code, and so on? You really shouldn’t most of the time. If you’re designing an app for internal use in a corporation, Bootstrap’s and Foundation’s default styles are perfect.

If the app will be publicly usable, you may want to customize things to make the app “yours” in an aesthetic sense, but otherwise, you’re golden.

These frameworks also work just fine for smaller websites. In fact, I built a few on top of the Foundation theme for WordPress, and I loved it.

“But there’s going to be a problem, isn’t there?”

Yup. A couple of them, in fact.

Problem 1: Javascript Incompatibility

If you code your own JS, or you don’t plan to use anything but your chosen framework’s built-in JS components, then you’ll probably be fine. But the moment you start integrating jQuery plugins, like SuperSized for WordPress, expect trouble. Now, I managed to solve that particular problem with a “noconflict” wrapper, but still…

Problem 2: Extraneous Elements and Styles

Let’s say you’re just building a one-page website. you might be tempted to use a framework for quick and easy layout options, but that leaves you with a lot of extra stuff that you don’t need. Now, you could go through it and delete everything you don’t want, but that’s time consuming.

Problem 3: Extra Work

Alright, so you do need most or all of the various elements for your current project, but they look wrong. Your framework might have some built-in options to make them look right, but that requires a butt-load of extra classes. However, you might also have to go and over-write the CSS for every element you intend to use.

Whether you mess with the original framework files, or just over-write all the rules in a sort of “child theme”, you end up spending lots of time trouble-shooting, and potentially using way too many lines of code. Bandwidth isn’t always unlimited, after all.

“Alright, but you have some kind of solution to propose, right?”

I do. This is where having your own personalized basic toolkit comes in handy. This is what I have in mine:

For Static Websites:

CSS

• SimpLESS: This is a LESS CSS complier that you can download from here. If you are running Linux as your web development OS, download the Windows version and run it with WINE. The Linux version doesn’t work right now…
• Semantic.gs, by Tyler Tate. This is a minimal, easy to use grid layout system that can be quickly customized to suit your needs. Since all of the math is done by SimpLESS, you aren’t stuck with any set number of columns. Just change a number or two, and you’re good to go.
• Various pre-made variables and mixins to provide the rapid addition of rounded corners, CSS gradients, color operations, and so on.

JavaScript

• HTML5 Shiv: Lets face it, you always need this.
• jQuery: Obviously.

Snippet Library

• WordPress Functions: I use WP more than any other CMS, and I have found that is it now easier for me to build my themes from scratch rather than modifying anyone else’s existing theme. Even blank themes like Starkers come with too much stuff for my taste. I’m a big believer in only putting in what the project needs.
• CSS Font Stacks: Most of the time, for body text, I use one of these font stacks. So, into my toolbox they went.
• Javascript Functions: Equal height columns, for example.

I have not included a comprehensive list for two reasons: One, you should really be making your own toolkit, or at least customizing someone else’s to your needs. two, I plan to release my toolkit as a Mercurial repository on BitBucket.

It might even come in handy…

Hi All, I am building a new online product for which I require a web designer. I have not built such a product on my own, so I would like to know how I should go about finding such an individual who is a right fit for me and my endeavour. Any advice would be much appreciated.

It had been posted the day before, and it didn’t have any replies, so I gave it one. I ended up being so happy with that reply that I gave it its own blog post. Here it is:

“Heh… The temptation to self-promote… but never mind.

You’ll want to start by looking at their work. Aesthetics are important, but don’t judge a designer solely on whether his websites and apps “look cool”. Try using some of them. If you find that they’s easy to use and navigate, if you can find what you need quickly, then you have a winner!

Next, you’ll want to see if he’s already made something similar in nature to what you want to build. Experience counts, after all.

If you contact a designer or developer, and they just kinda say “whatever you say” and don’t get involved in the planning process, look elsewhere. A good craftsman cares about his work to no end. A good designer will involve himself in the planning stage of the project, and help you figure out what works on the web and what doesn’t.

Look for a designer who communicates well and clearly. This isn’t a prerequisite for being a good designer, but it will make the whole project happen a lot more smoothly

Look for a designer or developer (or agency, even) who offers long-term support options. If something goes wrong, it’s best if the people who made the project can look it over. This is unless you’re looking to hire an in-house team, in which case you’ve got this taken care of.

In addition: there are a couple of things you’ll have to do in order to retain the services of such a marvelous individual(s) when you find him(her/them).

• Provide them with all of the information they ask for. You wouldn’t believe how often a project has stalled because clients weren’t forthcoming with vital info. Communicate your intentions and desires as clearly and simply as possible, but have more details ready for the time when you will inevitably be asked for them.
• Have your content ready / functionality planned. As I said, a designer can help you plan this bit out, but get it done as soon as possible. You can’t do good design unless you know what information or options that this design needs to present.
• Be ready to listen to your designer. We can be an opinionated lot, and if we haven’t had our coffee yet, we can even be a little abrasive. Hopefully, you won’t run into this at all, but even if you do, please don’t take it personally.We usually have very good reasons when we tell you something doesn’t look right, won’t work, or doesn’t look good.

These are the best ideas I can share off the top of my head. Wait around a little while longer, and I’m sure that the other members of the community will come up with more.”

I did forget one little thing, soe Doug Stewart fixed that for me with this reply of his own:

Ezekielbruni covered most of the major points so I’m going to add only one myself:

“How do you get to the Met? Money.”

- Robin Williams

Same applies for designers. The best ones cost good money.

But I won’t leave you stranded. There’s an interesting discussion going on over at the Boagworld forum about whether or not designers should use HTML/CSS grid frameworks at all, and which mobile-first grid systems are the best.

So, click here to see me argue with people on the internet.

Also, I got a new secondary monitor!

There’s just one tiny problem: Internet Explorer

Oh, come on, not this again!

I’m sorry dear Reader, but this browser is still a consideration. Now, IE9 is pretty good, as far as CSS support goes. It supports @media queries and the like, but IE7 & IE 8, which are still in use, unfortunately, do not. Oh, there are various solutions, such as using polyfills like Respond.js, checking for CSS3 Feature support with Modernizr, serving up the mobile version, and so on, but you no what?

We don’t need them. I have found the solution, and that is to simply give IE 8 and below the desktop layout.

Huh?

Let’s say you have some HTML.

<div class="container">

    <header>This is a header</header>

    <section>
        <article>This is an article.</article>
    </section>

    <aside>This is the Sidebar</aside> 

    <footer>This is the footer.</footer>

</div>

And then, you make some CSS. You want this layout to be responsive, so you throw in some @media queries, like so:

div.container {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
}

header, section, aside, footer {
    width: 100%;
}

@media screen and (min-width: 727px) {
    section {
        width: 70%;
        float: left;
    }

    aside {
        width: 30%;
        float: right;
    }
}

footer {
    clear: both;
}

“Yes, yes… but what was that about IE?”, you ask. The answer is pretty simple.

If a user is viewing your website in IE, chances are that they are on a desktop, laptop, netbook or, at worst, a tablet.

This means that the idea of a “minimum resolution” is, in the case of IE, not such a far-fetched concept. Therefore, the solution is simple. Use a conditional comment to load an IE-specific stylesheet, and put everything that’s in your media queries into that stylesheet.

So, in IE8-7.css, you’d put this:

section {
    width: 70%;
    float: left;
}

aside {
    width: 30%;
    float: right;
}

Well, obviously, with large-scale projects, things aren’t nearly so simple, but keep your expectations low, aim for compatibility with most mid-range monitor resolutions, and chances are that you’ll end up with a site that is still usable, and maybe even pretty, in older versions of IE.

The reasons for this are obvious to anyone who’s ever tried designing their own website. You’ve seen the work of the masters, you’ve learned a myriad of useful techniques and best practices, and you know, no matter what you do, you could probably do better.

When I work for clients, I make things like diagrams, wire-frames, and grand plans. I build things based on logic, years of experience, and the client’s goals. The main criteria is not whether I’m perfectly satisfied, but whether the end product generates the kinds of results that the client wants.

I apply the same principle to my professional site. The goal isn’t perfection so much as results.

But when I design something that is largely for personal use, like this blog, I have, in the past, been a lot pickier. But I stopped.

Remember the Point

When you’re creating something for you, remind yourself to enjoy the process. There’s a reason that you like fiddling around with pixels, testing out HTML/CSS/JS tricks, and hacking your CMS of choice like a pro. There’s a reason you picked this career. Let your personal projects remind you of that reason.

This is not the time to obsess over things and stress yourself out. It’s time to relax.

Keep it Simple

You might be tempted to make this personal project your “Sistine Chapel Ceiling”. If you have the time and inclination to take on a monolithic project, then go ahead. For me, at least, quick and easy is better.

I get a rush when I’ve completed a project. It’s something I can point to and say “Check it out, I made that!” That thrill is best served before you get sick and tired of looking at the same project. Inspiration, after all, has an expiration date. When you’re working on a personal project, it’s best to respect that, or you’ll be tempted to give up.

Don’t Over-think It

A lot has been said about the dangers of impulsive re-designs. While this advice certainly holds true for commercial projects, the urge never really goes away, at least not for me. There’s something liberating about having a great idea, and then making it happen.

Use your personal projects to let that creativity demon run rampant. You’ll find that some of the best stuff you’ll ever create comes into being due to random moments of brilliance.

Take Shortcuts

I could have made a sexy, beautiful, intuitive comment system for this blog based on what WordPress provides. However, I didn’t need to. Disqus has already done that for me. It provides the added advantage of integration with a variety of networks and tools, and on the list goes.

When you’re making something for yourself , concentrate on what’s really important to you. For this blog, it was the articles. I wanted the reading experience to be simple and beautiful. With that accomplished, I decided that I could live with letting someone else handle the comments.

Fix it Later

You might make a mess of the code, miss a detail or two, or make a bad UX decision. Don’t worry, it happens. Don’t pressure yourself into fixing it right away. For now, simply enjoy what you’ve created. Tell others about it, celebrate!

In time, you’ll see any issues clearly, or others will point them out to you. When you have time for a leisurely couple hours of coding, go through the project and fix whatever needs fixing.

Recap

Remember that personal projects are just that: personal. That means that you can do whatever the hell you want with them.

Now, you can’t have it… it’s not really ready for public consumption, in fact, I haven’t even tested it in IE yet…. Still I’m rather proud of my work, considering I only started on it yesterday.

The Changes

I wanted a blog that was simple, responsive, and pleasant to read with a hint of designer-ish-ness-ity. I think I’ve achieved that. It’s built on the wonderful Foundation for WordPress theme, includes Disqus-powered comments, and was built with as much love as anyone can have for a blog.

Okay, maybe not as much, but still, I’m pretty happy with this one. There will be continuing changes and bug-fixes in all probability, and also changes in content. Oh, I’ll keep writing about design, but it’ll probably be more conceptual stuff than simple reviews of my own work.

I hope you enjoy this new version as much as I am right now! Stay nerdy.

When I did reach them, I felt good. I felt as though I’d accomplished something and made progress in my efforts to become a better, more complete human being.

Heh.

It turns out that my goals were… flawed to say the least. Oh, my intentions were pure, but the specific goals I set for myself were rooted in misconceptions that have since dissolved under a big fat dose of reality.

This year, I’m doing things a little bit differently. Instead of resolutions, I’m creating list of things that I’ve learned about myself over the years. Because I’m a dork, I’m going to call them New Year’s Realizations.

I’ll still set goals for myself, but they won’t be vague, yearlong commitments. They will be specific, concise tasks to be accomplished, not in this year, but at some point in my lifetime. Most importantly, they will be rooted in my realizations, based in the realities of my existence.

So here’s my list of New Year’s Realizations:

1. I am human, and I’m okay with that.

I am imperfect, flawed, prone to making mistakes. I am sometimes lazy, grumpy, selfish, angry, condescending, and on rare occasions, a straight up asshole.

This is not to say that I am giving myself carte blanche to be a horrible person. I will still attempt to improve on my human nature, and when I screw up, I’ll apologize and make efforts to avoid repeating my mistakes.

Just don’t expect me to spend too much time obsessing over my mistakes. I’m done with that.

2. Life is too short to spend all of my working hours on other people’s dreams.

Don’t get me wrong, I like making websites for other people. I like taking their web-related problems and coming up with awesome solutions. I like it when my efforts make other people’s goals and dreams possible.

I have a few of my own, however, and they are pretty damned awesome, if I do say so myself. They deserve to see the light of day.

3. I need to talk to people face to face.

Since I spend most of my time online, it’s pretty easy to allow my work, hobbies, and pastimes take up all my time. Combine that with the fact that my interests and “most people’s” interests differ greatly, it’s easy to tell myself that I’m better off being a loner.

That needs to change. As a designer, I’m making things for people. The better I understand people, the better work I can do. As a human being, I need to expose myself to the thoughts, ideas, and opinions of others, even if I disagree with them, or don’t share their particular interests.

If I don’t, I’ll become closed-minded, lose my social skills, and miss out on opportunities. Besides, if any social situation becomes truly unbearable… well, that’s why God gave us MP3 players.

4. I have a unique perspective on life, the universe, and everything.

We all do. When we share it, everyone benefits, because everyone has the opportunity to improve themselves in some way, including the person who is doing the sharing. I have the skills, ranging from rudimentary to advanced, to share that perspective through prose, photography, design, and other media.

I have an innate need to be heard, and I need to do something about it.

5. Last, but not least, I am a man of (some) faith.

I’m not even trying to be anything like a full-time missionary anymore, but I still recognize that I have a need in my life for communion with something beyond this mortal coil. Jesus is my deity of choice, and so this is not about doctrine, or following some set of rules.

It’s about having a relationship with the Guy who has all the power. I believe in Nepotism.

That’s it for now.

I think that’s a pretty good place to start when it comes to goal creation and decision making. If I can think of any more for myself, I’ll be sure to let you all know.

Does anyone else have any New Year’s realizations that they’d like to share?

Recently, I’ve been working with people who specialize in creating internal web applications for various large companies. This morning, they asked me to see if there were any decent HTML/CSS frameworks they could integrate into the system they use to make these apps. I chose to recommend Bootstrap and Foundation. They asked me to do a comparison of the two, and once I did, I decided to share it for everyone’s benefit:

After making the same prototype in these two different frameworks, I think I’ve got a pretty good idea of how they work. Which one is better? Well, it will frankly depend on the project. But I imagine you want details. Let’s get started then.

First, go check out these two links, then read on:

1. http://www.ezequielbruni.com/frametest/bootstrap/
2. http://www.ezequielbruni.com/frametest/foundation/

Implementation

The way these two frameworks are implemented is pretty much the same. Once you’ve included the relevant CSS and JavaScript, you make a container div, and then place your columns inside it, like so:

In both examples, I’ve created two columns of equal width. You can just put other elements in them, nest more columns inside them… basically whatever you want.

Features

Both systems come with JavaScript support for elements such as tabs, drop-down menus, fancy buttons, modal windows, the works. They’re app frameworks, that’s pretty much par for the course.

Where they differ is in the fact that Foundation’s layout is responsive, which means that it’s a lot easier to make layouts produced with Foundation mobile-ready. This also means that more work is required to implement layouts made with Foundation, but when you’re designing for multiple devices, that’s only to be expected.

Aesthetics

Frankly, I think that Bootstrap comes with prettier styles by default. I know, they look very, very similar, but Bootstrap’s default styles just feel a bit more polished, to me.

That’s not to say that Foundation is ugly by any stretch of the imagination, it isn’t. I just think that I’d have to put more work into making the default element styles look “right” than I would with Bootstrap. This is an entirely subjective opinion, however, so check it out for yourselves.

So what next?

If you know exactly what resolution your app is going to be viewed at, and that resolution is 1,024 pixels wide or greater, then go with Bootstrap. It’s simpler. If, however, you need the layout to be flexible, Foundation is probably your safest bet.

As for me, given the opportunity (read: some time and perhaps some money), I’d combine Bootstrap’s element styles with Foundation’s layout structure. Now that would be one kick-ass framework.

Update:

After further experimentation (including an attempt to combine the two frameworks) I’ve decided that Foundation is the clear winner after all. While Bootstrap has some nice UI stuff going on, it all seems to be contingent on formatting your HTML exactly the way they would do it, and fixed-width layouts are definitely preferred.

Foundation, on the other hand, seems to allow for more flexibility, in both the literal and metaphorical senses of the word. Also, there’s a kick-ass WordPress theme that comes with Foundation pre-integrated, that I’m already using for a new website.

(That last sentence was just a fancy way of saying that we did it with a webcam and one crappy microphone…)

In order to properly accommodate the new type of content, I felt that a change of theme was in order. Also, the old design sucked. Also, who needs a responsive design when the WP-Touch plugin serves my purposes just fine for the moment?

So, I’ve decided to use the WordPress theme known as Colossus. (Yes, that was a terrible, terrible WordPress theme joke…) Go see it in action. NOW. http://www.fireballmagazine.com

Web design is such a generic, vague term, and it’s often misused both inside and outside of our industry. When I started to write the content for the new version of my personal site, I had to stop and think. I asked myself “What is a web designer? How do my potential clients react when they see those ubiquitous words?”

Putting myself in their shoes, I decided that “Web Designer” is the new “Webmaster”. Clients don’t really know what to make of the title, and so many assume that we are capable of anything from Flash design to back-end programming.

“Webmaster”… It’s okay, when you’re done shuddering with revulsion, I’ll continue…

So, I’ve established that calling myself a web designer doesn’t cut it. What now?

Well, for a while now, the look and feel of a website has hardly been my main concern. I do put time into it, don’t get me wrong, but I spend a lot more time these days diagramming the Information Architecture of a site, and wire-framing the basic layout.

I can easily spend a week or more communicating with a client about how their site will work, rather than how it’ll look. Things like colors, textures, and graphics are very nearly incidental in my current process.  (That’ll change, as I’ve decided to pursue a degree in graphic arts, but that’s how it stands for the moment…)

In short, I spend a lot more time thinking about how users will interact with and use the websites I make. I’m creating more than just pretty pictures and text, I’m creating an experience.

And so, yes, I’m going with the title of “User Experience Designer”. It’s more accurate, and since most people don’t know what that is, it can easily lead to an “elevator pitch”, where I describe exactly what I do.

This saves time, in the long run, as clients are less likely to ask me to do things that I don’t have the time or inclination to do.

That’s a Good Thing ^TM.