In 2012 Elle Décor chose Appnovation Technologies to develop the application for their extremely popular “lookbook” resource. Elle Décor’s Lookbook allows users to browse hundreds of images from their archives organized by room and style as well as access editor-curated lookbooks and a selection of best advice from ELLEDecor.com. This image-heavy application was developed on, and is currently being hosted on, the Acquia Cloud.

ELLEDecor.com is where style lives. It is the ultimate guide to decorating and design in addition to being the indispensable go-to resource for everyone who wants to create a more beautiful life. Whether your taste is classic or contemporary—or an eclectic mix of both—you’ll find ideas and inspiration, the latest information, products and tools to help you decorate, renovate, and entertain stylishly.

The Lookbook application boasts extremely responsive photo galleries and the ability for users to create and share their own design files (lookbooks) with others that might not even have the app. Users can also add notes and additional images to the images they have already saved in their lookbooks. The app has sponsored lookbooks where a company can sponsor an entire room with hotspots on images to learn more about the featured product on the sponsor’s website. It can also feature a news section with the latest selection of articles from Elle Décor.

Elle Decor Lookbook App screenshot
Why Drupal was chosen: 

Hachette Filipacchi Media (HFM), the owner of the Elle Décor brand, originally engaged Appnovation Technologies to develop the Look Book application. When the project was first discussed, Elle Décor looked at building a multiplatform app using HTML5 technologies, however, it was decided to focus on the iPad market exclusively due to the iPad tablet market share and existing relationships with Apple. During these initial discussions, HFM was acquired by the Hearst Corporation. The Hearst organization utilizes their own custom developed content management system (CMS) called Magnus. At this point a review of the specifications for the application was done. Between a new CMS to train Elle Décor employees on and the original technologies that HFM wanted to take advantage of, the Appnovation recommendation of a Drupal backend coupled with Acquia professional services was chosen as the solution. This would be one of the first Drupal solutions ever implemented for the Hearst Corporation.

The Elle Décor Lookbook application was developed specifically for the Apple iPad with a backend and API developed in Drupal. The Lookbook application utilizes an iOS and Drupal integration that allowed Elle Décor to take advantage of iOS native capabilities and performance as well as taking advantage of the content management capabilities of Drupal.

This type of integration allows for several key features:

  • Elle Décor is able to manage content in the application without having to resubmit the application to the Apple App store
  • Drupal to allows for dynamic web sharing of Lookbooks while not requiring any type of user logins
  • Acquia provides the hosting and support platform for the Drupal piece of the application

The Drupal site allows for administrators to import content for monthly updates when needed and responds to API calls made by the application and returns JSON data. All content (article, lookbooks, images, sponsors) is imported through the Migrate system in Drupal. When the content is updated, a new date variable is applied to the content when the iPad app requests data. This informs the iPad app to refresh its content cache.

Describe the project (goals, requirements and outcome): 

Development was targeted at compatibility with iPad and iPad 2 running iOS v4.3 or higher (the lowest version of iPad iOS currently supported by Apple). The latest iOS version at time of project inception was 5.0.1.

Acquia Cloud

Development and hosting for the project was done through Acquia’s Cloud. The Acquia Cloud hosting is specifically pre-configured and tuned for maximizing Drupal performance, giving sites high PHP memory allocation and LAMP stack tuning which results in faster rendering of dynamic content and improved site reliability. The Cloud also has a shared highly available load balancer configuration. Acquia operations team manages the shared load balancer and notifies Dev Cloud customers if they need to resize their server for more CPU or Memory through the Acquia Cloud UI.

Acquia Cloud comes with:

  • Varnish – Reverse proxy caching system that speeds up the site by serving a cached page rather than processing each page request.
  • Memcache – Memory caching system that stores Drupal’s default cache tables in memory, making the site run faster than if using database caching.
  • Pressflow – A version of Drupal that allows the site to use Varnish.
  • A 5 Elastic Compute Unit(ECU) Dev cloud server

Storage

The Lookbook application needs to allow a large number of images to be viewable on the iPad, pulled in by a feed, with ad integration throughout. Because it mainly handles large image files, the best technical implementations, such as enhanced data/image loading by cache system and internal database had to be applied. Moreover, the contents of the application, such as rooms, types, articles and sponsors need to be updated via CMS without resubmitting to Apple.

The application needed to be able to download, store temporarily and display on demand, image thumbnails, images, metadata, article text, sponsorship information, etc. It also needed to download and store Custom Lookbooks (CLBs), sets of high-resolution images and their associated metadata, for off-line access.

Sharing Custom Look Books (CLBs) via Email

The users need to be able to share CLBs via email, by sending the recipient a specially customized URL link. The URL link embedded unique identifiers for each image in the CLB, and other CLB metadata (such as name and unique ID).

Links are interpreted by the Drupal application so they can be viewed in a browser on a computer. If the same links are opened on an iPad, the CLB will be recreated and displayed on the local Elle Décor Lookbook app.

Sharing CLBs via Social Media

The Elle Décor Lookbook iPad app needed to allow users to share content on the social media networks Facebook and Twitter. The users can share CLB URLs, articles, and individual images. In order to create a smooth user experience, and avoid repeated user prompting or exit from the application, the application used the OAuth module to establish a trust relationship with the social networks. For this the iOS app incorporated and implemented appropriate frameworks and APIs, such as Facebook Connect and Twitter API.

Technical specifications

Why these modules/theme/distribution were chosen: 
  • Acquia connector / Apache Solr: To provide Apache Solr search results which is faster and better than standard Drupal search
  • Facebook Share: To share Featured Lookbooks and Custom Lookbooks with Facebook
  • jCarousel: To display the Lookbook images in a carousel style
  • Migrate: To import content into the Drupal website
  • Tweet: To share Featured Lookbooks and Custom Lookbooks with Twitter
  • Auth: Create trust relationships for the app with social networks
Organizations involved: 
Team members: 
Project team: 

The project team included:

1 Project Manager
2 Front End Designers
2 Drupal Developers
1 iOS Developer

Additional Elle Decor Lookbook App screenshot
Sectors: 
Beauty and Fashion
Publishing
Retail and Distribution

Comments

twigbizsolutions’s picture

Good work please keep sharing. :)

shwet’s picture

Nice Work and please keep sharing

drupal a11y’s picture

I am not very into the iOS stuff and would be very interested into more details how the offline storage has been realized. Is there more info on this somewhere?

shamio’s picture

The design and menu and used colors are so nice and impressive. I just want to note that you can place "select a country" and flags in header instead of footer too. For example you can place them near "Account" buttons in the header section below the top menu to be seen better by the visitors.