For every task in web design, there is a tool available to make it easier – and most of them are free!
However, there are so many tools out there, it can be difficult to sort through them all. In this post we outline some of the tools that we think will be the most useful in this prospective year.
1. Adobe Edge Tools & Services
Price: Free (do not expire after 30 days Free Creative Cloud Membership)
New tools and services for a beautiful, modern web
It’s never been easier to leverage animation, motion graphics, and sophisticated graphical techniques when building for the modern web.
Edge Tools & Services includes Edge Code CC ,Edge Reflow CC , Edge Animate CC, Edge Inspect CC, Edge Web Fonts, Typekit and PhoneGap Build.
Sleek, intuitive and powerful mobile first front-end framework for faster and easier web development
So what is Bootstrap? In a nutshell, it is one of the most popular front-end frameworks and open source projects in the world. It was originally created by Mark Otto and Jacob Thornton in mid 2010 and officially released on 19th August 2011.
Edit, debug and monitor CSS, HTML and JS in live webpages
Firebug is a Firefox add-on designed to extend the browser’s software development tools.
At the same time the Firebug plugin allows you to build new plugins that extend its capabilities (among them it is worth to mention YSlow). This plugin is very useful for programmers and web masters when testing websites.
Add, pick and choose your icons and download them as webfont collections
Fontello, an Open Source Icon Fonts Generator, is a tool to quickly pack vector images into webfonts. It also comes with a large built-in collection of open source fonts.
Fontello is very intuitive and easy to use, all you need to do is go to the Fontello website, select icons that interest you (over 2,000 available), type the name of your font and click “Download webfont”. Of course you can edit the icon names and codes, there is even a Developers API.
Check out their GitHub repository where you can download several sets of icons.
5. Google Web Fonts
Hundreds of free, open-source fonts optimized for the web
Have you had enough of standard fonts like Arial or Times New Roman on websites? Despite the fact that, for a long time, there have been several alternative methods of embedding custom fonts, most webmasters choose these standard, which are provided for computers equipped with Windows systems. Embedding non standard fonts has always been problematic, but thanks to Google Fonts this situation has changed.
A web with web fonts is more beautiful, readable, accessible and open
Google Fonts is a continuously updated, free library containing hundreds of publicly available fonts. It allows you, in an easy and friendly way, to create custom font collections that can be very easily integrated into a website using the special code that is generated.
Google also offers the Google Fonts API, that allows you to add Google Fonts to a website in just seconds.
All of the fonts are Open Source and stored on Google servers, which are fast, reliable and tested. Google Fonts service is offered free of charge.
Laravel – An elegant PHP framework for web artisans
Laravel is a free, Open Source PHP framework, committed to elegance and simplicity. Thanks to its wonderful documentation and a very supportive and friendly community, Laravel is for all PHP programmers, even beginners. Programming doesn’t have to be painful. In fact, it can be enjoyable with the right tools. Laravel is one of those tools.
Laravel was developed by Taylor Otwell in April 2011.
Laravel is listed as one the most promising PHP frameworks for 2014, according to the December 2013 survey on PHP frameworks popularity.
LESS Is More
LESS (Leaner CSS) was developed by Alexis Sellier in 2009. Unlike regular CSS as we know it, LESS works much more like a programming language. It adds dynamic behaviour for CSS such as variables, mixins and functions. Thanks to some fantastic mixins libraries available for free, like LESS HAT, it brings CSS to completely new level.
LESS is one of my favourite tools, it is used in many projects, even in Bootstrap. Thanks to good documentation it is very easy to learn. I am not sure why it took me so long to try LESS. I especially like it for its ability to generate cross-browser compatible CSS. LESS can run on the client-side and server-side, or can be compiled into plain CSS thanks to software like WinLess.
A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Skeleton is an Open Source CSS responsive framework for HTML5 websites and apps. It was developed by Dave Gamache in 2011. It is very minimalistic and the CSS is easy to read. It comes with styles for buttons, forms, layouts, and typographies.
If you want to start with a responsive design very quickly, you should definitely have a look at this framework.
A semantic personal publishing platform with a focus on aesthetics, web standards, and usability
WordPress is one of the most popular Content Management Systems in the world. It was created by Matt Mullenweg and Mike Little and released in 2003 as a self-hosted blogging platform. Thanks to the approach “by and for the community”, over the years hundreds of developers from all over the world have collaborated to this popular, free and open source software. It has become something more than just a blogging tool.
In July 2013, during the WordCamp San Francisco 2013, Matt Mullenweg, the co-founder of WordPress, announced that WordPress now powers 18.9% of the Web and has over 46m downloads. At the time of writing this article WordPress 3.8 has been downloaded over 7.8 million times.
Modern workflows for modern webapps
Yeoman is an Open Source robust and opinionated client-side stack, consisting of tools and frameworks intended to help developers quickly build high quality web applications. Yeoman combines several popular open source tools in an attempt to streamline many aspects of the web development process.
The main goal is to speed up the development process for a new application. There is no more reason to waste time trying to gather libraries and boilerplate code, with just a few commands you’re up and running!
Now that you have these amazing tools and the know how, you can build amazing sites, but if you’re a bit stuck why not ask Websquare to lend you a hand. We don’t bite.