Thoughts on Design

I've been on back to back development projects for over a year year. I'm afraid I've been neglecting this site to an embarrassing degree. I can see the light at the end of the tunnel, and hopefully I'll be writing here again soon. I've been knee deep in Drupal 7 development for most of this time, and I have some things I'd like to write about. Hopefully you'll be as interested reading about it as I was learning it.  

Do you subscribe to your own RSS feeds? You should. It may sound like a strange form of vanity but it's not. It's a defense mechanism. If you don't subscribe, how do you know what your readers are getting? I subscribe to my personal site and social media feeds, as well as those of sites I work on. Several times I've caught and fixed problems with feeds before clients or readers have noticed anything.

This week I caught a problem on my own LinkedIn account. I'm not sure why, but LinkedIn suddenly started aggregating my Twitter account. This is not something that I'm interested in. I caught it after only a few tweets because it showed up in my LinkedIn feed. If I didn't subscribe it could have been months before I noticed.

What should you subscribe to?

• Your company site
• Your blog
• Your social media sites
• Hashtags and news searches for you, your company, or your industry

Any subscription you'd add?

I use Google Reader which I sync to several computers and other devices, but there are a number of good feed readers available.

I've been spending a lot of time with Photoshop lately, and I'd like to share some of my work with you. Jump over to Riven Design and check out the iPad wallaper images we've put up. When I have time I'll add some other formats.

It's hard to believe it's been four years. These images are free to use anywhere you'd like for personal reasons. Other formats could be made available. Let me know where you use them if it's convenient. The images have transparent backgrounds except for the one specifically noted.

• Not Forgotten Image (Full Size)
• Not Forgotten Image for Web (Shown above)
• Not Forgotten Image for Web (white background)
• Not Forgotten Image Icon (150px)

I think iPad apps like Flipboard may turn out to be one of the best things to happen to accessibility in quite a while. Not because they are accessibility tools themselves, because they are not. No, this is a bonus for accessibility because it will let users who would never think about accessibility see the consequences of bad code. Good semantic code with all the style controlled by CSS looks wonderful when it's pulled into Flipboard. Poorly written code using inline styles, spaces, and other tricks to control the design don't fair so well.

BlogDesk is a fairly nice desktop blogging client. In simpler terms it's a piece of software that lets you post to your blog from your desktop without using the web browser. This allows for some added features over a lot of blogging platforms. It supports a wide range of blog platforms including WordPress, MovableType, Drupal, and Serendipity.

My thoughts of BlogDesk:

• Easy to install
• Easy to setup with your blog
• Supports WordPress custom fields, but doesn't support custom fields in other blog platforms.
• Reasonable formatting and control of text
• No trouble handling images
• Had not trouble pulling in my categories
• Allows editign of older posts, even those written before I installed it.
• You can schedule posts for later
• Spellcheck as you would expect from something like this
• Auto tag generation is a nice touch

Overall I was impressed. A nice piece of software. My only dissapointment was that it did not support custom fields for anything other than WordPress. I develop with Drupal an I use custom fields extensively.  The lack of support for custom field rules out my use of this product and means I will not be suggesting it for most of my clients. For anyone who wants to post to a blog or site without custom fields, I would reccomend it.

I gave a presentation to a local social media group called NDTweetup earlier today. I walked through various Drupal capabilities, discussed installation profiles, and showed some examples of Drupal sites. Over the course of the meeting we discussed the versatility and capabilities of Drupal and other CMS products. Drupal's ability to both generated RSS feeds and to aggregate them was one of the more popular points of discussion. Drupal's feed handling brought up a number of interesting ideas for use in social media. I've listed below the Drupal resources and Drupal sites we discussed.

Drupal Resources

• Drupal.org
• Open Atrium
• Managing News
• Open Scholar

Featured Sites

• Central Dakota Humane Society
• Whitecap Custom Rods
• North Dakota Amber Alert
• North Dakota Highway Patrol
• Thoughts on Design
• Riven Design
• North Dakota Broadcasters Association

I've been spending a lot of time reviewing websites lately. I keep seeing the same few mistakes over and over. Some of them may be intentional design choices, but for the most part they seem to be mistakes of omission. What I'm seeing is incomplete CSS for links. Incomplete link CSS does one of two things.

1. It can allow the site's presentation to fall back on the browsers default CSS, a poor design decision in my viewpoint. 
2. It can also be written is such a way as to be applied to all aspects of links. This would make a hovered link unchanged from a regular link.

The styling of links serves a purpose. It identifies links for the user. When a hovered link changes from a non-hovered link, it helps in that identification.

Let's start with a few basic CSS rules. Modern accessibility standards suggest that you should use more than just color to identify anything of significance. So the CSS for links should include two variations from traditional text. I'd suggest a distinct color and the traditional underline, but most any two should work.

a {color:#333300; font-weight:bold; }a:link { text-decoration:underline;}

Making visited links a slightly different color is also helpful for tracking where you've been in a site.

a:visited { color:#333333;}

I'd also suggest using the hover pseudo class to make the hover state different.

a:hover{ text-decoration:none;}

Are we done? Not quite. This is where I keep seeing sites fall short. You also need to define the active and focus states. Without definition, these will both default to either browser default or your own link CSS.

a:hover, a:active, a:focus { text-decoration:none;}

These three states can be together as shown above, or with completely different CSS, the choice is yours.

Is your social media strategy backwards? Are you tweeting about what you've posted on Facebook? Posting on Facebook about what you're doing on Twitter or your Wordpress.com blog? Social media tools like this are beautiful tools, but they are just tools. Don't let them be the focus. They are to direct traffic, not to be the target of your traffic. Post your content on your own site, and use your social media tools to bring the people to you.

If you're directing traffic to your social media tools, your pushing people the wrong way.

I recently had the pleasure of finishing another ITD design project, I was able to work with a number of great people at ITD, as well as the NDHP and Department of Emergency Services to update the Amber Alert website. Like the recent NDHP site, this was both a redesign and a Drupal conversion project.  Based strongly on the NDHP's design, the Amber Alert site is built using Zen. My contribution to this site was the Drupal theming.