I don't like to see my clients attempt to implement a layout using inline css and tables. This is certainly true when their layouts contain regular and repeated pieces of content. Not only does the site get sloppy, but end-users and my team can exhaust a lot of time and effort in trying to make it right, unnecessarily. The cleanest solution to this problem is to make the content more structured and leave the layout concerns to the web team. This is exactly why HiFi's Custom Fields exist.
When I set out to put Security Self Storage of Cleveland's new redesign on HiFi there were three page layouts used throughout the site: a homepage, a generic interior page, and a locations page.
The locations page layout jumped right out to me. Its content was highly structured. Revisions of the layout resulted in each page would have 18 unique content areas – some with multiple pieces – that may need to be displayed:
- Address and content
- Office & Access Hours
- List of Amenities
- List of Unit Sizes and Descriptions
- You Tube Video
- Gallery of Photos
- Google map of the location
- Sidebar links
- Page Subheading
- Pay Instantly link
- Google Maps direction widget
- Location-specific discout offers
- Location Phone Number
- Navigation title for Drop Down menu
- Phone number for a Pay-per-click campaign.
- Tracking code for coupon download code.
I knew I could rely on HiFi Custom Fields to really lock-in the how content displayed on their five locations pages. Custom Fields allow the web site's developer to add structured data to pages that is easy to work with in template layouts. They also automatically provide form inputs in the user interface for the client to manage. Within HiFi there are seven types of custom fields:
- Text field: ideal for single words or lines of text.
- Textareas: great for paragraphs of text.
- Dropdown lists
- Radio Buttons
- File (upload field)
- Markdown (custom HTML)
Most of the content areas for this site were set up as textfields or textareas with the exception of the List of available Unit and sizes (Checkbox - one for each unit size offered), and the coupon file (File - PDF).
I coded the templates to handle blank and default values sensibly. If the input field isn't empty the templates will display the information and corresponding markup. In a few situations, like the latitude and longitude fields for the google map, more than one field must contain data for it to be displayed on the page.
After a number of revisions, each of these pages have 44 individual input areas (220 total). It will only take a matter of seconds to update information on particular pages, like when a facility no longer has particular unit sizes available, or when they want to offer a different coupon to their current or potential customers. I saved myself and the client a few hours of work by having these pages setup with custom fields as we ran through a number of content updates before the site launched.
For all that effort, here are the final location pages: