Most web designers and developers start with learning the basics of HTML and CSS, but quickly will find their way in the existing array of free online tools to use to create great websites.
There are lots of web design tools available on the internet, which can help you to accomplish your tasks easy and quickly. With the help of these tools you can test the page-speed, optimize keywords, manage your web-typography, etc. But also choosing colors for your project or making your website browser compatible can be a very hard task.
As you can read in the intro, there are all sort of free online tools you can use for designing your websites. Rather than narrowing the focus, I’ve tried to cover various tools for the design and development process of your website, .. here is my little own web-toolbox:
Looking for a quick and easy way to create favicons for your website? Dynamic Drive is an excellent FavIcon Generator. It’s effortless to use, just select any 16×16 px image (provided it’s a gif, jpg, png, or bmp) you want to turn into a favicon, just follow the simple instructions generated to create an eye-catching favicon that will help your website stand out in your users’ favourite lists.
960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Kodingen can be used unregistered or you can create an account to use advanced functions as such as SVN repositories, collaborative work, etc. This editor features templates for most programming languages, syntax highlighting, line numbering and more. A great tool if you must go deep into code!
Font-Face & Google Font Directory
Most web browsers – Apple’s Safari, Mozilla Firefox, Opera, and Microsoft Internet Explorer – now ship with support for linked fonts with the CSS-command @font-face. This technique allows specified fonts, that are stored on a web server, to be downloaded by the browser along with the HTML, CSS and images that make up the page. A great resource for @font-face fonts you can find on fontsquirrel.com
The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
For online storage, there is Dropbox, a popular utility that allows different users to sync and share files on different computers. Once installed, a Dropbox folder appears on your computer’s desktop. Drag files into the folder and they will automatically appear in the Dropbox folder on each one of your computers, laptops and smartphones (available for most smartphone platforms, giving you mobile access to all your files) and on the Dropbox website, making your files accessible from any computer in the world.
I especially use this with my clients, so that they only can see the specific folder that contains the artwork for my clients’ project. Something great if you need to share files bigger then the custom ’e-mail’-size (appr. 8 – 10 Mb, .. depending on your ISP naturally)
Sometimes it’s quite difficult to choose the right colors (colorscheme) to set a mood. That’s the moment you need to look at Adobe Kuler, a fully database driven Flash site created by the guys of Adobe Labs. Adobe Kuler gives you the possibility to choose, create, modify, mix and match colors as much as you want, until you stumble upon the perfect color scheme for your website.
You also can create your own color scheme in Adobe Kuler, with RGB and HEX codes included to download your color scheme so you can use it in Adobe Creative Suite. I especially like the possibility to extract color schemes from illustrations and images, you first need to upload them and select them from Flickr. To get some inspiration you can see loads of other peoples’ color palettes too.
W3C Markup Validation Service
The Markup Validator is a free tool and service that validates markup: in other words, it checks the syntax of Web documents, written in formats such as (X)HTML. The Validator is sort of like lint for C. It compares your HTML document to the defined syntax of HTML and reports any discrepancies.
You can view the list of objects either in load order or as a hierarchy. The hierarchy view allows you to see which objects are linked to in for example a CSS file. Every test also shows general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.
FileZilla, the free FTP solution
FileZilla Client is a free, open source FTP client. FileZilla Client is a fast and reliable cross-platform (Windows, Linux and Mac OS X) FTP, FTPS and SFTP client with lots of useful features and an intuitive graphical user interface. Everyone can use FileZilla on his/her own machine (for Servers, FileZilla Server is the right software).
This web analytics solution that gives you rich insight into your website traffic and marketing effectiveness. Its easy-to-use features now let you see and analyze your traffic data in an entirely new way.
SEO (Search Engine Optimization) Analysis Tool
This SEO Analysis Tool is to help you analyze and measure the ranking potential of your web pages. It doesn’t only analyze the Meta Tags of your pages, rather it tries to use the same spider technology as the search engine spiders themselves.
This Webmaster Tool helps you understand your website by providing you with detailed reports about your pages’ visibility on Google. You can see how Google crawls and indexes your site and learn about specific problems a user may have. You can submit your sitemap here, check your site for malware and even get some HTML suggestions too (the same META-tags on 2 or more pages).
Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
There are a lot of different online tools out there, all with the same purpose or some with great unique features. I’m not saying you need to use the above mentioned version, these are just the online tools I like to use on a regular basis when designing a website.
If you know even better (free) online tools, please drop a comment and let me know what your favorite online tool is .. Thanks in advance.