Responsive Gallery – November 2012

Build

Build is Microsoft’s annual developer conference, and this year’s event will focus on building applications for Windows 8. Nishant Kothary enlisted Paravel to help with design and the front-end responsive code.

The minimalist aesthetic of this one-page site mimics the look and feel of Windows 8, aided in part by the use of Microsoft’s corporate typeface, Segoe. Unlike many responsive layouts, this site demonstrates incredibly fluidity, with breakpoints hard to detect. Paravel’s Trent Walton: The resolution independence of the Metro design aesthetic combined with Segoe’s flexibility inspired us to think just as much about extra wide viewports as we did narrow ones. Our widest min-width media query triggers at 1950px.

Homepage requests/size

47/864 kB mobile, 47/881 kB desktop

---

Palantir

Palantir.net is a full-service design and strategy agency based in Chicago, that specialises in the development of Drupal powered websites.

It’s hard not to fall in love with this site, with its charming retro space-themed illustrations, gorgeous colour palette and beautiful typography. The spacious layout is a welcome feature too, although this could be tightened up on smaller screens.

We asked Palantir’s Founder and CEO George DeMet if Drupal’s reputation for being a ‘heavy’ platform made it unsuitable for responsive projects. We definitely wanted to make sure that the site wouldn’t be too heavy for mobile users, so we did everything that we could to optimise images, CSS, and JavaScript. In our experience, responsive Drupal sites are not significantly larger than other responsive sites as long as best practices are being followed.

That said, with a homepage size of 1 MB, there’s still room for improvement. HTTP requests could be reduced by concatenating CSS and JavaScript files, and the overall size of pages could be reduced by optimising image assets.

Homepage requests/size

26/1.00 MB mobile, 26/1.00 MB desktop

---

Supereight Studio

Supereight Studio is a small and friendly British design studio run by Matt Hamm and Peter Orme.

Their new site, which builds on a logo created by Brent Couchman, features bold type and large photographic backdrops (which unfortunately contributes to the rather large page size). Each section name is set in the brilliantly chunky Stratum typeface, with the remaining copy dutifully offset by the more rounded Proxima Nova.

We asked Creative Director, Matt Hamm about how they approach the design of a responsive site. We’ve learnt that it’s totally unrealistic to make photoshop visuals for every single break point in the design. It’s better to have a strong idea of the direction you want to go in and then just design the break points in the CSS as you build. It’s all about tweaking until it feels right.

Homepage requests/size

36/1.95 MB mobile, 36/1.95 MB desktop