Site Testing Checklist

It’s wise to test your site as you’re building it. Check your pages for accessibility, for validity, for appearance and function as you go along. Don’t wait until you’re finished to think about things like valid code and accessibility.

Even when you do those things as a normal part of your process, you still need to perform a number of tests after the files are uploaded to a live server. Here’s a brief checklist of things you need to test when your site goes live.

  • Validate HTML and CSS
  • Run accessibility checks
  • Check every function and script
  • Check spelling and grammar
  • Check page appearance in a variety of browsers
  • Evaluate the site with CSS disabled
  • Evaluate search engine friendliness

    Useful Links: Transitions and Transforms, the written word, Chrome

    CSS3 transitions and 2D transforms by Opera’s Molly Holzschlag and David Storey is an excellent tutorial explaining these exciting new CSS properties. Browser support isn’t universal yet, but don’t let that stop you from making the most of CSS3.

    The word is dead. Long live the word. Study: Rumors of Written-Word Death Greatly Exaggerated at Wired reports on a study finding that the rate of reading tripled between 1980 and 2009. Go see what they think the reason is.

    Google’s Chrome grabs the No. 3 browser spot from Safari. In just 16 months, Chrome has outpaced Safari in browser numbers. Firefox is still at number 2, and IE remains on the top. But the good news that IE8 is overtaking the train wreck of IE6 in significant numbers.

    Why Can’t Twitter Be More Like Facebook or Linked In?

    It can. Are you looking for a way for Twitter to locate mutual friends or people who know people you know? I love this feature on Facebook and often find BlogHers or long-lost classmates based on the application’s suggestions as to people I may know because they know people I know. People who know people. Or some such.

    Now there is a Firefox add-on that will help you locate mutual friends you may share with the people you follow on Twitter. (Yeah, sorry, it only works in Firefox right now.) It’s not exactly like what happens on Facebook, but it can be helpful.

    Several tools for finding mutual friends on Twitter are described in the Web Worker Daily article by Doriano “Paisano” Carta at How to Find Mutual Friends on Twitter. The tool from the article that appealed to me is the Ul.timate.info add-on for Firefox.

    It wasn’t just me who found it interesting. Heather squeeed about it on Twitter, so I thought I should give it a try.

    Before I get too far into the description of what ul.timate.info does in Twitter, you need to know that it also adds features to Facebook, MySpace, FriendFeed, foursquare, and bit.ly.

    Here’s what happened when I installed the add-on. It was a bit confusing at first. Normally, when you install a Firefox add-on, you set up your preferences for the new tool using the Preferences button in the add-ons window. But the Preferences button for Ul.timate.info was grayed out.

    grayed out button

    The instructions on the web site said to right-click (or ctrl-click on Mac) on a Twitter name or image to see a menu that would allow you to find mutual friends. I tried this about 50 times. It didn’t show me the menu! (The definition of stupidity; when it doesn’t work keep doing it the same way.)

    Finally I noticed an ul.timate.info menu option way up at the top of my screen in the Firefox menu. Why didn’t the download instructions say this? Especially since it departs from the norm for add-ons? Application developers don’t spring for good technical writers to explain their new apps—one of my pet complaints.

    the menu in the top menu bar

    I selected Settings, then entered my Twitter name and password. Now the magic worked. A right-click (or ctrl-click) showed me all these lovely new menu options, including the longed-for View Mutual Friends.

    the new menu options

    I tried out a few people to see how many mutual friends we have. I have zero mutual friends with singer @dianebirch. That’s okay. I just follow her in case she ever leaves New York and goes on tour somewhere close to me. I don’t care who her followers are. But I have 34 friends in common with @jenlemen. I care about who her followers are. We share some interests. I may check her followers (I can do that with the ul.timate.info menu) to see if she found someone I’d really like to follow but don’t. Yet.

    my mutual friends with jenlemen

    I wish ul.timate.info would be more like LinkedIn or Facebook’s friend recommendations. I wish I could click on someone’s name and get a few suggestions as to who might be a good fit for me to follow. Even though it isn’t quite effort free to find mutual friends, I can still get some helpful tips and information from this tool. Plus, it stays out of the way when I don’t want to use it, always a good thing.

    If you try it, let me know what you think of it.

    Cross posted at BlogHer.

    Browsers, schmowsers

    My local newspaper carried an article on Sunday that claimed that Google’s Chrome was a much better browser than the competition, particularly Internet Explorer. I don’t disagree with that conclusion, but there have been better browsers than IE around for a long time: Firefox, Opera, Safari and others. Yet IE still holds the majority of the market in its grasp.

    If it cost extra to download Chrome or Firefox or Opera that fact might make sense. But the better browsers are free. Free. What holds people back? Here are a few possibilities, in no particular order:

    • People don’t like downloading and installing apps they aren’t familiar with
    • People don’t want to deal with more than one browser
    • People don’t realize they can transfer all their bookmarks and settings into a new browser
    • People aren’t sure what a browser is because they think Google is the Internet
    • People don’t have any more room on their hard drives for another app
    • People don’t care about web standards so concepts about superior standards compliant browsers are meaningless to them
    • People are forced by their corporate management to use a particular browser
    • People by Windows machines and accept the browser that comes packaged with it

    I’m sure you could add a few more items to that list. It’s complicated, isn’t it?

    I think educators can make a difference over time. If technology in the classroom supported and encouraged browsing with a better browser, it could create a lasting effect on students after they left the classroom. What browser do you have your students using?

    Useful links: online learning, browser basics, the personal blog

    Usability Issues that Impact Online Learning from Faculty Focus doesn’t mention specific tools that meet some of the standards suggested for good usability in online learning, but it does tell you some things to strive for:

    Good usability for online learning materials means the site, content, and media are easy to find, use, and navigate. And good usability for people means the interaction tools (such as email and discussion forums) are easy to use and facilitate getting input or help as needed.

    It would be nice to see an exploration of the usability of the major online learning systems common to colleges. Has anybody done something like that already?

    A Google video that will soon be added to the resources deemed worthy of being included in the InterAct Curriculum is Google Explains What a Browser Is. Excellent explanation of basics for the newbie.

    I think it says a lot about the economy, the culture, the Internet, and the power of personal blogging when Dooce can raise money for charity online by selling photos of The Former Congressman Charles. What was it my English teacher used to say? The personal is universal . . .

    Summary of eHow articles for October

    Santa Fe Style

    I spent some time in Santa Fe in October. My friend Patrica got married there. Woohoo! The ceremony was at the beautiful Pecos National Historical Park outside Santa Fe in the mountains. This photo of typical Santa Fe architecture is the Inn at Loretto near the state capital in Santa Fe.

    On eHow, I posted these articles:

    Codeburner Add-on for Firefox

    You now have access to all the Sitepoint References for HTML, CSS, and JavaScript available in Firefox as an add-on. You can download the  Codeburner add-on free from Sitepoint.

    The references provide syntax information, browser compatibility charts and sample code for HTML and CSS.

    The new add-on was just released. For a limited time, you can get a free book as a bonus when you download it. The book is Build Your Own Firefox Add-on.

    If you are a Firebug user, you may realize that these same reference materials were available as a part of Firebug. The new add-on eliminates the Firebug step and gives you quick access to the reference materials at the bottom of the Firefox page.

    the codeburner icon under the pointing fingerIt’s a simple toggle open and shut to see the reference panels. When you install it, a Codeburner icon will appear on your status bar. Just click the icon to open up the references. You see it here on my status bar with the pointing finger indicating which icon it is.

    When you initially open it, you may have to futz with the drag handles a bit to get all three windows to show up and sized the way you want.the codeburner windows

    In the left window you can search for an HTML element, HTML attribute, or CSS property. As soon as you start typing in the search box, you see results on the right. I typed “padd” before I stopped typing, and got a number of results involving the word padding. In the center window, you see information about browser compatibility, standards-compliance, and a brief summary of usage. If you don’t find out what you needed to know, there’s a link to the SitePoint References online. The window on the right gives you a generic example of the element, attribute or property you searched for in use. The window on the right will display information for which ever of the numerous items in the center window you select.

    select an item from the DOM menu

    You can learn about the elements and properties based on the page you are on. Select the DOM option in the left window, navigate through the DOM tree to find whatever you are interested in, and select it. I selected a <p> element in the image above.

    If the code example in the right window is not enough information for you, you can click the “More information online” link to see a live demo. (The same function is available as an option in the contextual menu you see when you right-click on at item in the search results window in the center.)

    Don’t want half your browser space taken up by the Codeburner pane? You can detach it into a separate window with a click on a small up arrow near the X that would close it completely.

    The reference material available with the Codeburner add-on is already available from Sitepoint, in books, and was part of the Firebug add-on. The new add-on is a convenience. It can give you quick information without a lot of effort. If you are at that stage in your learning curve where you still spend a lot of time looking things up, you’ll love this one.