35 Online Tools for Web Designers and Developers

Today’s web designers and developers have access to an incredible number of tools for use in their work of building and developing websites. As the demand for more complex and visually compelling websites has increased, so too has the selection of helper tools. The format of these tools ranges from full-fledged desktop applications, script-based pieces, browser add-ons and bookmarklets, to web service and cloud tools.

This month’s article is a round-up of 35 online tools that you may find handy for your next web development or design project. All are available as online tools – no downloads are required – so they are easy to use and experiment with.

We’ve included eight categories in our round-up of useful design and development tools – CSS, Grid/Responsive Design, Design Testing, Fonts, Graphics, Placeholder Text/Images, Networking, and Web Development. Even if you’ve used similar tools in the past, we invite you to look through the individual items to see if you find something new to save you time and effort in your work with online properties. We’ve come a long way from the days of simple HTML and iframes, and we can all use some assistance when it comes to covering all the bases with our clients projects.

CSS Tools

CSS Pretttifier
Just copy/paste your CSS (or upload the file or type a URL), choose whether to have it “neat,” “pretty,” or “awesome,” and ProCSSor will clean up and improve your CSS. With a useful – and optional – fail-safe mode, this tool is now also available as a native Mac application.

Remove Unused CSS
GTmetrix’s Page Speed tool provides a report for any web page, breaking down page load speed by a wide variety of factors. Can be used as a bookmarklet and to compare different web pages. With unneeded CSS rules often a factor in excessive load times, identifying which CSS-related processes are not optimized for speed of loading can be extremely important.

CSS Compressor
Cut down on the size of your CSS stylesheets by choosing which level (highest, high, standard, low) of compression you want (as level decreases, legibility of the resulting file also decreases). Just copy/paste the CSS you wish to compress. You can identify the specific properties you wish to compress (colors, font-weight, unnecessary backslashes/semicolons, etc.).

CSS3 Generator
Need some CSS but not quite sure how to code it? This tool will do the work for you, and covers a number of popular style items ranging from the simple to more complex. Examples of CSS styling possibilities include border radius, multiple columns, and shadows and transitions of various kinds.

Clean, Optimize and Compress CSS
Does your CSS need tidying up? With similar options to the CSSCompressor tool, this one also lets you upload a CSS file or access that file at a given URL. Has three compression levels (low for development, medium for staging, high for production) and four CSS options to choose from (colors, font-weight, lowercase selectors and unnecessary backslashes).

Create and Edit CSS Sprites
SpritePad has a three-step process for creating and editing CSS sprites in seconds. Drag and drop an image and the tool creates a PNG sprite and the appropriate CSS code for immediate use. A free account gives you cloud storage for your sprites. Premium features are also available, and a guided tour helps first-time users.

Grid / Responsive Design Tools

Modular Grid Pattern
This app works as an extension in Photoshop and can also be used in Fireworks and in GIMP. Via a browser connection, the grid setup includes layout width, baseline, gutter, number of modules, and module width and height. The resulting grid can instantly be converted into a PNG pattern, Photoshop pattern, or transparency.

Responsive Web Page Layout Generator
This tool provides you with an HTML layout and responsive CSS stylesheet files in response to the specifications you choose in the browser. In just a few minutes you can put together layouts for each of the planned pages for your site. Pick the size (laptop, tablet, phone, iPad and iPhone) and orientation of the desired layout and add the specific containers and their proportions for each page you plan to build.

Mokcup Designer
A local storage based mockup tool, it uses drag-and-drop functionality directly in the browser. The demo has common shapes, buttons, and input areas, to which you can add size and color attributes. Can be integrated with any RESTful API or Backend service.

Design Testing

Test Site at Different Screen/Mobile Resolutions
Screenfly is an application for testing the appearance of existing web pages in different screen sizes and resolutions to ensure they render well. Choose from popular hardware sizes (desktops, tablets, smartphones, TVs) or enter specific sizing. You can even create links for each resolution tested to include in a presentation or send to a colleague for input.

BrowserShots
This app provides screenshots of a web page from more than 100 browser versions on Linux, Windows, Mac, Gecko and KHTML/WebKit operating systems. Choose one, multiple, or all versions of specific browsers. Other options with various settings include screen size, color depth, and presence of Javascript, Java, and/or Flash. Limits exist on the number of screenshots you can request each day, but priority processing is available for a fee.

Automated Front-End Testing
This tool tests three major aspects – HTML5 validation, CSS3 validation, and JavaScript analysis (via JSLint), offering some filters and advanced analysis not found in similar tools. Works with all browsers, although it no longer supports Internet Explorer versions prior to 9. A demo and 30-day free trial are available.

Google Browser Size
Enter the URL of a web page and this tool will show you the percentage of the page that users of specific browsers will see after a Google search. The tool uses contour mapping to delineate viewable areas,. For example, the part of the page outside the 80% contour is not visible to 20% of those visiting the page via Google. The tool is best used for fixed layouts aligned to the left.

Fonts

Test Web Fonts on Any Website
TypeWonder allows you to Instantly see how your website would look if it used a different font. Just choose the font from the huge variety shown and click “Use!” Within a few seconds, your web page appears with the font substituted. Switch back and forth between the original and changed version with a click of the button. If you like the change, choose to get the code to integrate the change into your CSS.

Create Custom Icon Fonts
Create your own icon fonts with IconVault. Start by clicking on “create font” and either upload your icons or use the available ones. Results are downloadable in a couple of minutes. Their selection currently includes 10 social media icons and 21 iOS icons.

Preview Web Font Combinations
This browser-based tool lets you see how different fonts (Google fonts and some System fonts) will look when combined in the following different elements on a web page – H1, H2, body text, and background color. Options let you change color, font, size, line height and/or hide an element.

Graphics

Favicon Generator
Turn any image into a Windows favicon (.ico file, 16×16 pixels in size), the format still required by Internet Explorer and recognized by other browsers. Includes an editor function for adjustments after favicon generation or to create one from scratch. Include the code to integrate into your site.

Makeappicon
Makeappicon generates resized icons from your designs that are suitable for use in iPhone/Android apps. Also great for icon images to use on Apple Home screens for bookmarking purposes. Includes auto enhancement for smaller icons.

Create HTML5 Animations
Quick and easy animation of your image. Add text, backgrounds, special effects, transitions, hyperlinks and loop slides. Templates and tutorials are available in a variety of styles and choices.

Generate Noisy PNG-Images
Need to create a PNG file that has added noise? Choose your background color, size, intensity, and opacity and this tool will generate a file and download it for use in your web project.

Online Image / Photo Editing Tool
With a few different varieties available, including a mobile version, this app is an extremely popular photo editing tool that handles most basic image-related tasks. Offers 600+ different effects, borders, and overlays.

Create Colorful QR Code
QRHacker takes QR code creation a step further by letting you add personalization or artistic elements to your QR codes without affecting their readability. Tracking and advanced features are available with a subscription.

Placeholder Text and Images

Random Text
In addition to the usual dummy text that most random text generators supply, this tool adds a couple more features. It will generate paragraphs, headings, or lists in either Lorem Ipsum or Gibberish, but will also let you copy/download it with the HTML code included.

Fake Image Placeholder Generator
Fakeimg.pl quickly takes care of the task of creating placeholders for images that you will add later to your site. Just enter the size of the image and add optional text or color information to the end of the URL of the tool to generate the image placeholder. For example, the URL http://fakeimg.pl/660 results in a 660×660 pixel, shaded image) being generated.

Networking Tools

Online FTP Client
Net2Ftp is a web-based FTP client with a free trial. Use it to accomplish all the usual upload/download tasks as either an administrator or user. It also offers code view, chmod, zip/unzip of files, software installation capability, and calculation of file/directory sizes.

Pingdom Website Speed Test
Site load time is increasingly important, and this tool lets you test the time to load a particular page and any bottlenecks discovered during the process. You can even sign up to have your site tested each minute and be notified of problems via email, SMS, or Twitter at no charge.

Load and Performance Testing
A tool for testing the performance of a web page under certain conditions and scenarios related to virtual users, LoadImpact can be very useful for sites expecting a lot of traffic. Geographic load zones, server metrics, and extra IP addresses can be customized.

Web Development

HTML, CSS3 & JavaScript Playground
This cloud-based development tool lets you write HTML5, CSS3, and JavaScript (separately or together) and test them in real-time. One great feature is its “hint” system, which guides you to create code with proper syntax. It’s free for any number of items, URLs can be shared, and a choice of different JavaScript libraries is provided.

Create HTML List With Options
Convert simple text into HTML lists or add options to elements quickly and easily with Listify. All you have to do is paste the text, choose the type of list, identify the delimiters you’ve used, and decide if digits should be ignored. The resulting HTML list can save lots of time you might otherwise spend adding list-related code tags.

RegExp/RegEx Builder and Testers
This free online testing tool lets you edit and test regular expressions in a simple interface. Built using Flex3, it also has a RegExp snippet sidebar with descriptions and examples for trial-and-error learning.

.htaccess Redirect Generator
Need to create or modify your .htaccess redirect file? This handy tool will generate the necessary code to include in the file. All you have to do is check off the items you want to include from the long list shown and provide the details requested (such as old and new file paths).

PHP Object Generator
Use this fast and scalable tool to generate object-oriented code for PHP4/PHP5 applications. With three simple steps, PHP objects are created using integrated CRUD. Free for both personal and commercial use.

HTML/PHP Form Generator
This free form generator is great for putting together simple HTML forms together with all the relevant PHP processing code. Client-side validation is also included, and up to 30 items can be added to the form skeleton. The final form you put together is sent to you via email.

MD5 Hash Generator
If you are working with sensitive data or just want to ensure the integrity of the data in your files, the MD5 hash generator tool creates a hash of a string in one easy step. PHP/ASP programmers and developers on MySQL, SQL, Postgress, etc., may find this to be a time-saver.

Web Technology Information Profiler Tool
BuiltWith provides information on the different technologies that individual websites – and websites as a whole for trending purposes – are using. Discover the most popular technologies for different applications or get a list of all sites using a certain technology, such as PayPal or Rackspace. A free trial lets you check it out, and the presence of optional geographic limiters provides focus to the resulting report.

About the Author

I’ve been working with iNET Interactive for 4 years now. Prior to joining iNET, I worked with eDEVcafe as the Director of Operations. I’m an avid technology enthusiast and love all things web related. When I am not working, I like traveling or spending hours playing Flight Simulator!