During my recent visit to Pittsburgh I checked out three local establishments , Crazy Mocha, The Manor Theatre and Tipsy Cow. This blog will be a brief critique of their mobile website homepages. This will give us insight into how local Pittsburgh website designers are doing things on mobile.
Note: I am critiquing these websites based on what I see on my iPhone. The desktop versions may vary, but remember, at least half of users are checking you out on their mobile devices. Here I was looking on an iPhone 7.
Crazy Mocha (website link)
I had some downtime during my visit so I decided to take advantage and do some work for myself and my clients. I like to work from cafes on occasion and Crazy Mocha was down the street from where I was staying in Shadyside.
I was greeted by a pleasant barista. It was a nice exchange and the drink she made was great. The experience was so great that I felt compelled to write a Facebook review, something that can really help your local SEO.
Crazy Mocha’s website is clean. I like that. The colors match the branding you’ll see at their physical locations. However, I was surprised to see the font of the logo does not match the font on the facade of the stores. Maybe they are going through a rebranding… Either way, it was a bit jolting. You want to make sure your banding is exactly the same online and in stores.
There is a drop-down notification bar at the top of the site promoting a special. These can be effective if done right. They’re promoting their ecommerce shop. The call out is almost perfect but it tells the users to start by clicking “Shop” which is not immediately visible on the mobile version. You have to click “menu” then “shop” on the mobile version. This may cause some users to get confused and move on. That’s potentially a lost sale.
Scrolling down there is a photo collage of their stores. Fortunately you can zoom in to see the detail on the mobile device. It would be futile to display the photos at that size on mobile because the photos are so small before zooming in.
Scrolling down further, they have a concise and specific paragraph of text describing exactly what they are. I love the bold text that starts off the paragraph. It looks good and is clear.
Below that they have a few larger photos that look good on mobile. Even if you couldn’t zoom in, these photos are effective.
Finally, the footer offers big, branded social media links and important page links. I would include pertinent info like phone number, address and email to top it off.
Overall, this website makes the cut.
The Manor Theatre (website link)
The friend I was visiting suggested we check out a movie at the manor theatre in Squirrel Hill. We went and saw Beauty and the Beast. As a 90s child, I quite liked it! The theater is quaint and small but classy and luxurious – an accurate reflection of the neighborhood. It was cool to have a bar in the theater!
Immediately, you can tell this is a mobile website, not a responsive website. That means it’s a separate website entirely instead of the same website that flexes to the size of the screen. That’s not a problem, but I would suggest they make the switch to a responsive website in the next year or two.
The colors are a little stark and highly contrasting. It’s not the most pleasant viewing experience. All of the necessary information is there, which is good for user experience and in turn good for business. You can easily see what is playing, when it’s playing, buy tickets and find directions. That’s all their website really needs to do.
Below the showtimes there are social media links and a link to view the full website. The full website is not responsive, so the user will be zooming in and out to navigate the site if they really need to find something that is not on the mobile version.
Overall it’s a decent job but I’m less than thrilled with most mobile-only website.
Tipsy Cow (website link)
We decided to get some dinner on my last night of this visit to Pittsburgh. Tipsy Cow was down the street from where we were and I hadn’t been there yet so we grabbed a table there. I got a salmon burger and can defiantly recommend it! The fried pickles were great too.
The site opens to a big, clear logo which lets me know I am in the right place. It matches the on-site location branding exactly. Very consistent.
Scrolling down, there is a fading slideshow of full-width images. This is an excellent feature for a responsive website. The photos are high res and professional.
Below that are the hours of operation. The bar hours are listed clearly. There is a title for kitchen hours but I don’t see any separate kitchen hours listed… seems like something is missing here.
Below that are social links and a footer and albeit slightly cut off, it has the address, phone number and email – all crucial contact info.
The only major gripe I have with this site is that the menu icon isn’t at the very top. So when it finally scrolls into view and you click it, the menu items drop down off screen, and you have to scroll even more to access them. This could be solved by placing the menu icon at the very top. I would even recommend making the menu button stick to the top so it is always there when the user scrolls down.
The combined branding consistency, user experience, quality content and pertinent business information makes this site the most well designed mobile of the three. Good job Tipsy Cow!
Now that we’ve been through a few mobile website homepage, how does yours stack up? Want to make some changes? Have questions?