5 UX Tips to Help You Build Better Websites
When we started to build the Riley Children’s Health website we needed to ensure the content management system (CMS) we used was simple, scalable and powerful. Many CMSs fulfill one or two of these requirements but can become complex or bloated. We chose Craft CMS as the platform to build Riley Children's Health because it supports modular content, provides rich authoring tools and offers a robust third-party platform.
Riley at IU Health needed the ability to create “blocks” of modular content that could be added, removed and—in some cases—re-ordered. Craft has numerous field types to handle this sort of content, but the primary field used for this is the “Matrix” field.
The Matrix field allows us to define “types” of content so a user can insert that module into the content structure. Some types of content we use for the website include Accordion, Q/A Block and standard Text blocks. This provides a custom feel to each template while making it simple for users to create pages with as many or as few components as they need.
Craft also has sophisticated ways to relate content to other pieces of content. You can relate entries to entries, tags to entries, assets (or files) to entries, users to assets and much more. Because we have the ability to relate entries to other entries, we can, for example, create departments (e.g., Anesthesiology) and then indicate services treated by this department (e.g., Acute Pain Management).
These entries can then be added, removed and re-ordered to provide as much administrator and author control as possible. Craft’s relationship functionality made it much simpler for users to relate pieces of content to other areas of the site and display that material on the page.
Using relationships is vastly more powerful than just typing hard-coded links in input fields. When related content changes so do all of the entries that reference it. For example, if multiple departments reference a condition like “Acute Pain Management” and the condition is renamed to “Pain Management” then every department using this relationship will update as well. You could also create a closed entry and relate it to multiple areas of the site. Then, once you enable that entry it will appear throughout all of these areas at once. This makes content management significantly easier and provides a single source of truth for your data.
Craft has built-in support for writing tools like Live Preview, revision history and drafts. Live Preview is especially useful to authors because it allows them to preview their content in a resizable, split-screen view before publishing it to the website. This enables an author to resize the browser to see how their content responds to changes in viewport size, such as desktop and mobile. Because Riley at IU Health is a mobile-first, responsive website, it’s important that our authors are able to view their content in various conditions to ensure it looks correct—prior to publishing live content.
Revision history and drafts enable users to traverse past versions of entries and save them without publishing to the website so adjustments can be made later. There’s also an optional “notes” field, providing an opportunity for collaborative feedback on what has changed between different versions of content.
While Craft provides a number of first-party features, we occasionally need tools that aren’t available in a standard Craft installation. We used a number of third-party tools—many that utilize APIs from services like Google Maps and Twitter—to make the Riley at IU Health website even better. For instance, we used a third-party tool to map each of the locations on a Google Map on the Contact & Locations page. Users can now visually pinpoint where each location can be found within the website.
One particularly useful third-party plugin is Hill Holiday’s Craft User Manual plugin. This plugin lets us create Craft entries that explain how to add and remove entries, upload new files and effectively use the WYSIWYG editor. Once these entries have been created, they become available to all users from a “Help” area in Craft. This helps us provide living documentation on how to use the site directly inside the CMS.
Because Craft is built on top of Yii and uses Twig for the templating language, we were able to build our own set of custom plugins and use them on the website. The combination of Yii and Twig made it easy to do complex things simply and wrap it in a Craft plugin for any future Craft builds.
It was important that the CMS we used for Riley at IU Health had the ability to be extended. This allows each plugin to have a diverse set of functionality that could be maintained and improved without waiting on Craft to add first-party support for it.
Craft’s strengths in these key areas made it an easy choice for the new Riley at IU Health website. It helped us build a complex website much quicker than competitive CMSs. Because the CMS performs efficiently and scales easily, the website can evolve much faster in a short period of time during future iterations.
If you’re looking into a CMS you’ve not yet used, I’d highly recommend checking out Craft and giving their “Personal” license a try.