The purpose of this inital walkthrough is to outline our attempt at creating a hybrid between the design side of UTHET and the content of HFBenefits.com. We are aware that the content may change drastically from this initial build but it was a good foil for developing techniques that may streamline this process going forward.
Here are a few examples of our attempt to make this combination come to life:
1. Home Page
The home page uses mostly elements and layout from UTHET, including the large interactive slider, navigation structure, and theme. We've implemented the requested navigation links and pointed them to the pages we felt made the most sense (though feel free to change this) but we will need some feedback regarding the Access Direct page, unless we are just porting over the information from the Networks page. We will also need direction on the Find a Provider functionality, or if we are just using the existing functionality that UTHET used.
The four Services boxes typically found below the slider are now using nodes we originally would have found in the Our Solutions section of the previous site.
Footer information is cribbed from the old site, with link groupings made based on what seemed to make the most sense, but again this is changeable. We also added login buttons here to increase visibility of this.
2. New Content Type / Fields
We've retained most of entity types from UTHET but we did add a Leadership content type, for the express purpose of having entities that would be used to create a View that mimicked the Leadership Team page from the previous site. These nodes have their own styled templates as well, in case we want to expand on the information per person, and can be clicked through from the view.
The Services content type has been repurposed for the use of the content that would have been previously found in Our Solutions, and we've added optional Paragraphs to assist with content creation / layout on this content type and also Basic Page. We'll talk about those next.
3. Paragraphs
In order to keep with a sense of the content layout of the previous site, while still allowing it to be wrapped within the UTHET theme, we've added Paragraphs as a way to establish some design patterns that content creators can leverage and adhere to. So far we have five types of paragraphs, all accessible under the new field_section type, and they can be added in as many times as needed per node, and also moved around in stack order. Let's go over them here:
DO NOT TRY TO CLICK THE BUTTONS BELOW — THIS IS AN IMAGE THAT SHOWS HOW PARAGRAPH SELECTION LOOKS IN THE NODE FORM
PARAGRAPH 1: IMAGE LEFT
There are a number of places on the old site where you will see a column of content, with an image and (sometimes) button to the left (or right) of it, but the content does not wrap. This happens in enough places that it warranted its own Paragraph. Even though it is called Image Left, you can place the image to the right as well if you prefer.
PARAGRAPH 2: TWO-COLUMN W/ FORM
In the areas of the site where a form is required, it is often presented as a form in a sidebar, with content to the left (or right) of it. In these situations, we will need content creators to embed a specific form without recreating it completely, and also have the freedom of putting in additional content that corresponds with it.
PARAGRAPH 3: TABS
There are multiple sections on the previous site that couches its content within tabs. UTHET already utilizes some standard Bootstrap components for this, so we cribbed some of that to create embeddable rows of tabbed content.
I've also included some quick pointers on the weight selectors to show how a content creator can change the order of tabs within the paragraph, and also the order of the paragraph within the node. This can also use draggable views but considering the size of each section it is honestly easier just to use the numerical weight selectors.
PARAGRAPH 4: TABS LEFT
Admittedly, I probably could have wrapped this into the other Tabs Paragraph type but for now it is separate (it's easier to define template, styles and variables when separate). Notice I've cut off the Tab and Paragraph weight selectors to save space displaying it here but they are normally in the UI. Using this Paragraph allows the content creator to create tabbed content similar to the previous Paragraph, but with the tabs on the left hand side of the content, going vertically down. These tabs are easier to fit into skinnier content areas (such as those where a sidebar is present).
PARAGRAPH 5: STANDARD WYSIWYG
If you find yourself needing some custom content in between the other Paragraph rows, you can add a section that is just a regular old WYSIWYG. No need to show the UI for this one, it's pretty straightforward. However it is worth mentioning that, specific to the Paragraphs, any use of the blockquote will display to the browser like so:
WHY USE PARAGRAPHS?
By leveraging Paragraphs, we are able to give content creators the flexibility of multiple layout options while still enforcing a sense of consistency on templates, styles and content format. By sticking to a handful of Paragraph types, we can ensure that content does not end up looking too different across the site, while streamlining the process for the user who may not have a lot of HTML knowledge. Those who do have HTML knowledge can still use the WYSIWYG fields without sacrificing much.
4. CKEditor + Styles
We've switched out the WYSIWYG module for the CKEditor module here because it handles the CKEditor library better. Accordingly, the Media CKEditor module is used in lieu of Media WYSIWYG as well. By doing this, we can leverage a few more advanced settings in our text formats.
One of these benefits is the ability to easily control what colors the users have access to when deciding to apply colors to fonts. I've included the style guide colors as well as some variants of gray in our current implementation. This is a nice shortcut for users who want to stick to the style guide color palette.
Final Notes:
I'm not suggesting that we keep the kitchen sink amount of buttons we have in the editor at the moment. We can discuss which ones should stay.
There are more additions but they are primarily "behind the scenes" type changes so to keep this walkthrough as concise as possible, I will leave those out for now.
One bug that I'm aware of is when a user embeds multiple Paragraphs of the same Tabs type. I have to include the delta of the paragraph in the HTML element ID to fix this and I am working on that.
Please do not hesitate to contact me (christopher.morris@ardenthealth.com) with questions or changes you would like to see made.