User Guide for

Responsive Site Designer


Introduction & Table of Contents


Bob Visser
CoffeeCup Chief


Diego Naves
Master of art


Suzanne Norvell
Customer befriender

Document version

Version 1.17
January 31, 2018

Production rights

Bob Visser
CoffeeCup Chief


Site Designer provides a real-time visual design environment for the powerful Foundation 6, Bootstrap 4, and Materialize frontend frameworks. Together with further augmenting functions such as the width slider, custom breakpoints, global content updates, customizable prebuilt components and more, this leads to a greatly improved design workflow where creativity thrives.

For the code savvy…and not so code savvy alike!

Code-savvy designers and front end developers will benefit from an intuitive and faster workflow that allows for more experimenting and design iterations. This results in shorter turnaround times and/or more authentic, unique, site designs.

Less (or none) code savvy designers will not be bogged down by coding details. Using visual CSS controls the focus is on the content and experience design, not on hunting and tweaking code snippets.

We have heard from a great many Photoshop and Illustrator specialists with limited CSS experience how spectacularly their workflow has improved. They are now designing in one of our responsive apps, directly for the web.

The graphics programs are now used as they should, for creating supporting materials such as icons, backgrounds and for image effects*. No more laborious static prototyping for various screen sizes, just one design that can be viewed and adjusted for any device width. And the results are super spectacular too!

Don’t know any CSS? This app will help you learn by doing.

Site Designer is a great tool for learning CSS and to design with Foundation, Bootstrap, and Materialize. The visual design controls in combination with the real-time preview provide an excellent feedback mechanism that helps to understand the effects of adding or changing CSS code.

However, it will probably take up a bit more time to get up and running with this app compared to somebody with CSS experience. Just remember, with the will to learn and the undo system as a backup, it’s just a matter of time. Spending a couple of minutes watching these short videos in which a fully responsive design is created using Site Designer V3 will be a good start.

About this help guide

This document is currently evolving as we adjust for the latest V3 with Grid Controls. If you are using a previous build, please jump to the lower chapters.

Sometimes we will link to more in-depth articles, tutorial videos or helpful tips originally created for these apps. Just thought to give you all the heads up when you notice a RFF, or RBB icon or reference — the instructions will apply to Site Designer in the same (or in similar) way. 

*CSS filters and blend modes are getting wider support in browsers and have been incorporated into RSD! Learn more here.

Dive Into The NEW Site Designer V3 With The Chapters Below.

The Chapters Below Cover The Responsive Site Designer V1 and V2

learn the essentials

These articles focus on using the main interface sections. Teaching you the foundation needed to use all the included features and tools.

01 An Introduction into Responsive Web Design 02 Add Various Content Elements to a Project 03 Meet the workflow and control windows 04 learn how to style elements in the design pane
fast instructional videos
a comprehensive tutorial

The 5 step series is an in-depth walk through discussing how to convert a static site to a fully responsive site. We discuss responsive principles and technical aspects to give you a fuller picture of how this technique is used. After following the 5 steps you’ll get to keep the sweet, customizable Kit-Kat theme see below!

01 Step 1: Responsive design demystified 02 step 2: practical responsive site design 03 step 3: from static to responsive 04 step 4: adding the design layer 05 step 5: a sing design that works on all devices 06 responsive design is like the harry potter bus
responsive concepts

The following articles cover general responsive concepts important to understand to create a flexible site along with common responsive actions such as stacking content for smaller screens.


The following articles cover general responsive concepts important to understanding how to create a flexible site along with common responsive actions such as stacking content for smaller screens, special actions, examples, and frequently requested design techniques.

Resources and how to's