Visual-Blast Magazine

CSS Compressors  - CSS Optimizers

One of the most important thing when developing websites is page loading speed, to load as quickly as possible, especially in the case of large websites with lots of CSS code where faster loading means increased usability and user satisfaction.

CSS Compression tools improves your load time performance by removing comments from code, placing each command in one single line, removing unneeded ‘white space’ characters like space, new line, and tab to reduce its size.

Keep in mind, if you really want to optimize website performance, after the development stage, you should go further with CSS sprites, minifying JavaScript, gzip compression and caching your files.

Try out these online CSS optimization tools, some of them also offer JavaScript compression, and see how they can  speed up website response time and save your bandwidth as well.

Online CSS Compression Tools

1. cssdrive.com CSS Compressor – comes in 2 modes: Normal and Advanced. You can choose from three levels of compression. The ‘Normal’ mode should work well in most cases, creating a good balance between the two.

2. Clean CSS – CSS Formatter and Optimiser based on csstidy available in English, German and French.

Continue reading …

CSS 3.0 Maker – a free CSS3 generator tool to experiment with CSS3 properties and values and easily generate and download a simple stylesheet for your site.

When changing the different settings in CSS3 Styles Panel, all CSS3 properties like Border Radius, Gradients, CSS Transforms, CSS Animations, Text Shadow and so on, are instantly applied with generated CSS code and preview.

There is also CSS3 browser compatibility panel where you can see browser support for all CSS3 properties you experiment.

CSS3 Playground – online tool – web application to experiment and learn about  new CSS3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing the experience on browsers that does not support them.

When changing the different settings in the panels at the left, all CSS3  properties like CSS3 radius, box-shadow, text-shadow, transforms,  are instantly applied with generated CSS code.

The styles applied when changing the different settings should follow the principles of progressive enhancements and will work in all browsers like Firefox, Chrome, Opera, Safari and Internet Explorer, but some properties will not have an effect when changed depending on the browser capabilities (IE 8 and older versions).

WebPageTest.org - online tool to measure website loading time – performance of your web pages from different geographical locations (US, UK, NL, DE, China,New Zealand).

Tool measure loading time in 2 runs, on the first and second visit (good to see if your caching works good). At the end of test you’ll get detailed results about compressions, caching, CSS, JS,  …

In detailed optimization results you can see what optimization steps you failed at, some graphs, optimization checklist, etc.

P.S. Another similar online tools mentioned before at V-B Magazine,  GTMetrix – web site speed analyzer and Load Impact - Web Site Stress Test.

Invoice Bubble – simple and easy to use web based application that allows you to create attractive invoices for free.

Invoice Bubble is easy to use, being geared towards freelancers and small teams. PDF attachments in emails lets you fire off invoices and estimates without requiring your client to visit the website to get the PDF.

You can easily set up weekly, monthly or yearly recurring invoices with a couple of clicks, track who has paid you and who hasn’t, add notes about your clients and also contacts.

Invoice Bubble is completely free with no limitations, only difference between free and paid accounts ($5 per month) is that they put a “powered by” link in your invoices and emails.

Team behind this app is currently working on the API, along with the iPhone application and other new features.

SwatchSpot – a free online tool to generate and save swatches of color for use with your projects.

Attractive feature is the fact that you can “lock” colors and shuffle other in order to find desirable color combination and save palette as .png image file.

The generated color palette also have the hexidemical value of those colors which you can easily use with your code.

TranslateThis Button is a lightweight Javascript translation widget. It translates any page (52 languages) using Ajax and the Google Language API.

TranslateThis Button is also available as a WordPress plugin.

You just need to copy and paste the TranslateThis Button anywhere on your site. The TranslateThis Button allows you to set a number of options like Tracking with Google Analytics, changing the button image, changing text options, changing supported languages and more …

SlickPlan – a free web based sitemap & flowchart generator enables you to easily create sitemap in seconds, and send it directly to your clients via an HTML link or as exported PDF file.

Slick Plan was developed with the web designer and developer in mind, but it can be used by anyone who needs a quick and professional sitemap or flowchart for their planning project.

SlickPlan Features: Unlimited Sitemaps, send your clients HTML sitemap links instantly, export your sitemaps as PDF files, easy organization, HTML navigation generator.

Load Impact is an online website load testing service that lets you load and stress test your website over the Internet,  with up to 50 concurrent, simulated users for free.

Load Impact simulates users accessing your site, it also records how fast your website / web page is loaded.

FindIcons.com – as its name suggests, FindIcons.com is an icon search engine helps you find free icons.

You can sign-up for a free account and add icons/sets to your personal Favorites box which can be accessed 24/7 from anywhere.

FindIcons.com is one of the largest searchable free icons database in the world, with over 290,000 free icons in over 2,100 icon sets.

Sophisticated search filtering and result matching system make it possible for you to get an icon you need for every design task.

With an advanced search system you can easily filter icons by size (define a range), color (select multiple colors), style and license.