Looking at the current digital landscape of desktop web, mobile web and mobile apps you can see that it won’t be long until the wall between desktop web and mobile web is going to fall. This is going to happen because mobile devices are getting more sophisticated to handle more complicated web sites and consumers turn to mobile web sites to get information more quickly than downloading an app.
As a reaction to this trend ‘responsive design’ has emerged as one of the leading answers to try to solve this problem of how to create one site that can work on many different devices. Responsive design is the approach where a site dynamically responds to the user’s screen size, platform and screen orientation through a mix of flexible grids, layouts, images and an intelligent use of CSS media queries. All of this means that as a user switches from their laptop to iPad to iPhone, the website automatically changes the layout and design of the content those different devices. You can read all about responsive design here and I think one of the next examples is CSS-Tricks.com which does a masterful job of creating a collapsing content grid.
One of the first major brands to adopt responsive design for their primary website is Starbucks which re-launched Starbucks.com with this technique last week. You can see it all in action if you go to Starbucks.com and re-size the width of the browser window from a normal size down to a very small width and watch the layout adapt to match each smaller screen size. A successful responsive design has the ability to re-arrange the layout and minimize or re-prioritize the content of the site as it goes from larger screen sizes down to smaller sizes. In this case the design does a good job on the larger desktop web layout and the medium size tablet layout but you can’t help feeling that the design is sparse for such a rich lifestyle brand. This was obviously a result of the compromises they needed to make to have the responsive design system work but I think they went too far when you see what can be done on sites like FoodSense.is which is able to create a much more appealing design across all devices.
I think the mobile version of the responsive design layout is the one that really falls down. The one things that HAVE to do to create a really successful mobile app or mobile web site is understand the where and how the customer is going to use you site or app which is called context. Context is defined by a large number of variables like : Are they walking or standing? Are they holding their phone in landscape or portrait? Are they navigating with one hand or two? What goals do they want to accomplish when they use the app or come to the site? And the list goes on but all of these things will tell you how to prioritize your content and how to customize your interface design to meet the context of the consumer.
I think the mobile version of Starbucks.com fails to address the consumers context and one example is ‘Find a Store’ which has to be one of the most popular items for a mobile site. It is good that it is right on top of the page but it is crammed right next to ‘sign-in’ in really small type. This means that it’s going to be really hard to touch only the ‘Find a Store’ button holding the phone in one hand when I am walking down the street trying to navigate the site on a moving phone with my thumb. Context would dictate that because of the important of the ‘Find A Store’ it should be large and readily available in the middle to bottom half of the screen when it loads without scrolling so you can easily tap on it.
One of the other big challenges for responsive design has been to create a successful responsive design e-commerc experience. This has been a challenge because of the added complexity that comes with an e-commerce experience and the fact that there aren’t many items or steps that can be collapsed like you need to create a good responsive design.So it is worth noting that in this case Starbuck elected to not take on that challenge and that section of the site reverts back to traditional site design.
Being the first major brand to do anything is never easy so I applaud Starbuck for attempt and hope that they are able to refine and enrich this start point to make the site a more robust and mobile context friendly experience.