This project was another custom build for EVOLVE® Marketing Agency. I like to follow best practice in making the websites I build “responsive”, i.e. working well no matter what device they are viewed on, and the design for this project was excellent in this regard. The components were typically one, two or four columns wide on a four-column grid, which made it very easy to adapt for different screen sizes. For mobile sizes I could display a single column, for small tablet sizes two columns, and for large tablet widths and desktop sizes the full four columns.
As with my last project for this client, I built the website as a mobile-first, Genesis child theme. With this project, however, I switched from using Eric Meyer’s CSS Reset (which basically strips out all the browser’s default styles to provide cross-browser consistency) to Nicolas Gallagher’s normalize.css, (which makes the minimal necessary changes to produce consistency, while leaving sensible default styles intact). My primary motivation was that I was finding I needed to add reasonable defaults back on to the blank slate produced by CSS reset, but it also made debugging the CSS easier, because every element did not have a 60-selector rule at each stage of its inheritance! (There is also a couple of milliseconds performance gain, according to the CSS Selector Profile in Chrome’s Web Inspector.)
I also switched my off-canvas menu to Cloud Four’s offCanvasMenu jQuery plugin, because it was a more elegant method than my previous solution. To make it more obvious that the “three-line” icon is a link to a menu, I retained the navigation bar from the full-width design, replacing its contents with a breadcrumb trail at the left, and the “three-line” menu icon at the right. In order for the breadcrumb trail not to overflow I added some server side checks on the depth of the trail, the length of the page title and the total length of the breadcrumb text. These either truncated the string on the back end, or added a css class which hid part of the string on the front end.
The client also wanted some badges overlaid on the slider, rather than being incorporated into the image. To achieve this in a way which didn’t break at smaller screen sizes, I added the badges as a 100% background image on a percentage-sized :after pseudo-element. The percentage sizing meant that the badge area would not be too large when the slider was scaled down for smaller screens, while the 100% background-size made the badges scale with the size of their pseudo-element container. Inserting these badges as CSS generated content also meant I didn’t have to try to modify the markup of the slider plugin.