We’ve just finished working on a new responsive, Sellerdeck Desktop website for our client, Clubhouse Golf. Clubhouse Golf have been using Sellerdeck Desktop for over a decade and were keen to keep using the software. Desktop’s architecture – with aggressively cached pages combined with NoSQL database – gives fantastic performance with relatively modest server hardware and suited Clubhouse Golf’s requirements.
Whilst one of our external partners managed the design aspect of the site, I worked on the technical development. Obviously, I think that some of the best features are the ones that you won’t necessarily notice, so I thought we should give them some publicity!
Highlights include:
Filtered Search
Sellerdeck desktop has had filtering in sections for a few years, but Clubhouse Golf use this feature intensively and wanted to have it available for search. As filtering was built on the search engine it was relatively straightforward to add.
Another nice tweak is to hide the filter options while filtering is being setup on each page. That means the display doesn’t jump around while waiting for counts to be updated.
Form validation in the page
When working with a mobile device it can be particularly annoying if you forget to fill out a field on checkout. Error messages and fields can be separated by a long way. We added validation in the browser, with automatic scrolling to any invalid fields with local error messages.
Smooth Sliders
The carousel we’ve used in Sellerdeck desktop is bxSlider which is really flexible. However, behaviour with touch wasn’t optimal, and dragging with the mouse gave mixed results depending on the browser. We rewrote the touch and click handlers to give a very smooth experience. Go on, give it a swipe.
We also used this standard slider in some other areas – image gallery and recently viewed products. You’ll notice, depending on the device you use, that the slider is removed if there’s enough room to show the items without it. The slider also adjusts dynamically for example if you’re swapping from portrait to landscape.
Image Compression
Clubhouse Golf have many images, and take great care to make them look as good as possible. However, they can be quite large and add to bandwidth. We incorporated a standard image processing library to optimise images while publishing so that pages load as quickly as possible.
Ellipsis
That’s dot-dot-dot… When text for product names and so on is too long for the restricted space on mobile portrait, it’s automatically trimmed to fit and “…” added. Switch to landscape and they’re removed. Neat!
Mobile Menu
We wrote a new mobile menu for the site. Some PHP to generate the menu items, combined with JavaScript to manage navigation. Other items below the mobile header include the customer service menu and the mobile search. Showing one of these automatically hides the others.
Product Accordion
Try this for yourself on by switching your mobile to portrait. Scroll down and click on the next header. It moves smoothly to the top of the screen. Looks nice and easy? There’s loads going on under the hood to make this feature run smoothly.
Design Management
We had three people working on this project – The client was updating his live site, our external partner, doing the design work and I was implementing script changes. We used a desktop extension to save the design layouts and variables to files, automatically keeping track of when there were changes. When it came to going live it was straightforward to see exactly what had been changed, ensuring that nothing was missed.
