Website development tools for publishers
There’s a never-ending stream of new tools that pop up every day to help us become better web developers. We have a dashboard of tools we look to for ideas, assistance and even implementation, and it’s safe to assume that you probably do too.
Last year we discovered and shared a lot of website development tools that we use and want to pass on. In case you’re new here or missed a few, here are our favorites.
[text_ad]
Website Colors
If you’re redesigning your website, or simply enjoy the art of color, consider these popular website color schemes and the tools that helped develop them.
- ColourLovers: A site dedicated to complementary color palettes. Their website trends section can tell you all of the most popular color palettes on the web right now and offer endless inspiration.
- Color Scheme Designer 3: Allows you to create your own complementary color palettes.
- Color Blind Filter: Look at your site through the eyes of someone who is colorblind. This perspective can really help you identify where your site lacks contrast.
A/B Testing
Website testing ensures that you’re always getting the most of all the SEO and content work you put into attracting website visitors.
- Google Content Experiments: To say that Google Content Experiments (GCE) is a very basic A/B tester would be an understatement. But its simplicity is also what makes it so great. Within Google Analytics, you assign which page from your live website you’d like to test within the GCA dashboard. Then you can add up to six different variations to be tested. There are plenty of good paid A/B testing tools too, like Unbounce and Optimizely.
- CrazyEgg Heatmaps: CrazyEgg creates a heatmap of where users click on a particular page. The more they click the redder the area will be in heatmap. It’s an excellent tool to see where people are clicking on your site. You can test order form positions, advertisements, new content, and any kind of clickable area. You can see which navigation buttons they use, too. After enough visitors come to your site, you’ll know what’s hot and what’s not. On the same note, there are lots of cool heat-tracking tools you can use like ClickHeat and Click Density.
- Visual Website Optimizer: Similarly, this tool allows you to create multiple versions of your website and define what you want your visitors to do, and then it splits your website traffic among the different versions and selects the best performing site. This tool’s website boasts over 10,000 users, including major companies like Microsoft and Groupon.
[text_ad]
Website Review
Outside opinion is valuable. Two of the following tools are automated and can give you everything you need to know about where your website needs tweaking.
- HubSpot’s Marketing Grader: This tool will take you through the funnels of your website and tell you where you dropped the ball. It will tell you if you blog too much, or too little, whether you’re missing crucial social media elements on the site, and more obscure things like whether your headlines are too long.
- SEOMoz: SEOMoz has an On-Page Keyword Optimization tool (among many other great tools) that will basically create a report that tells you how good you are at SEO on any given page. Monthly membership starts at $99/mo but they do offer a 30-day trial. SEOMoz is cool because they keep buying companies that have created self-analysis tools for SEO and Social to add to their toolbox.
- Mequoda Website Scorecard: Our Website Homepage Ideas white paper gives away the scorecard and grading criteria we use to analyze all of our client and competitor sites.
Prototyping
As recently as 2006, we were still building paper prototypes with paper and cardboard – now we have web apps!
- Omnigraffle: Great cross-platform software tool for creating wireframes, and comes with an iPad version for prototyping on the go. Only available for Mac.
- ScratchPad: It hasn’t publicly launched yet, but this tool is sort of the Pinterest of web design tools. Anytime you visit a website where you like the way a button looks, or how a headline is styled, or a call-to-action is placed, you can clip those elements and store them. When you’re re-designing your website or making updates, you can look back at all the smart design decisions you liked.
- Pencil: This is an open-source, cross-platform tool for website prototyping, including mobile prototypes.
Typography
The fonts you choose need to be readable and serve the theme that you’re working towards.
- CSS Type Set: This helpful tool allows you to paste copy into the text box, then select the font, size, color, and special formatting options. Then you can view the CSS version of it immediately to the right.
- TypeKit: This tool is for using fonts on your website that aren’t typically found on the web. Fonts are loaded through your stylesheet and the tool allows visitors on any platform or browser to see them correctly.
- WhatTheFont: When you see a font you like, but can’t figure out what it is, this tool allows you to upload a screenshot of the font. Or, you can answer a series of questions about different letters and it usually can figure it out for you.
Website Speed
Your website should load in three to five seconds, and that includes the stylesheet files that illustrate the fonts, colors, styles and structure of your website.
- CSS Compressor: This tool compresses your CSS so it’ll load quicker and save on bandwidth.
- Pingdom: This tool will test your full website page by loading the complete HTML page, including objects such as images, CSS, JavaScripts, RSS, Flash and frames/iframes. The tool then acts like a web browser and loads the page to tell you how fast or slow it loads.
- Google’s PageSpeed: You’ll have to sign up for an invite, but PageSpeed “fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google’s servers across the globe.” As of today, the current service is free to webmasters who apply and are approved, but will be paid service in the future. Alternately, you can download the free Firefox or Chrome PageSpeed plugin.
What are your favorite website development tools? Share them with us in the comments!
By the way, for all professional services inquiries, we offer prospective clients a 30-minute no obligation needs analysis with our CEO and lead consultant, Don Nicholas. Schedule a call now.
Editor’s note: This article originally published in 2013 and has been updated.
