The headline of this post is a quote by Tony Rubleski of the Mind Capture Group. Tony recently spoke at a GRAPE Lunch and Learn/Networking Opportunity. Tony's talk was driven from his background as a marketer and was built out of his 3 books on sales and marketing. Tony is correct, we are all selling something to each other. Ministers are selling to their faithful and sinners alike. I saw this first hand at a local Community Expo, where there were at least 5 local churches with booths. Small Business Owners, sales personnel, advertisers and marketers are selling their products or services. Workers are constantly selling their abilities and talents, to their bosses. Managers have to sell their decisions and direction to their employees.

I joined GRAPE, or Grand Rapids Area Professionals for Excellence, as a way to network with local professionals. I've actually joined 5 groups and, by the end of last week, attended 8 separate networking group's events. I sell best to people I've met or know. Gaining referral customers is how Evolve has done business since it's inception. I'm, personally, out meeting as many people as I can, looking for new business. When Evolve Solutions started out, our sales guy joined a business networking group called BNI. I found them a little too ridged, and we didn't get as many quality referrals or as much business as I'd hoped. We quit after the 1st year. In the last several months, I've joined a few "free" groups and did pay to join one, here in West Michigan: AimWest. Tony's 3rd point on referral strategy was, "network, network, network" - I think I'm pretty well getting that down. A new friend said I should get paid to network, I'm that good at it. I think it's just, mostly, I like to talk and I like to listen.

One of the questions on my mind at 2:30am is "How can I find new clients or better yet how do I differentiate myself?". "Mind Capture", as Tony discussed, and being that "yellow tulip in a sea of red" is what I'm trying to find. How can I stand out from the rest of the herd. I'm fighting a major marketing challenge in this digital age: choice, and what Tony called "Word of Mouse". There are at least 300 web design firms and freelancers in Grand Rapids, alone. Almost everyone says they can build a website.

Rubleski quoted Amazon's founder, Jeff Bezos, "Sometimes you have to be willing to be miss-understood", during his speak. Any of you that know me, probably have noticed, that I don't fit any real concept entirely. But for the rest of you, yes, I wear an earring, sport the spiky hair and goatee, but did you know that I own guns and hunt? Did you know that I hate taxes and big government, but recycle? A couple friends call me a hippy, and yes I love my Teva Sandals, mountain biking, tent camping, kayaking, commuting by bike and there's that recycle thing. On the other hand I shower daily, own a suit, a couple dozen ties (shocking to some) and love martinis. I do not fit into any political group.

I believe, if you're my potential client, you're going to hire someone that doesn't fit any mold. I love to listen to clients, learn of their business and what they create, or their business philosophy. Sales engineering has been one of my duties for Evolve Solutions, as well as for a previous company. This means that I engineer a solution as part of the sales process. I can accomplish this because I can empathize with the guy on the other side of the table. I built my house; so I can talk blue prints with architects, I can talk about cabinetry with builders, and I can converse Watts with Electricians. I've worked on all 14 cars I've owned, so I know how to talk to mechanics and automotive parts suppliers. I spent time in the Air Force. I've fixed computers, Mac, PC and Linux. I ride bikes, motorcycles, snow mobiles and jet skis. I own 2 chain saws and solely heat with wood, but I've researched pretty much all forms of heating and cooling. I was a Graphic Designer before I became a Web Designer. This stacks up that I've lived a pretty full existence and can probably relate to something in your life.

Clients that I've worked with produce stone adhesives, car parts, big heavy machines, adhesive labels, and jewelry. I've created for clients in the medical field, horse ranchers, parts suppliers, furniture manufacturers and suppliers, non-profits, automobile sellers, soap manufacturers, retailers and missionaries. The best part about working with so many, varied clients is that I am so much more well rounded. I understand many supply chain, manufacturing and sales processes. Most likely you're not going to have to spend too much time training me on the broader aspects of your company. I probably already know your market, but I'm still going to ask about it. How do I stand apart from the rest? Start by reviewing my linked-in profile, and then decide for your self. Since 1997, I have worked on over 800 websites, either hands on, or managing the teams. I started writing HTML before you could take a class on it.

So if you've hired or are thinking of hiring one of those other guys: Here's a couple questions to ask yourself, "How well do they do it?" or "How much experience do they have?". Do they understand your clients, what browsers they're using, and how they find you. If you have already hired them, did they listen to you and provide you with the perfect design the first time? Or, did it take more than 2 compositions to get it right? Did they provide a solution to your problem, or just a website? I again refer you back to my LinkedIn. Check out my recommendations. I will make your business's site better looking, more functional and easier to use for you existing and potential clients.

Wheew! That was a long rant. Thanks to those of you that made it to the end. Douglas steps off his soap box.

I've been talking over the last months about things that interest me: namely ISPs, Cell Phone Technology, my kids, and I've discussed Social Marketing as well as some Social Media related events I've attended. Which, by the way, I'm drafting one about a recent Grand Rapids Social Media Luncheon I participated in. But, this week, I really wanted to touch on some best practices that I've found lacking in sites I've visited lately. There were non-working forms, miss-aligned graphics (most likely due, in part, to bad browser testing), large slow loading images and other issues.

I'm going to start with the large images. There is absolutely no call for giant graphics in websites. As web designers we have asked web tool companies, like Adobe, to add features to decrease image size. This is so, even on slow internet connections, our sites will load quickly. So why, after 14-16 years of some pretty good web design advances, I'm still finding people that are creating background images upwards of 200 KiloBytes?! I don't really care if 50% of your market is using broadband. A 200KB image is still going to take 20+ seconds to download on a DSL connection. Close to 60% of internet users are still on dialup in the US alone. If you want to comment more on this - bottom of page.

Next, there's this new thing called Grid Layout. And by new, I mean from 2007. Essentially, it has to do with using grid systems and column grids for website layouts. We can also apply the theory of a baseline grid with print techniques. On an article on A List Apart (ALA), I found this: "The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page."

I started using this technique while working as a contractor/consultant for a large local international firm. There was a guy there, ahead of his time, that has since moved on to an up-and-coming company on the West Coast – That started using it in a blog that we co-created the code. To me it was like an epiphany.

We've moved from the 3 column layouts down to 2 with best practices, but the theory remains. If you want your lines of text to line up, you have to use the techniques listed on ALA. It does take a little time at the beginning of your CSS creation, but like most of CSS, once it's done, it's done.

Before I discuss more about standards I need to define some terms:

Development layers

• Content and Structure- markup layer – HTML or XHTML
• Presentation Layer – CSS is referenced from the markup
• Behavior Layer – JavaScript elements that enable user events and interactions
• Software and CMS layers – have their own UI layer
• Teams and Processes - To build all of the above

Where to start

Web standards strategy starts at the markup level. It is where the offense of mixing HTML markup with the Presentation and Behavior details are usually committed. A web standards-based approach means creating markup that conforms to the specifications as closely as possible.

There are several reasons why you should be using CSS for your structural markup.

• Makes your pages load faster
• Makes your redesigns more efficient and less expensive and easier to administer
• Helps you maintain visual consistency throughout your sites
• Gets you better search engine results (SEO)
• Makes your sites more accessible to all viewers and user agents

POSH

POSH code (Plain Old Semantic Hypertext) brings meaning to content. It is a fundamental principle of web standards-based markup and will aid in fully reaping the benefits of modern best practices. Use POSH whenever possible in order to convey as much information about the content. By its nature, it also means that all presentation information is outside of the markup. Descendant selectors match any element inside another element having space between the 2 elements.

div p {color: red;}

In this example above, any element from a <div> element will be red. This technique can be used to IDs as well as Classes. Using this simple technique authors can remove the complexity from their CSS.

There is a term going around the coding community called “classitis”, which means putting too many classes in web sites markup and CSS. The term is a funny word for a valid concern. Having dozens of CSS classes to remember and reference is difficult for web authors and business users alike.

A more practical and scalable solution is to use element and descendant CSS selectors. These selectors automatically apply styles to XHTML elements without having to apply classes to every item.

Using the example below notice all of the classes being applied to the markup. This is an example of classitis.

The next example use descendant selectors to get the job done.

By using descendant selectors, we can eliminate redundancy in the code.

Here is the relevant CSS for the above example:

CSS Best Practices

Break style up into multiple style sheets.

Place your CSS rules in an external style sheet, so that they do not need to be downloaded again each time a new page is loaded. Use of Print, Global, Main CSS files helps with load-times as well as ease of browser/print display. Also use of Browser specific CSS files is preferred over hacking a Global Sheet. This means using a separate Style Sheet for IE6, IE7 and previous versions of IE (eg. IE5.5). It is possible to put W3C compliant Mozilla and Webkit styles directly into the Base or Global CSS

Build and test your CSS in the most advanced browser available before testing in others, not after.

If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won’t have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.

Naming Conventions

For naming conventions it is best if you name the ID or Class name to what it does not how it looks. Example: if you create an error class and choose to color the text red. ".errorRed {font-color: red;}" A decision is made to change the color to orange then the naming convention no longer matches the way the class looks, this can cause confusion to anyone besides the author that made the change. It removes from the markup what the element looks like.

ID names are unique in a document; you can only use them once in the markup. IDs are used for an element that does not need to be duplicated such as #nav, #nav-sub etc. Classes can be used multiple times. Classes in the CSS are represented by a "." In front of the name such as ".content", IDs are represented by an "#" as in #nav.

Use functional names for your classes, avoid words that describe how they look.

Applying Styles to HTML

For the most part, styles should always be applied with a CLASS attribute. Only use the ID attribute when absolutely necessary. Applying a style inline with the STYLE attribute should also only be used when necessary - hopefully that means never.

TABLEs are quirky in the various browsers. They are not "appropriate" to use for layout, they don’t to mix well with CSS, and they pose accessibility issues. It is best to use DIVS instead for layout. TABLEs are fine when displaying tabular data, but that is about the extent of their use.

Try to avoid applying padding/borders and a fixed width to an element.

IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it's best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.

Combine selectors.

Keeping your CSS light is important to minimize download times; as much as possible, group selectors, rely on inheritance, and reduce redundancy by using shorthand.

Use and Knowledge of Specificity

Understand the actual specificity of a group of nested selectors and what their calculations are per selector.

Use Web Typography Standards

Pixels and EMs for Font Sizes

Set the BODY to the designated size and allow the rest of the page to utilize calculations of that based on Ems. Ensure that the line height and word spacing follow the calculations. When you declare a font-family, include at least one semi-ubiquitous option for each major OS (Windows, Mac OS, Unix), and always end with one of the generic font keywords (serif, sans-serif, etc.)

Use the Liquid Layout where you can

The "Stretchy Layout" nicely fills all screen sizes without wasting any space. A floating Box layout could be preferable to allow for more content to fit larger browsers and mini-browsers alike.

Anchors and Images

• Hyperlinks should always be underlined unless they are in a group of clearly-defined navigation links.
• Use :link, :hover and :visited instead of "a" to set link styles.
• Use image replacement methods that are compatible with non-graphical browsers

Don’t use quotation marks around paths/URLs.

When setting a background image, or loading in an imported file, resist the urge to surround the path with quote marks. They’re not necessary, and IE5/Mac will choke.