Okland Construction

Case Study: Okland Construction

The Okland Construction project was one of the most complicated, comprehensive and intricate projects I’ve ever attempted.

A company that I do a lot of work with, ConsultNet, brought this project to me.  At the time, Okland had already began the process of building a new website with another developer that wasn’t working out.  They were being told that many of features they wanted were impossible to build and it was going to take three months before it was complete.  I found out that they hadn’t yet considered a mobile friendly website because they believed it was a separate website project.  When they found out that I could build everything they wanted, plus give them a mobile friendly site – in only one month – and within their existing budget – they were immediately on board.

At that point I was committed and had just four weeks to create a content management system, a pixel-perfect, mobile friendly website and multiple jQuery components most of which had animation.

Okland’s website designer, Ryan Hyde, had already created every page of the website in Photoshop and used those pages to create very comprehensive slides with tons of notes, font sizes, colors, etc. in the companies slide sharing software.  He had also uploaded most of the images to separate file sharing software and was available to work with me throughout the project, allowing me to very quickly get everything I needed.  I gave him access through my firewall to view the project on my development system so that he could see changes in real time and we communicated mostly via Skype.  I also worked closely with Okland’s Director of Information Systems, Lee Holland, in order to get an Ubuntu server setup for this project very quickly.  If not for all the work that he had already put into those slides and the responsive communication from the people I was working with, this project would have been impossible in the promised time frame.

Below I’ve detailed how I built some key areas of the system.

Content Management System

The CMS is built using a php framework that I have personally developed over years named phpVolume.  It allows me to very rapidly create complex enterprise class applications.  It has features such as tiered security levels, security inheritance, user roles, and an extremely advanced object model that’s automatically builds and runs each of the modules.  The modules, in this case it was Projects, Markets, News and Awards, are represented by a multi-dimensional array that contains a full description of the object and the options it requires.  The framework uses a module object array to create a datagrid for viewing the records and the forms for adding and editing the data.  By default each module object supports data validation and record locking so that only one person can edit a record at a time and everybody else is given a view only option.  Some of the optional options include record cloning, recycle bin, custom fields, record tagging, parent/child relationships, opening of the forms in dialog windows, form loading via post or ajax and form saving via post or ajax.  There are also multiple hooks within the form controller module that allow a developer to extend a forms functionality any way the choose.  While it has a ton of automation and does most of the work for you, the object controller is designed to never get in your way.  This advanced technology made it possible to have the entire cms built in less than a week including all of the file uploads, image manipulation, gallery sorting, video uploads with automatic thumbnails and an integrated html editor that’s used in multiple places.  The CMS also features a built in help system that gives users all of the information they need about a module or a part of module when they need it.

Custom jQuery Components

Full Width Responsive Slider:  The challenge that the previous developer could not overcome was in creating a full browser width slider that would scale properly with the viewport width.  I overcame this problem by using css to position the slider and using javascript to resize the slider overlay to the size of the slide image and then positioning it directly on top of the slide image.  Anytime the window is resized, javascript resizes all of the elements so that it stays perfectly positioned.  Animation is handled using the jQueryUI animation methods.  When a users mouse is over the slider animation stops until the mouse is removed.  The slider works on all screen sizes.

News Marquee: The news marquee on the home page has a lot of animation components and interactivity.  Each news items slides down as the next item slides in from the top.  When this happens the selectors beneath animate at the same time to indicate which item is showing.  Because this is a responsive component, an ellipsis function shortens the text as necessary and adds a nice … to the end.  Clicking one of the news selectors changes the news item to the one associated to that selector and waits 20 seconds before restarting the animation.  Hovering over a news item stops the animation and displays a button bar.  Once the mouse is removed the animation restarts in 5 seconds.

Project Image Gallery: This is basically two components that link together to form one amazing gallery tool.  The large image has an overlay containing the slide arrows and full-screen icon.  This overlay is sized and positioned once the page is loaded.  The thumbnail images beneath it are a separate slider.  Using javascript I was able to calculate how many slides are visible on the screen so that the two sliders can be kept in sync.  When a users browses the slides using the slide arrows on the large image the thumbnail gallery automatically updates to reflect the current slide. When they browse beyond the slides currently visible in the thumbnail gallery, that gallery automatically advances or rewinds to stay in sync.  The slider arrows on either side of the thumbnail gallery advance and rewind the gallery sets and the large image is automatically changed to the first visible image in the set.

Project Full Screen Gallery: This gallery is used to show the very large full sized pictures uploaded in the cms.  It has zooming capabilities with the mouse scroll wheel and with a toolbar layered on top of the image as well as image panning using the mouse when the image is zoomed in.  The dots below the image represent the individual images.  As the user scrolls through the images the dots change color to indicate which image is showing and the can be clicked to open a specific image.  Although it’s not obvious, this gallery actually opens in an iframe.  I’m using the advanced dialog library that I built for the phpVolume framework to open a borderless dialog window and the content is loaded via the sites web controller just like every other page.  The dialog library allows me to control the opacity of the modal overlay so I simple set the color to black and the opacity to 0.

Website Controller

Rather than use a traditional folder/file type setup I opted for a more advanced sitebuilder type system that uses search engine friendly urls to mimic the folder/file setup.  This website controller that I created route users to their desired page, loads and compiles the data for each page, automatically handles 404 errors and has a number of per page options that can be set such as page title, meta description, meta keywords and stylesheets/javascript files that must be included, to name a few.  Use of the theme is optional as you might have already figured out after reading about the Project Full Screen Gallery.  The controller handles the search functionality and also includes a number of unadvertised url shortcuts used by Okland staff to open various website applications.  Another key component of the controller is the dynamic sitemap.xml file that it generates for the search engines.  All of data from the CMS is included in the sitemap so that the spiders can easily index the site.

Conclusion

The end result was that this project was completed on time, on budget and the client was extremely happy.  I was able to provide them with everything they wanted and much more.

Stage 2

A couple of months after the website was complete I began work on the second stage of this project.  This involved creating a Grunt development environment, integrating the project into Grunt, converting all of the stylesheets to SASS and adding the codebase to a subversion repository. This resulted in the website being easier and safer to work on, easier to deploy and most importantly the speed of their website was increased dramatically.

Grunt is a system that runs in the background while a developer is working and automatically builds production files.  This is by far the most advanced grunt implementation that I’ve ever created and it does a lot of really cool things such as checks the javascript for error and potential problems, minimizes all the images, and automatically uglifies and concatenates javascript files.  The css functions include converting SASS to css, concatenation and minification.  In addition I was able to overcome some of the problems with SASS importing stylesheets more than by copying the necessary files to a new folder, using a text replacement tool to remove the @import from one file and updating path on the others to the original source file and then converting the files to sass.

I worked with Lee at Okland to setup another Ubuntu server, this time for Subversion.  I then installed subversion on that server, created the repository, created a new user and then configured the system for svn+ssh using key/pair authentication.  Users connecting to the server via ssh using the key/pair are restricted to repo and can do nothing else.

One of the major challenges in this stage was having to setup everything again on a Windows computer and document each step of the process so that it could all be duplicated on Ryan’s computer at Okland.  Luckily everything worked out and I came away with the impression that developers originally built some of these systems for Linux and then realized, oh yeah, people on Windows are going to want this to.

Stage 3

The third and final stage of this project involves adding finger sliding capabilities to the image sliders and upgrading the third-party Job Applicant CMS to match the design of the new website.  This stage is currently underway.

Project: http://wealthbridgemarketing.com/portfolio/okland-construction/
Testimonial: http://wealthbridgemarketing.com/testimonial/okland-construction/