Designer News, More

8 Tools For Web Design and Development

Web design is a popular service that continues to provide entrepreneurs with small business opportunities every day.The large number of web design companies (both large and small) worldwide, however, means competition can be fierce.How can you set yourself apart as a top-quality web designer in a sea of other capable designers? There are quite a few opinions related to this topic but every expert agrees that having an arsenal of capable tools is one of the best ways to set you apart from the pack.

Here is the important 8 Tools For Web Design and Development you need to know about it.


Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? One of life’s great mysteries perhaps. Well, wonder no more because Fontello not only has all the icons you need but you can pick and choose the glyph you need and compile these into your own minimalist set.
You can, of course, download the entire set of icons from the GitHub repository (actually it’s several sets) but the interface makes customizing your font so easy it’s the only sensible approach. The project is open source but as always donations would be appreciated.


#2:Foundation 3

Responsive design seems to have gone from zero to about a thousand miles an hour in no time flat. And things are still changing fast enough that small development shops are hard-pushed to stay up to date, let alone conduct their own R&D. That’s where Foundation 3 comes in.
Developed by ZURB, an agency with the resources and experience available to throw at the responsive problem, Foundation 3 can act as a blueprint for your own projects, a rapid prototyping tool or even as an object lesson in how to address some of the web’s must current issues.
The latest release introduces a simplified grid structure and makes the jump to SASS/Compass, allowing for a more readily flexible approach to styling. Though it makes sense to work with SASS if you are planning to have a look at Foundation 3, the customization download is conceived to allow a straight CSS version too.


#3:Cloud9 IDE

Price: Free/$12 per month Premium

This year the browser-based IDE finally came of age with a number of promising projects offering fully-featured apps which make collaborating from anywhere on even large-scale projects. Among these, Cloud9 has the edge.
The code editor is very usable. Code completion, smart drag and drop document trees, FTP integration and all that, but it’s the connectivity which makes Cloud9: If a team are hacking the same file, each user is identified by their own coloured cursor. A chat module closes the feedback loop.
Integrated with the likes of GitHub, capable of working offline, and generally intuitive to use. If you want a ‘code anywhere’ solution, look at this one first.


#4:Sencha Touch 2

There’s no denying that the mobile/touch device has changed web development for good. It’s a broader, more heterogenous world out there and everyone wants a piece of the action. Sencha Touch 2 aims to put that dream within reach of HTML5 developers.
An improved API, stronger docs and training materials as well as firmed-up native integration with many leading devices all make Sencha Touch 2 a serious contender for the mobile development framework of choice. There is a learning curve but, since Sencha aims to be an end-to-end package, at least there’s only one slope to climb.


#5:Adobe Edge Inspect

A great little app for mobile developers, formerly known as Adobe Shadow, which cuts a huge amount of hassle from the design process. Just pair your devices (Android and iOS) with your main machine. Then the sites you browse to are echoed direct to every connected device.
If you’ve got conditional code or responsive templates then these should work fine. And if you want to tinker with the code, just hit the angle brackets next to your paired device (in Chrome) and away you go.

web design tool


You’d think by now that the concept of the code editor would be pretty mature. There’s so many out there and they’re all so similar it’s easy to imagine that the final blueprint has been found. Brackets shows that even at this level there’s plenty of possibilities left to explore.
The central goal for Brackets seems to be a removal of all the repetitive little tasks we fold into the development process. Browser reloading, editing an element’s CSS, function searching. Full credit to those involved because, even at beta stage, Brackets is refreshingly good to use. Check out their YouTube channel.
And if you’d like an augmented experience, now you can sign up for Adobe’s creative cloud and get Edge Code. Built on Brackets, Edge Code adds some excellent features for typography and PhoneGap.


#7:Modernizr 2.6

Leading with improved geolocation, WebGL and a host of community contributed detections, the latest update to Modernizr delivers some important new detects for the progressive enhancement cabal to get their teeth into.
Version 2.6 of the popular browser capability detection tool updates a couple of dependencies too, but the largest volume of new detects comes from the community. The list itself makes interesting reading: css-backgroundposition-xy, css-subpixelfont, svg-filters, vibration…
If you’re keen to make use of the latest features in a responsible fashion then this is one library you need to keep up to the minute.



There are a surprisingly large number of project management tools out there. They clock time and assign teams, but very few of them have the kind of natural appeal which Trello exhibits in spades.
The visual metaphor is the board. A simple concept but Trello makes it into something capable of displaying all the ins and outs of a project at one glance. What’s to do, being done, complete. Commenting, sharing, attaching files, prioritising. Trello makes all this fun, and in so doing, helps to shake your sorry self into something resembling ship shape. Great stuff.


You Might Also Like

One comment

  1. 1

Leave a Reply