Master of art
January 31, 2018
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.
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 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.
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.
The following articles are helpful for enhancing your responsive pages.RSD Quick Start Tips 02 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
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!Step 1: Responsive design demystified 02 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
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.
The following articles are helpful for enhancing your responsive pages.RSD Quick Start Tips 02 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 NEW 14 Build An interactive Foundation navigation menu (or edit an existing nav component) NEW 15 How to sync content Using Symbols NEW 16 Creating and adding a FAVICON NEW 17 apply a page background color or image NEW 18 Learn to use transitions & animations NEW