Douglas Electric Website

Douglas Electric was founded in 1975 by Douglas Cryderman, running the company out of his home and from a 1,000 square-foot warehouse nearby. In its forty years of operation the company has grown to occupy an 8,000 square-foot office and warehouse facility in Wyandotte, Michigan.

Requirements

Responsiveness

Complete site responsiveness across all devices, operating systems and browsers while adhering to brand and design guidelines and the designer's vision.

Editable Content

Allow site administrators to edit "Services on Demand" content, including a sub-header, blurb and corresponding image to support that content.

Toolbox

Solution

Responsiveness

At the root of this site being responsive, is the ‘.maxwidth’ class shown in the code below. The max-width value of 1530 pixels is based on the content width of the final design. Once the viewport width is less than the declared max width of 1530 pixels, 20 pixels of left and right padding will be added to the div to prevent text and elements from butting up against the viewport edges. This, at its core, is very rudimentary responsive CSS but nevertheless an essential step to responsive design.

Getting Down to the Root of It
.maxwidth {
				display: block;
				margin: 0 auto;
				max-width: 1530px;
				overflow: hidden;
				padding: 0;
			}
			
			@media screen and (max-width: 1530px) {
				.maxwidth {
					padding: 0 20px;
				}
			}

Editable Content

The client needed a solution to be able to edit unique page content in WordPress for each “Service on Demand” page such as “24/7 Emergency Service”, “Facilities Maintenance Support”, etc. (Figure 1.) The problem with the default WordPress WYSIWYG editor in this situation is that the styling requirements of the design were too complex to allow layout <div> tags to be used inside of the editor. There would be no way to maintain layout integrity and structure using this method once users were added to the list of site editors.

The Nuts and Bolts

Custom fields were added to each “Services on Demand” child page to store the content and image needed to make the design and functionality happen (figure 2.) This includes a Sub Heading field, a body copy field, and a background image field for the div on the right (Figure 3.)

There are multiple pages on the site that have a similar custom setup with similar fields.

Forbes Robertson