Content, Design, Development and ExpressionEngine

We are now a design studio that solely focuses on ExpressionEngine for websites, and we truly believe is the best way to serve our current and future clients. There are countless reasons why EE has become our sole choice, but it boils down to it’s unmatched flexible and extensible platform.

The experience

Our focus from the beginning has been to focus on designs that are clean and lightweight. From there on, the user experience should match that same philosophy. These are the only two aspects that a client’s customer will see, how the website looks and the experience of interacting with it. All the customer cares about is the content and the experience of using the website.

The backend

If the client manages their own site, they will have one more layer of interaction, which is managing the website in the backend. This will directly dictate how the website will look and function over time. If you have a clean and easy to use backend that does not require the client to try to arrange a page’s content in an editor, the website will be updated and maintain the original’s design.

Design & Development

As a studio that does both design and development, finding ExpressionEngine has been a breath of fresh air over any other Content Management System we have used in the past. We can separate, design from the front end development (HTML, CSS, Javascript), as well as from the server-side development (custom add-ons, PHP). This allows us to bring our clients an extremely clean and easy to use backend, all while maintaining our work in separate layers that are clean, easy to update and maintain.

We are proud to support EllisLab for all their amazing work in making ExpressionEngine a stable, secure and modern platform to work with. We have also been invited to be one of the moderators of their new support forums and are extremely grateful for the opportunity to give back to the company and community that surrounds it.

Adaptive Images for Responsive Design with ExpressionEngine

Most of the websites I design have large images that fill out the width of the screen, but there’s no point in serving a 1920 pixels wide image to a phone with a 480 pixels wide resolution. In fact, if you run Google PageSpeed Insights on such a site, the mobile score can be 10 to 20 points lower due to such large images.

This example uses the following setup: ExpressionEngine, jQuery, bootstrap and breakpoint.js which comes with HiSRC. It uses bootstrap’s standard media queries, 480, 768, 992 and 1200 screen widths.

ExpressionEngine setup:

Create constraints for the File Directory you intend to use. Here’s how I did it:

Example image tag for your ExpressionEngine templates:

The last step is to add breakpoint.js to the site:

This setup will have ExpressionEngine automatically create the different size images upon upload. It can be used with the standard File & Grid fields as well as other instances such as the File Entries tag.

Spring 2015 - What We Are Working On

​Spring is here and we have several exciting projects in the pipeline. We are in the design stage for a new website for two non-profits, both which will use ExpressionEngine as the backend. We are also actively working on migrating several existing WordPress sites with thousands of articles and users to ExpressionEngine.

The non-profits we are working with are Friends of Baxter State Park and Seeds of Independence. Friends of Baxter State Park is an independent citizen group with a mission to preserve, support, and enhance the wilderness character of Baxter State Park. Seeds of Independence is a nonprofit corporation, founded to help at risk youths in Maine reach their full potential as independent, productive members of society.

Additionally, we have begun working on a new project for outdoor enthusiasts that will launch sometime in the Spring of 2016. The project is a brainchild of Willow Light Studio and entirely self funded.

mHealthIntelligence // site for Xtelligent Media

​We’ve developed and designed a new website for Xtelligent Media. The website features a responsive design, custom search engine optimization and state of the art performance with ExpressionEngine. mHealthIntelligence offers Mobile Healthcare and Telehealth News and Resources for Healthcare professionals and is part of the Xtelligent Media network of sites.