Responsive isn’t just about size

Written on June 11, 2013

After watching Apple’s keynote last night, like many I found myself on their Mac Pro page on my mobile – an iPhone 4S on a (very slow) WiFi connection. At first I thought that it looked quite nice but as I began to scroll down the page I was treated to a sludgy mess of downward scrolling clunk.

My experience was very badly interrupted whilst paralax animations loaded in and then quickly jumped around as they tried to catch up. I’m not sure quite yet if this is my hardware (which I doubt) or my very slow broadband connection (probably). Either way it’s not been the best way, for me at least, to experience one of Apple’s first attempts at responsive design.

So, responsive isn’t just about size

It’s easy to fall into the trap of offering responsive layouts based on screen resolution alone. This can be fine in a lot of cases but what happens if, for example, someone uses their MacBook Pro on the fly with a tethered data connection via their mobile phone? If your responsive layouts are based on screen resolution alone then they could be treated to a foray of large graphics and fancy animations when they are essentially on a mobile connection with a capped data plan, I don’t think that user would stay on a high-data site for long.

Even when using a 27″ iMac in my home studio my broadband connection is painfully slow at times – one of the perks of living out in the countryside – so again, if a stylesheet or piece of JavaScript detects that I’m on a screen resolution of 2660px by 1440px you would be quick to assume that I have a fast internet connection and serve all the high-resolution graphics that you can get hold of, which would be an incorrect assumption.

So how do we handle this?

It’s important to think about the whole scenario when designing the website and especially when coding it. I’ll be writing some articles in the next few days which will look into, in more depth, how we can offer responsive layouts in improved ways. If you have experience with this then I’d love to hear your thoughts. Simply post a comment below or email me.

Apple, the Apple logo, iPhone are trademarks of Apple. The iPhone image is copyright Apple.