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.
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.