Author
Bob Visser
CoffeeCup Chief
Design
Diego Naves
Master of art
Edits
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.
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!
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.
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
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 paneThe following articles are helpful for enhancing your responsive pages.
01 RSD Quick Start Tips (must read!) 02 Publish or Export Your Project 03 How to Create Links 04 Adding Responsive Content Slider 05 Insert a Web Form 06 Background Property 07 Inserting Navigation Made with Menu Builder 08 Style Changes using Breakpoints 09 Picture Element 10 Hover and Transition Effects 11 Apply a Mouseover Effect to a Background Image 11 Designing with Flexbox 12 Take Payments on your site with PayPalThe 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 busThe 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.
The following articles are helpful for enhancing your responsive pages.
01 RSD Quick Start Tips 02 Publish or Export Your Project 03 How to Create Links 04 Adding Responsive Content Slider 05 Insert a Web Form 06 Background Property 07 Inserting Navigation Made with Menu Builder 08 Style Changes using Breakpoints 09 Picture Element 10 Hover and Transition Effects 11 Apply a Mouseover Effect to a Background Image 11 Designing with Flexbox 12 Take Payments on your site with PayPal 13 The Components Library Collection 14 Build An interactive Foundation navigation menu (or edit an existing nav component) 15 How to sync content Using Symbols 16 Creating and adding a FAVICON 17 apply a page background color or image 18 Learn to use transitions & animations