Brian's Photo Blog — Article 626
<< PreviousNext >>Blog Index
McMenamins’ Disappointing New Web Site
Friday 24 February 2017   —   Category: Miscellaneous
Sections Outline  [+]
On February 2, 2017, I received an e-mail from McMenamins which included this announcement:
“Today we launched a new with the goal of providing the best possible McMenamins experience — across mobile and desktop viewing. Many of you visit our site from your phones or other mobile devices, so we’ve made our site more visual with larger images; easier-​to-​find pages; an improved search function; and ease of use in booking a hotel room and buying movie, concert and event tickets. We invite you to wander slowly through its pages and listings for a fresh window to see into our world.”
As a regular user of their site during my McMenamins Passport adventure, I was eager to take it for a spin. As a Web site developer for the past 20 years, I was interested to see what sort of improvements had been made. Un­for­tu­nate­ly, both as a user and as a developer, I think that their new site is a step backwards instead of a step forwards. In the past the McMenamins Web site was developed by Portland-based Plan­et Argon. This time around they chose to use Ashland-based ProjectA. Seeing that their previous site was pretty good looking and functional, I don’t know what motivated McMenamins to change developers. Perhaps they wanted something completely different.

In one sense they did get something completely different ... if you compare it to their previous Web site. But if you compare it to the modern, trendy Web site design common on so many sites these days, it is nothing new at all. The old site evoked McMenamins’s unique, artistic, and somewhat-​counter-​culture aesthetic much more than it does now. If you were to judge by the new Web site alone, McMenamins is merely a trendy look-alike which does not stand out from the crowd. Open the following subsection and see for yourself.
Visual Aesthetic Comparison [+]
I’m a practical guy, so I usually care more about how something works than how it looks. I could live with the Web site’s new look if it functioned as well as the old — although I would continue to miss the quirky beauty of the old site. Un­for­tu­nate­ly, the new site does not live up to McMenamins’s goal of “providing the best possible McMenamins experience.”

The first thing I noticed when I visited (and continue to visit) the new site is that it is very slow. I use the Web extensively every day, visiting quite a number of Web sites. The new McMenamins site is definitely near or at the bottom of the list when it comes to speed. Their old site was pretty snappy, but the new one flows like molasses in the winter: very slowly. Even though the developers display a cute spinning McMenamins sun while you are waiting, that gets really old really fast.

There could be a number of reasons for the slowness, but one of the most obvious is that, as McMenamins stated above, the site is “more visual with larger images.” In addition, the site makes heavy use of interactive graphics which, while flashy, are merely eye candy that do not make the site faster or more useable.

Investigating further behind the scenes, I have found a couple more issues that significantly affect the site’s performance. I looked at the HTML source code for one very slow page which lists the McMenamins locations ( https://​www.​mc​men​a​mins.​com/​eat-​drink ). You can expand the following subsections for more details and examples of what I discovered.
Huge Amount of Hidden Data [+]
In the source code for the previously-mentioned McMenamins locations page, I found 536 KB of hidden (not vis­i­ble to the user) data in a form field called ‘ViewState’. From a human perspective it’s just gibberish ... here is a tiny sample:
The entire huge chunk of data does not present any useful information for the user, but apparently the Web site itself uses the data to make the site function properly.

Just to put this quantity in perspective, it is equivalent to — on this (my) Web site — the 60 photo previews on the Abiqua Falls 2012 contact sheet, or 450 article titles and descriptions on the index of articles page. That is a lot of excess bag­gage for the McMenamins site to be loading behind the scenes. A small sampling of other pages turned up a similar huge chunk of hidden data on each page. It’s just one more reason why their site is so slow.
Tabbed Layout Inefficiencies [+]
Referring to the same McMenamins locations page mentioned above, you will notice that there are four tabs across the top of the page: ‘All Places’, ‘By Region’, ‘Near Me’ and ‘On Tap’.

The first three tabs present a lot of similar information, because they all have to do with McMenamins locations. But the fourth tab, ‘On Tap’ does not display location information at all. Rather, it is a long list of every beer, cider, wine and spirits currently available across the entire McMenamins empire.

So even if I just wanted to find a McMenamins location, this particular page, because of the tabbed layout, is always load­ing the text and large semi-generic icons for more than 250 drinks on tap. Even if I don’t look at the On Tap section. This inefficiency is yet another reason why this page, and their entire site, loads so slowly.

The entire McMenamins locations page weighs in at a hefty 6.7 MB, which includes all the text and graphics, JavaScript, style sheets, and the 536 KB of hidden data mentioned in the previous subsection. Because cellular data connections are much slower than WiFi, and most phone plans have limits on monthly data, it is hard to see how this layout can be con­sid­ered better for mobile users.
ProjectA made an interesting design choice when creating the new McMenamins Web site. The pages are laid out dif­fer­ent­ly, and function differently, depending on the pixel width of the Web browser. With a bit of ex­per­i­men­ta­tion, I have determined that when the width is greater than 1,250 pixels, page content is often grouped into tabbed sections. At less than 1,250 pixels, the same page has a longer, liner, non-tabbed layout.

At first I thought the different layout was mobile device vs. desktop computer. Even though my iPad Mini 2 has a screen width of 2,048 pixels, for historical and compatibility reasons the screen width is often considered to be 1,024 pixels, which is below ProjectA’s 1,250 pixel cut-off. In contrast, my desktop screen is 1,920 pixels wide, although I often use the browser at 1,600 pixels. Both widths are over that magic 1,250 number. As soon as I resized my desktop browser to less than 1,250 pixels, the layout changed to what I was experiencing on my iPad. As Spock would say: fascinating. Check out the following subsections for more details.
Browser Width Comparison Example [+]
Let’s look at an example to help clarify what I’m talking about. Just now I randomly chose the Web page for Boon’s Treasury in nearby Salem. When I made my desktop browswer 1,251 pixels wide (or wider), the page displayed in a shorter, tabbed format.

When I reduced the width of the browser by 2 pixesl to 1,249 (or narrower), the layout radically changed. Instead of pre­sent­ing the information in five tabbed sections, all of the info was arranged on one long page. I prefer the tabbed layout, because I would rather click on the tab section I am interested in rather than scrolling through a long page to find what I am looking for.

I also prefer how the tab sections of the wider pages display what’s on tap. With this layout I can take my time to consider all of the options, and then click on a certain drink for more info. Here is a screen shot:

The layout at less than 1,250 pixels is quite different and ever changing:

As you can see, only four offerings are shown at a once. By the time I see what each option is, the listing au­to­mat­ic­al­ly moves on to the next four options. It’s like playing a game of tag, and if you are not fast enough, you loose! This eye candy is way more frustrating than useful and functional.
Meltdown at 1,250 Pixles [+]
If you have been paying close attention, you will notice that in the previous subsection I investigated the page layout at less than 1,250 pixels, and at greater than 1,250 pixels. But what happens when the browser width is set to exactly 1,250 pixels? I was astonished to discover that Boon’s Treasury page I was on failed to load at all! Here is what the entire page looked like:

No images, no menus, no beers, no events, no history ... nada! If you ask me, as a professional programmer, I would say that this is definitely a programming error.
Or Is It 1,265 Pixles? [+]
In order to provide the most accurate information in this article, I decided to see if this same error occured in the Mac Safari browser. There was always the possibility that it was a Firefox-only problem. The same disappearing-​act meltdown happened in Safari, but only when the browser was 1,265 pixels wide instead of at 1,250 pixels in Firefox (both Mac and Windows versions).

I have been unable to determine why there is a 15-pixel difference. Perhaps it is some internal difference between the browsers themselves. Or maybe it has to do with the Web site programming. Who knows?
On the old McMenamins Web site, each location (like Edgefield, North Bank, Sherwood, etc.) had a location-specific menu on the left side of the page which helped you explore the Web pages related to that location. No matter which page related to that location you visited, that menu would always be there as a navigation aid.

On the new Web site, links to pages relating to a specific location are mostly found on the home page for that location. Once you start exploring other pages for that location, there is no location-specific menu to help you get to the other pages for that location. You are forced to go back to the home page for that location, and then perhaps click on a certain tab (using the “wide” layout), or else scroll down (using the “narrow” layout, until you find the link to the page you are looking for.

There are two problems with this new system. First, it makes navigation very inefficient because you have to do a lot more clicking, and then wait for slow pages to load. Second, it is more difficult to see what pages of in­for­ma­tion are available for a given location, because the links to those pages are not presented in a compact, consistent menu like they were before. You can expand the following subsection to see an example of what I am talking about.
Navigating the Edgefield Pages [+]
To the right is part of the extenive nav­i­ga­tion menu from the old McMenamins site for all the pages related to Edgefield. No matter which page I was looking at, I could easily and quickly jump to any other Edge­field page by using this menu, which was on the left side of each page. There was no need to go back to the Edgefield home page. Nor did I have to wonder where to find the links to all the Edge­field pages, because they were all right there.

So, for example, if I were on the Little Red Shed page on the old Web site, I could eas­i­ly go to the Winery Tasting Room page di­rect­ly, using the menu. On the new site, nav­i­ga­tion is much slower and more cum­ber­some. On the new Little Red Shed page, there are no links to the other restaurants and bars on the Edgefield property. So in order to find out about those other venues, I have to click on a link to go back to the Edgefield home page, wait for that slow page to load, scroll down to the Res­tau­rants & Bars tab and click on it (if I am view­ing the page in “wide” mode), and then finally click on the link to the other venue I want to check out.

If I am viewing the Web site in “narrow” mode, once I get back to the Edgefield home page, instead of scrolling down just a little bit to find the Restaurants & Bars tab, I have to scroll way down the page, past tons of hotel res­er­va­tion info, until I finally arrive at the Eat & Drink section. But I’m not done yet! Because the “narrow” layout shows me only four venues at a time, I have to either wait for the venue I want to click on to appear, or scroll hor­i­zon­tal­ly through the list until I find it. WHEW! What a pain!

Life was so much simpler on the old McMenamins Web site! While there were plenty of graphics, they were not front and center, and they didn’t interfere with the text-based information the pages were presenting.

Unfortunately the new Web site is so graphics-​heavy that the images actually hinder the communication of in­for­ma­tion. Now it not only takes longer to find what you are looking for, you have to fight the clutter of graphics which muddles the information. “New and improved” makes life more complicated! You can expand the fol­low­ing subsections to see specific examples of this.
McMenamins Locations Listing Comparison [+]
The page listing all the McMenamins locations used to display quickly because it was text-​based. Now, with a very graphics-​intensive listing, it takes quite a while for the page to load. The new listing is much longer, so I have to scroll more. And because the name of each location is superimposed over a photo of the property, my eyes struggle to separate the text from the graphics.
Click on the image to see a full-size version
Click on the image to go to the live Web page

Since the old listing is so much more compact, I’ll use this space for some more comments!

I don’t know about you, but it seems obvious to me which version loads quicker, is easier and quicker to nav­i­gate, and is easier and quicker to find the in­for­ma­tion I’m looking for.

I really don’t need to see a photo of a location in order to find the link which will take me to that location’s home page. These images are just more eye candy which re­duc­es the func­tion­al­i­ty and usefulness of the page.

Neither the old nor new listing allow you to sort them in any way. Because that would be nice, I have cre­at­ed my own sortable listing of 116 McMenamins ven­ues.

The new page is so bloated that I still have tons of space to write, but I’ve run out of things to say (for now!). But I guess I do need to add that the space below was left in­ten­tion­al­ly blank.
Finding a Movie at Mission Theater [+]
As part of my McMenamins Passport adventure, I need to get a stamp from the Mission Theater. This is one of a handful of locations at which you need to buy a ticket in order to get your stamp.

So I went to the Mission Theater home page to see what movies are going to be shown. As you can see below, the new site presented me with a cluttered screen of graphics that did not provide much in­for­ma­tion. Once again, text su­per­im­posed over pic­tures is harder to read. And this is their new look which is supposed to be an im­prove­ment!

To the right is the Mission Theater events listing from the old site. It provides more of the in­for­ma­tion I want — the time, price and a de­scrip­tion — in a layout that is much clearer and eas­i­er to read. It does include images, but they are more reasonably sized and less overbearing.

Do I really need a screenful of large pictures to try to tell me what’s on offer? I can read!

Despite the famous saying, a picture is NOT worth a thousand words on the new Mc­Men­a­mins Web site!

Finding a Beer at Boon’s Treasury [+]
The following screen shot already appeared in the Browser Width Comparison Example subsection above, but I am showing it again here so you won’t have to go back to that subsection to see what I’m talking about.

As you can see, this listing gives little information beyond the name of the beer (or cider). There appears to be a photo of each drink, but upon closer inspection I do not think they are actual individual photos of that exact drink. Well, perhaps for the ciders they are. But for the beers, they seem to be semi-generic photos which attempt to rep­re­sent the beer’s color based upon its SRM value. Ruby Ale and Wissler’s Wheat may have similar SRMs, but be­cause Ruby is brewed with a generous addition of raspberries, it seems very unlikely that these two beers would actually look the same.

If I were wanting to choose a drink from this Boon’s Treasury listing, I would have to click on each of the 13 photos, one at a time, in order to find out more information about each drink, like its ABV, IBU, and a detailed description. By the time I got to the end, I would probably have forgotten what I read at the beginning. This meth­od of presenting information is highly inefficient, and tedious to interact with.

Furthermore, as I shared in that Browser Width Comparison Example subsection above, the experience is even worse when viewing the Web site in its “narrow” mode, when only four drinks are shown at a time, and they are likely to scroll by before you have a chance to see what each one is.

In stark contrast is the Boon’s Treasury On Tap listing from the old McMenamins Web site. You can click on the following partial screen shot in order to open a complete, full-sized version in a new tab / window.

As you can see, this listing provides all of the information about each drink all on one page, without any ad­di­tion­al clicking or navigation. You can easily scroll through it to compare all the offerings. The information is not clut­tered and muddled by unnecessary generic photos. If you learn the meaning of the SRM values, you don’t need such photos to tell you the drink’s color.

Once again, a flashy, modern, image-based Web design hinders the communication of information, and causes the user experience to be slower and more frustrating.
As I already discussed in Section 3 above, the new McMenamins Web site is actually two sites in one, and a par­tic­u­lar version is displayed based upon the current pixel width of your Web browser. Also, in the five previous sections I have mentioned a number of times that the navigation experience is significantly different between the “wide” and “narrow” versions of the site.

But what I was shocked to discover is that there is also significant differences in the content of the two layouts. Check out the following subsection for all the shocking details!
The Amazing Disappearing Edgefield Info [+]
When viewing the new Edgefield home page with a browser width of 1,600 pixels (“wide” layout), it had about 2 screens of information to scroll through, arranged in 10 tabbed sections with 22 tabbed subsections. Here is a list of the tabbed sections, with their tabbed subsections following in (parentheses).
  1. About
  2. Lodging (Guestrooms, Lodging Packages, Frequent Guest, Policies, Surrounding Attractions, Plan Your Trip [Ruby’s Spa & Salon and Golf Course])
  3. Restaurants & Bars
  4. Things to Do (Live Music, Movies, Festival & Events, Ruby’s Spa & Salon, Soaking Pool, Golf Course)
  5. Discover (Art, History, Gardens)
  6. Handcrafted (Brewery, Winery, Distillery)
  7. Shop (Gift Shop & Espresso Bar, Gorge Glashouse, EarthArt Clayworks, Shop Online)
  8. Private Events
  9. Join Our Team
  10. Celebration of Syrah
When the browser was resized to 1,200 pixel wide, the “narrow” layout was implemented. The tabbed sections dis­ap­peared and all the information was presented in one long document that had 14 screens of content to scroll through. Here are the sections I found:
  1. About
  2. Lodging (Guestrooms, Packages, Frequent Guest, Policies, Surrounding Attractions, Plan Your Trip [Ruby’s Spa & Salon and Golf Course])
  3. Restaurants & Bars
  4. Live Music
  5. Festivals and Events
  6. Art
  7. History
  8. Gorge Glashaus
  9. EarthArt Clayworks
  10. Private Events
  11. Employment
  12. Celebration of Syrah
Totally missing from the “narrow” layout were mentions of and links to:
  1. Brewery
  2. Winery
  3. Distillery
  4. Soaking Pool
  5. Movies
  6. Gift Shop
  7. Online Store
If I were the manager of Edgefield, I would be very unhappy that users of the “narrow” layout (mostly mobile users) are NOT seeing information about seven significant, money-​making venues on the Edgefield property. It really seems like someone has dropped the ball.

Even though I criticized the tabbed layout in the Tabbed Layout Inefficiencies subsection above, in general I think it can be a great way to present a lot of information in a compact space. Take, for example, the information about the Celebration of Syrah. When those details were presented on the 10th tab of the “wide” layout, they was easy to get to. But in the “nar­row” layout, when Celebration of Syrah was the last section on a long page, it took a lot of scrolling to get to that info.
For Web sites that present more than one layout of their site, the decision of which layout to use is usually based upon the user agent information provided by the Web browser. Some browsers provide user agent spoofing as a way of letting the user choose among the layouts.

For example, I don’t like seeing mobile device layouts on my iPad Mini, so in the browser I use, Mercury, I set the user agent to be Firefox 23, which tells the Web servers to give me the desktop version of sites. The built-in iOS version of Safari does not have this feature.

But this technique does not work on the new McMenamins Web site, because the decision of which layout to use is not based on the user agent info, but, as I have mentioned above, the width of the browser in pixels. On a desk­top computer you can easily adjust the width of a browser window. But on a mobile device, you are (with rare exceptions) limited to the screen width reported by the device, which as I said before, is generally less than the 1,250 pixel decision point. As a re­sult, on mobile devices you are unable to view the “wide” layout, and are stuck with the “narrow” layout.

I think it would have been much better for McMenamins to follow the normal method of using the user agent info to de­ter­mine layout instead of the browser width. That way their Web site visitors would have a choice as to which layout they want to use.

Another way to give users a choice of layouts is to specifically give them that choice right on the Web site. For example, this is what Wikipedia does. When visiting their Web site with a mobile user agent, you are presented with the mobile site layout. But if you scroll down to the bottom of the page, there is a link called ‘Desktop’. Click on it, and once the page reloads, you are now viewing the desktop layout.

Wikipedia’s design is very nice, simple, and user friendly. I think all Web sites with multiple layouts should pro­vide such a feature. But McMenamins has not provided us with that choice, either through user agent spoofing nor via a specific link. On the old McMenamins Web site, you could search for the term ‘Hammerhead’ and among the search results were 18 blog posts mentioning McMenamins’ flagship beer. Or you could search for ‘black rabbit’ and find 7 blog posts referring to Edgefield’s iconic mascot or one of its namesakes.

When McMenamins redesigned their Web site, for some strange reason they moved their blog to a completely different Web site!  It is now found at Fortunately, all of the same posts seem to have made the move.

Unfortunately, when you search for ‘Hammerhead’ on McMenamins new main Web site, blog posts are NOT included, so none of the blog posts mentioning Hammerhead are listed in the search results. To find those posts, you have to go to their totally separate blog Web site, and search there. That is very inconvenient, nonobvious and nonintuitive.

This complete separation of McMenamins information is an incomprehensible and unnecessary step backwards. I hope that they will eventually see the error of their ways and reintegrate their content. In the Artwork section of the old McMenamins Web site, not only could you feast your eyes on the amazing work pro­duced by the dozen or so McMenamins artists, but you could also read short biographies of each artist.

Unfortunately, those artist bios are nowhere to be found on the new Web site. I even looked on the separate blog Web site I mentioned in the previous section. Well, at least all their artwork seems to have made it to the new Art­work section. For that we can be grateful, even though the artist bios got axed.

Because this omission bothered me so much, I decided to track down the bios and make them available to the world once again through my Web site. Using various techniques to scour the Web, I was able to successfully download all of the rel­e­vant text and images. You can see these reborn bios in McMenamins Artists Lost and Found. When McMenamins switched to their new Web site on February 2, I was very dismayed to discover that many of the links to specific content on their Web site no longer worked. After doing a bit of analysis of the content of this (my) Web site, I found that I had links to 221 unique McMenamins URLs (Web page addresses), which were used 1,081 times on this site!

Out of those 221 unique URLs, 150 of them (about 2/3) had been programmed by the developer to redirect to the equiv­a­lent page on their new Web site. But that left the remaining 1/3 (71 links) which led to nowhere except an unhelpful Error 404 page.

So I spent the next two days tracking down the correct address for all 221 URLs, and then replacing the 1,081 old Mc­Men­a­mins URLs on my Web site with the new correct URLs. But for some old pages there was no equivalent new page, particularly for the dozen or so artist bios I mentioned in the previous section.

Since the developers were able to program forwarding for many of the old URLs, it seems like they should have been able to put in a bit more time and effort to program ALL of them to forward properly. Even using the word obfuscation seems like a form of obfuscation, so I’ll give you the definition: “to make ob­scure or unclear.” This is what the developers of the new McMenamins Web site have done with the URLs to much of the specific content.

In the Tabbed Layout Inefficiencies subsection above I referred to the McMenamins locations listing at https://​www.​mc​men​amins.​com/​eat-​drink. I had mentioned that there are four tabs across the top of the page: ‘All Places’, ‘By Region’, ‘Near Me’ and ‘On Tap’.

No matter which tab I click on — which changes the content of the page — the URL does not change, because in reality it’s all one page, with certain content being shown or hidden depending which tab I click on.

So, for example, what if I wanted to link directly to the content on the ‘On Tap’ tab. Is there a URL to accomplish that? I wouldn’t know by looking at the address bar in my browser, because it didn’t change when I clicked on the ‘On Tap’ tab. This is a really unfortunate design decision on the part of the developers.

After a bit of experimentation, I figured it out. By adding the name of the tab, in a modified format, to the end of the URL, I can link directly to the ‘On Tap’ tab, like this: https://​www.​mcmenamins.​com/​eat-​drink/​on-​tap. After more testing, I found that this method works for most, but not all, of the other tabbed pages on the new site.

The developers have also made extensive use of pop-up information, like when I click on the name or picture of a beer to get more information. Because they are controlled via JavaScript, I’m pretty sure that there is no way to link to them di­rect­ly, which is very disappointing.

I think developers should make it possible for others to link to specific contents on their site. I have made a con­scious effort to make all of the content on this (my) Web site linkable, down to the individual sections in a long article like this. I wish that more developers would follow my good example. I’ve been using the McMenamins App for almost a year. It’s not perfect, but it is pretty good for looking up Mc­Men­a­mins info, especially while out and about. In the end, I think it is good enough for mobile use, and with some effort it could even be improved.

I think that the new McMenamins Web site is slow, clunky, difficult to navigate, and difficult to find information on. I just experienced this afresh today when I tried to find details about an Edgefield event next week. The new site is so dys­func­tion­al that I almost gave up. How is making things slower, more difficult and more frustrating an improvement?!

I also just tried looking up the same event in the App, and it was much quicker and easier. I think it would have been much better to leave the old site as it was, and perhaps tweak it a bit to make it work better on mobile de­vic­es if there were any specific issues. The way things stand now, I’m going to dread each time I need to go to the new Web site. That is definitely a step backwards for McMenamins!
Brian's Photo Blog — Article 626
<< PreviousNext >>Blog Index
Your Name:(required — will appear in the comments section below)

Your E-mail Address:(optional — just in case I would like to reply to your comment — will NOT be made public)

Your Web Site:(optional — if entered, a link will appear in the comments section below)
Your Comments:(no HTML, no profanity — will be screened before posting)

Simple Math:(required — demonstrate that you're a human, and not an automated spambot)
What is 8 + 6 ?   
Reader Comments
There are no reader comments for this blog entry. Why don't you be the first to write one?
Brian's Photo Blog — Article 626
<< PreviousNext >>Blog Index