5-Minute Recipe for Mobile-Friendly Websites for Restaurants

Cook Time: 5 minutes
Level: Easy

Ingredients
a web browser — we highly recommend Firefox or Chrome
1 computer (ON)
internet
1 email address
1 unique and easy-to-remember password
a credit card

Directions
1. Open your web browser on your computer. Type ontheplates.com and once the page loads, click the Sign Up button on the top right of the page.
2. Enter your email address and password, then click Sign Up and Get Started. Enter your restaurant name and the name of your restaurant’s website. Then, click “Create Restaurant.” We highly recommend that you use the same name for both to maximize your SEO.
3. Now, choose your plan. Basic Plan gives you a straightforward mobile-friendly website for your restaurant. Plus gives you Basic Plan + social media management, photo gallery, mailing list, and more. We highly recommend the Plus Plan, because of the great value you will receive with not much more than the Basic Plan.
4. Next, enter your credit card information. Then, click “Submit.”
5. Voila, you have a website.
6. Optional: email us your logo and menu at support@ontheplates.com. We will enter it for you.

Lydia Ngo, Co-founder of On the Plates

Fun with Python and Javascript: The easiest way to upgrade your Python

didip:

Python 2.7.4 and 3.3.1 had just came out, they offer quite a few performance enhancements as well as bug fixes. Also, upgrading to 2.7.4 seems like the first logical step before moving to Python 3.3.x.

I hope this post can help you upgrade your Python as painless as possible.

Didip Kerabat, Co-founder of On the Plates

3 Things Restaurants Websites Must Have

There are two sides to building restaurant websites. Most restaurants approach it from their own perspective rather than from their customers’. Restaurants think that it’s important to show the personality and atmosphere of the restaurant on their websites. They want to tell their stories and talk about who they are. It’s true that some customers do want to know — but not when they’re hungry. Hungry people only want three things when searching for restaurants: speed, a mobile-friendly site, and an updated menu and info.

SPEED
Hungry people are impatient. They want a website that loads fast on computers and even more so on smartphones. And when your site is not fast enough for them, they’ll go to your competitors.

MOBILE FRIENDLY
Having fast and easy-to-spot hours and address will definitely help them to find you. This includes having a mobile friendly website, which means that the text is readable without zooming.

UPDATED INFO
It’s frustrating for people to experience a menu and hours that are not up to date. They’ll see an item and crave it because they see it on your website, and then they’ll go to your restaurant either to find that you’re not open yet or that the menu item is no longer available.

If you are in the restaurant business and these things have happened to you, we can help. On the Plates is an online platform that does all of the above at an affordable price. We also do most of the work for you, so you don’t have to.

Lydia Ngo, Co-founder of On the Plates

Lessons learned from Responsive Web Design refactor

We recently refactored the restaurant websites from traditional fixed width layout to responsive web design. This is our notes on that experience and hopefully it can be useful to others.

Requirements

First: The old layout already follows single-page principle. All of restaurants’ data are displayed in 1 webpage, broken up in 3 sections. The new layout must also follow single-page principle with clear separation between sections.

Second: The old layout is actually 2 layouts, separating desktop and mobile experience using user agent. We want to have only 1 layout (This is pretty much the point of RWD).

Third: The old layout uses jQuery Mobile, a good mobile-web framework. Its cross browser support is amazing and definitely more than good enough to produce MVP.

But we keep having subtle bugs with it. e.g. Disappearing header when all collapsible are collapsed, jagged animation when expanding collapsible, Android bugs after upgrading to jQuery 1.9, etc. The new layout must improve the user experience.

1. Use a framework or build your own

There are a lot of moving pieces in a responsive layout. Without framework, our SCSS files will easily turn into soup-of-convoluted-mess. Our framework of choice is ZURB Foundation.

We went with ZURB Foundation because responsive grid is their primary selling point and we already use SCSS. If we had more time, Skeleton would work as well. We skipped on Bootstrap because it’s a little too opinionated for our taste and it uses LESS.

It is very unfortunate that 2 weeks after we finished the refactor, Foundation 4 came out. Examples in this blog post is based on Foundation 3.

2. Use the grid

Grid is the primary selling point on a lot of CSS frameworks. In Foundation 3, this is what it looks like:

<div class="row">
  <div class="eight columns">Main Content</div>
  <div class="four columns">Sidebar</div>
</div>

Make sure that the columns add up to twelve. You can also nest them:

<div class="row">
  <div class="eight columns">
    <div class="row">
      <div class="six columns">50% content</div>
      <div class="six columns">50% content</div>
    </div>
  </div>
  <div class="four columns">Sidebar</div>
</div>

This feature alone makes all the difference. Planning a particular layout is so much easier now.

3. User agent detection is still useful

By now, mobile users are expecting website to load as fast as desktop version and 4G is definitely not as fast as WiFi. We use user agent detection to turn off certain features on smartphones. Example:

if(!isSmartphone()) {
  $.get('/more/data.json', function(data) { populateSidebar(data); });
}

4. Use asset packaging library

Often times, you don’t need the full complete framework on particular HTML. Asset Pipeline, Jammit, or Crammit can help you combining CSS/JS that you need on individual page basis. Reducing payload is always a good thing for mobile friendly webpage.

5. Inline your CSS and Javascript

If your webpage follows single-page principle, you might want to inline/embed all of your CSS and Javascript inside the HTML. With asset packaging library, it does the concatenation and minifying for you already. All you have to do is embed them in your HTML. Example:

<html>
  <head>
    <style>
      {{ open('/public/assets/packaged.min.css').read() }}
    </style>
  </head>
</html>

This is not a silver bullet advice. You should measure first to make sure that you really get the benefit, just like any other performance enhancement efforts.

6. Not going “mobile first” is not a big deal

You can progressively add @media block as needed. We started with desktop version first and move towards smaller and smaller device.

/* 1. Desktop Version */

/* 2. Tablet Version */
@media only screen and (max-width: 767px) {}

/* 3. Smartphone Landscape Version */
@media only screen and (max-width: 480px) {}

/* 4. Smartphone Portrait Version */
@media only screen and (max-width: 320px) {}

7. Special logic when fetching images on smartphones

Usually people recommend to render the desktop version of image and resize it later using CSS media queries. But that can be problematic for large image on 4G smartphone. We can solve this problem with a little bit of Javascript:

<div class="img-container" data-img-480="http://cdn.example.com/path/to/img-480.png" data-img-1280="http://cdn.example.com/path/to/img-1280.png"></div>
<script>
  $(window).load(function() {
    if(isIphone() || isAndroidPhone()) { $('.img-container').append('<img src="' + $('.img-container').data('img-480') + '">'); }
    else { $('.img-container').append('<img src="' + $('.img-container').data('img-1280') + '">'); }
  });
</script>

Again, user agent detection can save us a few kilobytes.

Didip Kerabat, Co-founder of On the Plates

Some of you might have noticed that On the Plates&#8217; restaurant pages have a new look! This time, our emphasis is Responsive Web Design. That means all your content is on one page and viewable across all browsers and devices. We are also changing our pricing to a three-tier membership style to ensure that, whether you just started your business or have been in business for 10+ years, we will be able to give you the services that fit your budget. On the Plates offers solutions to give the hungry people easier access to your restaurant&#8217;s website. Instead of providing a PDF-format menu which is not openable on most phones, our menus are entered manually. This makes you more visible in Google search.  Another aspect that is very important to us is speed. We know that in a mobile search, most people are impatient, especially when they are hungry and looking for a restaurant to go to. Oftentimes, people will end up at a different restaurant than they originally wanted to visit, because the restaurant sites load slowly, fonts are too tiny, hours and contact info are hard to locate, or the site does not open at all because it uses Flash. With On the Plates, none of this will happen to you. In fact, we will bring you more customers. Lastly, please welcome our newest members: 808grinds.com a food cart who has a mobile truck that goes to Nike Campus, ACS Xerox, Creekside Business Park, and Kaiser Building, and a cart truck that stays on SW 9th Ave and SW Washington St 11-3pm M-F. mrhappys.ontheplates.com an online shop that makes four flavors of nut brittles.  Lydia Ngo, Co-founder of On the Plates
Pop-upView Separately

Some of you might have noticed that On the Plates’ restaurant pages have a new look! This time, our emphasis is Responsive Web Design. That means all your content is on one page and viewable across all browsers and devices.

We are also changing our pricing to a three-tier membership style to ensure that, whether you just started your business or have been in business for 10+ years, we will be able to give you the services that fit your budget.

On the Plates offers solutions to give the hungry people easier access to your restaurant’s website. Instead of providing a PDF-format menu which is not openable on most phones, our menus are entered manually. This makes you more visible in Google search. 

Another aspect that is very important to us is speed. We know that in a mobile search, most people are impatient, especially when they are hungry and looking for a restaurant to go to. Oftentimes, people will end up at a different restaurant than they originally wanted to visit, because the restaurant sites load slowly, fonts are too tiny, hours and contact info are hard to locate, or the site does not open at all because it uses Flash. With On the Plates, none of this will happen to you. In fact, we will bring you more customers.

Lastly, please welcome our newest members:

  1. 808grinds.com a food cart who has a mobile truck that goes to Nike Campus, ACS Xerox, Creekside Business Park, and Kaiser Building, and a cart truck that stays on SW 9th Ave and SW Washington St 11-3pm M-F.
  2. mrhappys.ontheplates.com an online shop that makes four flavors of nut brittles. 

Lydia Ngo, Co-founder of On the Plates

jQuery 1.9 and 2.0 Upgrade Notes

We just finished upgrading to jQuery 1.9 for desktop website and 2.0 for mobile website and this is our notes. Hopefully it can help your upgrade process.

$.browser is completely removed

We use $.browser in a manner similar to Paul Irish HTML conditional classes technique. Detect user agent, then assign appropriate class to <html> tag. Example:

if($.browser.webkit) { $('html').addClass('webkit') }

This way, browser specific adjustments can be done in the same .scss file. Unfortunately, That method no longer exists. The solution? Just port the same functionality to your application javascript library.

jQuery UI and jQuery Mobile compatibilities

If you use any of these two, you must upgrade them as well.

Our jQuery UI upgrade to version 1.9.2 went smoothly and we did not observe any bugs. Sortable, date picker, and various effects work as expected.

For our mobile application, we decided to bite the bullet and upgraded to jQuery Mobile 1.3.0 Beta and jQuery 2.0 Beta. The upgrade went smoothly, none of our plugins broke. Don’t forget to upgrade the CSS as well.

jQuery Mobile is probably the most exciting upgrades of all. Version 1.3.0 comes with a lot of new widgets and more importantly: responsive design.

Did we mention that jQuery 2.0 is 10kb smaller than jQuery 1.9 in minified form? Awesome job, jQuery team!

Update (01/18/2013):

It turns out, our upgrade didn’t work on Android. So we roll back to jQuery 1.8.2 and jQuery Mobile 1.2.0 for mobile website.

Modernizr

If you use it, you should also upgrade it to the latest version: 2.6.2.

Webshims Lib

Webshims Lib is a jQuery library that added missing, mostly advanced, browser features.

Upgrading this library is the most difficult part of the process. We had a few strange errors on shims/combos/5.js file. Since we use it only to polyfill forms, such as Firefox <input type=date>, we decided it wasn’t worth delaying the rest of upgrades and took it out. In a couple of days we’ll come back to it again, debug it, and file proper bug reports.

Update: Looks like some folks already file a few of these bugs:

That’s pretty much it. For such a large upgrade, the whole process was relatively painless.

Didip Kerabat, Co-founder of On the Plates

onmyplatepdx: UNAJU DONBURI On it: 6 unagi (BBQ eel), unagi sauce, sprinkled with sesame seeds, and served with rice. It came in a medium size box, and I thought it was adorable. If you like unagi, then this donburi is for you. The unagi were tasty and it didn’t have any bone in it. The sauce was not too sweet, and there were enough sauce to eat with the rest of the rice. I liked how the dish had a good proportion between the eel and the rice. Type of cuisine: Japanese. Location: Mika Sushi, a restaurant located on SW 2nd Ave, between Clay and Columbia. Price: $13.95 Order yours here!
Pop-upView Separately

onmyplatepdx:

UNAJU DONBURI

On it: 6 unagi (BBQ eel), unagi sauce, sprinkled with sesame seeds, and served with rice.

It came in a medium size box, and I thought it was adorable. If you like unagi, then this donburi is for you. The unagi were tasty and it didn’t have any bone in it. The sauce was not too sweet, and there were enough sauce to eat with the rest of the rice. I liked how the dish had a good proportion between the eel and the rice.

Type of cuisine: Japanese.

Location: Mika Sushi, a restaurant located on SW 2nd Ave, between Clay and Columbia.

Price: $13.95

Order yours here!

Our first open source project: tornado-stripe

We are pleased to announce our first open source project: tornado-stripe v.1.0.0.

It’s an API client to access Stripe, our payment gateway from inside Python or Tornado Web Framework.

Here’s a quick example on how to use it:

from tornado_stripe import Stripe

# blocking client
stripe = Stripe('api_key', blocking=True)

DUMMY_PLAN = {
    'amount': 2000,
    'interval': 'month',
    'name': 'Amazing Gold Plan',
    'currency': 'usd',
    'id': 'stripe-test-gold'
}

# Creating Stripe plan
stripe.plans.post(**DUMMY_PLAN)

# Fetching Stripe plan
plan = stripe.plans.id(DUMMY_PLAN['id']).get()

Releasing this project is just the beginning, we are happy to be part of Python and Tornado communities and looking forward to give back more. 

Didip Kerabat, Co-founder of On the Plates

Top