If you’ve read my post regarding immutable proportions (Murphy’s Fourth Law), you’ll recall that Murphy has more than one law. And I should add that the true number of Murphy’s Laws is yet undetermined. We find new ones from time to time – carved into trees, etched into picnic tables and other odd places. Seems that the original document detailing the laws and other writings went up in flames as Murphy’s house burned to the ground when a neighbor – Mrs. O’Leary’s cow – wrongfully shouldered the blame for the Great Chicago Fire, kinda validating Murphy’s best known law on several levels.
Today, we’re going to examine Murphy’s Second Law – The Proximity of Things. And like Murphy’s Immutable Law of Proportions, this one pretty much spans our universe, but I couldn’t care less about Feng Shui which I reckon is all about the proximity of things and the energy in my home because, well life’s just too short Timmy, and I already have enough problems with OCD. Nope. Don’t care about that stuff.
We’re going to couch The Proximity of Things in terms of our web designs and how things can change mightily when we begin responsive testing, moving from desktop to mobile. What once flowed nicely and made perfect sense at higher resolutions suddenly doesn’t flow at all on our phones and things get chunky, wonky and weird.
Which brings us to the realization that maybe we should have thought this through a little better. Looking back at the image of our mockup to see what went wrong, one thing oft times jumps out pretty quickly – and it’s very telling.
Websites aren’t PDFs
When we zoom out in Photoshop or Acrobat so that the whole image is visible on our 27” display, our mockup looks like a strip of masking tape. That means there’s a whole lot of stuff there. Which then means things are liable to get messy when we get responsively small. As we move from rows of things on the desktop to columns of things in mobile, our strip of masking tape starts to get thinner and thinner, becoming more difficult to control. Couple that with font sizing issues and it’s no wonder things don’t look as streamlined as they did on the big screen.
The bottom line? The Proximity of Things has changed. Images that were side by side and complemented each other so well are now separated by text, padding and margins – things that made our page so pretty in the big world – now compounding the wonkiness. There’s work to be done, and the degree of difficulty is multiplied in part because we never looked at our page as a strip of masking tape.
Mobile first – not mobile only
Of course, I’ve heard tell of this thing called ‘mobile first’ design. And I’m led to believe that there are folks who cling dearly to it – figuring their audience is all, well, younger than me, living and dying in a mobile universe – but I’ve yet to meet anyone who actually adheres to that particular doctrine. It would certainly solve the problem, but then what would it look like on a laptop? I hear the kids are using those things today too. There’s gotta be a happy medium and/or an alternative to building two different websites.
And there certainly is. Jump back to planning ahead. Let’s look at our mockup from top to bottom in whatever viewer suits us before it moves from design to web. If it looks like a strip of masking tape, we might want to rethink the amount of content we’re trying to slap on a single page, acknowledging that it’s going to get more difficult to deal with as we move to mobile. If we can’t live without any of the content, maybe we can get creative and break it into a couple of pages.
Of course we have to bear in mind how text and images are going to flow and what we’re willing to accept from desktop to mobile. Proximities will change and it’s a good idea to start managing them early on. We should check responsive levels every so often to make sure things are flowing nicely. We just need to keep everything in check as we build out to avoid the chunky, wonky and weird things that can happen if we forget about The Proximity of Things.
