Not every web worker is a web designer, of course. But enough of us at least dabble in that side of things that it’s worth keeping an eye on tools to make web page design easier and better. Here are a couple that I ran across recently and added to my collection.
FoldSpy is a graphical tool to answer the very simple question: what part of your web page is “above the fold” (that is, visible without scrolling)? As you know, this is a question without a firm answer, because different visitors use different browsers and screen resolutions, run different toolbars and sidebars, and so on. After signing up with the service, you add a single line of javascript to your page header and then visit your web page using a #foldspy anchor. You’ll see a gradient overlay and status bar that demonstrates what percentage of visitors can see each part of the page. If you sign up for the free service, FoldSpy uses their own database of general browser statistics; for $6 per month you can get FoldSpy Pro which does the same thing using statistics collected from your site’s own visitors.
YSlow comes from Yahoo’s Developer Network. As the name suggests, this add-on to the Firebug plug-in for Firefox tells you why your pages are slow (admit it, you have slow pages too). It analyzes everything from the size of components to whether things are gzipped, JavaScript is properly minified, and ETags are configured, and gives you a report card with recommendations for improving performance. Not every recommendation will apply to every site (you’re unlikely to spring for a content distribution network for every client), but if you pick and choose you can find areas where a little work will result in a big improvement.
Best of all, both of these tools are free and easy to use, making it just that much more likely that you’ll do some of the cleanup chores that you probably knew about and were putting off.
{"source":"https:\/\/gigaom.com\/2007\/07\/25\/two-tools-for-polishing-your-web-pages\/wijax\/49e8740702c6da9341d50357217fb629","varname":"wijax_8aceb53f101dccb826c4912c3321ee8c","title_element":"header","title_class":"widget-title","title_before":"%3Cheader%20class%3D%22widget-title%22%3E","title_after":"%3C%2Fheader%3E"}