Case Studies Mobile Marketing

August 11, 2014 at 9:21 am

The 12 Best Web Design Apps and Tools to Use

If you are an iOS developer in the Philippines or elsewhere for that matter, you’ve probably used various tools in creating an app. This article is not about the tools that you’ve already used. Instead, it is about the underrated tools that you should be using. Some of the tools and apps featured here are totally unheard of until today.


1) CSS3 Click Chart

web design apps css3 click chartCSS3 Click Chart is more of a reference tool used specifically for CSS3 attributes. The best time to use the tool is when you forget the required order of CSS box-shadow values. The tool shows you the proper way to use specific attributes through a demonstration for each attribute.

2) Spritebox

web design apps spriteboxSpritebox is a system used in generating CSS sprite classes using the WYSIWYG interface. You simply have to upload the sprite image. With the use of the WYSIWYG tool, define and preview each element within the sprite. Lining up the graphics will be easier with the use of this system.

3) CodeKit

web design apps codekitCodeKit is a Mac app, making the lives of SASS developers easier. CodeKit compiles the SASS files automatically. It also optimizes the file sizes of the images and reloads the page live while on the browser window.

4) Cloud9 IDE

web design apps cloud9 ideCloud9 IDE is an open-source editor mainly used as an online development environment. Cloud9 IDE is used for JavaScript, CSS, HTML, PHP, Java, Ruby and Node.js applications. You are free to write your own extensions for connecting any web-based platforms.

5) Patternizer

web design apps patternizerPatternizer is a tool that can be used in generating CSS3 stripes or checks through the use of online interfaces. The tool has its own library of available patterns. You can also customize the stripes and checks in terms of the width of gaps, angles and color.


web design apps xrayXRAY is a bookmarklet allowing the interrogation of a page through viewing the box model information regarding the page elements. XRAY must be dragged onto the bar. The next time you view a page, click the icon and then click the page element that requires interrogation. A popup will display the data about that element including its position, basic style and classes and IDs.

7) PrimerCSS

web design apps primercssPrimer is a web tool that allows pasting HTML into the window directly. Then, it come up with blank CSS on the basis of the classes and IDs used in the pasted HTML. PrimerCSS is for those developers who create their markup first prior to applying styling. What the tool does is to parse the HTML, grab classes and generate empty CSS nodes sets required for developing CSS.

8) CodeAnywhere

web design apps codeanywhereCodeAnywhere is an app wherein the users can simply login to access the files. The files you kept open when you logged out will still be open when you login again on the app. CodeAnywhere supports CSS, JavaScript, PHP, HTML and XML.

9) CodePen

web design apps codepenCodePen refers to a social code sharing app. This means that frontend codes are created through sharing. Entering CSS, JavaScript and HTML is required before it can display the combined results at the pane beneath. You can save your own Pen and share it. You can also explore other Pens. CodePen is thus a great tool to show off your work, troubleshoot and demonstrate bugs.

10) Opera Mobile Emulator

web design apps opera mobile classic emulatorOpera Mobile Emulator is a program where users can test how the app looks on Opera browsers. The program is available for Max, Linux and Windows users.

11) Adobe Brackets

web design apps adobe bracketsAdobe Brackets is an editor built on various technologies like CSS, JavaScript and HTML. Brackets provides you with Quick Edit views that, in return, provide context-sensitive access to the contents.

12) HTML5 Boilerplate

web design apps html5 boilerplateHTML5 Boilerplate is a boilerplate template for HTML5 developers. Downloading the latest version is required though.


The list is not exhaustive. Nonetheless, the apps and tools featured above are very helpful for any developer. Meanwhile, if you think an app deserves the spot in this list, let me know.


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>