Let’s Talk Solar

Koh Creative are leading the Let’s Talk Solar project and invited us to build the front-end for the site. This is an overview of the process and “back of the cabinet” details we built in.

Desktop First Design, Mobile First Development

Koh presented us with full size desktop compositions, from which I experimented with an approach to interpolate the layout to be responsive, while designing in the browser. I aimed for two semi-arbitrary breakpoints, giving a small screen default and scaling up to medium and full sizes. The PSDs were designed large-screen first, but were developed mobile first. The approached dawned on me after a tweet from Jeremy Keith, quoting an Andy Hume post, Responsive by default (I realise that’s a quote of a quote, but I’m going with it).

The web is responsive on its own—by default. It’s us that’s been breaking it all these years by placing content in fixed-width containers

That quote became an internal mantra the day I heard it. This project then came up and I decided to not “break” stuff for as long as possible, to see what would happen. I defined “breaking” as setting any width values, even relative or elastic ones, or doing any kind of floating or positioning. It looks like this:

Screenshot of the Let’s Talk Solar website without any layout, floating or widths

I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.

Some of the benefits of this approach are, automatically enforced source order—the page is linear and can’t make sense if you re-arrange things to make them easier to style—and a clear separation of cosmetic and layout styling, which I found supported writing component-based, or modular, CSS, which is going to be invaluable as this landing page is soon to be built out into a full site, so the foundation and building blocks will be used.

Next, I added a breakpoint for full width size, introduced styles for the layout, and broke that down to medium size. It worked incredibly well and I’ve since used the approach on a much more complex site layout with great results. The graphic designer was happy, because it meant not designing additional PSDs, and I really enjoyed the freedom in interpolating the design.

Coding up a non-responsive, pixel-perfect, design is kind of production work, it’s maths, there’s a right answer. However, creating a responsive layout from a single-sized composition, I feel, is design. The answer is not obvious, nor is there only one.

Let’s Talk Solar website showcased on an iMac-like screen, iPad-like device and iPhone-like device

Ingredients

  • Retina-ready images for hi-res devices, e.g. iPhone 4 and up, the new iPad and retina MacBook Pro (un-sprited only because of a challenge with using Compass’ spriting helpers within media queries; the @extend directive breaks things)
  • Min-width and retina media queries. (Although my retina media query needs to be updated)
  • Relative units; almost everything is defined in the em unit, or percentage.
  • A loose vertical rhythm is observed, however the text passages are short, so not much is to be gained from strict adherence to a baseline and spacing between non-text elements doesn’t necessarily keep time.
  • A three-column responsive grid is strictly adhered to, served up by Gridset, which I highly recommend checking out. The full size grid was extracted from the delivered comps, which I broke down to two columns at medium sizes and one column at small sizes.

Responsibilities

  • Front-end web development
  • Responsive design

Credits

Branding, marketing, visual/graphic design and anything else outside our remit has been masterminded by Koh Creative.