Category Archives: Design

Since I use a computer at work, I’m the resident computer guy in my family. Yes, simply using a computer on a regular basis makes me the go-to guy for anything computer related. While I am a web developer, and know a decent amount about computers, I don’t know everything about every computer, far from it actually. One of the more difficult things is trying to help a family member over the phone. Whether it’s trying to hook up a new gadget, or troubleshooting an issue, descriptions are always as vague as possible. “My computer won’t turn on” can mean the monitor won’t turn on, the actual computer won’t turn on, or a number of other things.

Something I found to ease my pain was this USB hub in the shape of a little man (Amazon affiliate link). I got it for less than $5 shipped online one day. I’ve set it up on the desk of several of my family members. I connect it to the computer for them. Now, any time they call me needing help connecting their camera, mp3 player, Kindle, or any other of the plethora of electronics that use USB, I simply tell them to plug it into the “little guy”. It’s made everything easier on everyone. Depending on who I was talking to, connecting a USB device sometimes meant climbing under the desk and finding the port in the back of the computer, finding the right port on the front of the computer (sometimes concealed by a door to hide all the “ugly” ports), or finding it along the sides of a laptop. Now, if the device doesn’t work after they’ve connected it to the “little guy”, I don’t have to guess whether or not they’ve connected it to the right port or not.

A tip I picked up years ago, the source escapes me at this point in time, is alphabetize your CSS style properties. It makes it much easier to jump to the specific property later. Take the following 2 examples, and find the margin in each.

p {
    width: 75%;
    border: 1px solid #000;
    overflow: hidden;
    padding: 5px 10px;
    color: #000;
    background-color: #eee;
    background-image: none;
    margin: 10px 0;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
}

p {
    background-color: #eee;
    background-image: none;
    border: 1px solid #000;
    color: #000; font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    margin: 10px 0;
    overflow: hidden;
    padding: 5px 10px;
    text-align: left;
    text-decoration: none;
    width: 75%;
}

Hopefully, you can find the margin property faster in the second, alphabetized, list. It can take some time to get into the habit of doing so, but it is worth it. After a while, you may forget the benefits of alphabetizing your CSS properties, but you’ll quickly remember how valuable it is when editng another coder’s CSS that does not have alphabetized properties.

This is a great tool for placeholder images for wireframing a project.

A while back, a service called Placehold.it was posted to reddit. It received mixed reviews, most of the criticism being that the site owners themselves, or a hacker could replace all your placeholder images with something much less work appropriate. I decided to create my own placeholder image generator, and release the source code. That way, you can host the application. Sure, it could still get hacked and leave you in a sticky situation, but now it’s your site, not another person’s site. I assume most people put more trust in themselves than others.

Here’s a quick example of how it works (default image):

You can view more examples as well as learn how to use it by reading the documentation. The source code is available at the bottom of the documentation, both with a generic version, and one specific to CakePHP.

Flash receives a great deal of hate from the web development community, myself included. Common complaints include load times, performance, unnecessary animations/transitions, forcing users to watch (long) intro movies, inability to bookmark content or specific pages, inaccessibility (especially to mobile users), auto play audio, and that it is bad for SEO. The thing is, most of these same complaints can, and do arise from poor development using HTML, CSS, and Javascript.

I can easily include unnecessary animation and transition effects on my site with Javascript, especially with one of the many Javascript frameworks readily available now. I can load down the site with numerous images and other media, CSS and Javascript files, and bloated markup. I can make a website difficult to use for users, and especially mobile users. I can poorly use AJAX for everything making it difficult or impossible to link directly to anything but the home page.

Flash as a development tool does not require superfluous transition effects and animations (AFAIK). It doesn’t force the developer to include an intro to the site, or to auto play some audio file. There are ways to make sites more accessible in Flash, allowing for bookmarking or directly linking to inner content. The website doesn’t have to take an SEO hit just because it uses Flash. Flash would be less resource intense if there were fewer animations and transitional effects. A secondary, light weight version of the site can be made for mobile users, and others that either don’t have Flash or don’t want to use it.

In my experience, the blame for poor Flash sites often rests in the hands of the developer. It is a poor choice to load up a website with animations. It isn’t user friendly to force users to watch an intro movie that you think is super awesome. The lack of bookmarking, direct linking, and the hit to SEO are all avoidable and to allow for otherwise is laziness. Remember, Flash is just another technology that is often used improperly through no fault of its own.

I am more of a developer than a designer. However, web development does not allow me the luxury of focusing only on development. My work constantly forces me to make design decisions, big and small. One of the best resources that I have found is “The Non-Designer’s Design Book”. It is a great book and perfect for its target audience. The Non-Designer’s Design Book does an excellent job of covering the basics of design, and is an invaluable resource to those that have no design skills.

It covers four basic design principles:

• Contrast,
• Repetition,
• Alignment,
• Proximity,

and notes the unusual acronym created, and that it only makes it easier to remember. Each principle is analyzed and reviewed in detail, providing numerous examples for each. The abundance of examples is great, especially since each example covers a slightly different nuance to the design principle. Even the most skilled designer could learn something from this book.