If you truly want to develop learning, or any other type of content that can be viewed on multiple screens, including desktops and laptops, smartphones, tablets, as well as future devices, such as Google Glass, the only solid solution is by using Responsive Web Design principles. The real beauty of Responsive design is that it enables you to go from static content that is formatted using absolute dimensions (e.g. 1024 x 768) into content that is fluid, meaning the content will flow seamlessly from screen to screen regardless of the screen’s resolution.
Unfortunately, most rapid eLearning tools today require us to use absolute dimensions when developing learning, this means the resulting learning will only look optimized (or at least decently optimized) on devices with that specific resolution. However for all other devices with different resolutions, the learners will have to experience the content via swiping left and right and up and down in order to see the rest of the course.
A 1024 x 768 Adobe Captivate 6 course converted to HTML5 and viewed on an Apple iPhone
This of course provides a bad user experience. Until rapid eLearning tools embrace modern approaches to learning design for this new multi-screen world we live in, we may need to get our hands dirty with HTML5, Javascript and CSS3 media queries, which are all technologies that make up the principles around Responsive Web Design.
Having said that, this morning I came across this list of free online tools that can help us optimize our CSS files and I recommend you take a look at them. I have tested them all and my two favorites are CSS Beautifier and Clean CSS. I’d also like to recommend a tool called kaleidoscope, which allows you to spot the differences between two text files (e.g. css files), images and folders.
Here are the tools in the article I found. For links to the tools listed, click the link to the original article below:
These tools we are sharing today are free online tools that can parse, check, format, beautify, clean, validate, compress and optimize your CSS code for today’s web.
Online Tools for CSS Optimization
This is a brilliant resource for all web designers.
Devilous
Probably my favorite tool for optimizing large size CSS files. Devilous smartens your CSS code by removing unnecessary codes and making them tidy, clean and slick. This is probably the best CSS code compressor available on the internet right now. It also supports CSS 3.0
CSS Comb
The tool claims to be the greatest tool for sorting out your CSS codes. And you know what… it’s hard to argue with that. This tool really does the job better than anyone else. It can parse your code, sort your code alphabetically and through other standards, checks, formats and optimizes your CSS code. Supports up to CSS4 (Yes, there is a CSS4).
CSS Beautifier
Almost the same as CSS Comb but CSS Beautifier does not sorts your code as powerfully as CSS Comb does. Sometimes web templates and themes come with difficult to read CSS files. You just copy the code and paste in this CSS tool and voila!
CSS Lint
CSS Lint is one of the truest CSS tools for code optimization. It can do loads of stuff. Details would take too much time, so just go to site and click the arrow button on the right side of Lint button.
zBugs
This is one of the simplest CSS tools. It compresses and minifies your CSS code and converts the file into Gzip format. This tool also supports JavaScript.
CleanCSS
A fairly simple tool. Doesn’t support CSS3. Nice resource for beginners but not that awesome for the gurus.
ProCSSor
This CSS tool does nearly everything you can ask for from a code optimizer.