Developers, Developers, Developers!

This Developer’s Guide is designed for frontend engineers working in HTML & CSS creating sites within Phosis.

Phosis takes your vanilla HTML/CSS/JS and turns it into end-user manageable data-driven sites. With clever use of the building blocks of the web, you can create dynamic, interactive sites without touching PHP or other code.

You can build a standard multipage website easily once you get the hang of things. Or, you can craft a single-page site populated by rendered JSON using the feed capability. Or build a site that’s a series of static HTML pages served at Phosis’s high speed, or any combination of the above. It’s really up to what you want to do.

We’re going to be fleshing this section out in the near future with some technical case studies of sites we’ve built in Phosis to show you the breadth of what you can do. But, remember: control is in your hands.

A Note On Expected Workflow

Phosis originally started as an internal tool for us here at Mattermind to make our lives easier for the handful of client sites we create. We’re not a web design agency by any means, though it’s something we’ve done on behalf of some of our larger clients as well as one-off projects here and there.

However, this does mean we’ve been in your shoes, frontend developer.

We’ve found that we spend the majority of our time in building Phosis sites to be in familiar HTML, CSS, and Javascript territory.

A recent site build we did that was about 7 pages, relatively media-rich, and had a handful of custom Javascript plugins was split about 21 hours of HTML/CSS/JS work, then only 3.5 hours in Phosis.

Most of our Javascript time was spent learning & fiddling with GSAP TweenMax and with implementation of a sitewide audio playlist player, as well as making the site AJAX-enabled to allow the player to keep streaming while users navigated the site.

Most of our Phosis time was spent uploading files and setting up custom data tables that the client would use to update various sections of their site, such as the audio player’s playlist or photo gallery.

Since we launched that site, the client — who is not technical in the least! — has been able to update their site, adding media, photos, and content easily using Phosis’s user interface, all working within the templates we laid out.

So, that’s kind of what you should expect. We give you those hour counts not as a benchmark, but rather as a sense of how a company that’s comfortable with raw HTML/CSS/JS and Phosis can operate. Your mileage may vary, of course, depending on your or your developers’ specific skillset.

How Mattermind Builds Phosis Sites

We generally build the static version of the websites either entirely this way or, if many pages have similar structure, just the amount of pages needed to really get the HTML/CSS look and feel to a useful place. This is also where we create any interactivity with Javascript.

Next, we start breaking out the pieces of the site into object templates & containers, striking our preferred balance between section-specific CSS classes baked into the templates/containers vs. more generic templates with the expectation of adding CSS classes via Phosis’s editor. We generally err on the side of reusable templates + many more CSS classes requiring manual addition when putting the template/container onto a page instead of many more templates/containers, each with their use-specific CSS class baked into their HTML. We do this because we’re totally comfortable working this way and our clients aren’t the ones putting pages together. However, if your end user is going to be editing page content blocks, you may instead want to have your templates/containers be more purpose-built and have descriptive names in the interest of making it easier for your client.

Next, we create upload CSS/JS files and create our Page Template, replacing the path to CSS/JS in the page template’s <link> and <script> tags with the permalinks from Phosis’s Files & Media.

At this point, we usually build a page or two before we go full tilt with the complete site so that we can flesh out gaps in the CSS or Javascript, overwriting the existing CSS/JS files in Files & Media as needed with updates.

Want To Be Recommended?

If your agency has been working with Phosis and enjoying it and building beautiful things, please reach out to us. We’d love to include your sites in a future showcase, but also are interested in finding agencies that can be official Phosis partners who we would recommend when clients reach out to us strictly for web design services. (As mentioned previously, Mattermind is hardly a web design agency — we’re not built for it, and only do it as a value-add to our larger development clients, so to date we’ve been passing on any web design work that’s come our way.)