New Responsive Stacks

So I am sure that you have heard of responsive web design by now. All the cool kids are doing it! In a nutshell, responsive web design means that you design your website so that the look will be tailored to the device that your user viewing. This means that your website will have a native feel from a 27in desktop display all the way down to a mobile device such as an iPhone. The mobile browsing experience is not what you are accustomed to with the pinch and zoom. Your website has a completely native feel as if it were developed for a mobile device.

There has been a wave of some amazing new responsive themes that have come to Rapidweaver (see below). However, building websites in Rapidweaver has traditionally meant a fixed width website. This means that most of the add-ons (plugins and stacks) that have been developed were not designed to be responsive. So I decided that I would design a set of stacks that would give you the basic building blocks to easily make a responsive website in Rapidweaver.

Some cool responsive themes

* A little birdie told me that Elixir Graphics has something awesome brewing for us as well.

Responsive Layout Stacks

The Responsive Layout stacks replace the out of the box 2, 3, 4 and 5 column stacks for responsive based themes. The columns will break at customizable points so that your content looks good on all browsers from the desktop to the iPhone. There is a 5th stack in this set that will allow you to show or hide content based on the browser size. This allows you to hide content that may not be needed on an iPhone.

Because these stacks let you build general purpose responsive layouts, you can place any stack that you want inside of them. This allows you to insert stacks into your responsive layout even if they were not designed to be!

For more info check out the Responsive Layout Stacks product page and the live Responsive Layout demo page.

Fit Text Stack

Fit Text will shrink your text as the browser size decreases and increase size as the browser size increases. This is great for keeping the look a feel of your website consistent across all devices by preventing large text and headings from wrapping onto a second line.

For more info check out the Fit Text Stack product page and the live Fit Text demo page.

Fluid Image Stack

The Fluid Image stack has been around for a short while. If you are not familiar with the Fluid Image stack, it will dynamically scale the image with the width of the browser. This gives it a consistent look a feel across all devices. It’s recently received a very cool update that will generate smaller resolution images to speed up mobile browsing!

For more info check out the Fluid Image Stack product page and the live Fluid Image demo page.