Respect the Style Guide: The Importance of Consistency in Design

Style guide illustration

If you want to earn trust and respect from your users and customers, consistency in your branding is crucial. Consistency means the tone, feel, and style of the company’s branding is the same everywhere it appears. It means committing to the visual appearance of your product and its marketing and not trying to sell yourself as anything else. This creates loyalty in users and customers as they get a solid sense of who you are as an organization. (more…)

The Substance of Style

In my recent post on working remotely, I’m realizing that I kind of blew past something that we’ve always felt was key to making working on a series of projects for many different projects like working for Art & Logic on A&L projects, not a series of disconnected projects.

1D picture at the urging of my 14-year old daughter

One of the first things that the founders of A&L did was to sit down together and hash out a programming style guide. Over the years, that guide has evolved and grown, and it’s still the way that our developers write code. It’s easy to look at something like this as being a simple set of directives (“Use spaces not tabs! Opening braces go on a line by themselves!”), but it’s really much more than that.

(more…)

Bootstrap ALL the Things?

Bootstrap is a CSS framework that serves as a starting point for your website or web-application’s user interface styling. It has become very popular now, being the #1 trending repository on Github.com as of August 20, 2013. It is definitely a great asset, but should we be turning to it so quickly?

BOOTSTRAP ALL THE THINGS! …Bootstrap all the things?

(more…)

Word Processing in HTML

clippyI know a lot of people who hate word processors. For us web developers, we know how to optimally structure a web page and how to effectively apply cascading styles, so why can’t we ditch the word processor and simply use HTML?

With the power of HTML, CSS3, and some export libraries, we can do word processing by hand in a format much more convenient and familiar to us. We no longer have to sit there at the mercy of our word processing application, hoping that it interprets what we meant correctly and then fiddling with it until it does. (more…)

Oh, drop downs, you cheeky little things!

Image

Why is it? Form elements are fully customizable using simple CSS styling *except* <select> drop downs. Oh sure, you can tweak colors, sizes, fonts, etc. but I’m talking about overriding the native controls and really making them your own. Of course, you can use jQuery, which is an excellent solution in most cases, but sometimes introducing additional scripts can interfere with what’s going on under the hood.

I recently stumbled upon a neat concept, and after a little wrangling, I was surprised to have found a pretty simple way to override the native <select> drop down. Oh, happy day!

(more…)