White iPhone with mobile footer navigation

Add a Mobile-Specific Footer for Easy Navigation

We stand by the assertion that responsive design is the most sustainable and user-friendly way to approach multi-device display of your website. Google, Bing, and many, many news sources and tech industry players agree. Per Google’s guidelines for developers:

“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”

Oh, good, cause that’s what we do.

So if you have a SpaceCraft website, you’re on target with Google and Bing’s recommendations (which is obviously good news for your SEO). But as the mobile web becomes more and more dominant, we continue to look for ways to follow Luke Wroblewski’s advice in his book Mobile First: “Be brutally efficient and trim, trim, trim.”

Mobile settings in SpaceCraft dashboard

We wanted to give mobile users of any SpaceCraft website exactly what they wanted in the easiest-to-access format possible.

So we created a way for you to add a mobile-specific footer with slick icons that enable intuitive navigation from a smartphone or tablet. This mobile footer highlights the most important content on your website to a mobile user, such as maps, contact information or reservations (for restaurants). It also offers the benefit of being available sitewide, so you don’t have to set up breadcrumbs or other janky internal links to keep users engaged.

The all-new mobile footer is easy for anyone to implement on their website.* Ready? To get started, just click on the gear icon in your SpaceCraft tool to go to Settings and then hit ‘Mobile.’

Use custom mobile footer for SpaceCraft website

Here, you can customize a mobile-specific footer.

Once you've toggled the mobile footer to 'On,' we give you five options to add as content (though the maximum number of items you can add at once is four):

  • Call
  • Email
  • Map
  • Reservations
  • and Link.
List of available icons for mobile footer in SpaceCraft

Choose from our gallery of icons to customize the style of the footer.

Custom mobile footer on responsive website

The 'Link' field allows you to feature any content on your website (such as your products page, blog, or photo gallery) or insert an external link (such as the URL to your ecommerce shop). Here, for the Mary Brooks Salon website, we've retitled a Link item 'Facebook,' selected the Facebook icon, and featured the Social page.

Advanced mobile settings for tablets and navigation items

Select ‘Advanced settings’ to turn the mobile footer on or off for tablets and hide content sections in the top navigation if you've also got them in the footer.

SpaceCraft design panel - mobile footer settings

Next, style your mobile footer in the design panel.

To customize the look of your mobile footer, click into the Design tool. In the Sitewide side of your design panel, click 'Footer,' then 'Mobile footer.' Here you'll be able to

  • Choose the color of the text as well as the color & opacity of the background of the mobile footer
  • Specify icon-only or icon-and-text display (to show the icon labels you specified in Settings)
  • Select from four different icon styles and change the colors of the icons and shapes

Hand-picking all of these elements is a great way to extend your brand to a user's mobile experience. Your colors and stylistic elements should reflect the rest of your website while also standing out so

Once you've designed it to look the way you want it, go into Preview and click on 'Mobile' to see how it will look on a smartphone.

Mobile footer preview in SpaceCraft tool

Beautiful, right?

*This feature is available to subscribers at the Unlimited or Concierge levels. Get started now.