Get it All
Together

aboutus1

Come on in, Mr. Client. Have a seat.

I wanted to have a word with you about your website. You know, the massive data structure that combines text, audio, video and images all in the pursuit of explaining what it is you do and how your customers can find you. Yeah, that thing.

Does it not strike you as wholly silly to have an “About Us” page on such a thing? Isn’t the entire site, you know, about you? Is there something you really need your audience to know about you that isn’t somewhere else on the site? And is that a good idea?

Some conventions of the Internet exist almost completely without cause. They’re just things we’ve grown accustomed to seeing and feel weird about not having. The “About Us” page is top of that list, in my opinion. Unless you run something like a media site – and maybe not even then – there is nothing about you that doesn’t deserve equal time with the rest of your marketing content. In fact, your marketing content should be shot through with all those most important things about you that make you different. Or special. Or just happy to be alive. But it doesn’t belong on one lonely page that nobody will bother with.

Frequently, when designers I work with spec out pages, I’ll tell them to just kill the About Us page. Make an About link in the navigation if you have it, but link that to the front page. Why waste the effort on a vestigial page?

Let HolisticNetworking Help You Organize Your Site Today!

As a developer, I spend a lot of my time looking up the “next hottest thing” floating around in my industry. I install all manner of tools, APIs, SDKs and fixtures. I spend an afternoon – sometimes, even when there’s money to be made elsewhere – coding in a new language. And even if the product of an afternoon’s diligent coding is a spinning “Hello World” Javascript toy, I’m happy to have done it.

Because I do for my clients, many of whom want it. I do this to increase my company’s brand reputation. But the truth is, even if I was out of work I’d still just be looking. Because it’s awesome.

Having said all this, it is with distressing regularity that I find customers looking to launch their businesses into the 21st century in a single, colossal and above all, affordable leap. And on the other side of the coin, I meet clients with sites clogged by a decade’s worth of treasured “tools” and apps all aimed at selling niche markets niche products. In both of these cases, I feel, the vanity of “awesomeness” outweighs the purpose of a website: to communicate with an audience.

These thoughts come to me as I recall a recent meeting with a client who needed a complete rewrite of their website. After years of neglect, a conga line of underpaid junior programmers made the best of an increasingly bad situation. The result was a WordPress website that literally no one in the building could manage. Content had been hard coded into theme files, just to get it done. Plugins ran amok, conflicting with one another and using coding practices abandoned with PHP4. Worst of all, the site advertised for brands the site didn’t carry any longer and key features for customer capture were not reliably working.

But, my customer declared, they’d never be able to keep up with the websites of their competitors. Those sites had special apps aimed at giving the customer the right information right where they needed it. Those sites had fancy graphical elements and Flash applications that were meant to drive the customer toward setting up an appointment at a local store.

“But,” I asked, “does the site actually do any of that?

The answer was, of course, that we don’t know and can’t really know. Maybe all those fancy apps have gotten them tons of leads. Maybe they get the company absolutely no leads, but just look pretty cool. Regardless, the point is that you want the lead, not necessarily the toy.

The fact of the matter is that any customer who has visited your site – regardless if they’re “organic,” self-directed visitors or if they’ve followed a paid link somewhere – has already shown a tremendous amount of interest in your products. Certainly, if I type your website address into my browser, I’m already interested; followers of paid links have also made a choice to visit. You might not need to work so hard to get them to participate. Just ask nicely.

eCommerce websites have a harder job. Services sites like medical data portals or FedEx have a much harder job. But if you distill your business needs down to their essence, the purposes of a website may actually be shockingly few. Few, that is, but important. Stop chasing every cool new gadget and focus on your purpose.

I recall a book I read in my youth wherein a wizard tells his young acolyte that, “any gift that you can’t throw away is a trap.” The same rule applies to web sites. If some shiny thing that you own or want to own prevents you from tossing it aside to focus on your needs, it’s just getting in the way. It’s sapping resources while the real needs of your company go unanswered, either because you’re afraid to throw away a long-cherished toy or insisting on punching the square peg of your company’s business through the round hole of High Technology.

Start fresh!! Focus on the now. Identify your goals and quantify success. Simplicity is quite liberating, if you let it be.

Contact Holistic Networking now to find out how we can help!

For years, front-end layout developers have struggled with how best to manage Cascading Style Sheets in a way that is organized. In particular, I have always found maintaining a color scheme of a few basic colors a pain with conventional CSS. That’s because we so often refer to one color across multiple style declarations. Dozens, really, and if you want to make an adjustment to your color scheme, that requires tedious search and replace that invariably ends up confusing you.

Cascading Style Sheets cascade, but they’re static.

My solution has been in the past to create separate stylesheets focused on color – and along with that, another for typesets. This helped keep my color declarations centrally located, but added the complexity of having to declare a given class or ID’s style multiple times: once for my main structural CSS and again for my color CSS. Better, but not great. And adding stylesheets is going the wrong direction in terms of efficient load times.

With SASS, my first blast of enthusiasm was for variables. Now instead of having to maintain a separate color stylesheet, I could simply declare colors as variables and then use them where necessary. Instead of search and replace, minor color edits could happen by redefining a single variable. Sweet!

// Category Styles:
$blue	: rgba(77, 68, 102, 1);
$red	: rgba(153, 15, 38, 1);
$grey	: rgba(115, 153, 145, 1);
$white	: rgba(255, 255, 255, 1);

This is great! But I ran into a situation with styles that left me wanting more.

Because I like to give my audience visual queues that reinforce my category-based blog sections, I want to be able to associate those top-level categories with specific colors. Then I’d like to be able to color either the text, background or border of a given element with a complimentary color.

Now, I could type all those styles out. But this is SASS: the dynamic CSS generator. Surely, there must be some easier way?

Yes, there is. Seeking out a solution for my newest bout of inspirational laziness (pronounced “programming”), I sought out the help of folks at Stack Exchange. And that way is to use a mixin and what in PHP would be called a “multi-dimensional array.” Observe:

$categories:
	technology rgba(20, 78, 102, 1),
	science rgba(153, 15, 38, 1),
	rochester rgba(166, 159, 33, 1),
	politics rgba(10, 82, 60, 1),
	journalism rgba(224, 176, 11, 1);
@mixin category-backgrounds() {
	@each $category in $categories {
		.bg-#{nth($category, 1)} {
			background-color: nth($category, 2);
		}
		.fg-#{nth($category, 1)} {
			color: nth($category, 2);
		}

		.bd-#{nth($category, 1)} {
			border-color: nth($category, 2);
		}
	}
}

The result is a list of CSS elements like so:

/* line 108, ../scss/app.scss */
.bg-politics {
  background-color: #0a523c;
}

/* line 111, ../scss/app.scss */
.fg-politics {
  color: #0a523c;
}

/* line 115, ../scss/app.scss */
.bd-politics {
  border-color: #0a523c;
}

/* line 108, ../scss/app.scss */
.bg-journalism {
  background-color: #e0b00b;
}

/* line 111, ../scss/app.scss */
.fg-journalism {
  color: #e0b00b;
}

/* line 115, ../scss/app.scss */
.bd-journalism {
  border-color: #e0b00b;
}

And so on. Easy, convenient color management for CSS! Oh, I think SASS and I are going to get along just fine, thank you.

I’m working on redesigning the front page of this website a bit with a new theme. The new look will be based on the current design, but more flexible, a bit flashier and like my political blog’s front page, more of a representation of the website as a whole, rather than this one blog.

As I’m working along with the new design, I’ve hatched a scheme to create an interesting sidebar which reflects some different thinking than most that I’ve seen. But I’d like this sidebar to – if possible – stretch the entire height of the page. While searching for answers, a Twitter friend suggested this:

Equal height boxes with CSS | Lab | 456 Berea Street.

Great! What a perfect solution, right? Well, not quite. Internet Explorer once again lags behind the rest of the pack with CSS adoption and this CSS table design thing is not available to any browser below IE 8. Currently, IE 8 adoption is happening at a snail’s pace. Three times as many IE users are using 6 and 7 as are using 8.

Give it a few months, and this will be a non-issue. In the meanwhile, I’m thinking I’ll need to work out a CSS hack to provide an acceptable alternative to older browsers while still maintaining the option for FF and IE8 users.

An interesting discussion of the DOCTYPE declaration in WordPress themes. Seems to me that Alex is spot-on with this: you can’t claim a theme as XHTML 1.1 compliant because you can’t know what gets added to it by the end user. Sure, the *theme* might be strict as a school marm. But if the end user chooses to add all manner of sloppy JS widgets for MySpace and whatever else, the final result is not going to be strict at all.

I confess that, even with my own blogs, the “strict” doctype is probably over-selling a bit. Some times – even most of the time – the blogs are not going to be XHTML 1.1 compliant simply because I am constantly experimenting with plugins. Whether those are my own plugins which are currently in a state of disrepair or those I’ve downloaded from WordPress.com just to mess with, there is always the possibility of being out of standard.

And to be honest, while being XHTML compliant is a goal, its more of an ideal than a practicality under the circumstances. For professional paid gigs, that’s another story. But for this little site, well, I don’t call it my hobby horse for nothing!

}8{D>

If you’re like me, you design web pages because you have a passion for data and display, both. But that may not necessarily mean – and in my case, it most certainly does not mean – that you have a natural ability for dealing with color. Primary colors are one thing, but getting the subtlety and nuance of really rich, vibrant colors is something altogether different. In fact, there are people in interior decorating, graphic design and other industries whose sole job it is to select colors.

In the past, the limitations of browsers and operating systems gave us a great excuse: we *had* to stick to Web Safe RGB, so exotic colors simply were not possible. Well, that excuse is long-past expired. So, what’s your excuse now?

Finding new and interesting colors can be a challenge. Even for artists, finding the colors they love in the real world available to them in the digital world is a daunting task. But with all those experts out there, certainly there must ways to find color combinations besides your own personal brain power? I decided to make a list of some outside-the-box options for your edification. Your comments and suggestions are heartily encouraged.

5. Why Not Ask Sherwin Williams?

The Sherwin Williams website is an excellent resource for color matching palettes of all kinds. Of particular interest to me is the historical palettes section of their website. Here you will find sample selections of the color schemes which provided the inspiration for interior decorating throughout various eras. Look to this resource to find some interesting background colors or text area colors and match them elsewhere.

“But wait!” you may be saying, “how can I use these color options when they’re only images? How do I get the hexs for them?”

The answer is your eye dropper tool in Photoshop. Save the image you want to sample and open it up in Photoshop. Then just use the eye dropper tool to get the sample. Double-click the color in the Color-Selection Box. In the window that opens, you will find the hexidecimal value for the color you’ve selected.

4. Photoshop Swatch Palettes

Another great resource for interesting colors is Photoshop’s swatch palettes. The prepackaged color palettes include Renaissance themed colors and Art-Deco stuff, plus lots more. Once again, you can select the color and then double-click the Color-Selection Box to get the hex. Of course, as a pro tip, you’ll want to eventually save the colors you select for your theme as your own custom palette. You’ll probably want to create a custom palette for every website you work on, if you’re planning on ever coming back to it.

3. Old House Colors

Here’s an interesting website. OldHouseColors.com is really meant for house painters and owners who want their houses to have the classic look that their homes were meant to have. But information on the web is free, and that means its freely used! There’s lots of color possibilities here that you may not find, exactly, anywhere else.

2. What about Macy’s?

Yes. Macy’s. Or Overstock.com, if you like. But clothing is some of the most color-rich stuff most of us ever touch. Why not use some of the swatches they have on their sites for inspiration? You can make an entire WordPress theme and base it around a Polo Ralph Lauren suit! The point is to find colors you can:

  1. Easily sample and use
  2. Dig enough to use in the first place!

1. Color Scheme Designer 3

Beyond a doubt, the best resource for coming up with balanced themes, the Color Scheme Designer uses the science of color to come up with companion colors for whatever favourite color you’ve discovered. The best part of this resource is that it provides you six different palette options for your chosen color, based on their relationship to one another on the color wheel. I am sure that color professionals can explain how all this works. What I can say is that it works beautifully. And it provides you color combinations which, when viewed, make perfect sense yet seem – to me, anyway – totally surprising.