Useful tools for web designers & developers
20th May 2011 / Design , Development
It’s been a busy few months for us here at Creative Online Media so our blog has been a little neglected. Good news though, we’re getting back into the swing of posting regular blog entries so keep an eye out for them . Why not follow us on Twitter to catch our updates?
This week we’ve rounded up a range of online tools that have proven to be very useful, whether you’re designing, coding or launching your website.
So, let’s begin with the design process.
Mockingbird
Mockingbird is a great tool that allows you to create mockups of websites using it’s easy to use interface. You simply drag and drop elements then resize and rearrange them to create a page. You can even test out the usability of your layout by linking multiple pages together.
Whether it’s to create a simple mock up of a personal site or to illustrate your design ideas to a client, this is the perfect tool for creating mockups in minutes. Mockingbird makes it easy share your creation as it issues you with a link and an embed code so you can share it with others.

Pixlr
If you find yourself without Photoshop or you’re simply looking for a cheaper alternative Pixlr is definitely worth checking out. It’s an online image editing tool that provides plenty of functionality and a smart interface. Simply upload your photo from your computer, enter an online image URL or create a new image and get editing.

0 to 255
We often spend too long choosing colours for our designs. However this nifty little tool will find any distinction of a colour to help you choose and it even copies the hex code for you. This is great for finding the perfect colours for your hovers, gradients, borders and more.

Kuler
Adobe Kuler is another web hosted application that will aid you in the design process. It allows you t to experiment quickly with colour variations and browse thousands of themes from the Kuler community.

ColorSuckr
Have you ever came across a certain photograph, graphic or website that had you admiring the range of colours and tones within it? ColorSuckr is a tool that allows you to effortlessly create colour schemes based on photos. Simply enter the URL of your image or search through Flickr for one you like and this little tool will generate the perfect colour palette for you.

So now that you have created your mockup, edited your images and chosen a colour scheme, it’s time to build.
CSS3 Generator
This tool does exactly what it does on the tin. Simply choose a CSS3 element from the list on the dropdown menu, then choose your desired properties and this application will generate the valid CSS code for you.

CSS3 Button Maker
Making gorgeous call to action buttons for your website couldn’t be easier with CSS Tricks’ Button Maker. You simply move the sliders choose the size, gradient colours and rounded corners of your CSS3 button. This app will then provide you with the CSS you can add to your stylesheet.

ProCSSor
I guess you could call this a ‘code prettifier’ as it allows you to paste your CSS into its text field and it tidy up your code according to your preferences. You can neaten up your CSS and customise how it displays. Especially handy if you have inherited code from another designer or if your CSS will be edited by others, this is a great tool boasting a gorgeous interface too.

After building your website, you’re ready for testing your creation before it goes live. Below are a couple of web based tools you are bound to find useful.
Browser Shots
Browser compatibility testing is so easy with this tool. It can show you how your website renders in over 100 browsers and OS combinations. Not only this, but it provides a great degree of customization. Browser shots lets you choose your screen size, color depth, JavaScript and Flash settings.
Simply enter the URL of your website, choose the browsers you want to test it in and wait for it to display screenshots of your site in every browser you selected from Konqueror to Netscape.

Uptime Robot
Once your website is live, you’ll want to ensure you know if your site goes down. Uptime Robot eliminates the need for you to manually check your websites every 5 minutes by doing it for you. You can use it to track as many as 50 websites at the same time, and if one of them goes offline even for a minute, you’ll receive a notification via email.

Great post some handy wee tools in there. Here is another great tool I spotted recently
http://www.layerstyles.org/
Really well executed Photoshop interface that lets you generate some nice CSS quickly…
Ali Sisk - May 20, 2011