The discussion around responsive website design versus mobile platform development is an ongoing one. The gap in size between a Galaxy Note 4 and iPad Mini is a mere inch, and that size difference could all but disappear in 2015.
Programming a Yahoo! Store with responsive design in mind presents a few challenges. The process of going responsive is not as simple as updating stylesheets and behaviors. A project like this requires a rebuild, as every store element must be accounted for in some way at different resolutions. Much of the work involves modifying store elements to account for different browser sizes and pruning some store elements out completely at smaller sizes. The process truly starts at the design level.
The store mockups were originally based on the 960 grid system, but some changes were made later to account for WRS’s specific needs.
We worked closely with WorldRugbyShop.com and the design team to come up with layout scenarios for every template type. Many Yahoo! Store owners are familiar with the table-based shopping cart layout. This presented another hurdle for us, but the result was ultimately successful.
Previous design:
The new and responsive WorldRugbyShop.com:
The new WorldRugbyShop.com accounts for four different size choices. The header, navigation, and footer are completely rebuilt depending on the browser size. There is a list of templates that have different needs, priorities, and layouts depending on browser size as well. And, of course, the shopping cart changes depending on the device as well.
The store only recently launched, but we have seen a number of improvements. Here are a few words from Brad Kilpatrick at World Rugby Shop:
“The responsive design is completely worth it and has the added benefit of having only one site to maintain prices, promotions, banners, etc. But you need to be ready to do a whole lot of testing. While you only have one main website/component to manage, you have to remember that one website now has multiple different layouts and break points. When you start throwing in the idiosyncrasies of various browsers and devices, you quickly have a lot of things to check up on. Fonts will act differently, buttons will be out of place, etc. While it simplifies in some areas it can add complexity to other areas you didn’t have previously.”
“FastPivot was great to work with – very responsive to questions and concerns (even on the weekends) which helped my anxiety to no end and always courteous. Special praise to our main developer, Adria, who is a coding wizard. She figured out a way to make all manner of requests works despite the limitations of our current platform and did it quicker than anticipated every time. It was a massive undertaking and a lot of work, but FastPivot did as good a job as possible of making it as easy as possible.”
“The results on conversion and other key metrics have been outstanding, particularly on mobile. Conversions are up 27% overall (29.5% on desktop, 44.5% on mobile, and 12.1% on tablet) compared with the first half of the year. Bounce rate is down by 4% and average session duration is up 1.25%.”
“It is always difficult to make complete 1 to 1 comparisons between different parts of our year given how event driven sports sales can be, but the trend is extremely positive. There is a clear upward trend from the start of the new redesign which is great news and exactly what we were hoping for.”
We at FastPivot are proud of this accomplishment, but store owners interested in going responsive must be aware that a Yahoo! Store cannot be simply tweaked to account for different browser sizes. A rebuild is required, and the rebuild has to start at the design stage. Congrats to WorldRugbyShop.com on a successful launch!
For more information or questions, drop us a line!
