This week, TechCrunch launched our new responsive media gallery to showcase many different kinds of media on their website.  It supports over 10 types of 3rd-party embeds and looks smashing on touch devices as well as browsers. In an ever-changing media environment, the gallery is flexible enough to handle future social media and rich media of nearly any shape or size.

As a leading publisher of tech news content, TechCrunch uses a wide array of media in their galleries from many partners, from Instagram for images to Vine for videos. Its readers may use a smartphone, tablet, or laptop to get their daily news fixes, so TechCrunch needed a way to display diverse media and make it look great on any device platform.

Over here at Exygy, we partnered with our friends at Cohere Studio to bring this responsive gallery to TechCrunch.  We custom-built its jQuery library using an iterative process that resulted in a fast-loading and flexible application.

4 responsive break points
To make TechCrunch’s content look great on any browser or mobile device, the gallery has 4 responsive snap points with optimized views for smartphone, iPad portrait view, iPad landscape view, and smartphone.

10+ media embed types
Facebook posts, Twitter Cards, and Instagram – oh my! While your average image and video gallery accepts an image and maybe a video from YouTube and Vimeo, the TechCrunch gallery displays over 10 different types of media embed types, including:

• Facebook posts
• Twitter cards
• Embedded tweets
• Vine videos
• AOL On player videos
• YouTube videos
• Instagram images
• Imgur images
• Large and small JPEG and PNG uploads
• Gravity embeds that recommend related content
• Ad units

All in one beautiful, responsive gallery.

3 views
The gallery allows the user to toggle between standard-gallery (“carousel”) view, list view, and fullscreen view.  Gallery view is the standard, while list view is available for quick consumption of lots of media and fullscreen makes images and videos look stunning.

Lighting-fast load time
TechCrunch is all about delivering news quickly, so we made sure to minimize load time of embeds in the gallery. We custom-built a small jQuery library for the gallery and as with most of the software and sites we create here at Exygy, we used an iterative / agile development process.  We improved on each gallery version by incorporating client feedback, making tweaks, and re-architecting pieces.  The major difference between our initial build and our final build is that the final gallery loads each embed “on demand” (or “lazy loading”) rather than loading them all before showing the library.  This cut down load time from 6 seconds to less than one.

See the responsive media gallery in action on TechCrunch:

• 20 Signs Conan O’Brien Is The Technologist We Deserve And Need
• 14 People Who Are In Tech And Finished The 2014 Boston Marathon