Thoughts on Design

Do You Hear Yourself?

Douglas T — Sun, 19 Jun 2011 12:43:29 +0000

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.

iPad Wallpaper Images

Douglas T — Tue, 03 May 2011 04:49:34 +0000

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.

We Have Not Forgotten

Douglas T — Sat, 16 Apr 2011 14:59:51 +0000

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)

Flipboard and Accessibility

Douglas T — Sun, 27 Mar 2011 02:37:03 +0000

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

Douglas T — Fri, 25 Mar 2011 12:15:30 +0000

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.

Drupal Presentation

Douglas T — Thu, 14 Oct 2010 23:02:52 +0000

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

Featured Sites

A Link of a Different Color

Douglas T — Fri, 24 Sep 2010 01:03:50 +0000

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.

It can allow the site's presentation to fall back on the browsers default CSS, a poor design decision in my viewpoint.
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.

Social Media is not the end!

Douglas T — Fri, 06 Aug 2010 12:14:24 +0000

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.

North Dakota Amber Alert

Douglas T — Fri, 06 Aug 2010 12:05:54 +0000

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.

Who's your navigation for?

Douglas T — Fri, 30 Jul 2010 11:56:19 +0000

A perfect example of a common navigation problem by xkcd.

Who is your navigation for?

The specific, but diverse populations within a University have caused some horrible navigation choices. Who's your audience? If a University directs their navigation towards your students, the faculty can't find anything. If they direct it towards the faculty, the students can't find anything. That's not even considering other audiences like parents, sports fans, and potential students.

It's not a problem specific to Universities, they just make a great scapegoat. The same problem can be seen in much simpler sites. The audience the site design was targeted to, and the real audience aren't always the same group of people.

Who was your site designed for? Did you target the right audience? Do you have more than one audience? Are they different enough that it would require compromises be made with aspects of the site like navigation? In the case of Universities, they may even be diverse enough to require different site structure or navigation. State government sites can be the same way. A number of state sites have taken to dividing their home page by audience and giving each audience their own version of the home page. The Delaware state government site is a reasonable example. They use tabs for each primary audience.

It's unlikely that a personal or small business site would need to go to this extreme, but it is very possible that you're not targeting the right audience. Take a moment and pretend to be a member of your primary audience. Look at your site as if you'd never seen it before. Does the organization and navigation make sense? You might like what you see, but you might be surprised too. Good luck.

Potential Change in Web Accessibility Requirements

Douglas T — Wed, 28 Jul 2010 18:07:08 +0000

DEPARTMENT OF JUSTICE - Advance Notice of Proposed Rulemaking.

"Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities and Public Accommodations"

The department of Justice has given advance notice of a proposal to change the regulations for web accessibility requirements for State and local governments. One of the suggestions in the document is to change to the WCAG 2.0 standard. State and local governments currently are required to meet the Section 508 standard, though a number of them have chosen the more stringent WCAG 1.0 as the state standard. A change to the WCAG 2.0 standard is significant. Raising a site from WCAG 1.0 to WCAG 2.0 can in some cases be simple, but in some cases it can also require a complete redesign.Accessibility needs to be built into a site from the ground up, not as an afterthought. With sites designed around accessibility, a change may not be too difficult. When accessibility was forced onto an inaccessible design the WCAG 2.0 standard may not be within reach without a complete restructuring of the site.This may be a good time to evaluate where your site stands in terms of accessibility. Try out a tool like Cynthia Says and see how your site does. Regardless of the outcome of this proposal, I think that the focus this will bring on accessibility will be a good thing.

North Dakota Highway Patrol goes Drupal

Douglas T — Fri, 16 Jul 2010 12:19:06 +0000

Working at ITD, I had the opportunity to redesign the North Dakota Highway Patrol's website. This was both a redesign, and a Drupal conversion project. Using Drupal allowed us to develop a very nice looking site that can easily be maintained. Content can be maintained by the people who are familiar with the organization, the staff of the NDHP. www.nd.gov/ndhp is built in Drupal using Zen.

Central Dakota Humane Society

Douglas T — Fri, 09 Jul 2010 11:59:56 +0000

Riven Design has converted the Central Dakota Humane Society's website to Drupal.

The new CDHS site features a pet resource library, galleries of available pets, a news section, and much more. Several custom content types, and extensive use of the Views module allowed us to make the nice looking and easy to maintain. Content is placed in appropriate menus automatically when saved, and the library and pet galleries are created dynamically. This site's theme was developed with subtheme method, using Zen.

Basic Website Testing

Douglas T — Thu, 08 Jul 2010 04:00:21 +0000

I've been asked a number of times lately how I test websites that I work on. While I'm never shy about talking about this sort of thing, I thought writing it down might be beneficial.

The Basic Browser Check

Visually check your site in several browsers. I'd suggest testing pages in a number of browsers. Always include Internet Explorer, preferably several versions. I'd also throw in Firefox, Chrome, Opera, or Safari as you are able. Bonus points if you're testing in all of these and a few I didn't name. Demerits if your default browser is still IE. Double demerits if you only test in IE. Checking it on both a PC and a Mac is good, adding Linux is better.

What do I look for?

At this point your looking for basic function. Does the browser display what you expect? Minor spacing variations may be acceptable. A few pixels here or there often make little difference. Sometimes they make a great deal of difference, and you need to be prepared to fix the variations that count. When the difference is 10 pixels between headings and paragraphs versus 11 pixels, you might want to consider how many people will notice versus how much time it will take to fix. If you have misaligned background images, you just buckle down and fix the problem.

Raising the Bar - Validation

Next step, validate everything. There are a number of ways to check site validation. Find one or more of these that work for you and use them early and often. I list several tools I use on my resources page, but there are others. A Google search for validation tools should come up with a multitude of choices. I test templates as I develop, then I continue spot checking through the lifetime of the site design. I also use site quality testing tools like Compliance Sheriff, but that can definitely be overkill for smaller projects.

If you use Firefox, try the HTML Validator and Web Developer Toolbar for testing validation. They let you test HTML, CSS, and JavaScript on the fly.

Accessibility

This is going to be a sinple explanation of a complex topic, but here are a few ways to test for accessibility issues.

Use the Colour Contrast Analyser to analyze color contrast for accessibility purposes
Try Cynthia Says to test basic accessibility
Test with the Web Accessibility Toolbar
Try the Firefox accessibility extension too

None of these are the perfect tool, but they're all helpful and free.

What's it all mean?

These are all tests and tools. None of them will give you a perfect site, but they'll let you know what you have. Knowing what the issues are is the first step in solving them. Good luck, I hope all your projects go well. Check back soon, I have a more in-depth look into testing for site quality and accessibility planned for the near future.

Ze Frank and Jobz

Douglas T — Thu, 08 Jul 2010 03:13:08 +0000

Ze Frank is hiring. I say this not because I'm interested, but because I like the way he wrote the job descriptions. Two statements jump out at me.

"You should have sent at least one email to someone you have never met telling them that they should stop using tables."
The phrase “Please make that look more like a Muppet vomited SteamPunk.” should seem like satisfactory art direction, and to be honest there was no need to use the word “please”.

Email strangers about the perils of table layout? I have to admit I've sent those emails a few times, but I really don't like to. I prefer to use the offending site's contact form. The second statement confuses me a little though. How could "Muppet vomits Steampunk" be considered a vague artistic direction. I'd only have one question in response to that direction. Which muppet?