Here at the Solamar blog, we spend a lot of time talking about web design — tips and best practices for putting your logo together or how to make a killer landing page — but we don’t get too much into the development side of things. For the most part, this is because development stuff is highly technical and we don’t want to put off our audience by throwing a bunch of jargon at them that they’ll have trouble deciphering.
But today, let’s dig into how the sausage is made! I promise I’ll keep things as simple and easy to understand as possible, and I think you’ll find the process of how we take your web design from concept to execution an interesting journey. So stay tuned, and buckle up as we discover how we work on web development!
The Site Audit
Before the design even begins, a developer takes a look at any existing website or hosting and reports to the designer about any hiccups or considerations the designer may need to take into account when putting together the design. Then she takes a well-deserved nap while the design is completed (I joke, developers never have time for naps, there’s always a fire that needs putting out somewhere).
Once the design is complete and the client has signed off on it, the designer hands it over to the developer. Here at Solamar, the designer and the developer are often the same person, so no handoff is necessary (I like to give myself a little pat on the back, usually in the form of a cookie, or a seventh cup of coffee). The designer reviews the completed design and makes note of any particularly unique or complicated elements that may take some extra elbow-grease to complete.
The Build (Part 1) — Local Development
Local Server Environment — Now it’s time to build! Here at Solamar we use a three tiered build process, the first of which is local development. In this context, local means “on the computer of the developer”. Building a site locally on your own machine is a much faster process that building on a remote server, and allows for finer control. First we set up a local development environment that contains all of the technology that the clients remote host would have. There are many ways to do this, but since we’re all on Macs here most of us use MAMP Pro, which makes setting up local servers a snap. We use Codekit to pre-process any code that needs it.
WordPress — Once we have the local server set up, we install WordPress onto it. WordPress is the foundation upon which we build all of our sites. We’ve spent bunches of time talking about how awesome WordPress is on this blog, so I’ll leave it at that.
Custom Theme & Plugin — Next we install our custom WordPress theme and plugin, which we built from the ground up to be everything we need to make developing a site easy-peasy. They use the Bootstrap framework to make spinning up custom layouts a breeze, the Advanced Custom Fields Pro plugin so we can make bespoke interfaces for anything we need in the site admin, Font-Awesome and IcoMoon for more icons than you can shake a stick at, BackupBuddy to help move the site from server to server, and Bower to help us add any additional functionality the site might need.
Version Control — Sometimes it’s necessary for multiple developers to work on a site at the same time, and to make sure we don’t overwrite each other’s code when we do this, we use version control, a system of logging and merging changes to site code by multiple people. There are many forms of version control available, we use Git, and manage it via Bitbucket and Sourcetree.
The Build (Part 2) — Staging
Once the local build is complete, the site is moved to a live staging server. The staging server has the benefit of NOT being the live production server the site will eventually live on, but can still be accessed by the client or anyone else who wants to review the site prior to it going live. Staging is where any final tweaks to the design, build or content happens. Once the site is on the staging server, we make sure all plugins that haven’t already been installed are added in, and do a final testing pass. It is at this point that the site is browser-tested to make sure that it looks good on every device and screen-size we can throw at it.
The Build (Part 3) — Production
Once the staging site has been fully tested, had all content finalized and the client has signed off on it, we move it over to the production server, where it will live permanently. Once there, we give it another once over to make sure any peculiarities of the server haven’t broken the site in some way, turn on various security and Search Engine Optimization (SEO) tweaks that we didn’t want running on staging. Then we high-five each other, do a secret developer happy dance, and hand the keys over to the client.
And….done! Now you know how we developers work around here. That wasn’t too painful, was it? Want to make sure that your site is developed by a team that really knows how to get it done in style? Give the Solamar team a shout.