Creating a Skip Navigation Link That is Only Visible When it Receives Keyboard Focus

Adding a "Skip Nav" link to your design can sometimes compromise the look and feel of the page.  Moreover it can confuse those visitors who have no idea what it means.

A good solution is to create a Skip Nav link that is only visible when it receives keyboard focus.  This happens as a user is tabbing through the page.

To do so, use the following styles and markup:

Styles:

#skip a,
#skip a:hover,
#skip a:visited
    {
    position:absolute;
    left:0px;
    top:0px;
    width:0px;
    height:0px;
    overflow:hidden;
    }

#skip a:active,
#skip a:focus
    {
    width:auto;
    height:auto;
    }

Markup:

<div id="skip">
    <a href="#skip">Skip Nav</a>
</div>

<p><a name="skip"></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

How to Set Up Your Website to Weather the Recession and Play the Internet Attrition Game

There are many businesses that are seeing their sales diminish and are realizing that they are going to have to cut costs to survive.  There are some businesses that wont make it and they and their websites will simply go away.

If your business is contracting and you need to batten down the hatches what should you do to survive the lean times that also helps you gain a better position for when things start to turn around. The number one mistake that we see people making is simply turning off their website to save money in the hopes that when things get better they will switch it on and pick up right where they left off.  Unfortunately, it doesn’t work that way.  Once you discontinue a website any of the search engine ranking that you have built up will go away.  You also break any of the bookmarks that people made of your pages.  When they try to access your site and it is gone they will assume that your business is gone too and might purge you from their rolodex.  At the very least, they are not likely to think of your business for future needs and/or referrals.  In general, turning off your site is the last thing you do when it is already too late.

Another mistake that we see people make is to panic and put together a direct mail campaign, buy a list and start cold-calling, or make other one-time marketing purchases like TV or radio ads.  In general, we suggest developing a marketing program with activities that have leverage and a force multiplier, as they tend to be less costly up-front and have residual effectiveness.  Not to say that the aforementioned marketing activities don’t work, its just that they typically require heavy continued investment to pay off.

Here three things that you can do with your website to help you through the recession:

  1. Keep your website up and current:  As mentioned, this is rule number one.  If you have to switch providers or cut back on some features to reduce costs because youve cut everywhere else and something has to give just make sure to keep something online.  Even a simple website with a full list of your products and services, your contact information and information for your visitors about how you can best help them is better than nothing at all.  Adding a Blog, or setting up a Whats New to help keep your site current.  Making updates on a regular basis and including the date when the updates are made will help give people the confidence that things are happening with your business and that you will be there for the long-haul.
  2. Set-up an e-mail newsletter:  This is a great outbound marketing activity that can be done very affordably.  Whether you use a third party service, or whether your provider includes an integrated feature, this is a great way to keep in touch with your clients and prospects and to help drive traffic to your website.
  3. Content, content content!:  Fill your website with as much content related to your products or services as you can.  If you already have your site set-up with a content management system which enables you to make your own edits then you won’t incur any additional costs; just your time.  Just make sure that you keep your audience in mind when crafting your content.

As far as playing the attrition game goes, if you can keep things going and keep your website up and running you will have a much better online position once things turn around.

The websites that previously had a higher search engine ranking than yours and that were either deactivated, or went away forever are going to be “giving-up” those slots.  If you keep your site up and current you will come out of the recession with a larger share of your industry’s Internet pie.

So, when having to make tough budgetary choices keep in mind that even in tough times lay opportunity for future prosperity.  Keep your site up and running and you will come out of this in a much better position to grow the online portion of your business.

If you have any questions or need some ideas for your specific business situation, feel free to give me a call at 301-956-5400 or send me an e-mail.

— Ryan Chapin
President, Nuts & Bolts Interactive, Inc.

Does Safari under Windows Render Pages Diferently than Safari Under Mac OS X?

The following is a set of composite screen shots that were generated to
answer the question: "Does Safari on Windows render pages the same way
that it renders pages on the Mac?".

My conclusion is that it does.

Click here to see the composite screen shots.

What I did was to take a screen shot of exactly the same web
page on a Windows XP machine running Safari 3.2.2 and a Mac running
3.2.1. I used pages that I knew contained complicated CSS layouts (I
know this because I designed and built them myself). I then composited
them in Photoshop, laying the Mac screen shot @ a 50% opacity over the
PC screen shot.

I was actually shocked to see how closely they rendered the
pages. In most cases, exactly, down to the font spacing. I have
included links to each of the pages below for viewers to check them for
themselves.

Furthermore, when working on another project, I noticed that a
page wasn’t rendering correctly in Safari 3.2.1 on the Mac but was in
all other browsers on the PC. I checked it on the PC with Safari
version 3.2.2 and it rendered the exact same anomaly.

My conclusion is that the 3.2.x version of Safari renders pages the same under both Windows and Mac OS X.

CSS: Setting line-height on the body Tag Can Causes Un-Wanted Rendering Anomalies

If you have content on your site on which you want to set a custom line-height, doing so on the body tag can cause some unwanted side-effects and rendering anomalies in some browsers.

My suggestion would be to set the line height on the specific content container (div, span, ul, etc.).

Test Image for Tuning Pixel Clock and Phase on an LCD Monitor

If you have ever tried to get an LCD tuned just right when using a KVM switch you’ll know that the key is in the pixel clock and the phase settings.

Download and use the attached gif as a test image with which to tune your screen.

Make sure that it is being viewed at 100% (not scaled in your browser) and set your pixel clock so that the pattern is uniform across the screen.  Set the phase such that there is minimal distortion or "static" on your screen and you should end up with the best viewing settings on your monitor.

Removing Extra Whitespace Between List Item Entries in IE

Using a CSS styled unordered list you can create a fairly sophisticated navigational bar with rollover states.

In IE6 and IE7 without some special consideration, you end up with spurious white space rendered between the list item.

Click here for and HTML example of the problem (you’ll need to be using IE 6 or IE 7).

Click here for an example of the fix
and a detailed explanation of how to do it.