Connect
To Top

Starbucks.com Goes Responsive

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.

1 Comment

  1. Manuel Ryan Espinosa

    May 10, 2012 at 8:00 pm

    Good Job Starbucks Devs . . . Takes guts to be the first . . . And congrats on getting featured in Net Magazine.

You must be logged in to post a comment Login

Leave a Reply

More in Design & user experience

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow Me On Instagram

 HUGE thank you to master illustrator and vector art monster @rob_zilla_iii for this amazing drawing all done on his iPad Pro. Go follow him because he usually draws way cooler people than me. #illustrator #vector #ipadpro #adobe #adobesketch  Extremely honored to have been chosen by @ghoshal and @erondu to join 25 design leaders from AirBnB, Uber, Facebook, Slack, Google Ventures, IDEO and more for High Resolution, a 25 episode video series on design. Look for my episode focusing on creativity and leadership coming soon. @highrespodcast #creativity #leadership #design #podcast  Spent the morning with @the_chris_buck new book Uneasy which is a fantastic look at the work of one of the most creative people I know. Get your copy at chrisbuckuneasy.com #chrisbuck #photography #photographer #portraitphotography #portrait #portraits  Some days I feel like I should wear this @huckgee armor to work. #huckgee #urbanvinyl #mech #armor #toy #kidrobot #dunny  If you listen to The #CrazyOne podcast you have @lukewessman to thank for it. He gave me the push to finally launch it and it was one of the best decisions I've ever made. He is a constant inspiration, someone who makes me want to be a better man and I always feel lucky to count him as one of my friends. Thanks for the support brother. #crazyones #lukewessman #tattooartist #lag #crazyone
 I think the @supremenewyork X @mtanyctransit mash up is pretty genius. Finally got my hands on one today but after seeing the prices on eBay I may flip it before long. #supreme #supremenewyork #mta  A pile of pugs and a @steelers blanket - what else do you need on a day off? #pug #pugs #pugsofinstagram #steelers #yinz #burghproud #herewegosteelers  FYI - it's pronounced 'art' not 'toy'. These @huckgee pieces are hand made and can take up to a year to produce. #huckgee #robotech #mech #robot #urbanvinyl  Happy Valentines Day to @thechiclibrary - love of my life fierce and true. #chic #nyfw #fashion #love  Because of Snowmaggeddon in NYC I'm having to do my meetings from home today and apparently everyone thinks they are a Creative Director in this house. #pug #pugsofinstagram #design #creativedirector #puglife #designer #dogismycopilot
 Thanks to @the_villainess for an amazing work in progress shot of the soon to be crown jewel of our collection - a huge (8' wide) commission from @tristaneaton based on the lives of @thechiclibrary and I. Can't thank him enough knowing how busy he is and I'm SO F*CKING EXCITED!!! #streetart #streetartist #streetartnyc #streetartofficial #tristaneaton #tristaneatonart #tristaneatonmural  @visionaireworld X @louisvuitton from back in the day when Kidrobot actually made art toys #louisvuitton #lv #kidrobot #visionaire #visionaireworld #monogram #louisvuittonmonogram #murakami #takashimurakami  Got a vintage @huckgee Skullleader as a new addition to the collection #urbanvinyl #huckgee #mech #robotech #robot  @thechiclibrary in full effect at New York Fashion week for the photographers tonight in @ika_editions @blackscale and @tomford #nyfw #newyorkfashionweek  Forgot to mention I got to see @huckgee new Skullhead mech work in progress which I think is one of the best pieces he has ever done. I already put in dibs on at least one. #huckgee #huckgeeskullhead #urbanvinyl

Copyright © 2015 Stephen Gates