Filed under: Social Networking/ Word Of Mouth, Technology | Tags: accessibility, bad web design, characters, coffee, Dell, Firefox, Google, how not to build a website, HTML, Ideas Storm, IDs, IE6, java, javascript, markup, mocha, My mum only drinks tea, one lump or two? portal header, pigs, pixels, Salesforce.com, Starbucks, vegans, Where's my coffee?, white space
After reading Benn’s tweet about mystarbucksidea , I headed over to investigate. The first thing I noticed was that Benn had got the URL wrong – it’s actually http://mystarbucksidea.com/ (with an s after starbuck). The second thing I noticed was that the site, at first glance, looks great! It’s simple, clean and clear. It looks like it accomplishes its goal well.
It’s interesting to dig into the list of ideas. It appears that most of the users of the site are vegans demanding more vegan products. “zschmidl” even goes so far as to complain “it kind of grosses us vegans out to see dead pig on your counter”. I can only imagine Starbucks is very different in the US, as I’ve never seen a dead pig in the Leicester Square Starbucks. I’m not 100% convinced by the genius of any of these ideas; whether or not they will help to put Starbucks back into the black remains to be seen (Starbucks has just posted its first ever quarterly loss).
The idea for the Starbucks forum apparently came from Dell’s Ideas Storm website (interesting blog on the subject) – aimed to put the company in touch with what its customers actually want. Both of these sites are built using the SalesForce.com platform. And this, for me, is where the story gets even more interesting than the dead pig line.
The first sign of trouble (on my FF3 browser) was on the homepage. For some reason (unknown probably even to SalesForce), there are 1150 pixels of white space between the bottom of the content and the footer. It then dawned on me that all the sub headings on the site are separate Flash movies. At first, this seemed impossible. Surely no one would want to use a Flash movie for all the sub headings! Surely!
There are other oddities too. When the site loads, the page title is “Portal Header”, replaced (via Javascript) with “My Starbucks Idea”. Look at the source and you realise that the SalesForce platform is obviously built to be generic, to the point where bloated code is used in abundance. A single post (the pig post), which conveys the following information (totalling 649 characters):
7/24/2008 9:33 AM
Add more vegan treats and pastries to your menu! 95% percent of the food you provide contains milk, eggs or animal flesh leaving little or no choice for AR advocates. Not only does it keep money out of your pocket, it kind of grosses us vegans out to see dead pig on your counter…
Furthermore, organic and fair-trade ingredients are of upmost importance. Your products are already pricey and considered high-quality, obviously people are willing to pay more for better food… By switching over to a more compassionate and progressive menu, you have absolutely nothing to lose.
44 comments
vote
2320 points
Ends up as the following (4,598 characters) with markup:
<div class=”ideaSection”><div class=”ideaSide” id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:ideaSide”><div class=”voteContainer”><div id=”voteButton087500000004yPV” class=”voteButton”><a onmouseout=”return setVoteStatusMsg(”);” onmouseover=”return setVoteStatusMsg(‘Click to vote’);” onclick=”return true;” id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:voteLink” href=”/secur/login_portal.jsp?orgId=00D500000008OkU&portalId=06050000000D1Ee&ec=302&startURL=%2Fideas%2FideaList.apexp”><div class=”votelt”/><div class=”votert”/><span class=”insideVote” style=”visibility: visible;”>Vote</span><span class=”insideVoted” style=”visibility: hidden;”>Voted</span><div class=”votelb”/><div class=”voterb”/></a><div class=”voteStatusBlock”><span id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:voteScorebox”>2320</span><br/>Points</div></div></div></div>
<div class=”ideaContentWidth ideaContent”>
<h3 class=”ideaContentWidth ideaSubject sIFR-replaced”><object height=”40″ width=”590″ type=”application/x-shockwave-flash” id=”sIFR_callback_0″ name=”sIFR_callback_0″ data=”http://www.starbucks.com/mystarbucksidea/app_themes/theme/flash/tradegothic1.swf” class=”sIFR-flash”><param name=”flashvars” value=”content=%253Ca%2520href%253D%2522/ideas/viewIdea.apexp%253Fid%253D087500000004yPV%2522%2520target%253D%2522%2522%253EOrganic/Vegan%253C/a%253E%2520&antialiastype=&width=590&height=40&renderheight=40&fitexactly=false&tunewidth=0&tuneheight=0&offsetleft=&offsettop=&thickness=&sharpness=&kerning=&gridfittype=pixel&flashfilters=&opacity=100&blendmode=&size=28&css=.sIFR-root%257Bcolor%253A%2523888888%253Bheight%253A30px%253Bpadding%253A0px%253Bmargin%253A0px%253B%257Da%257Bcolor%253A%2523888888%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523a85c1f%253Btext-decoration%253Anone%253B%257D&selectable=true&fixhover=true&preventwrap=false&forcesingleline=false&link=/ideas/viewIdea.apexp%253Fid%253D087500000004yPV&target=&events=false&cursor=default&version=382″/><param name=”wmode” value=”opaque”/><param name=”bgcolor” value=”#FFFFFF”/><param name=”allowScriptAccess” value=”always”/><param name=”quality” value=”best”/></object><span class=”sIFR-alternate” id=”sIFR_callback_0_alternate”><a href=”/ideas/viewIdea.apexp?id=087500000004yPV” name=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:linkTitle” id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:linkTitle”>Organic/Vegan</a>
</span></h3><div class=”ideaContentWidth ideaComment” id=”thePage:mainLayout:pbIdeaList:incIdeaListStd:ideaListStd:ideaList:0:postedByWrapper” style=”position: relative; top: -10px;”>Posted by <span class=”userLink”>zschmidl</span> to <a href=”/ideas/ideaList.apexp?c=09a5000000001hi&lsi=0&category=Food” class=”ideaCategory”>Food</a> , 7/24/2008 9:33 AM</div><div class=”ideaContentWidth ideaBody” id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:body”>Add more vegan treats and pastries to your menu! 95% percent of the food you provide contains milk, eggs or animal flesh leaving little or no choice for AR advocates. Not only does it keep money out of your pocket, it kind of grosses us vegans out to see dead pig on your counter…
<br/>
<br/>Furthermore, organic and fair-trade ingredients are of upmost importance. Your products are already pricey and considered high-quality, obviously people are willing to pay more for better food… By switching over to a more compassionate and progressive menu, you have absolutely nothing to lose.</div>
<div class=”ideaContentWidth ideaComment”><a class=”ideaCommentIcon” href=”http://mystarbucksidea.force.com/ideas/viewIdea.apexp?id=087500000004yPV” name=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:linkComments” id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:linkComments”>
Comments [44]</a>
<span id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:j_id60″><span id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:postedByUserTextToCategory”/></span>
<span id=”thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:createdDate”/>
</div>
</div>
</div></li>
That means that this single post is 4.4kb in size, and only 14% of this is actual content; the rest is bloated markup.
My personal favourite is the IDs that are given to nearly evey element, for example the date of this idea is contained within a span which has the ID:
thePage:mainLayout:pbIdeaList:incIdeaList:ideaListStd:ideaList:0:createdDate
So does any of this actually matter? I would say YES! I imagine that the Flash movies are used for headings to allow for a custom font. But this is madness. Similarly, requiring Javascript to populate the page title also seems slightly insane, and leads to the amusing situation where Google indexes the site with the title “Portal Header”.
I’m a fairly strong believer in web standards, and in particular the idea of good, symantically relevant, HTML markup. It would be fairly straightforward to implement this site and stick to the standards, and this would benefit the end user by offering better accessibility, faster loading times and overall a better experience.
Overall I do like the idea of www.mystarbucksidea.com, I just don’t like the implementation.
I tried to use www.browsershots.org to show you how the site breaks on some browsers, but browsershots can’t even handle the site! Click here to see its attempt!
See below for a screenshot when viewed in IE6.
