What is screaming in the web developer

Lately I have noticed a lot of new and useful tools that you as a web developer and web designer can use in your daily work and that make them a lot easier. With this list I would like to thank the developers of the tools and of course introduce and recommend each one. It's really interesting what is now possible and what ideas the developers of these tools have. But let's get started with the list of 15 useful tools for web designers and web developers. There are both new and existing ones:


As the name suggests, this is about placeholders for graphics. Brilliant! How often have you taken any photo when creating a website and changed it or used some fake images as placeholders for the later real images. You no longer need that, because thanks to Placehold.it you can create placeholders for the images in any size. The format, the color, the text and of course, as already mentioned, the size can easily be changed by changing the image path or the GET parameters. Thanks for this great tool!

Website: http://placehold.it/


The next tool has really helped me many times and saved a lot of work. getFavicon is a kind of proxy for favicons. You can have the respective favicon displayed from every domain and from every path in a domain. To do this, you simply give the tool the URL of the required domain including the path and the favicon is displayed. Class for lists with domains or URLs. Features like SSL, setting the default icon if none is found, decaching and a lot more make the tool really useful and very useful.

Website: https://getfavicon.appspot.com

Favicon.ico generator

Every small website needs those little funny graphics called favicon. The favicon is displayed to the left of the URL in the address bar of the browser and is used for bookmarks or in other services (e.g. via getFavicon, see above) as a graphic attachment to the URL of the page. Creating favicons has always been quite time-consuming. You had to create a small graphic with a maximum size of 32 × 32 pixels, save it as a BMP and export it as an icon using a separate program. Favicon.cc simplifies this process. In this online tool, you can pixel and create favicons yourself, or you can easily import and change existing images. The finished favicon can of course be downloaded and published on the site if desired. Very useful tool!

Website: http://www.favicon.cc

Ultimate CSS Gradient Generator

CSS3 offers an incredible number of beautiful new possibilities. One of them are color gradients that can be easily applied to any HTML element in any color, direction and size using CSS. Since each browser implements this a little differently, many lines of CSS code have to be written for a process. Almost impossible by hand. This is exactly where the CSS Gradient Generator steps in. With it you can choose the required colors or define them directly by entering the hex code and adapt and change the gradients via a Photoshop-like interface. If you are satisfied with the result in the preview, you can copy the generated CSS code and paste it into your own style sheet. Super easy and helpful. Just give it a try, it couldn't be easier!

Website: http://www.colorzilla.com/gradient-editor/


The loading time of a website is extremely important. Nowadays, who would like to wait longer until a website is fully loaded? One of the most important factors for faster website loading times is the size of images. TinyPNG is an online tool that significantly reduces the size of PNG graphics. Simply drag and drop the desired image or several (maximum 20 images and 2 MB per image) onto the space provided on the TinyPNG website and the "shrink" process begins, accompanied by a funny panda animation. After completion, the images can be downloaded immediately. Compared to Photoshop, TinyPNG reduces the size of the images by 40% and more - and that without any visually visible change in the image. Class! There is nothing more to get out of here. Very helpful - speed up your website!

Website: http://tinypng.org

CSS3 generator

In principle, the name reveals everything here. With the CSS3 generator, you can quickly generate CSS3 code for features such as border radius, box shadow, font shadow, gradients, RGBA, @ Font-Face and much more via a very simple interface. Unfortunately, -moz is missing in the generated code for Gecko-based browsers such as Firefox or Seamonkey, which can easily be added by hand. Very helpful for quick code generation, the tool should not be missing in any tool collection or link list of web designers.

Website: http://css3generator.com

Color Scheme Designer

If you have agreed on the main color (s) when creating a website, a logo or other graphic effusions, it is often quite time-consuming and difficult to find suitable colors so that the website or the graphic makes a harmonious and beautiful impression. The Color Scheme Designer helps here and quickly finds colors that match each other very well and thus enables the creation of a complete color scheme. Brilliant! By choosing the different modes Mono, Complement, Triad, Tetrad, Analogic and Accented Analogic, an infinite number of color combinations are possible on a desired basis. The tool has been around for a while, but I've forgotten something that will definitely not happen again, as the results of the tool are really quite useful and stunning. Anyone who has already tried something like this by hand in Photoshop and has not had any graphic training will love this tool all the more. Just try it!

Website: http://colorschemedesigner.com

100 random colors

Hundreds of random colors. This tool does exactly that and nothing more and shows a hundred random colors in a square with a hex code of the respective color. If there is no color to be enthusiastic about, you reload the page and get the next hundred random colors. Great idea and good to use for brainstorming and as a source of inspiration for colors.

Website: http://www.100randomcolors.com

Color Hunter

With the color hunter, you can find suitable colors from a picture or to a picture. The image can be added by specifying the URL or via upload. It's nice if you have a picture and want to use it to build a website or suitable elements on it. However, the tool does not always deliver satisfactory results and apart from the brightness there is no way to influence the result. But still very useful as a source of ideas and colors.

Website: http://www.colorhunter.com


The last color tool in this list, the ColorBlender, as a self-appointed color toolbox also offers the possibility of creating color schemes or color mixtures. Here you can set the desired output color on an RGB or HSV controller, on the basis of which the 6-colored plate or mixture is calculated. The finished mixture can be saved and used again later. For this you need a user account. Without registration, the result can be downloaded as a Photoshop color table or Illustrator colors (.EPS) or sent by email. In addition, you can view and use mixtures that have already been created by others. Very useful for color brainstorming or complete conceptions. A great tool!

Website: http://colorblender.com


Often you can use them, but you often forget them. We're talking about shortcuts. KEYONARY sees itself as a shortcut finder and, with its beautiful design, helps you with forgotten shortcuts. Of course, you can also discover or add completely new, as yet unknown screenshots. Shortcuts can be found by full-text search or by selecting the operating system or application. The idea, implementation and design is really well done and definitely worth a visit and bookmark!

Website: http://keyonary.com/

Google Web Fonts

You don't really have to say much about this tool, but it really has to be on my list. For a long time it was not possible to use fonts other than Arial, Verdana, Helvetica or Times on the web because it was not technically possible or could not run on all browsers and operating systems. Since Google Web Fonts, you can now choose from countless fonts and use the font on your own website by inserting the appropriate Javascript. Except for the 2% of visitors who have deactivated Javascript, which are mostly bots anyway, this font can be displayed in all browsers. And best of all: All fonts offered and usable there are open source and the service and its use are free. If you are still worried about the accessibility of your website because an external Javascript has to be integrated, let me tell you that Google servers have almost no failures and are among the fastest and most fail-safe servers on the web. Unbeatably good and indispensable. Thanks google!

Website: http://www.google.com/webfonts

Button maker

The most important action element on websites is definitely the button. It is used for almost everything important, it is pushed around like mad and it always has to look good. For the latter there is the ingenious button maker from CSS Tricks. Here you can create nice rounded buttons with gradients and shadows. A controller can be used to set the size, the padding and the size of the rounded corners. In seven color fields you choose the desired colors for the gradient, the background color, text color, frame color, hover color, etc. Finally, quickly select the font and as soon as you are satisfied with the result, you can click on - well? - Let the finished button (where else?) Generate the CSS code and copy it into your own stylesheet. Super easy to use and highly recommended. Hammer tool!

Website: http://css-tricks.com/examples/ButtonMaker/


If you want to integrate a source text or code editor on your website to allow editing of HTML, Javascript, PHP, Ruby or other languages, you can't avoid the best free Javascript code editor called CodeMirror. This editor offers endless possibilities, such as syntax highlighting for all common languages, shortcuts, auto-completion and many other functions that one is used to from a normal IDE. Thanks to the simple API, the tool can be wonderfully and infinitely expanded with your own items or existing add-ons. The tool has to be downloaded and integrated into your own website by installing CSS and Javascript, so it is not an online service, but I think it should not be missing here. Just awesome! Online code editing. That calls for new web-based editors. I think we can still expect a lot here. Keep on coding!

Website: http://codemirror.net/

Pingdom Full Page Test / Page Speed ​​Tool

As mentioned before, the loading time of a website is very important. To determine the exact loading time of a website, you can either use one of the numerous browser plugins, the most famous of which is Google Page Speed, or use an online tool such as the Full Page Test from Pingdom. As far as I know, Pingdom also relies on the measurement technology of the Google Page Speed ​​API, but the advantage here is that you can do the test via a website. Simply call up the website, enter the URL of the page to be tested and in (hopefully) a few seconds you will have the result in the form of time and bytes for the entire page and all elements on the page. The display of the detailed performance level and the detailed analysis tables complete the tool. This allows you to identify super weak points, which can usually be eliminated in a few simple steps.

Website: http://tools.pingdom.com/fpt/

Onedit CMS

The 16th and last tool on this list is an in-house development and runs a bit out of competition, therefore 15 +1 tools. It is a content management system, or CMS for short, that I developed. Such tools are already a dime a dozen, but the special thing about this CMS is that you can use it to edit existing websites without installing software on the web space or your own computer. By assigning CSS classes, certain elements of a website can be released for editing in the CMS. In Onedit you only have to enter the FTP access data for the web space (don't worry, everything will be encrypted) and you can start editing the website. The CMS is particularly interesting for web designers because you can create your own users and give them access to certain websites, sub-pages and functions. A white label solution with your own logo and domain is also possible. Onedit is free in the basic functions for a website and 10 subpages.
In the future, a complete article about Onedit will certainly appear here when the current further developments of the tool have been completed.

Website: http://www.onedit.de/

I hope there was a new and helpful tool for one or the other. I use a lot of these tools very often. Perhaps you know of other tools that would make a great addition to this list? I look forward to comments.

Additional links for useful tools:

Nico Puhlmann
Hey, I'm Nico and the founder of Stetic, a new generation analytics startup. I enjoy creating digital tools to help people optimize their online business.

Follow @NicoPuhlmann


What do you think?