Articles

Create a responsive video play button overlay

A project I’m working on now involves redesigning an existing site, and converting it to a responsive design using the Bootstrap framework. One part of the home page has a list of video thumbnail images. We wanted to overlay a play button icon on the image to give an indication of what will happen when a user clicks on a thumbnail. This is pretty simple when you have a fixed size image, but it gets a little trickier with responsive images. The trick to making it work was adding a float to the containing element.

Upgrading ExpressionEngine to 2.7.3

I just recently upgraded ExpressionEngine (EE) from version 2.5.5 to 2.7.3. It took multiple attempts to get it right. There were a string of PHP errors after upgrading, some due to an incompatible third party plugin. The major issues had to do with the newly reconstructed relationships. EE relationships changed with version 2.6, and the new format is incompatible with the old format. If you used relationships in your templates in the past (I did), your template code needs to be updated when you upgrade. Conveniently, the upgrade routine alters existing templates to use the new relationship format. Even so, I still had a number of PHP errors after upgrading.

Responsive HTML and CSS starter templates

I’ve updated my internal HTML and CSS templates to include a responsive grid and other enhancements.

What is this?
For many projects, I’ve used my own collection of HTML and CSS to give me a starting point and speed up project development. I’m more likely to use Bootstrap or Foundation now, but my own internal templates are still useful on occasion and give me a chance to experiment and refine my process. My earlier set of HTML did not use a responsive design, and was getting outdated. This provided an opportunity to experiment with responsive design techniques, and also examine other frameworks in depth.

Wilcox Design website relaunch

I just worked with Jean Wilcox of Wilcox Design to redesign the company’s website and update it with new portfolio pieces. We included some of the design elements from the earlier website design, and updated the site with a lighter background and improved menu system. We opted for a larger image format to showcase the firm’s excellent graphic design.