Rebranding a Restaurant: Going Mobile
Now that Illusion Bar•Grill•Café has a new and proper website for desktops and laptops, the next obvious step is mobile. Like it or not, a mobile counterpart to any website is a necessity now, as we're even seeing some choose their smartphone over a laptop when surfing the net.
Let's take a peek at the new mobile site, what I did, why I did it, and even added a new feature to better utilize mobile marketing.
Taking what I learned about building for mobile
When I created the mobile version of this site (m.amportfolio.com), I went on my own and coded it all from scratch. While it renders nicely in iOS and some Android devices, I did notice disappointments in lower-level devices and Blackberries. Fonts would not work nicely, placements would be off, and thus while the site did work, the level of "pretty" wasn't so my happiness.
After seeing jQuery Mobile effectively used on a client site, I immediately chose it as the platform for the Illusion Bar•Grill•Café mobile site. While I've spoken before of how I think too much reliance on 3rd party templated setups can make one a lazy developer, for mobile I think it's better to use a platform. They are built not only to load fast and clean on a variety of mobile devices, but also to handle all the various scenarios of users with their choice in smartphone.
I still stand by two tenets when it comes to mobile though. First, the site should be able to do all or at least most of what you get on the normal desktop/laptop site. I always hated when I go to a mobile site, and then I want or need to go on the normal desktop/laptop site because some function is missing. Facebook is a prime culprit of this.
Secondly, you should not have to start from the home page on mobile. If one clicks on a link from let's say Google or another site to the photos page, or menu, or an event, sending the user to the mobile site home page is a cardinal sin in my book. Not when we have script solutions to send them to the mobile counterpart of said link.
Let's look at the mobile site
There isn't much surprise to the look/feel of the mobile site. I am big on continuity and branding after all, so what you see is really a melding of the UI jQuery Mobile gives you with the colors, look, and feel of the Illusion Bar•Grill•Café desktop/laptop site.
This is one of those moments where I happily tout my own custom-built CMS, mainly because it made taking the data/content from the desktop/laptop site and bringing it to mobile very easy. I will confess I had managed to make this mobile site in two days. jQuery Mobile elements were carefully selected to better utilize the mobile experience and thus make life easier (and less data consuming) on the end user.
One particular example of mobile utilization is in the menu. On the desktop/laptop site, I had the sections of the menu set up as separate pages, but for mobile, a drop-down system was brought into play. All the sections were brought into one page, and the user can simply press on a title to have the content dropped-down. Images that are placed on the desktop/laptop menu pages will not appear here, again because I believe the user wants quick results.
It's a good lesson in remembering that many are out there on slow networks with limited data. It's upon us to design and create mobile to deliver not only the brand message and entice them visually, but also not to eat up their data or make them wait for content.
I'll admit this part was not my idea, but the execution did come from me. A part-time marketing professional who works for Illusion Bar•Grill•Café first asked me about QR Codes, and how she could make one to use. Upon discussion, I found she wanted to be able to make a mobile-only special, and then send customers to it via a QR Code.
The answer was easy. I simply took scripts I had used before to create shortlinks and reutilized them with a Google Charts API for QR Codes. The actual "mobile special" page is simply a basic content page with a headline and a big block space for any kind of content one wishes to put on a mobile page.
In laymen's terms, here's what happens. A user on the admin side can click to add a "mobile special". On the "add" page, a shortened link will be generated and held aside. This user puts in a headline and then any content they want to appear. When they press "Submit", the shortened link is sent to Google Charts and their API generates and returns a QR Code. From there, the admin user can put this code into flyers or elsewhere, and customers who scan said code will find the mobile-only special.
If the admin user loses the QR code or shortened link, they can simply go to edit the offer where they will be shown the link and code right there when they go to view the content in edit mode. If they change the content, the code will not change...so even a released offer that has a mistake can be fixed without fixing printed pieces containing the code. More codes can be generated if there are more offers, thus the client now has the flexibility to promote in the mobile space and specific to the target audience.
Customizations like this are another reality check on why web designers should consider investing time/energy into learning how to write code. You can literally take your own scripts or other ones put out there for free usage, and thus build solid solutions for your clients.
Where do we go from here?
At this point, the job is finished. It's now up to the management and the economy. My clients are very very pleased with my work and the new tools they have for marketing, although they are now thinking "further evolution" with their business model. Eventually they might redo the whole business to be more "restaurant" as opposed to a "bar", simply because of the saturation of competition. In the end, this potential change doesn't reflect badly on my work...especially since they want me to build the brand, logo, and website when this happens.
Until then, I'll take an Nescafé Frappe with skim milk and a little sugar please.
What do you think of the mobile site? Have you used jQuery Mobile to make a mobile website?