Now that your website is ready to go live, you’ll want to explore your options for opening it up to the public on the web. RSD is very flexible with how you can control your content giving you two options to choose from; publish to S-Drive or export your website and upload it to any server using an FTP client. With S-Drive, RSD does all the work for you by automatically uploading all files to your CoffeeCup Account. No muss, no fuss! When using the export method, a folder will be generated that contains all of your website files. You then need to upload everything in this folder to your own hosting service.

Option 1: Single-click publishing

Step 1:

Once you’ve entered your CoffeeCup account information, you’ll be able to put your website online with a single click! And the process is amazingly simple to set this up. To do so, click the Settings toolbar button and switch to the Publish section.

Publish Settings window
Step 2:

Simply enter your CoffeeCup account email address and password, and then click Go! If you don’t have an account, you can sign up through the CoffeeCup website. Once you log in, Responsive Site Designer will display all of your web addresses.

Choose your CoffeeCup address
Step 3:

Select the address you wish to use for one-click publishing. Click Manage if you need to make administrative changes to your S-Drive account, or Refresh if you’ve enabled a new web address that’s not on the list. When you’re ready to put your website online, just click the Publish toolbar button.

Upload to your CoffeeCup account
Step 4:

Click the link shown here to see your website right on the web! It’s not just a good preview; it’s the real deal.

Click to visit website!

Use PHP and ASP?

If your website includes any scripting languages like PHP or ASP linked in through the Resources, you will not be able to publish these to S-Drive as they are not supported by our service. Instead, you will need to export your website and upload it to another server.

Option 2: Exporting

Step 1:

Always make sure that your project is saved.

Step 2:

Click either the Export toolbar icon or go to the File menu > Export to begin the export process.

Export toolbar icon
Step 3:

An export dialog box will appear. This allows you to browse and select the location on your computer you want to export the website to. Once you have selected where to export to, click Select Folder.


Exporting to main folder

If you select an existing _exported folder, this will not overwrite what it contains. You will simply be exporting into this folder, giving you two copies of your website (one within another). If you want to overwrite the existing folder, you must select the folder above it.

Step 4:

One the export process is complete, a dialog will appear letting you know the export process was successful. There will also be a button on the dialog that will allow you to go directly to where these files are located on your computer. For Windows, click the Open Folder button and for OS X, click Open in Finder button.

Project Successfully Exported
Step 5:

Click OK and that is it! You have successfully exported your website. You can now upload your website to the web. It is important that you upload the CONTENTS of this folder and not the _exported folder itself.

Project Exported Folder


There are some settings in RSD that will have an impact on how the content of your site is exported. Here we will show you what each of these settings are for and how to configure them. We recommend you leave the default configuration but feel free to customize them all you like.

Project Name

The project name is the name used for exporting and uploading of your project. When you export or upload your project, the file name gets substituted with the project name. Let's say you name your project MyWebsite. When you export or upload, your file structure will be MyWebsite_exported. Easy, right?

Folder Structure

With Responsive Site Designer there are two export options:

Modular Export:

Most web developers use this option as it provides an extensive file tree with compartmentalized folders.

Flat Export:

This is the option that provides a compact file version that most web designers are used to. All the files are located in the following format:

Modular Export Flat Export
Framework CSS
  coffeegrinder   coffeegrinder.css
      coffeegrinder.css   coffeegrinder.min.css
      coffeegrinder.min.css   main.css
      wireframe-base.css   wireframe-theme.css
img   wireframe-theme.min.css
styles fonts
  customizations img
      main.css js
  fonts index.html

If you do not want these features to be exported with your project simply disable them under Settings > General tab and they will not be included with your CSS, making your CSS cleaner and more compact.