2013 was a great year here at Advice. Internet marketing is booming and web design and development are growing at an incredible pace. We asked the members of our design and development team to talk briefly talk about what tricks, tips, and tools they learned in 2013.
One of my favorite finds this past year was Zapier, a tool that allows you to easily connect web applications. We’ve used it extensively at Advice to handle communications between Salesforce and Wufoo, as Wufoo’s direct integration was unavailable to our organization. I couldn’t be happier—long gone are the days of grepping server logs trying to track down reports of lost leads.
The number of integrations they offer is stunning to me—there are so many creative things you could do with it with little or no programming effort.
This last year I used ColorZilla’s Ultimate CSS Gradient Generator for nearly every front-end cut-up I did making it the most used new tool in my workflow. The tool is described as
A powerful Photoshop-like CSS gradient editor
and it delivers. I like that it provides output not only in old-fashioned CSS but also as SCSS/Compass (I am a big fan of Compass). The feature that makes this a must-use tool for me is the ability to import images. I can take a slice of gradient background from Photoshop, upload it, and have the CSS I need to produce the gradient in record time. No more trying to recreate the gradient manually in CSS, and our sites get the benefit of using CSS3 gradients instead of images.
The other tool I have used frequently is stypi.com. Stypi’s definition of itself is:
A realtime editor that allows multiple users to make changes to a single document at the same time. All you need to do is share the URL with others to begin collaborating!
If you are looking to collaborate on an entire project, and not just a quick file, check out Cloud9 IDE. You can manage an entire project and even connect to services like GitHub, BitBucket, Heroku, and more.
Being a terminal nerd my favorite feature of Cloud9 is that is has full shell access and a terminal console at the bottom when you are in the editor. No right-clicking and creating a new directory when
mkdir will do.
One of the most asked questions for me is, what is that font? Online font recognition services come to my rescue every time.
There are several ways to recognize the font image. Here are some of those than I use most often:
I also sometimes get requests for creating screenshots of websites that can be used within a site as an image. Here are the sites that I find most helpful to do this:
2013 has been a great year for new design trends. “Flat” designs were popular, providing a focus on content and efficiency in design. 2013 was also a great year for jQuery infused designs, with full-width, stretched background images and parallax designs that bring fluid movement to any design. To keep on top of these latest trends and see what’s coming down the pipe, I make good use of reference sites. Some of my favorite collections include:
I also appreciate online tools and make use of a good variety of them. There’s many that I use, but I find that there’s no better collection than Piccsy – Everything Design. This site is an absolutely amazing resource for everything from Photoshop brushes, to design inspiration. Any tool I might need, or icon I might employ in development, I find available through this one great site. After getting a bit of design inspiration, I can then use Piccsy to get all the tools I need to put something together. It’s a great combination and has definitely made me a more efficient developer.
The first is html2canvas. A lot of our clients are small businesses that provide real services, whether it be plumbing or heating and air conditioning. They also provide specials that change on a regular basis. This results in a lot of updates. To expedite this process I created a coupon plugin that lets someone in the admin panel upload a background image and overlay text. The problem was when using fancy Webfonts that sometimes the way they print is not the same way they render in the browser. To fix this we needed to convert them to images. This is where html2canvas came into play. Using it we could easily convert the div and its contents to a canvas element, and then convert our canvas element using php into a .png file. Voilà!