Examples of work
-
My interpretation of functionality of the Customers design
/Customers/ -
Functionality based on the 'Home' and 'Careers' pages implemented into the Customers design
/Customers/go-live.html -
Filtering concept implemented into my version of the Customers design
/Customers/filter.html
My Thought Process
Prior to my chat with Mike, I decided I’d get into it and get familiar with the design and the existing code. To create my new HTML page for customers, I pulled all resources used on the new home page to ensure all pre-existing libraries are used and are unified across all pages. I have noted that jQuery, slick (for carousels) and backstretch (for header or fullwidth images) are being used.
Given the header and footer are common page areas, I also copied the markup for these from the new homepage.
Cohesion is extremely important for a site structure, so I have studied the markup of the new homepage to see what elements are managed at a global level. I found that the ‘section.fullwidth’ and ‘inner’ classes are maintained in the global CSS and should be used throughout the site. Because of this, I have include these in my new customers page.
For the full width banner sections, including the header banner, I have opted to use background-size ‘cover’ over using the backstretch library as I believe these do much the same thing however background size cover would require less resources. There may be an argument for 'background-size:cover' not being available in older browsers, however HTML5 js wrappers can do a great job in compensating for this.
Looking at the 4 sections of logos, I can see that there is a need for different configurations within each layout. With this in mind, I have written a few classes (not limited to these) to handle those layouts.
Each logo can be hovered on and those that have quotes from clients need to display on hover. Instead of just flashing this quote up on hover, I have opted to use CSS3 transitions on both the logo images and the quotes to gently fade the quote in for the user. The scale transition on the background images provides a nice subtle effect while the logo fades out to allow for readability as the user moves around each customer logo.
The video buttons required an action, so I created a dynamically generated overlay that the video loads into. To continue down the path of movement on the page, I created an opening transition for the video. Upon closing by clicking anywhere on the screen, the transition reverses and eventually removes the element from the DOM to ensure the video doesn’t keep playing in the background after the user “closes” the video.
At this point, I had a chat with Mike regarding his thoughts on how the page would work, where he introduced the careers page which included both the quote hovers and the video display. Mike also mentioned that in the future functionality of filtering by industry may be implemented and that should be something to think about now.
Now armed with this knowledge, and that I had already started my version of the functionality, I split the page into two files - a version with my ideas and a version based on existing functionality on other pages. The ‘go-live’ version was modified for Mike to use and potentially push live given it matches the same functionality as existing pages. This now includes the same look and feel for the video transition (using my own code for a smoother opening transition) and the image hovers with quotes. I didn't feel comfortable in just submitting this version as all it really shows is that I am able to copy existing functionality and that doesn't necessarily show what I can do.
Returning back to my version of the page, I noted that the homepage has a fixed background on the second full width section, so to match this, I added a similar feature to the 3 feature customers that go edge to edge.
I then decided to embark on making this page responsive, purely based on my own decisions as to how the page should respond due to no design for responsive being supplied. No markup was modified to achieve this - both the header and footer collapse down as fluidly as possible with some breakpoints included to modify and fit in the elements appropriately. The edge to edge sections (header banner, 3 feature customers and the signup CTA) reduce in font size and stack internal elements accordingly.
The customer blocks were a little more difficult due to allowing for the quotes on hover to display on all screen sizes. As much as I would have liked to make this respond fluidly, the 3 columns and the quotes just didn’t allow for it to respond and react like that. Because of this is why I chose to use 2 breakpoints to reduce these blocks down, firstly to 2 columns then to 1 for mobile.
Trying to keep to the structure of the initial design, and to keep even lines throughout the page as it responded, I chose to reduce the size of a few of the boxes. This in some cases caused a problem as these boxes had quotes that required a larger area to display in. To combat this, I updated the CSS transitions to increase the box size to its original height and overlay surrounding images.
Once down to one column, this functionality continues to be used, however instead of overlaying the images, it pushes them further down.
Finally, the filtering. Based on my thought processes regarding this, the current design doesn’t lend well to doing something like this. Consider that you would have a mix of industries that you will be filtering by in each customer block. If you were to then filter these, you would end up with either spaces throughout the design where the customers that don’t meet the filter, or you have some incredible movement throughout the page to ‘re-align’ the page with the filtered items, leaving the blocks further down the page potentially blank.
I have taken a similar approach to the ‘hiding’ example, but instead greying out the customers that don’t match the filter to give that ‘disabled’ look, making the items that do match more prominent. This is done via javascript and classes. The filter selects all non-matching classes and adds a ‘disabled’ class to the container which applies the styling to. This reduces any refreshes or load time to process a query. Please excuse the design of this filtering section, clearly not my strong suit.
These 3 pages have been tested in Chrome, Firefox and Safari on a Macbook Air up to a width of 1400px wide. I haven’t been able to get access to a larger screen to check how the site reacts at larger aspects (in regards to fullwidth background images etc. It has also been tested on an iPhone 6 in both Chrome and Safari.
Please don't consider this particular page as an example - it has been quickly thrown together to provide you with the links to the correctly styled pages as well as this content you have just read.