2 Must Have Weapons For A Web Design Ninja [Tools]

Today Responsiveness and Design are two concepts every website developer is expected to be good at.  Responsive websites designs are supposed to auto scale or re-size according to the screen or device they are viewed on. The main reason for responsive designs to gain importance is the fact that today users have access to varied devices mobile and stationary, with varied screen sizes and resolutions to access a website. Hence it is very important that the websites can automatically adapt and scale, while keeping their design and look intact. A lot of platforms on which websites are designed on tend to be ‘ready for mobile’, but in reality that doesn’t seem to be the case.

Similarly in the case of web design, newer and newer concepts are being used everyday. Some sites prefer simple designs while some other parallax scroll. One of the major backbone of any well designed site is its CSS code, as the whole look and feel of the site is controlled by it. But generating or writing CSS code is not a simple task.

Here are a few tools that might help your with your CSS code and Responsive design.


Responsinator is a free web tool that allows you to visualise responsive design of website as seen on different screen sizes on different devices.

There might be other services that offer you similar preview, but the part I like about the tool is that it makes it easy to compare visually across devices, both in portrait and landscape modes, just by scrolling through the page.

This might just be a approximation of what the website looks, but offers an easy and quick preview.

WordPress theme developer Studiopress also offers a similar quick preview service. You can check it out here.

Adobe Edge Inspect, also offers a similar, paid service, with advance features for users.



Today most web developers harness the power of CSS to control the look and feel of a website. But CSS coding is not an easy job and the web is filled with tools and tips to help you with your CSS troubles.

CSSMatic, a non-profit project, will help automatically generate code for some CSS3 features like Gradients, Border Radius, Noise Texture and Box Shadow. These codes are usually written manually and is not an easy task.


The Gradient Generator helps you create gradients with smooth color changing effects and transparencies. The Border Radius feature helps change all selected borders at the same time. The Noise Texture feature will help create background patterns with dirty pixels and noise, changing the color and values and previewing the results in real time. The Box Shadow feature helps you manage blur radius changes, color changes, shadow size and everything else that you need to create great drop shadows in a single place.

In case if you are aware of any other interesting tools for website design or development, do mentions in the comments below.

Also see: 

*Not Able To Find The Right Typeset For Your Website? Try These 2 Tools

*THE Guide to Making A Kickass Video To Demo Your Awesome Product.

Leave a Reply