RSD

User Guide for

Responsive Site Designer

00

Introduction & Table of Contents

Author

Bob Visser
CoffeeCup Chief

Design

Diego Naves
Master of art

Edits

Suzanne Norvell
Customer befriender

Document version

Version 1.17
September 13, 2017

Production rights

Bob Visser
CoffeeCup Chief

TOC

Site Designer provides a real-time visual design environment for the powerful Foundation 6 and Bootstrap 4 front end 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 or Bootstrap. 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 will be a good start.

About this help guide

This document is currently in rough draft status. But if you ignore the typos and spend half an hour scanning this guide, it will build a good reference for finding your way around the app. Depending on your experience level you will pick up a lot of CSS — the language that makes the web look good —along the way. 

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.

Pssstt...this guide grows weekly.  Feedback? We love it! Just leave us a note here, and we will be right on it.

00.1
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
00.2
fast instructional videos
00.3
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
00.4
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.

00.5
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.

00.6
Resources and how to's
00.7
tips and tricks

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.