Responsive overhaul for Elite Womens Management sites

The team from UI Farm took on a project to responsively redevelop 4 separate websites onto WordPress. Simone talks us through exactly how they were able to achieve it.

The following is a guest post fromSimone Silvestroni, Co-Founder of UI Farm. Simone reached out to tell me about their newly launched project with a model agency and I asked if they would like to share their processes with you. A beautiful looking site and good to see they paid attention to the performance of such a image focused site.

Update: I emailed Simon with a few additional questions specifically around the project. The additional questions can be found at the bottom of this article.

Women Management is a ‘high fashion’ model agency, now part of Elite Model World Group. UI Farm are a London based, modern agency committed to creating beautiful, user-centric responsive websites and mobile applications for the multi-device web.

UI Farm worked closely with Women Management’s brand to develop mobile friendly websites, featuring a clean and chic design. The network of four websites, including Women Management New York, Women Management Paris, Supreme Management and Women/360, are all based on UI Farm’s custom WordPress framework called ResponsiFarm, tailored for optimal performance on all devices.

Workflow

UI Farm received from Women Management’s design team the brand guidelines and the layout ideas, along with a detailed brief describing the desired functionality. As responsive web design focuses on running a website on every device, emulating a devices behaviour along with the look and feel and user interaction becomes very hard and time consuming, following an old-fashioned process. As a result, our workflow differs from that of a traditional web agency.

UI Farm used the received PSD files merely as reference for typography and colours, choosing to apply a design in the browser approach.

At UI Farm the role of UX designer and UI/front-end developer developer are more hybrid, with less separation between the two roles. The designer and developer worked together to create a fully responsive HTML/CSS/JS prototype that provided multiple benefits. A major benefit is that Women Management could see the wireframes via a URL as a real HTML responsive prototype, on any device and on any supported browser. Even at this early stage, the client was able to see how the site interacted with the user and how the flow of the product worked.

By doing this we achieved the following benefits:

• Delivered a live URL.
• The real product, not a mockup.
• A design that showed the full user interaction.
• Something the client could see and test on any device.
• Real typography.
• Real colours.

This phase was a true collaborative effort, allowing UI Farm to evaluate, propose and develop some crucial UX improvements. Once the first site was complete, all the functionality and the approved changes were applied to the other sites of the network.

Websites Features

Home Page

• Multi-city main menu, with custom drop-down sub-menu when needed.
• Featured models in an animated responsive carousel.
• Multi-columns layout with integrated content including latest news and social feeds (Instagram and Twitter) for the agency. On the model pages this changes to the model’s related content and social feeds. Adaptive content for mobile devices and tablets, with performance-enhanced features.

Models Board

• The models photo gallery, using our custom responsive grid, adapted for all devices.
• Upon clicking on a letter, a smooth scrolling animation takes the user to the correct models names.
• On mobile and tablet devices, the grid adapts to the different features. Big letters are “tappable” to open and close the related models

Models Portfolio

A responsive full screen carousel has been implemented, to go through each of the model’s portfolios. Custom features include allowing users to download & print a PDF version of a related book.

Performance

One of the most important features of the websites is how they can perform on a multitude of devices. Lazy loading has been implemented on the models board page, deferring the thumbnails loading to when the user scrolls down the page. Thus, the user doesn’t have to wait for the entire content to be loaded before starting to navigate the site.

WordPress plugins and widgets have been developed from scratch by UI Farm, tailoring the functionality, to the client’s need. UI Farm used native APIs instead of ready-made tools: a fit example is the implementation of the timelines for Twitter and Instagram.

The models portfolio page features a highly customised and optimised version of Flexislider.

Results

The new Women Management multi-device websites feature a modern look & feel, with an elegant use of colours and typography. UI Farm developed a custom and powerful solution working with Women Management’s backend model booking system, making sure that the beautiful photo galleries and model portfolios feature a quick and performant high-speed page load. The websites also enjoy social networks integration, sleek multi-device navigation and a fully branded blog with integrated content throughout the site.

Additional Questions

Tell me a little bit more about your special framework within WordPress. What makes it so much more suited to responsive design than anything else that’s around?

There are plenty of ready-to-use and responsive frameworks, likeTwitter Bootstrap, orFoundation. While there are many good reasons to use one of them, there are also good reasons to not use them. The context is all and our decision was based out of our specific situation:

• We didn’t want a starting point with a pre-defined look & feel
• We didn’t want to spend valuable time to “reset” that look & feel for each single website
• If we had to spend a lot of time digging a framework to learn everything that’s under its hood, why not spend that time building our own based on our needs?
• If we didn’t spend that time digging the framework, we would end up with websites full of useless non-optimised clutter

This simple analysis lead us to the decision: if we wanted something reallyoptimised, highlyperformantand easy toscale and maintain, we couldn’t use any of the existing frameworks.

For more information on this please read our blog post athttp://uifarm.co.uk/blog/responsive-design-framework-performance/

How did you test and manage the site performance? What tools did you use, did you set a performance budget?

UI Farm didn’t have a separate performance budget per se, but we scheduled performance related tasks as part of our overall QA “sprint” for the overall performance testing and associated changes.

At present, UI Farm are still working with Elite’s hosting department to improve overall page performance through server configuration optimisations (such as:Vary Accept-Encoding, Etags, Leverage browser caching).

Tools used:

• In-browser tools were used for page speed performance testing across environments (local, stage and production) such as Safari’s Web Inspector, Chrome Developer Tools, and Firebug for Firefox.
• A combination of Sitespeed.io, webpagetest.org and GTmetrix were used to analyse web page speed and performance. The results of the aforementioned tools were then analysed to make the necessary changes for performance improvements.
• After improvements had been made a combination of virtual machine and physical device testing were used to verify across multiple devices and platforms.

You’ve not chosen to implement a responsive image solution (using picture or srcset), any particular reason?

A responsive image solution such as the picture element or srcset was not considered for this project for a very good reason. All of the imagery for the site is provided by Elite’s backend booking system API. As such, this API only provides us with one version of the images.

WordPress is famous for adding a script and CSS for every plugin, it looks like you’re suffering from the same thing. Are you planning on trying to concat any of those together?

Due to time restrictions set out by the client, certain design decisions were made to make sure that the network of sites were delivered on-time. One of these decisions was to use an existing WordPress plugin for the newsletter subscription service (MailPoet) even though this did not fit in with our stance on performance.

In general, when implementing third-party plugins, UI Farm removes the plugin’s CSS and Javascript requests where possible through WordPress’ deregistering function calls. UI Farm then re-packages these files through our Grunt build workflow in order that they are packaged with the site’s application JavaScript and CSS.

In version 1.1 of the sites (currently in development), this issue with the MailPoet plugin will be resolved.