Responsive Snippet (beta)

The Responsive snippet is a complementary snippet for use with seyDesign Ultimate themes to add mobile ready, responsive capabilities when your page requires it. Simply add the snippet to your RapidWeaver® project, no theme update required.

Important Notice

Keep in mind that we as theme developers can only do so much to make your pages responsive. It's up to you to make content that responds well to scaling. There have been stacks released recently that can aid you with this. Have a look at what some developers have to offer on the Realmac Addons site.

This snippet is in beta. The basic features of our Ultimate themes work well on many smaller screens but only public testing will account for a greater variety of screen sizes and layout.

While the content of the actual snippet will not change, the source files they draw on might as we strive to improve the mobile experience that can be had by each theme. Join the beta discussion on the seyDesign Forum to help improve the responsiveness of each theme.

Installation

To install the Responsive snippet, double click the .rwsnippet or drag and drop the file into ~/Library/Application Support/RapidWeaver/Snippets.

Usage

1. You must be using one of our Ultimate themes in your RapidWeaver® project.
2. Open the Page Inspector (RapidWeaver > View > Show Page Inspector).
3. In the Page Inspector, navigate to the Header tab.
4. Click on the Header field at the bottom of the Page Inspector panel.
5. Find the Responsive snippet in your snippet panel.

6. Paste the Responsive snippet into the header field:

   <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
   <link rel="stylesheet" type="text/css" media="screen" href="https://d2c8zg9eqwmdau.cloudfront.net/rw/m.common.css" />

7. It will look like this:

   
8. That's it! Now when you view your site on a mobile device your page should adjust accordingly.