Over the years I’ve had the opportunity to work with industry-leading web design and development software for both large and small organizations. While some tools, such as the Adobe Creative Suite, will remain the obvious choice for design, there are many other time-saving resources that are not quite as apparent.
Below is a list of some of my favorites, which I’m sure will add some efficiency to your daily workflow:
1. Moqups – Wireframing, Prototyping & Collaboration
Moqups is a relatively new web-based prototyping tool which I chose because of how easy it is to learn, its affordable pricing, and the features it provides for collaboration. Now, there are plenty of other options out there, and I’ve even tried out some of the competitors. There are even tools that are better for building prototypes than Moqups, but they lacked in the other areas I was evaluating. Someone looking for more capabilities may want to use a combination of InDesign for prototyping and InVision for collaboration, but I wanted a tool that handled everything – and so far, Moqups has been more than enough for my needs! The ease of use becomes especially helpful when collaborating with clients, who often have little technical abilities yet (so far) have had no issues providing feedback using Moqups.
2. WebDrive – FTP
As many others, I had been using Filezilla for my FTP needs for the longest time, and still do on many occasions. However, since I discovered WebDrive I have saved a significant amount of time when transferring files remotely. Available for both Mac and Windows, WebDrive mounts your FTP connection to a virtual drive, allowing you to save and copy files directly to your remote server. It’s not free, but with a one-time fee of $39.95 I find it well worth the cost.
3. JPEGMini – Image Compression
Contrary to what some may believe, Photoshop is not the king of image compression. While it does an admirable job, I always am seeking for the best ways to squeeze the maximum performance out of websites I build, and JPEGMini has proven to be an excellent tool for providing near-lossless compression while consistently reducing image sizes. As the name implies, it only works on JPEGs, which usually accounts for most of the images in websites anyways. It’s free to try, but I opted for the paid version ($29.99) which allows you to drag and drop entire folders for compression. This way once a website is ready for deployment, I just drag the whole images folder into a compression job and let JPEGMini do its magic!
4. Handbrake – Video Compression
One of the free tools on this list, Handbrake has many options for reducing your video’s size for the web. There’s a slight learning curve, but after some fiddling and saving your presets, you’re just a few clicks away from saving your videos in a compressed, web-friendly format. It’s also available on both Mac and Windows!
5. SiteGround – Website Hosting
While not exactly a software package, I have enough high praise for SiteGround’s hosting services that I felt compelled to put it on this list. Their excellent customer service and extremely affordable pricing are just a few of the reasons that I recommend them to most of my clients for website hosting. Some of the other features that stand out are the ability to change PHP versions for individual domains, caching options built specifically for content management systems, GIT integration, and one-click staging deployments.
6. Adobe Stock – Stock Images
Although Adobe Stock hasn’t been around as long as some of its competitors, they offer some of the best options for stock images around, and at a great price! I opted for the monthly plan, which provides 10 images/month at the low price of $31.86/month. Not only are the choices great, they also come in extremely high resolutions or vector format. They also offer videos, but I’ve found their selection to be rather modest.
Runner Up – 123rf
123rf used to be my source for stock images, and I still buy credits from them sometimes if there’s a promotion. Their pricing is based on image size, so if you need an image in a specific (usually smaller) size, it can be an affordable backup choice for unique images. I would not recommend using them for vector images or videos, as their pricing is not competitive for those options.
7. Adaptive Images – Responsive Image Management
The Adaptive Images script only runs on Apache/nginx and PHP server environments, but it is extremely easy to implement and free to use. I actually built a Joomla plugin which makes it easier to implement, which can be downloaded here. Adaptive Images automatically aggregates your existing website images and resizes them for different resolutions, while serving up the proper size for the device you are viewing from. This drastically reduces the download size of images on mobile devices and is much more time-effective than doing all the work yourself.
8. Yootheme Pro – Templating Framework for Wordpress and Joomla
I’ve previously written a review of some of the best Joomla template frameworks, and Yootheme was one of my favorites at the time. However, they recently released a new product Yootheme Pro which is available for both Joomla and Wordpress, and is nothing short of being game-changing. I’ve already launched two websites using this framework, and I absolutely love it. It’s an excellent choice for rapidly building custom designs – most of their template designs on this framework are quite simplistic, which make it ideal for implementing your own design.
9. Chrome Browser Extensions
There’s quite a few helpful Chrome extensions available to assist in web development, so here’s a few of my favorites:
Page Analytics by Google
Love it or hate it, the Google Analytics dashboard has become an industry-standard tool for tracking your website visitors. The Page Analytics tool has become an invaluable resource for me to help visualize user flows and interactivity, which overlays statistics of what visitors do on each individual page as you navigate through your website.
Nimbus Screenshot and Video Recorder
Fireshot, which is available only for Firefox, used to be my go-to screenshot and annotation tool, and I still miss many of its features. However, I’ve fully switched over to doing most of my debugging and testing with Chrome since it has more capabilities (in my opinion) than Firefox. Nimbus has many great tools for taking screenshots, videos, and sharing while also integrating with Google Drive.
Cache Killer
It’s easy enough to continually hit “Control + Shift + R” to reload your web page with a cleared cache in Chrome and Firefox, but I’ve found the Cache Killer tool to be helpful in removing that additional step, and I find myself less often wondering if I’m viewing any cached files.
Conclusion
There are many more tools and services that I utilize, but the ones mentioned above are not as commonly used, and I felt would be more helpful to designers and developers looking to expand on their toolkits. If you have any suggestions I would love to hear them – please respond back with them in the comments section below!
