How This Site Was Built

This site was built with love, attention, good engineering practices, WordPress, and several competent plugins. I wanted to share a few of the details here for folks looking to go down a similar path, whether it’s with plugins, ebooks, or anything else you can offer online.

Design

Once upon a time, I was deciding between whether to “become” a designer or “become” a developer. If you’re self-taught and working on the web, it’s very often a crossroads you come to that demands a decision. The distinction between these two paths is much greater when you’re offering agency services to clients: you want to tune your message towards the people that need your work and offer the kind of work that sells itself. After some waffling, I chose development and I’m happy I did.

At no point, though, did I lose my adoration for good design and aesthetics in general. I understand the core components of good design – alignment, color matching, contrast, spacing – and use them with enough competency to keep my undesigned projects looking, at the very least, passable.

This site began as all my sites do: a mechanical pencil and a blank 8.5 x 11 sheet of white printer paper. After years of typing as my primary form of communication, my handwriting approaches an MD level of comprehensibility. Still, I find it very helpful to start with a rough concept on paper. This typically surrounds functionality and is an important first step towards a wireframe.

IMG_1675

I went through a handful of iterations on paper before I was ready to put together a wireframe of how I thought the site should look.

I use Balsamiq for wireframes. I never enjoyed this step until I finally bought this application. Balsamiq makes wireframing so simple and fast that it’s become one of my favorite parts of the site-building process. Site components come together easily and the output is a perfect resolution level; ideas are communicated clearly and design is only just hinted at. If you do any kind of site design and planning, for clients or otherwise, you owe it to yourself to try out Balsamiq.

I translated the various features and functions I had imagined into several pages of product and content pages. This took about a week (not full-time) to get right. I was a little surprised that it didn’t go faster but I had a number of different components I wanted on the page and it was more difficult than I anticipated to get them in one place without them appearing jumbled or crowded.

Screenshot 2014-04-21 12.56.15

When I was complete, I had wires for:

  • … products I market on dedicated sites
  • … products I planned to market on theproperweb.com
  • … free, open source projects that are housed on WordPress.org and/or GitHub
  • … products that have not been created yet
  • … “buy now” pages that list multiple iterations of products marketed on other sites
  • … a home page

I took a few days to take these all in and make sure I had everything I needed on each page and nothing more. I found as I looked at the wires more and more that I really liked the non-aesthetic that I was seeing. Everything was clear, the concentration was on the items themselves, and it needed very little additional visual touches to be complete.

I decided to skip Photoshop mock-ups completely and just use the branding that was created for me by Preston Grubbs, a friend of mine who also happens to be an excellent identity, print, and web designer. The colors and clean lines set the tone for the rest of the site and forced me to keep the look and feel of the site simple and focused on the task at hand: distributing my software.

proper_badge_color

The rest of the “design” that happened for the site was completely in-browser, using best-guesses and Inspect Element in Chrome to get everything laid out just right. I really prefer this method of working for two important reasons:

  • Getting Photoshop to properly represent browser rendering is impossible. Borders are not pixel-perfect, rounded corners never look the same, and font rendering is completely different.
  • Converting your Photoshop files to web code makes you concentrate on arbitrary measurements on each page rather than general classes and components that can be reused. It’s also terrifyingly boring work, for the most part.

The CSS work I did for the site probably took about as long as it would have taken to do Photoshop mock-ups and left me with a fairly clean, modular LESS stylesheet (more about that in a bit). Additional polish will come over time but I’m very pleased with the outcome.

Development

Detailing the entire development process would be, frankly, boring, so I’ll just hit the high points here.

I started with Underscores, a starter template for WordPress. I was excited to try it out after hearing a lot of good press about it but, overall, I wasn’t terribly impressed with the starting point it gave me. First, there was a lot of random extras built in that seemed totally extemporaneous: esoteric template tags, needless styling, unnecessary markup. I stuck with it and did use a number of the built-in pieces but I think this theme was meant for someone with less experience putting together a custom theme. I have a starter theme that I’ve been using for a long time (GitHub repo coming soon) that I plan on updating and improving with some of the components of Underscores.

For ecommerce functionality, I’m using a suite of plugins purchased through WooThemes (who was having a very well-timed Easter sale that I was able to take advantage of). I’ve used a number of different ecommerce plugins with WordPress and always come back to WooCommerce for a few reasons:

  • It just works. The settings and core components work exactly as they should without any fussing about.
  • The templating system is very simple to use. I’m not a fan of all the hooks that are used by default but it’s very simple to just copy out a template from the core plugin and modify as needed.
  • The documentation is quite good. It’s very rare that I need to look somewhere other than the regular or API docs to get something done. I find myself using StackExchange and blog posts for core WP functionality more than I do for Woocommerce.
  • The extension library is fantastic. My only complaint is that I can’t think of something to make and sell there!

On top of the core WooCommerce plugin with modifications in the theme, I’m using:

  • Name Your Price – allows users to enter a price, used for donations and custom development charges
  • Stripe Gateway – dead-simple credit card charging. I’ve been wanting to use this service for a while but it did not integrate with my distribution software (e-junkie). I’m managing downloads and licenses on the site now (see below) so I’m finally able to take card through something other than PayPal.
  • Subscribe to Newsletter – sure, I could have coded this myself but it’s worth the $49 to plugin it into Mailchimp and the checkout form without any extra work. It uses the Mailchimp API to pull your current lists and integrates right into the checkout form. Even comes with a nice widget for the blog section.
  • API Manager – this was the one I was really excited about. It’s very tough to manage licenses and upgrades through e-junkie (all manual) and my users have been clamoring for an easier way to upgrade. This plugin lets people upgrade right in their wp-admin as long as their license is still current. I have not tested this thoroughly as of this writing but this was the main reason I wanted to move to start selling my products on my own site.

I considered Easy Digital Downloads (EDD) and Jigoshop but stuck with the one I had the most experience with. Jigoshop is a great plugin but I’m guessing WooCommerce, a fork of Jigoshop, will continue to have more development power behind it over time and I didn’t see a compelling reason to the latter over the former. EDD is a great product, from what I hear, but, again, I fell back to what I have experience with. It would have been a little cheaper overall and I do want to experiment with this one in the future but, for now, I’m sticking with WooCommerce.

I’m using a few other key plugins for functionality throughout:

  • bbPress for support forums. It’s heavy, a little irritating to use at times, and could use some better documentation but it’s still the best free forums plugin out there. It’s also the one I used for the original support forums so it made combining with the sales site much easier than it could have been.
  • wpMandrill for emails. This plugin just hooks right into the core wp_mail function to improve deliverability and add analytics. It’s free for the first 12,000 emails and kind of a no-brainer for a low-volume site like this. Don’t send emails from your own server!
  • WordPress SEO … because there’s no other SEO plugin to use, period.
  • PROPER Contact Form for the contact page
  • PROPER Widgets in various sidebars

A few other things that came together to make this site great:

  • Font Awesome for icons (I wish I had started using this long ago)
  • LESS for modular, easy-to-write and maintain CSS (this is what CSS always needed)
  • PhpStorm IDE by JetBrains (still the best IDE for PHP, WP, and JS, in my opinion)

What’s next?

I have several things planned for this site that will come online before too long:

  • A comprehensive documentation section for products marketed on this site (plugins, etc)
  • Blog comments … either core WP or Disqus
  • Product reviews
  • Plugins and themes for other platforms like Drupal and CiviCRM

And that’s the story of this site! Blog comments will be online soon and, once they are, I’m more than happy to answer any questions about the process or technology and take any and all feedback you have.

One comment

  1. 4/17/2015 at 10:35 am

    PROPER Site Refresh - Josh Can Help

    […] I built a site in 2014 to house all of my products and thoughts on technical “stuff” called “PROPER Web Development.” I call this site my “dev persona,” in comparison to this site which is more about strategy and agency. The main goal of the site was to get off of ejunkie (digital product distribution system, post on that coming soon) and get everything all under one roof. I wrote about how the site came together here. […]

What Say You!?

Your email address will not be published. Required fields are marked *