Remember the context

While I've been applying media queries to projects for a couple of years now, I'm still learning new tricks and discovering things that I've not really thought of before. One of these discoveries happened recently while working on a new project...

I sketched out various layout ideas on paper first and began to iron out some of the problems I was trying to solve. I had sketches for the desktop-sized design as well as smartphone-sized devices. Usually at this point, I would jump straight in to code and start designing in the browser, but as I had been wanting to try out POP in a real-world project, I thought this was a perfect time. This decision not only confirmed that POP is a useful tool but it taught me a valuable lesson in designing for context.

I used my smartphone sketches to build up a small journey in the app and came to the realisation that I'd placed the navigation in a counter-intuitive position at the top right of the screen. It wasn't a comfortable action, my thumb could just about reach but I could see repeating this action over and over on a live site would be frustrating and would probably cause RSI.

I quickly amended my sketches, placing the navigation at the bottom of the screen and found the amendments worked much better for smartphone users so I moved on and began to code.

I thought about what led me down this path in the first place. Influence is one aspect. I use my iPhone all day long so I see many variations of app design. Facebook, Google+, Readability and Path all have navigation access points at the top of the screen which feeds, maybe on a sub-conscious level, the second aspect: Habit. I've worked on so many projects for desktop that my natural thought process is to place the navigation near the top of the screen or somewhere where it will be easily discoverable but this process is thinking about the problem in the wrong context.

As you write code, you can test how a site is coming together by resizing the browser window or you could even use an emulator on your computer but there is still an inherent problem. The layout and functionality may work as you expect in the desktop rendering but you'll still be using desktop/laptop user patterns to perform your tests. Using a mouse to move a curser around doesn't communicate how much of stretch that far top corner of a smartphone screen can be.

This exercise has changed the way I will approach projects in future. We're not just designing for different screen sizes, resolutions and devices any more. We're designing for completely different user patterns and interactions.