As a web designer and developer, you’re aware that the field is fast-paced and ever-changing. How do you keep up with the changes, and how do you implement them without losing your mind?
The following is a list of the best tools we’ve found for staying ahead of the curve and making your development cycle run as smoothly as possible.
Accessibility guidelines help ensure that even those with disabilities can access internet content.
There are many different things you can do to improve your site’s accessibility.
Though there isn’t a single tool that can make your website accessible, there are plenty of checkers that review your site, identify issues, and provide you with suggestions on how to fix them.
- Dynomapper: a website accessibility testing suite that also comes with reporting functionality so that you can find and fix any issues on your website.
- PayPal’s Automated Accessibility Testing Tool (AATT): tests web applications for conformance to Web Content Accessibility Guidelines (WCAG) 2.1. Can be integrated into your website deployment pipelines to run automatically.
- Elsevier Accessibility Checklist: provides an easy-to-use interface that allows you to see all of the guidelines you should be following to create an accessible website. Can filter or search based on requirement type or website-feature type.
- Cynthia Says: free web-based tool that allows you to test individual pages for errors in rendering or other violations of the guidelines that determine whether a page is accessible or not.
- HTML_CodeSniffer: checks the HTML source code of individual pages to see if you are meeting Web Content Accessibility Guidelines and the requirements set forth by Section 508.
- 508Checker: online tool that checks to see if the website located at the provided URL is Section 508-compliant
User Experience and Design
Don’t be fooled by the sleek, minimalist designs employed by many websites today.
Though they are less “loud” and in-your-face than their counterparts of yesteryear, there’s a lot of work that goes into making sure that such websites provide a smooth, useful experience for the end-user.
- Figma: browser-based web app that offers vector tools for illustration and prototyping. It comes with real-time collaboration tools, as well as automatic code generation for moving your projects to other environments.
- Framer X: macOS-only interactive design tool that allows web designers to create advanced, high-fidelity prototypes and animations. It comes with an app store for pre-made visual and code components, but you can also create these from scratch using React.js.
- ProtoPie: high-fidelity prototyping tool that allows you to create things without writing code.
- UXPin: a collaborative platform for designing and prototyping. Available in the browser or as a native app. Features include automatic code generation for movement of projects to other environments and a design library system.
- MockFlow: a wireframe tool that allows you to create barebones layouts without worrying about things like color, special effects, and so on.
- Twitter Bootstrap: front-end framework that allows you to easily design via re-useable modules. Supports responsive, mobile-friendly websites by default.
- Webflow: browser-based tool that allows you to build full, production-ready experiences even if you do not know how to code. While many of the other tools in this section focus on design, Webflow comes with other features, such as hosting, that mean that it can act as an all-in-one website builder for many users.
- Outgrow: a toolkit that lets you easily create quiz and calculator-based interactive widgets.
- Mockplus: provides tools to simplify the design process for apps, like RP for prototyping and iDoc for combining design and development.
HTML and CSS
HTML and CSS are two of the most important languages to know when it comes to building websites.
However, gone are the days when developers sat down in front of a clean text editor and hand-coded each and every line of a website.
Not only is this time-consuming, it limits how well code can be maintained.
There are a variety of tools designed to simplify the process of writing HTML and CSS for your website.
- HTML Editor: free, web-based HTML editor that allows you to code online, generate previews, and analyze your code. It comes with basic design tools, but the overall goal is to provide web developers with a simple, easy-to-use sandbox to generate quick previews of websites.
- PurgeCSS: removes unused CSS during the build process of your website so that the final files used to render your website are smaller and faster to load for your users.
- Sass: Stylistically Awesome Style Sheets is a superset of CSS that makes it easy for you to write and update CSS with ease (for example, Sass introduces variables, so you can set the color for a header once, rather than setting the color for each use of a header).
- Angular.js: web application framework developed by Google and an open-source community — designed to facilitate the development of dynamic apps (specifically web, mobile web, native mobile, and native desktop).
- Browserify: compiles Node.js modules for use in a browser-based environment. All required modules are grouped in a file called
- Docco: documentation generator that creates an HTML document showing both your code (run through Highlight.js for syntax highlighting) and your comments (which are passed through Markdown for formatting).
- Grunt: task runner that automates tasks like unit testing, linting, code compilation, minification, and more. Its ecosystem includes 6000+ plugins so you can create an automated workflow.
- React.js: library designed for building interactive user interfaces. Optimal for rapidly-changing websites that need to be updated with some frequency.
Aesthetics matter, and one of the biggest choices you can make (though it may not seem like it) are the fonts and icons you use on your website.
- Flaticon: over 2 million vector icons.
- Font Awesome: vector-based icons and social logos for your website. All assets use Font Awesome, which was created by GitHub and is the most popular icon set/toolkit in use today.
- Google Fonts: a free directory of over 900 fonts. You can download these and host them locally (for faster site performance) or link to them in the head of your HTML. All fonts now ship with
font-display: swap;by default.
- Understanding Typography: if you’re new to typography, this webpage goes over what it is and its impact on viewers.
Images are important. Not only do they convey information in an easily-understood manner, they serve to break up long blocks of text that viewers may find intimidating.
In addition to these, check out our article, Download Legal Stock Photos at These 100+ Sites.
- Pexels: offers free stock photos that can be used without attribution, even for commercial uses.
- Unsplash: high-quality images that can be downloaded and used without the need for citations.
When it comes time to build your website or web application, we recommend either a full-featured code editor or an integrated development environment (IDE), plus version control to track changes.
- Atom Editor: an open-source, cross-platform editor initially developed by GitHub. Supports most programming and markup languages, and offers extensibility via plugins written in Node.js.
- Git: open-source distributed version control system that tracks changes and allows for team collaboration. Frequently used with web-based tools like GitHub, GitLab, or Bitbucket.
- Sublime Text: a cross-platform code editor that supports most programming and markup languages. Features a robust package manager that allows you to to add additional features and functionality.
- Visual Studio Code: full-featured, cross-platform code editor developed by Microsoft. Offers embedded version control, syntax highlighting and intelligent code completion, debugging features, and more. Can be customized and extended via the installation of packages.
Testing and Debugging
You’ll want to know if your code fails, and if it does, you’ll want to be able to find the error as quickly as possible. The following tools will help you with these tasks.
- Chrome Developer Tools: debugging tools that are built into Google’s Chrome browser.
- ESLint: open-source plugin that comes standard in most text editors, but can also be built into your development pipeline. Features automatic fixing of common errors, as well as the ability to customize the rules it uses to lint your code.
It’s unlikely that you are building websites in a vacuum, so the following tools can help facilitate the communication and collaboration you need to drive a project to completion.
- Asana: full-featured project management tool featuring lists, project-based boards and charts, calendars, and more.
- Google Hangouts: a free-to-use application offering instant messaging and video chat capabilities.
- Slack: real-time messaging and file-sharing tool that also features video calling. It comes with powerful search tools, as well as the ability to integrate with third-party tools.
- Trello: project management suite/list-making application featuring boards and calls: the digital equivalent of a poster board with sticky notes.
- Zoom: offers calling functionality (including video calls), conferencing, and webinar features.
The following is a list of newsletters, websites, magazines, and other content that you may find helpful for learning new web design and development concepts and techniques.
- Code Project: articles, news, and messages for all things related to software development.
- CSS-Tricks: learn tips and tricks for working with CSS.
- Dev Awesome: weekly newsletter featuring news, new libraries, and productivity tips.
- /dev tips: weekly development tips sent to your inbox in the form of a GIF.
- Sidebar.io: for back-end focused web developers interested in the front-end aspect of development.
- Smashing Magazine: online magazine geared specifically toward web designers and developers.
These resources should allow you to improve and expand your development and design work.
Bookmark this page because we will expand it whenever we find a good tool worth checking out.
Contributing editor: Frank Moraes.