It has been four years since Spark launched, and a lot has changed in the web development world. We were long overdue for a website redesign. I could have slapped on a new coat of paint and called it done, but I wanted to take advantage of the latest best practices and some new development trends and tools.
The Design Process
As this was a fairly small project, I didn’t spend a lot of time on typical UX things like user stories, personas, and wireframe creation. It’s a simple blog, and we’re just making some updates to keep things fresh.
I still find that Photoshop works great for quickly creating design comps. Some people prefer designing in the browser — more power to you — but I feel that it limits the potential of the design. It’s hard to think outside the box when you’re literally working with boxes of HTML elements.
I use the comps as general guidelines. If I see that something works better in another way, I have no qualms about changing it up. Of course, in a typical project where the client has already signed off on a design, you may need to stick to it, or get clearance on your new ideas first.
The Development Environment
I’ve been using Vagrant for recent projects. I love how I can devote an entire operating system to one project. In the past, I might have one laptop with IIS, Apache, MS SQL Server, MySQL, PHP, ASP.NET, multiple content management systems, and so on — you get the idea. These technologies bog down your machine over time. Additionally, enabling, disabling, and configuring services and resources complicates your development environment and becomes tiresome.
Spark runs on WordPress, and I used VVV, a Vagrant configuration optimized for WordPress development. When I’m not working on Spark, I shut down or suspend its virtual machine, and all of the project resources are freed up. An isolated environment like this is a major boon. I can’t see myself ever going back to the single-development-machine way of doing things.
Building the Front End
Spark makes use of responsive design, which is basically a requirement now. A few people still gripe about the bloat and slowness of responsive sites, but I don’t run into that issue often. At the time of this writing, the home page is coming in under 350 KB (without caching). For comparison, most web pages are over 2 MB. Unfortunately, some necessary WordPress plugins add some extra files that are beyond my control, but even on a slow connection, Spark should load very quickly.
I’m using a custom framework I created called Raven. It’s something I’ve been working on as time allows, and it was finally in a usable state for a project such as this. Raven provides an intuitive grid system, Grunt and Gulp configurations, code linting, and more.
I decided to try out the BEM CSS syntax for Spark. I can see how BEM helps to create a flat CSS structure, but I don’t see that as a good thing. It completely removes the cascading part of Cascading Style Sheets. I won’t go into detail about BEM usage, but I’m not finding a strong use-case for it in my future projects.
Polymer, however, is one tech that I did enjoy using. I’m really looking forward to the day when web components become the de-facto standard for building websites. Until then, Polymer does a nice job of bridging the gap. I used Polymer components for the sidebar and Contact page forms and also for the SVG icons throughout the site.
Building the Back End
There’s not much to tell about the back end. It’s a fairly vanilla WordPress installation. I did use the Advanced Custom Fields plugin for pages that require more than just a WYSIWYG content section, but overall, I’m only using plugins that most developers would consider to be WordPress essentials (security, SEO/performance optimization, etc.).
Looking to the Future
Overall, I consider this a successful website redesign. However, many improvements remain to be made, and I will work on them as time allows.
Currently on my radar:
- WebP images
- Font subsetting and FOIT elimination
- ARIA roles
- Critical CSS
- AMP versions of pages and blog posts
If you have any ideas or suggestions for improving Spark, leave a comment below.