Designing Pipettes in the Dark: thoughts on responsive design

I recently developed a custom ‘responsive design’ wordpress theme for new science blog Pipettes in the Dark. (I freelance in web design & development – you can see my portfolio over here at Monochrome Rainbow).

You should definitely go read the first post — about Lego and WOMEN IN SCIENCE.

It’s been a little while since I’ve developed an entire theme from scratch. One of the big challenges in web-design is crafting layouts that work on a range of screen sizes. We use a range of devices these days, from smartphones right up to smart TVs.

Don’t think a bigger screen-size is such a challenge? Well, you’re wrong. Text is easiest to read in columns of about 50-75 characters. This is why newspapers and magazines print in columns.

You have three choices on a big screen:

  1. Fix the max-width of your text areas so that they don’t grow (can often end up with ‘tiny website lost in acres of white-space’ syndrome).
  2. Make the font-size increase proportionally to the column width (actually not a bad idea, especially if you assume people are sitting further away from bigger screens).
  3. Or, final choice, you can ‘flow’ text into multiple columns using responsive design and media queries.

Native apps versus responsive design

There are two approaches to ‘solving’ the multiple screen-size problem. The first is by producing native apps for mobile, tablet etc. These usually work better, and can take advantage of mobile technology like GPS, notifications, etc. However they can be pretty expensive and hard to keep up-to-date.

The other approach, which works better for individuals and small businesses, is to use a responsive design. That way you can have one website that is fluid across different screens. You lose some functionality, but if you’re basically just delivering content then that’s no big loss.

Responsive design is mainly coded via media queries.

Media queries are awesome. Deliver different stylesheets based on screensize, and you have one website that works on multiple devices.

Media queries are used for responsive design
Media queries used for three breakpoints to create a responsive design

Pipettes in the Dark is a fairly standard blog, with no sales pitch or calls to action. I was able to stick to a tried and tested basic layout that everyone will be familiar with. The closer you stick to ‘standard’ layouts, the more familiar people will be with navigating and using them. Originality can be over-rated! Just remember the last overly-complicated flash website you tried to use. Frustrating, right?

So I went with the two-column site with a header and footer. I then adjusted the width of the columns once you hit the tablet size, enabling the sidebar to stay readable.

Finally, for mobiles, I got rid of the sidebar altogether. Sometimes, hiding non-essential information is the best way to go when you have limited space.

Designing for SCIENCE

The design elements have an interesting backstory. The header text or logo is meant to look like text spelled out with ‘PCR Bands’. Nope, I don’t know what PCR Bands indicate either, but I googled some images and was able to approximate the general look and feel in Photoshop.

The background texture is channeling the idea of pipettes in a box.

The colour scheme is grayscale, accented with hot pink. Keeping a limited colour-scheme can be challenging, but we kept enough contrast in each section to retain legibility. Hot pink is vivid and exciting, plus it is associated strongly with women. The blog itself will tackle some of the gender expectations/challenges within the generally male dominated field of science, and the colour scheme reflects that.

Pipettes in the Dark is also the first of one hundred websites I designed and deployed as part of my Forty Before Forty! I’m expecting almost all of the other ones to also use responsive design… unless there is a really good reason not to.

Want me to help you with your website? Get in touch with me suzie@monochromerainbow.com

Leave a Reply

Your email address will not be published. Required fields are marked *