.. Your Daily Design Dosis

My Favorite Online Tools [Web Design]

| 15 Comments

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:

FavIcon Generator

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

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.

Dropbox

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)

BrowserShots

If you want to check the browser compatibility of your website, you can use BrowserShots.  It really is very simple to use, a very straightforward tools. All you have to do is enter your website’s URL into the address bar at the top, check or uncheck to select which browsers you would like to get a screenshot from, and ‘hit it!’. You can fine-tune your search by screen size and color depth, as well as enabling or disabling JavaScript, Java and Flash.

Adobe Kuler

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.

Toolkit Web Design

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.

Pingdom Tools

The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars.

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).

Google Analytics

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.

Google Webmaster

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

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.

Conclusion

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 or other great (free) online tools, please drop a comment and let me know what your favorite online tool is .. Thanks in advance.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

15 comments

on this article: “My Favorite Online Tools [Web Design]”
  1. I’m extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you modify it yourself? Anyway keep up the excellent quality writing, it’s rare to see a nice blog like this one today..

  2. Hi yash,

    You’re welcome .. Cheers & Ciao ..

  3. great information

    thanks

  4. Hi Richard,

    Thanks for your tips! Especially I appreciate the tip about netrenderer, cause the ‘main’ compatibility problems still are IE-related.

    But if you want to select more different browsers, browsershots stays my (very slow) nr.1 ;-P

    Thanks again for your comment, Cheers & Ciao ..

  5. I’d probably add the firefox Spellcheck and Screengrab plug-ins to that list as they are tools I use all the time.

    And, as browsershots is always very slow,
    http://ipinfo.info/netrenderer/
    is good for checking old versions of IE.

  6. Man, talk about a fantastic post! I?ve stumbled across your blog a few times within the past, but I usually forgot to bookmark it. But not again! Thanks for posting the way you do, I genuinely appreciate seeing someone who actually has a viewpoint and isn?t really just bringing back up crap like nearly all other writers today. Keep it up!

  7. Hi DTX Studios,

    you’re more than welcome! Why keep these resources to yourself when you can share ..?

    Thanks for your comment, cheers & ciao ..

  8. Wow.. Lot of cool tools here.. Thanks for sharing the useful resources.

  9. Hi Thomas,

    .. thanks for your remark! Yep, Kodingen works fine for me when I don’t have the possibility to code in Dreamweaver.

    Think DW is still my favorite web-tool no.1 (?), Cheers & Ciao ..

  10. Great list of resources, some new ones I haven’t heard of such as Kodingen, thanks for sharing.
    .-= Thomas Craig Consulting´s last blog ..Amazing Photography by Randy Rakhmadany =-.