All of the solutions that I provide for clients are custom themes or custom plugins, depending on the needs of the project. Most of the time for a new or redesign website, I’ll write a custom theme with a few plugins to go with it.
Building these themes or plugin requires a variety of tools, many of which ensure a better product in the end or just help save time. These are some of the ones that I use.
I use Trello with my clients—and with my personal projects—to keep everything organized. Communication can quickly become lost in long email threads, and it’s helpful to keep an archive of everything that’s been discussed about the project. Trello is also useful for dividing a project up into tasks, and delegating those tasks to other people.
As a starter for my themes, I use Automattic’s Underscores starter theme. I’ve found this to be the best shell for creating original themes, as it doesn’t provide a ton of unnecessary code, or pre-written, opinionated code. Now, rather than using bits and pieces of pre-existing code, I can write code that is completely customized and more appropriately meets the needs of the project.
Along those lines, I avoid using frameworks such as Bootstrap or Foundation that provide markup and styling for various pieces that a site could use. This is partly to avoid making another version of every Bootstrap site ever.
More importantly, it’s to avoid the bloat that comes along with these frameworks. A full version of Bootstrap weighs in at 148 KB, and even a customized version of it just adds too much unnecessary weight to a site. Any additional weight will make a site slower and cause more visitors to leave, so I prefer to have exactly what the site needs without any extra front-end code.
There is one exception to this—I will use Bootstrap when creating interactive wireframes or prototypes for a web app. I’ve found that a clickable wireframe is helpful to show clients, and I’m often faster at writing the HTML for a Bootstrap wireframe than using Photoshop or Sketch. I won’t reuse the Bootstrap prototype’s code in the final product when working this way.
Local Development and Staging
In the development process, I’ll first set up a local site to develop with on my computer with vvv. All of my development work takes place here—code should never be written directly on the live site.
Then, I’ll set up a staging site for testing code in an environment that’s as close to the environment used by the live site as possible. This way, we can test out the new site or new features for an existing site before users see anything. Hosts that I recommend (such as WP Engine) make it easy to create a duplicate staging version of the live site and push changes between the two.
For both the development and maintenance processes, I’ll use Git to manage all of the code. This lets me keep track of what has changed, and maintain different “branches” of code so that the newer untested code can go to a staging site without affecting the live site. Git also maintains a history on what lines have changed, with details regarding why the code was committed and when the change was made. This is all very helpful when coming back to an older project to make changes.
Before launching a new site or making any updates to a site, it’s important to do a QA check over everything that’s been done. A large part of this QA process is to check the site in different browsers—unless older browsers are absolutely necessary, this includes checking the site in the current versions of Chrome, Safari, Firefox, and Edge, as well as IE11, on desktop devices. On mobile, it includes checking on an iPhone and iPad, as well as testing with Chrome on an Android emulator at various sizes. Since I don’t own many of the devices needed to test all of these combinations, I use Browserstack to test the desktop browsers on Windows, or the virtual machines from Modern.IE to test Edge and Internet Explorer.
What tools do you use for designing or developing sites? Leave a comment below or let me know on Twitter.