Pro Restaurant Site Tip: Adding Clickable Phone Numbers for Mobile Visitors

As Squareflair is in the process of churning out custom V6 sites, we've learned to focus a great deal on the mobile experience. 

The tired cobbler's kid's feet

Yah, so... our own mobile-awesome Squareflair V6 redesign is waiting in the wings. We hope to launch it someday soon, but our clients come first!

I've mentioned before here on our blog, with the launch of PunchBurger.com, the primary goals of a restaurant website should be the following: 

1. Show the menu.
2. Give customers a phone number to call.
3. Give customers clear driving directions.

4. DO ALL OF THIS FOR MOBILE VISITORS.

While building the latest Squarespace restaurant site for DeLullo's Trattoria ( delullositaliancom ), and testing on mobile, I came-up with a cool trick: to place the phone number in the site's navigation. Along with placing the phone number a little lower within the site, there's no way the number will be missed by visitors. 

To do this on Squarespace was actually pretty tricky, but only because I had to add a script/hack to the default link action that the menu applied. 

So here's how I did this...

[1] Add the phone number to the menu by using the create a new page menu function, and selecting the LINK icon.

[2] Fill-in the Configure Link name field (and only the name field) with the phone number. I added a little extra human messaging to keep things friendly.

What happens at this point, without extra scripting, is sort-of odd. On non-mobile/touch device (a notebook/desktop), the link refreshes the page. On mobile, nothing happens. —so onward with the script!

[3] The link element we added above is actually using the class ".external-link", and since we want to trigger an auto-dial from a mobile device, we can inspect the code and see that at a smaller size, also known in Responsive Design circles as a "mobile breakpoint", we can see the class ".mobile-nav" is being used in the main menu area of the site.

Here's the script used (change the "[ ]" to "< >")

[script type="text/javascript"]
Y.use('node',function() {
    Y.on('domready',function() {
        Y.one('.mobile-nav .external-link a').setAttribute('href','tel:765-292-2000');
    });
});
[/script]

This really should do the trick. If you have questions, just give a shout in the comments below.

Squarespace's New Save Functionality

Ever since we've started working on Squarespace 6, the auto-save has been pretty great, and more than greatβ€” it's something we've come to use and rely-on. Until now... [continue after video]

As of now (5/9/2012 is when I first noticed), when making any change on any page the user gets a prompt to save changes.

If you don't "save", the user get's an alert β€” a last chance opportunity to save or cancel changes. 

Content Structure & Style - Season Three

We've relaunched our Squarespace podcast! This season, we're using Google Hangout so you can get a good look at our faces, so maybe it's less-podcast'y and more-embarrasing'y.

Streamed live on Apr 18, 2013

Your three favorite Squarespace fans are back with a brand new invention and the season three premiere of Content, Structure & Style, a video podcast dedicated to the Squarespace web publishing platform.

In this episode we heard what Alan Houser , Brandon Davenport, and Josh Braaten have been up to since season two of the unofficial Squarespace podcast, explored what's new in the world of Squarespace, and started to dive into a hands-on migration for ContentStructureStyle.com from Squarespace v5 to Squarespace 6.

This video was originally broadcasted via Google+ Hangout on Air at 7:00 p.m. CDT (8:00 p.m. EDT, 5:00 p.m. PDT) on April 18, 2013.

Podcast as a Marketing Tool - Featuring... Me!

I was thrilled to be a guest on Roundpeg's "More Than a Few Words" podcast to talk about my experience with podcast production. It was lots of fun, and quite interesting to be on "this side" of the microphone.

Listen to MTFW's "Podcast as a Marketing Tool" β†’

More than a Few Words is a half hour program for small business owners featuring interviews and open discussions about marketing, social media, web design, and networking. Guests include a mix of experts who share tips, strategies and real world examples and business owners who speak from a "been there, done that" perspective. 

Visit Roundpeg and tell them we said hello!

A double-secret first-look at Squarespace 6 E-commerce (Video)

You read correctlyβ€”Squarespace is shaking the e-commerce tree, and it's freaking fantastic. 

What gives me the chills, is the ability to drag products around the page using V6's "Layout Engine" functionality, the same way you can with images, videos, maps, code blocks, quote blocks, etc.

This drastically changes things for the retailer who wants to bring a custom flair to their online store. 

Squarespace E-commerce integrates with Stripe, and is only available in the USA right now (assuming it's because of Stripe's US-only reach currently).

Give Squarespace a tryβ€” just get in there and play a little to see what you can do! Squarespace.com(and when you find there's stuff you can't do, give Squareflair a shout)

 

Update

on 2013-02-15 19:36 by Alan Houser

Behold! The official Announcement:

http://blog.squarespace.com/blog/squarespace-commerce-is-here