Responsive Gallery – February 2013

Skinny Ties

A family-run company, Skinny Ties have been producing and selling neckties since 1971, and are now one of the largest retailers in the United States. Brendan Falkowski was asked to reinvent the brand’s identity and develop a future-friendly platform to ensure the continued success of the business.

Brendan’s design exhibits a beautiful attention to detail. The layout adapts sensibly – even the logo adjusts itself to suit different widths. All interactive elements were built with touch and click usage in mind, which keeps the interface consistent and compact says Brendan.

With an IA centred squarely around the range of ties, coupled with a performant and responsive implementation, its easy to browse and purchase products quickly on any device. It’s not surprising to learn that revenue has increased by 43.4% since the new site went live – increasing by an astonishing 377.6% on the iPhone alone.

Homepage requests/size

56/663 kB mobile, 58/669 kB desktop

---

Microsoft

This has been an important year for Microsoft, with a slew of software and hardware releases including Windows 8 and its new Surface tablets. These products embrace the interface language formally known as Metro, as does the company’s recently updated brand.

To reflect this change, the company’s homepage has seen a significant – and responsive – redesign. Microsoft’s homepage team worked alongside Paravel who also designed Microsoft’s Build Windows website, featured in issue 234.

Paravel’s Trent Walton described the planning process: We began fleshing out photoshop comps for 2-3 arbitrary widths (narrow, middle, and full-width). There was a lot of iteration, and we found that this phase was just as much about conversation as it was about design.

The Metro design language lends itself to resolution independence with its flat colours and type-centric approach, so the design needn’t be overly complex. We quit thinking about grids Photoshop-first and built a proportional grid in the browser that splits units (and sub units) into halves, thirds, and quarters.

Homepage requests/size

47/845 kB mobile, 44/849 kB desktop

---

Anna Debenham

Anna Debenham is a freelance front-end developer based in Brighton. By redesigning her personal website with a focus on performance, led her to produce an intriguing stripped back aesthetic. We asked Anna about the reasoning behind the redesign: I wanted to produce a design that didn’t rely heavily on images, gradients, web fonts or anything that would increase the size of the page.

Although unintended, her site shares similarities with Microsoft’s Metro UIs, with a colourful, typographic lead design. The design language extends to her console mini-site too, which is an excellent resource for those wanting to learn about browser support on game consoles. It’s fascinating to see designers and developers adapting their designs to meet the unique demands of the web in this way.

Homepage requests/size

10/403 kB mobile, 10/404 kB desktop