Responsive Gallery – December 2012

XOXO

XOXO is an arts and technology festival celebrating disruptive creativity, that took place in Portland, USA in September.

The website builds on an identity created by Factory North with a striking colour palette and restrained type selection. Its wonderment is tightly packaged, too. Designer, Paulo Zoom: As people would be visiting the website during the event, on a Wi-Fi network shared by almost 500 people, it was essential that few HTTP requests were made and that all the assets were optimised.

Much joy is to be found in the detailing. We love the large, loosely spaced headings that are repeated in the background, and how the speaker photos have been treated with a subtle gradient overlay. We also appreciate how well the layout adapts to different screen sizes. Paulo notes When I sketched the design at smaller widths, I noticed that going wider gave me increased flexibility. Yet starting at larger widths and going narrower I felt constrained – it was like trying to fit a lot of people inside a Mini.

Homepage requests/size

18/337 kB mobile, 15/326 kB desktop

---

Design Intellection

Design Intellection is a small design studio located in Louisville, Kentucky, run by David Yeiser.

Acting as both a portfolio of David’s work, and his personal blog, this site is beautiful in its simplicity. We’re huge fans of the innovative mix of serif, sans-serif and monospaced typefaces which works really well – even though it shouldn’t!

Reflecting on the design process, David comments: Proper planning beforehand is paramount when it comes to the complexity of responsive design. Of course you can only plan so much, and at some point you have to jump in and see what works and what doesn’t as you build it.

Homepage requests/size

17/253 kB mobile, 17/253 kB desktop

---

The Cut

The Cut is a website about fashion, beauty, politics, sex and celebrity.

Featuring a wealth of content, New York Magazine’s in-house design team could easily have chosen a fixed-width layout. Yet whilst this large site comes with a large download size – mainly due to the high number of images and advertising assets – it’s still worthy of closer inspection. The intricate layout adapts surprisingly well to fit different screen dimensions, and consideration has been made for smaller, lower bandwidth devices, too.

For example, the Miller Headline font gives the site much of its character, but not enough for its absence on smaller screens to be noticeable, with Georgia a suitable alternative. Sidebar content that appears at wider widths, is also missing on smaller screens, which makes us wonder if it’s needed at all.

Homepage requests/size

147/3.0 MB mobile, 179/4.18 MB desktop