Deep Fork Retrievers
John and Beth Ann Amico, owners of Deep Fork Retrievers in Choctaw, Oklahoma needed a replacement for their decade old website. Their old site, originally built and still maintained in Dreamweaver, was difficult to update and was almost unviewable on mobile. Additionally, they were having difficulty converting, as callers often did not realize that Deep Fork was a retriever training center.
For this site, I wanted to really stretch my capabilities and see what I could do in the way of user interaction design. I also knew that I wanted a simple, predictable custom framework that I could easily use to expand the site without breaking anything.
I set about building a grid system that accepted classes for each bit of content, and a set of common rules that applied to every page. Each block of content is a consistent set of HTML tags that are styled identically, and use pseudo-selectors to alternate the color scheme of each block. A class is then added to the main element that determines its width in the grid. Data attributes are used to either dynamically add the content at the right side of each block or determine the block’s width class, and are used differently on each page.
I made the site’s menu easily accessible, but hidden in the UI. To show the user the location of the menu, it loads open on the page, hiding automatically after 0.8 seconds. The menu also sticks to the top of the window on most pages when the page is scrolled.
I removed the contact page and added the contact form to the right side of the page for quick access. The contact form can be access by either clicking the envelope icon or any “contact” link on the page, including in the site’s main menu.
This only scratches the surface of what I have going on here. Look for a full write-up on the design process in the very near future.
- Implement a feature to only show the hiding menu once during a session.
- Add slide up info to more of the content
- A series of secret features I have swirling around in my brain
Emily Roe Photography
Emily needed an elegant design that put her photography front and center, but matched her creativity. She wanted page elements to look natural and give way to her work.
Living Hope Welch Events Calendar
Tyson Wynn, the pastor for the Living Hope Baptist Church in Welch, Oklahoma contacted me to build a better way to post church events on the website. The theme he’d purchased for the site had an event system built in. However, the system was clunky and did not offer the option of recurring events.
The script I wrote will be available for use soon on my Github page.
The Automatic version of StripperJS removes all but the most common content elements, resetting the original content in a series of paragraphs.
The Manual version accepts a comma-separated list of CSS selectors and removes any content in an element that does not match what the user entered.
WelchOK.com serves as a virtual newspaper for the small town of Welch, Oklahoma. Tyson, the owner of the site contacted me when the theme he’d used had become too cumbersome to use and loaded very slowly. He needed the content to be better organized to relieve some of the site’s upkeep, load faster and be mobile friendly.
As I worked to download the existing site, I quickly discovered 3 Gigabytes later why the site was so slow to load. I immediately set to work redesigning the layout of the site. Using the same color palette, I reconfigured the layout of the page, minimized the number of images required by the UI and built a new, responsive template that renders very quickly. What’s more, all of the files for the entire WordPress-based site clocked in at only 156 Megabytes, with the total weight of the theme itself registering only 506 Kilobytes.