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.