Category Archives: Technology

14 Web Site Graders To Test Your Redesigned Site

When you redesign or enhance your site, you make a lot of changes.  You change the content, the design, the front end technology, the back end stack, the user flows, the information architecture, everything.  It is tough to know what you have done right, and what needs help, particularly as it compares to other sites.  These sites can help show you what you have done right, what needs help, and how you compare to other sites.  I use them… and so should you.

  • https://website.grader.com/ – the gold standard of online web site graders. Shows performance, SEO, mobile capability, and security.
  • https://www.semrush.com/ – this site gathers a LOT of marketing information about your site… Monitor this information before and after your cutover.
  • https://validator.w3.org/ – Are you W3C Compliant?  Are you writing valid HTML?  Using this throughout your development will ensure your site is as readable and indexable as possible.
  • http://www.webpagetest.org – How long does the first view of my page take?  How about the second view?  This grader shows you both… just like the Developer Tools in Google Chrome.
  • https://developers.google.com/speed/pagespeed/insights/ – another technical site grader that can give you guidance where to increase performance.  Be careful trying to get 100/100, though… not everything NEEDS to be done.
  • http://nibbler.silktide.com/en_US – Evaluates your site down in four areas – Accessibility, Experience, Marketing, and Technology.  Still useful to get another view of your site.
  • https://www.woorank.com/ – “Run a review to see how your site can improve across 70+ metrics” – Marketing, SEO, Mobile, Usability, Technology, Crawl Errors, Backlinks, Social, Local, SERP Checker, Visitors.
  • http://www.similarweb.com/ – Another great site for a large, corporate web site.  But not a lot of information about performance.  Good to monitor usage and marketing metrics.
  • https://moz.com/researchtools/ose – Moz is known for its SEO tools, and this is an easy dashboard of information to monitor before and after your redesign.  The free version is useful, but the Pro version is even better.  Not a lot of tech help here, though.
  • http://www.alexa.com/ – 7 days for free, the paid version is the only one really useful.  Lots of marketing information is available, though.
  • http://builtwith.com/ – Very technical.  Shows you the infrastructure and software choices made by the development team.  You will be surprised.  Helpful for technology and information security teams.
  • http://www.google.com/analytics  – Free analytics tool.  Tells you who uses your site, how much, where they are from, what browsers, what time of day… a plethora of information.  Including Page Speed.
  • https://www.google.com/webmasters/tools – Free tool that shows you what index errors Google has encountered, things to make your site more indexable, and what your pages look like to the Google Search Crawlers.  Use this.
  • http://www.bing.com/toolbox/webmaster – Everything that Search Console is for Google, this site is for Bing.

So did I miss any tools that you use?  Are any of these ones you have struck off your list?  How do you measure results of your site before and after?  Leave a comment and let me know!

EDIT: Two more sites were recommended to me that help redesign projects, so I am adding them here:

Advertisements

2 New jQuery Plugins

I have just finished creating two new jQuery plugins.  I found them very useful for my own site, and thought I would share them with everyone else.  One is called FlickrTools, the other is SocialCards.

FlickrTools

FlickrTools is a simple jQuery plugin that queries the Flickr API, and gathers all the images that match a certain tag.  At some point, this can be expanded to query other properties in the API, but this is the simplest way to start.  I use my flickr images as part of my home page hero, and as a rotating carousel of images.  One of the nice things about this plugin is that the data retrieved from the query is reusable between both features on the site.  The hero is custom jQuery, whole the carousel uses Slick.

SocialCards

SocialCards is a jQuery plugin that queries all of your social media outlets and gathers all of your recent content into cards and displays them on your own site.  Currently it queries blog posts, Etsy, Flickr, Foursquare, GoodReads, Pinterest, and Tumblr.  Soon to be developed are Facebook, Google+, Instagram, Twitter, and Youtube.  It uses a masonry style based on the one I found on w3bits, that is configurable using CSS, included in the sample.  The plugin integrates with the Google API for easy RSS reading, and with Yahoo YQL API for other more complex data.

Please feel free to give these a try.  These are the 1.0 release, so they may not fit your needs exactly.  Reach out to me at [email protected] with any comments, suggestions, or constructive criticism.

Debugging Home Run – Problem Step Recorder in Windows 7

4E38RY7KZA4J

I just got an email about a really cool new tool built into Windows 7 that Microsoft used to debug their new platform. It is called Problem Step Recorder. The best thing to do is to post a snippet of the email right here. I think it says everything perfectly:

“In case you’re not aware of this, here is a little known Microsoft tool bundled with Windows 7 that can be extremely useful to illustrate a problem when testing an application. The diagnostic tool called “Problem Step Recorder” was originally produced by Microsoft during the development of Windows 7 Beta to assist their Quality Assurance team in debugging the OS. It uses a combination of screen captures with mouse tracking to record your actions and can be a great way of describing a problem to others. The program is launched from the Start menu by typing ‘psr’ or ‘psr.exe’ in the search field. You’ll get a floating applet that looks like this: When you hit the Record button, the applet tracks your mouse and keyboard input while taking screenshots that correspond to each new action. When you stop recording your session is saved to an HTML slide show that recreates your steps. It also allows you to add comments to further document the problem. I think it can be very useful as an attachment in [your bug tracking tool] for those hard to describe issues or as a “How To” document for end users.”

Which leads to other ways of doing this… you could youse WebEx or Windows Media Encoder to document any bug as a step-by-step. If you use WatiN, Selenium, or VS2010, you can also use their recorders to document any bugs you may find in a web application, hand that to the dev team, and then there is no guessing how to reproduce the bug.

Kudos to Microsoft, and to the folks who uncovered this!

Techno-Christmas 2008

Well, another Christmas has come and gone, and we have all exchanged our gifts. Everyone in the family got new gadgets to alleviate their tech addiction.

Nicholas got his long-overdue Xbox 360. We bought him the Elite version, with the wireless remote and the 120GB hard drive. Can’t get a new console without a shiny new game too, right? So we got him one of his favorites… the new NHL 2K9. He also got lots of gift cards, so that he could go out and get a game of his choice. He picked up Call of Duty 4, and another wireless remote, so that he can pwn me and his friends up in NHL 2K9 or Call of Duty.

Mary Ann was light on the technology this year… she did get some CDs that would help her learn basic Dutch in the car on her long commute to work every morning.

I was burned by the HD-DVD fiasco last Christmas, so this year my wife bought me the Sony BDP-S350 Blu-Ray Disc Player. And, just like the Xbox, you can’t get a new Blu-ray player without getting a couple new Blu-ray movies. My parents bought me Iron Man and Wall-E.

The great thing about technology is the same as the problem with technology. It is always improving. The Harmon Kardon receiver we had for 6 years or so has no HDMI inputs or outputs. I had been using direct component connections to the TV, but I ran out of those too, with all the different HD devices I have now. So I had to treat myself with a new Sony STR-DG820 A/V Reciever. Yay for 4 HDMI inputs! It only took 30 minutes to set up with my speakers and all the devices.

And with all that technology, I was able to watch Rutgers beat NC State 29-23 in the 2008 PapaJohns.com Bowl. RU Rah Rah!

Visual Thesaurus Bends and Stretches Your Way to Synonyms

I have stayed connected to the search industry ever since I was involved with the original launch of the Pravachol web site ten years ago. One of the ways I have stayed connected is through great online resources like Alt Search Engines. This week they covered a great new online tool that helps its users search for synonyms. Visual Thesaurus displays entries in the thesaurus graphically and separates them into individual entries through a tool called Thinkmap. This is very similar to the technology used in the TouchGraph Google Browser. Both of these technologies are similar to some of the social networking graphs that are used in Web 2.0 sites. Take a look at the new Visual Thesaurus, and the TouchGraph Google Browser, and let me know what you think of the usage of thetechnology, and what other ways you might like to see it.

20 Reasons Why DHTML Layers are Bad

A bit of background before I dive in to the post… My team and I are responsible for developing and supporting the Brand web sites for Bristol-Myers Squibb.  The Brand Teams and external Marketing Agencies develop a concept for their site, and they deliver a fully functional version of the site in  HTML to us to implement.  We take that HTML, squeeze it into our custom content management system, and hook up all of our custom features.  This custom content platform that we call LaunchNet has built in registration management, site search, web analytics, SEO helpers, and a full suite of other tools. 

With an environment like this, managing expectations becomes essential.  Sites need to be streamlined for industrial-strength campaigns involving thousands of concurrent users and possibly millions of site users per month.  From this perspective, DHTML layers is one of the banes of development.  I have broken out why DHTML Layers make me lose my hair into 6 categories: Performance, Metrics and Analytics, Accessibility, Implementation, user Experience, and Search & SEO.

Performance

When using DHTML Layers, your users are now loading multiple pages combined into one, some of which they may not even view, wasting download time and bandwidth.  Pages are slower to download, and are slower to draw inside the browser.  Processing is now heavier on client side, and is heavily dependent on JavaScript, which is known to be a memory hog.

Metrics & Analytics

Layers are not pages.  This is a simple fact, but needs to be stated again for emphasis.  Layers are not pages.  This means that anything that is dependent on the construct of a page will break.  Google Analytics tags, which are designed to fire on page load, will need to be re-engineered to fire on layer loads instead of page loads. 

Accessibility

Mobile users on phones, PDAs, tablets, UMPCs, and other lightweight devices with web browsers will have difficulty.  These browsers are slimmed down versions of their bigger brothers, and do not have all the functionality needed to process JavaScript properly.  Cross Browser Compatibility is very difficult to implement and maintain with DHTML Layers.  You cannot bookmark a layer, either, so your users will not be able to come right back to where they were.  Popup blockers may block the use of DHTML layers, as this is a common delivery mechanism for advertising.  And, DHTML Layers could affect your site’s handicap accessibility.

Implementation

Layers on the site increase complexity, and make maintainability more difficult.  If JavaScript is turned off, any functionality to show or hide layers will not work, so your users will not see it.  Developers will need to spend lots of time to make DHTML JavaScript function with content management systems, particularly when custom functionality is delivered in this way.  And, if layers are big enough, scrolling can become an issue, as the layers may run off the page, hiding content from view. 

User Experience

User Experience is the biggest reason to implement DHTML Layers.  It adds slick new interface to the hum-drum of static pages.  But designers need to keep in mind that performance impacts user experience.  This is an “I want it an hour ago” generation, and waiting even 10 seconds for a page to load will mean your users have left and gone somewhere else.  Layers are a not a standard UI convention for web development, and some users may be intimidated by the change in interface.  And, some folks may perceive layers as “popups”, which is bad for perception.

Search & SEO

Implementing site search while using DHTML Layers is very difficult.  Most search products are page based, and as stated before, layers are not pages.  Your content might not get crawled, or may be crawled incorrectly.  Layers could also cause a problem with search engines.  Your page could end up not getting indexed, or not indexed properly.  Invisible content may also be viewed by search engine crawlers as “gaming the system” or a black hat SEO practice, and may negatively impact your page rank.

Conclusion

When implementing, DHTML Layers, think twice about the impact on other aspects of your site.  Ajax can do a lot of the same kinds of things that DHTML Layers can.  Adobe’s Flash and Microsoft’s new Silverlight products can also deliver great new user experiences.  All of these have benefits and drawbacks that need to be weighed before jumping in.  You may be providing a slick new experience to your users, but you may be creating more problems than it is worth.  There are lots of other alternatives to explore.

Dynamic sitemap.xml Files in ASP.Net

I know this is not a new topic. It is not even a new topic for me. I have posted on defining what a sitemap.xml file is for, and on dynamic sitemap.xml files in C#. But my team is finally ready to start implementing this as part of our custom development platform for the external brand sites.

When one searches for dynamic sitemap.xml creators in Google, you get a plethora of sites back. Some are code, some are online based tools. Since we are looking to create our file dynamically from within the site on demand, that helps narrow down our search. I have found a small number of code sources we can use to start with.

There is still the HTTP Handler from my original post. This project, ASP.Net Google Sitemap Provider by Bruce Chapman, is available on CodeProject. You can also read about it in a blog post on his iFinity site. It still looks like the most flexible solution.

There is a great looking solution on the ASP.Net site by Bertrand Le Roy called Google Sitemaps for ASP.NET 2.0. It has been ported over into the ASP.Net Futures July 2007 package. This solution is an HTTP Handler that uses the Web.sitemap file to generate a sitemap.xml file on the fly.

Another interesting idea I found in my searches was some code that shows a site map when a user gets a 404 error. This solution is also implemented as an HTTP Handler, but is only for 404 Page Not Found server errors. This code is also available on CodeProject in an article called Generate a Google Site Map Using the HTTP 404 Handler.

Here are some other sites of note to look at. They have similar solutions to the ones above, and it is always a good idea to see what other people have come up with.

If anyone has any additional resources, ideas, or suggestions, please leave me a comment and let me know what you think.