This is not a new trick, and I certainly did not invent it. It’s been used before, but when I went searching for information about how to do it, it was hard to find. In fact, I finally had to ask a friend who is much better at PHP than I am to help me (I only recently learned to spell P-H-P). This is really basic stuff, but for a lot of us, basic is what we need to get on with our projects.

Sometimes, you need things to NOT appear on a page unless something else that goes with it appears on the page. This is a pretty basic capability for most CMS systems, but I had never done it with WordPress on a page-by-page basis.

Here’s the scenario. I wanted to add a highlighted note in the subnavigation area of my WordPress theme, Evo4 CMS, and I wanted it to be tied to the content of the page it appeared on. I hadn’t used custom fields much, but it seemed to me that was the way to go. Here is an example of the code I wanted to appear below the subnavigation items on the pages:

<div class="sub-note">

<h5>Subnav Note Heading</h5>

<p>Sed do eiusmod tempor incididunt velit esse cillum dolore duis aute irure dolor.</p>

</div>

Pretty simple, right? I decided that, for greater flexibility, my client would have to be responsible for the HTML formatting within the div (this particular client is capable), but I did not want them to be responsible for the div itself, as things can get ugly when someone forgets to close a div or attaches the wrong class to it. In the WordPress backend, on the page on which I wanted the note to appear, I created a custom field named "subnavnote" and added the value (same as above, but without the div):

<h5>Subnav Note Heading</h5>

<p>Sed do eiusmod tempor incididunt velit esse cillum dolore duis aute irure dolor.</p>

On the page template in my theme (page.php), in the subnavigation column, I added the following:

<div class="sub-note">

<?php echo get_post_meta($post->'ID, 'subnavnote', true); ?>

</div>

Woohoo! That displayed the text from the custom field in the subnavigation area. But there was a problem: when I went to other pages, an empty "sub-note" div displayed (CSS specified padding and a background color for the div, which caused it to be visible even when empty). And that was definitely NOT something to yell "woohoo" about.

I needed a way to make the div appear on a page only if there was a value for "subnavnote." No note, no need for the note container. This was where Googling left me high and dry, as I didn’t know the right terms to use, or how to ask the question so that I was able to find a usable answer. I have no doubt the answer was and is out there, but it remained outside my grasp.

After fiddling and failing with some PHP code snippets, I asked a friend who is a PHP coder for help. Here’s the solution she gave me:

<?php $subnavnote_value = get_post_meta($post->ID, 'subnavnote', true); ?>

<?php echo ($subnavnote_value != '') ? "<div class='sub-note'>".$subnavnote_value."</div>" : ''; ?>

Basically, if there is no value for the custom field on a particular page, this code prevents the div that contains the custom field content from appearing. And if there is a value for the custom field, both the value and its container div appear on the page.

I would break down the code and explain it if I was competent to do so, but I’m not (P… uhh… H… um…). I can see how it works, however, and have adapted it to other similar circumstances, which greatly increases my ability to use custom fields. I hope this solution is similarly useful for you.

One of the best things you can do to set the tone of a blog post and encourage people to read beyond the heading is to include an image. Most bloggers understand this, because an awful lot of them use images in their posts. But "misuse" of images is more common than "use" of images, if you have the perspective that the purpose of an image in a blog post is to communicate.

Here, then, are 6 rules (I could have called them guidelines, but then no one would argue with me) for using images in your blog posts which deserve a yellow flag when violated:

1. One image per post.

Blog posts are usually short; 300-800 words is a commonly suggested length. That small amount of text simply does not create enough screen real estate to accommodate several images without looking cluttered and unreadable (you DID want people to read your post, right?). The idea of "less is more" has never been more applicable. In cases where multiple images are truly called for (e.g., you have a series of photos showing attendees at an event), you can use one anchor image with a link to launch a Thickbox slideshow (or similar). This is also a good technique to use when you need a large image to show critical detail.

2. Put the image at the top of the post.

Put the image where visitors can see it immediately, right below the heading of your post. I personally like to align the image to the right at the top of the first paragraph: the image is where they can see it and connect it to the heading, but it doesn’t block their entry into the post text as it might if it were aligned left.

3. Make sure the image relates to the heading of the post.

An image should not leave your readers wondering what the connection is with the post, either before or after (or if) they read it. The image should immediately and clearly support or illustrate an idea in your post heading. Most people view disconnects and non sequiturs as annoying, rather than intriguing. If you can’t find an image to relate to your heading, consider changing your heading.

4. When looking for images, bring along your sense of humor.

A little humor or irony in an image (as long as it’s obvious: reread no. 3) can draw people into the post. It’s a bit like telling a little joke before a speech. Of course, if the "joke" is inappropriate or misleading, then you’ve created another issue. So don’t do that.

5. Crop and size images appropriately before uploading.

Any time you see an image that seems to take forever to load in a post, chances are you’re looking at a big image that has been scaled to fit, rather than sized to fit (i.e., the blogger uploaded a 1200-pixel-wide image and scaled it down to 220 pixels wide in the blog editor, instead of resizing the image to 220 pixels before uploading). Get an image editor and learn to use it to crop and size images, at minimum.

6. Don’t use clipart or stock photos. Unless they’re pretty good.

A lot of clip art and stock photography is trite and awful and over-used. But some of it is clever and very good and it perfectly illustrates your concept. Put your photo-editor hat on and refuse to use the former. Under no circumstances should you use an image of a multi-ethnic and gender-balanced group of young people with perfect teeth dressed in business casual gaping in awe at the screen of an open laptop in a brightly-lit conference room.

Although I design and develop on a Mac Powerbook, I mostly ignore Safari for two reasons:

1. Safari is about as standards compliant as browsers get, so it rarely needs any special attention.
2. Safari is used on fewer than 4% of all computers (and it seems to have peaked).

I use Firefox almost exclusively (although I’m now experimenting with Chrome for Mac), because it’s very standards compliant, and it gives me about 99% of the same results as a PC version of Firefox. Using FF in my development process means I have the biggest browser covered (that’s right, FF has over 46% of the market, with IE6-IE8 combining for just over 37%). I use crossbrowsertesting.com to hunt for problems in IE. Ideally, I want my work to look the same in all browsers (but I’ll settle for “close” in IE6).

That said, I try to keep in mind an old saying in the web design business: The most important browser to develop for is the browser on your client’s screen. One of my clients is an ad agency, and they are completely tied to Safari (I’m pretty sure they’ve heard of Firefox, but…). So, looking good in Safari is a priority on their projects. Rarely is there a need for a hack, but occasionally it happens.

There seems to be only one reliable CSS-only way to target Safari (incidentally, it also targets Chrome, which has almost 3x as many users), outlined way back in 2007 by Dustin Brewer. You can put this in your style sheet to enclose Safari-targeted rules:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

But then you have a hack in your style sheet. I find it’s easier to maintain (and find) hacks by putting them into a different file, and your basic style sheet is more likely to validate. I experimented with using the above selector in the header to point to a different stylesheet, but had some issues (don’t remember now what they were). Finally, I settled on putting the following in the header, following the basic style sheet link:

<style type="text/css" media="@media screen and (-webkit-min-device-pixel-ratio:0)">
<!––
<?php include("includes/safariCSS.php"); ?>
––>
</style>

This displays the contents of an include file, displaying CSS rules in the header as an "internal style sheet." The contents of the php include file consists of CSS rules, but is not a CSS document. Internal style sheets in the header are usually to be avoided due to maintenance and consistency issues, but by using an include, the Safari CSS for all pages is editable in one file.

By the way, the CSS rules from the include appear in the header for all browsers, but the “@media…” statement means all but Safari and Chrome ignore the styles. Given that I’ve done websites with some extremely complex CSS and only needed 2-3 rules targeting Safari, I don’t think this approach risks adding much overhead.

View a Demo | Download Demo Files

Server Side Scripting Reminder: Because the include is PHP, which renders on the server, the files will not work locally on your computer. To see the results of your experiments, upload the files to a server that supports PHP.

Update 2/4/2010: I had reason for some support help from HostGator, so I tried out their chat support. It’s an entirely different experience. Dedicated attention from a single support tech who stays with you until the problem is resolved. The result? The problem was resolved quickly and efficiently.

Update 1/8/2010: when I returned to HG’s contact page this morning (still not resolved and I need to get beyond the ticket system), I noted that the email addresses did carry the instruction to "submit a ticket by emailing us." Like most people, when I want help, I tend not to see the details but go straight to the info that looks like it will get me help, without reading (or even seeing) the supplementary info: when I see an "Email Us" heading, I expect the process to act like email. There is a usability lesson in that for me as a web developer/information architect.

This is not the first time I have complained in my blog about Hostgator’s support ticket system. Last time, a nice person from HG even responded to that post, but nothing in the system has changed since then, so nice responses that seem to offer understanding don’t amount to much.

On HG’s behalf, let me say they are very reliable, and I don’t have more support issues than I’ve experienced with other webhosts. I’m just not happy with their support system and/or processes, and probably all that can be traced to whoever is managing their support function.

What’s the issue? HG seems to have a single support channel: a ticket system. And no way around it when it does not fit the need. Here’s the story:

4:28pm: I submit a ticket on a problem with a hosted site after spending half an hour trying to determine for myself what the problem might be and what I need to do to fix it.

4:35pm: Representative A responds and requests more info.

4:41pm: I respond with requested info.

5:36pm: (note increased time) Representative B responds with partial fix and partial explanation.

5:39pm: I respond with questions to clarify what happened.

5:43pm: After noticing that some problems remain, I respond outlining remaining problems.

7:38pm: (that was one long dinner break) Representative C responds with additional partial fix, but no requested explanation.

7:42pm: I respond with remaining issues that are apparent.

7:59pm: I share repeated error that has been showing up in error logs.

9:28pm: I’m still waiting…

(Note: times are in HG’s time zone, an hour ahead of mine)

Does anyone besides me see a problem here with lack of continuity in HG’s support responses, both in terms of time and personnel? Anyway, I see such a problem, so I decided to go to HG’s website and send an email to the support contact email, with a little "constructive critcism." Copied from my email:

I’m a fan of Hostgator. I currently host a few dozen websites on Hostgator. I spend a fair amount of time telling my clients how reliable and rocksolid Hostgator is.

But that may have to change, because HG does not have its support act together. At this point, I have several support issues behind me, and the record shows this is the usual experience:

1. submit support ticket to the support dept
2. receive first response in approx 10 minutes, from rep A (so far, so good)
3. respond and receive next response in approx 1 hour, from rep B (not so good)
4. respond and receive next response in 1-2 hours, from rep C (not even close to acceptable)
5. there may be 2-3 additional cycles, extending the support process up to 5-6 hours

The upshot is that relatively simple matters can easily take 2-3 hours (more is not unusual) to resolve. Between the lack of continuity (because of extended times and different support reps) and the slow response times, the support, well, it sucks.

(BTW, my one experience with support from your billing dept shows response times always in the 10-15 minute range, with greater continuity with support personnel)

Can you not see the value of going to a different system for a customer for whom the first response does not resolve the issue? I guarantee you are about to lose at least one customer entirely, or at minimum, cease to see any additional growth in this account.

Would you like to guess what happened to this email? It was directed to HG’s ticket system. That’s right: an email complaint about HG’s ticket system opened a ticket. I’m currently awaiting a ticket response on my original ticket, AND this ticket. Can anyone here spell "INFLEXIBLE?" Can everyone here say "It’s time to look for a webhost with a better support system?"

New Year’s resolutions aren’t part of my tradition. They’re too easily forgotten or ignored, and they seem to focus primarily on end results rather than on underlying issues that create the need for improvement.

However, because the end-of-year holidays include more days off than I’m used to in a 2-week period, I usually do end up thinking about how things have gone over the previous year and where I’m going in the next. While I don’t exclusively think about business at such times, I’ll restrict this post to my reflections about Evo’s business (believe me, it’s better for both of us ).

My business has changed fairly dramatically in the past year, and blogging and blogs have played a big role. Evo has been in business since May, 2000—nearly 10 years. In terms of business activity, 2009 was not awful, but not great (until the last couple of months). My long-time business partner left the company in August and, while that has limited Evo’s ability to do some things, it’s also created profitable opportunities for collaboration with other companies.

I originally selected "Evolution" as part of the business name because I knew we’d have to evolve to be effective, as well as to stay in business. Back in 2000, I thought of websites primarily as online brochures. A lot of people still want static, set-it-and-forget-it websites that somehow bring them tons of business. It doesn’t work that way in 2010, and it really never did. I’m excited that websites can play an active role in marketing for a price that is well within the reach of most small businesses and organizations. My focus is now primarily on helping businesses and organizations incorporate blogging and blog-based websites into their marketing mix. In September, I developed and released a highly-customizable WordPress theme, Evo4 CMS, specifically for creating blog-based websites, and it’s greatly increased both my flexibility and efficiency in the implementation phase.

The challenge is that blogging, engaging online with customers, and keeping your website updated requires some time and effort. Definitely not a set-it-and-forget-it scenario. In 2010, I have to do a better job of communicating the benefits that kind of time and effort can bring about. Depending on how well I’m able to do that, next year should be a great year for Evo. And, I will have put some real tools in the hands of people to help them manage their business, which is a good feeling.

So, I’m focusing on two things in 2010:

1. collaboration with other developers, marketers, and consultants
2. helping businesses and organizations acquire the web-based tools and knowledge that allows them to manage their own marketing

I’m looking forward to it. Still evolving (and maybe still a little bit crazy) after all these years.

*apologies to Paul Simon

1. challenges me to think about something in a new way
2. offers usable information that I can incorporate into what I’m doing

Now that I think of it, those [apparently] rare ingredients comprise a recipe for blogging success. I know my own posts can’t boast of either more than occasionally, and perhaps it’s the consistency that’s the real trick with the recipe. Each of these are very successful blogs with lots of readers, so they’re obviously doing something right.

My most valued feeds, in alphabetical order:

Chris Brogan – The guy is practically synonymous with social media in general, and blogging in particular. He preaches the word on social media as a marketing strategy to the faithful, the backsliders, and the non-believers. And he knows what he’s talking about. A must-read for people involved even peripherally with online or social media marketing.

CSS-Tricks – One of the few web dev blogs that consistently presents useful and interesting information. Chris Coyier puts out nuts-and-bolts stuff, like explanations of absolute and relative positioning, centering a navigation bar, etc. But he also offers code snippets, downloads, and a forum. Worth a daily visit.

Duct Tape Marketing – John Jantsch offers practical and pragmatic advice for small businesses. He’s packaged his approach in a book, webinars, and a 14-lesson training program. I have bought and read the book, and recommend it highly for small business owners. His blog posts prod and educate. His website is full of links and resources. If you own a small business, you should be reading this blog.

Fuel Your Creativity – For me, FYC is more about inspiration than anything else—a site that feeds the designer part of my soul.

Hubspot – Hubspot is working to bring measurability to social media marketing. Their blog is a major training resource for business people trying to figure out how to benefit from "attraction" marketing, as opposed to "interruption" marketing. They sell a service that helps measure the effectiveness of online marketing efforts, but they’re not pushy about it. And they offer free webinars and a lot of great how-to-market-online information.

Seth’s Blog – Seth Godin does blogging all wrong. He doesn’t allow comments on his posts, his blog is hosted on Typepad rather than on a webhosting platform he controls, and he apparently spent no more than a couple of minutes customizing his blog’s appearance. But Seth is a marketing guru’s guru and an iconoclast’s iconoclast. He can succeed by doing things differently because he’s Seth Godin. He delights in flipping concepts on their heads. He turns kvetching into a useful exercise in logic. And often, he asks some interesting questions. His posts and observations are usually short, often simple, and almost always thought-provoking (consider that a warning).

ThemeGrade – ThemeGrade fills an important need in the world of WordPress blogs: it reviews and rates WordPress themes on code and SEO compliance based on standardized testing. Before ThemeGrade, it was up to you to figure out if it was a good idea to install and spend time modifying that cool theme you loved the look of. TG ranks themes with gold (currently about 3% of submitted themes), silver (13%), bronze (31%), or no rating (currently 53% of submitted themes). We’re proud to say our Evo4 CMS WordPress theme was rated silver.

WNYC’s Radio Lab – Maybe the most interesting audio on the Internet. Jad Abumrad and Robert Krulwich have fun exploring interesting ideas and we get to go along for the ride. The audio programs get posted about every other week, so this isn’t a daily listen. The podcasts are 15-60 minutes each, and every one is more than worth the time.

WP Beginner – There are several "How-to" WordPress sites, and a lot of them are good, but WP Beginner is my favorite, because it usually serves up something I need or have wondered about. And though it’s suitable for beginners as its name suggests, there is plenty of advanced information there also, simply and straightforwardly presented.

Zen Habits – I’m a regular reader of Buddhist and zen materials. Being mindful and present, appreciating simplicity: these are things that are difficult to bring into our working lives. But that’s what Leo Babauta’s blog is about, and I appreciate its quiet, gentle, and practical advice about working, living, and balance.

So that’s my list of indispensable feeds. I hope there’s something on it that helps you. If not, well, we don’t have a complaint department, but feel free to tell me what should have been included on the list. And Merry Christmas.

First, I Googled "two background images CSS." The solutions I found were complicated, or the background images didn’t move, or making them work with all browsers (I’m looking at you, IE6 and IE7) required some hacks. I’m not completely above using hacks, but I’d rather avoid them if possible.

Then I remembered that absolute and relative positioning create some interesting effects in layering elements. By specifying the second "background" image with absolute position, and applying a percentage on the right, I was able to make the image slide across the screen as the browser window was made narrower or wider. Applying relative position to subsequent elements allows them to appear "on top" of the image. See the demo here.

For the demo, the original client info has been replaced with Evo info (to protect the innocent, and because this is my blog post, so there!). Also, the content div does not include a Flash movie, and the div is transparent so the partially hidden image can be seen in full.

Here is the basic page structure as rendered by the CSS, numbered in the order in which the elements appear on the page:

Following is the CSS (classes important for the faux background effect are bolded):

* { margin:0; padding:0; }

body { font-family:helvetica,arial,sans-serif; background:#ccc url(images/bkgrd.jpg) 0 0 repeat-x; text-align:center; color:#777; }

.background2 { position:absolute; top:0; right:65%; }

.logo { width:740px; text-align:left; margin:0 auto; position:relative; }

.content { width:740px; height:370px; margin:0 auto; position:relative; background:#555; filter:alpha(opacity=60); -moz-opacity:.6; opacity:.6; }

.content p { color:#fff; padding:80px 80px 0 80px; line-height:150%; }

.links { width:740px;  text-align:left; margin:0 auto; position:relative; }

.links p.left { float:left; display:inline; font-size:11px; letter-spacing:.1em; padding:18px 0; }

.links p.right { float:right; display:inline; font-size:11px; letter-spacing:.1em; padding:18px 0; }

a { text-decoration:none; border:none; }

a:link, a:visited { color:#777; }

a:hover { color:#000; }

.content a:link, .content a:visited { color:#ccc; }

.content a:hover { color:#000; }

Download the files»

More and more companies seem to be getting the message: social media (blogging, Facebook, Twitter, etc.) presents great opportunities for making connections with their customers and would-be customers. And yet, many of them get it wrong, mostly because they fail to grasp that social media is not just another variation on broadcast media.

There is a scene in Cool Hand Luke, in which the warden (Strother Martin) says to Paul Newman’s character, Luke: "You ain’t gonna need no third set [of shackles], ’cause you’re gonna get your mind right. And I mean RIGHT." That’s what needs to happen with corporate marketing managers and small business owners before they venture into social media: they need to get their minds right.

Here’s an all-too-common scenario:

1. Marketing executive, experienced in managing marketing campaigns, ad campaigns, and PR campaigns, decides to "get into social media."
2. She has her ad agency create a blog and set up a Facebook fanpage. She gets her PR group to develop some social media-flavored promotional and marketing messages.
3. She assigns some junior staffers to create social media content using the messages: blog posts, Facebook updates, tweets, etc. All of this content has the hollow, promotional, not-fully-human, fingernails-on-chalkboard sound of corporate messages delivered out of context.
4. After several unfruitful months trying to make her messages "go viral," the marketing executive believes there is no ROI for social media. She tried it, and it doesn’t work. And she’s right. Her old-school, promotional, broadcast media approach to social media is guaranteed to fail. Every. Single. Time.

What marketing people and business owners need to understand is that creating an effective social media presence is like joining a conversation. Conversations happen between people who listen and respond to one another; they are not a series of carefully polished and self-interested messages. These kinds of conversations, based on listening and responding, generally lead to relationships, because we all value someone who listens to us.

Think of it this way:

How would you react if you were in a conversation with another person about how to barbecue spare ribs, and someone walked up to butt into the conversation with "I know you’re interested in spare ribs! This week only, I’m offering customers 20% off on all spare ribs, limit 5 lbs. per customer, offer void in combination with all other promotions." If you’re like most of us, you’d ignore that person in the hope that he would go away. If he persisted in pressing his own interests without making an honest attempt to form a relationship with you, eventually you’d probably excuse yourself. If you’re more direct, you might let him know that he’s interrupting a private conversation in which he is not welcome.

On the other hand, what if he walked up and hovered near you and the person you were talking with, listening intently for a few minutes before asking, "Excuse me, but how do you make sure your ribs stay juicy? Mine are often dry."? Most people would welcome him into the conversation, and within a relatively short period of time, would welcome any information of value that he brought to it (assuming he continued to listen and respond appropriately in your conversation).

You gotta get your mind right. And I mean RIGHT. Then start blogging and setting up Facebook fanpages.

I did something out of character a couple of days ago. I started a LinkedIn group: New Mexico Bloggers. For the most part, I’m not a group kind of guy (at least not in an active sort of way), but I want to encourage business and professional blogging in New Mexico, and this is one way of doing it. Ideally, such a group could provide both support and connections for New Mexico bloggers.

A lot of what happens with the group depends on me getting the ball rolling. So I have some work to do. LinkedIn is not quite the platform I had hoped it would be (a lot of spammers and blatant self-promoters), but it’s possible to have meaningful group interaction in a self-policing group.

The group will be platform-agnostic. We really don’t care whether your blog is on WordPress, Blogger, TypePad, Drupal, or any other platform. All bloggers have certain things in common, from the "blank screen" to strategic issues about how to grow your audience and how to utilize your blog to reach business and professional goals.

And then of course, there is the issue of blogging in New Mexico, a state that’s often behind the curve in technology and related trends. While I don’t see blogging as primarily a technological activity (the technology aspect is relatively trivial), most of the people I’ve talked to who don’t blog cite technology as one of the barriers for them ("I’m just not a computer person!"). To me that’s like refusing to drive to a restaurant because you’re "not a car person," but that’s another blog post.

So this is an invitation to all business and professional bloggers: meet me (and hopefully a lot of other New Mexico bloggers) on LinkedIn for discussions and other forms of group therapy. I’d like to create some in-person meetups as well, if the interest level supports them.

Disclaimer: not an actual Evo
web designer.

There are lots of approaches to website design. Other designers may legitimately find much to disagree with in this short list, or have items to add (please!). But these are the over-arching principles I try to adhere to in designing sites. At least they’re the ones I can think of right now.

The header, footer, and side navigation or subnav areas should be thought of as a "frame" for website content. They should be attractive, well-organized, functional, and support the brand, but visually, they should not compete strongly with page content for attention. If you have a boring website, the way to fix it is not to make the header and footer more exciting (which does not necessarily preclude the need to redesign the header and footer). If your website lacks excitement or interest, put your time, budget, and energy into making your content more exciting and useful.

Be semantic with content structure. When the style sheet is turned off, the content on the page still needs to make sense. If it doesn’t, it impacts our next principle:

Accessibility is not optional. Accessibility starts with recognizing that not every website visitor sees or experiences websites the same way you do, and caring about their experience. The next step is to understand how their experiences may differ, and making accommodations so they can access the content. It’s easy to overlook accessibility if it’s an after-thought: it has to be a priority.

Prioritize content. What’s the most important content on each page? If it’s important, make it prominent, because expecting people to read carefully to extract the nuggets is unrealistic. This means highllighting content by various methods, including subheads, boxed content, color, scale, and bullet lists. And white space.

Footers are useful for other things besides holding copyright info. It used to be that footers were barely used and little noticed. Blogs have changed that, and the aesthetic works well on "traditional" websites and blog-based websites. While they are still not (and shouldn’t be) a place to put content that needs to be emphasized, footers have become a good place to put tags, social media links, contact info, marketing messages, and other information in addition to the copyright statement and links to the privacy policy.