Welcome to my website. I am always posting links to photo albums, art, technology and other creations. Everything that you will see on my numerous personal sites is powered by the formVistaTM Website Management Engine.

icon.linkedin.jpgicon.twitter.jpg

  • Subscribe to this RSS Feed
  • Creating a Skip Navigation Link That is Only Visible When it Receives Keyboard Focus
    03/30/2009 1:26PM
    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>

  • Web Accessibility Validators
    03/30/2009 1:09PM
    Here are links to some accessibility validators sent to me by my friend Karen:
  • Free Photoshop Patterns
    03/26/2009 9:29AM
  • Color Palette Pickers
    03/24/2009 9:14PM
    Here are a couple of cool websites for picking and generating color palettes:
  • Does Safari under Windows Render Pages Diferently than Safari Under Mac OS X?
    03/10/2009 10:03PM
    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.
Advanced Search

Categories

Archives