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.
The site’s main page content focuses on telling users what Deep Fork Retreivers does, while driving them toward conversion. Based on WordPress, deepforkretrievers.com uses CSS and JavaScript to size the page to the user’s screen, maintaining readability while keeping a unified look across platforms.
RonaldRoe.com
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.
To-do:
- 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.
Using natural colors and art assets inspired by her photography, I created a simple, yet elegant user interface that fit in with Emily’s work while keeping the photos at the forefront of the design. The site was built on WordPress, using minimal JavaScript for interaction. All interface assets are custom.
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.
Why someone would build an event system that way was beyond me, but I set to work incorporating his Google Calendar into the theme using the Google Calendar API, version 3. After researching the API, I decided that dynamically adding the events through JavaScript’s AJAX capabilities was the best way to go for this scenario. I was able to incorporate the events list into the existing Main page and Events page sections without altering the existing design.
The script I wrote will be available for use soon on my Github page.
JavaScript Page Content Stripper
StripperJS is a pair of JavaScript bookmarklets that are designed to help front end web professionals quickly move content from a client’s old site to their new one by removing everything except the content.
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
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.
The site now uses custom JavaScript to import weather, display a live broadcast player, and reconfigure certain elements for mobile displays. There are only 2 images used in the UI (one PNG, one SVG), and icons used on the page utilize a lightweight icon font.
