The CoffeeCup Guide to

Responsive Website Design



  • Author
    Bob Visser CoffeeCup Guru
  • Design
    Mateo Carrasco Master of Art
  • Edits
    Suzanne Norvell Tutorial Jedi
  • Document Version
    Version 4.0 October 11, 2019
  • Production Rights
    CoffeeCup Inc. Fresh software, warm people.

Introduction

CoffeeCup site design apps provide 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.

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.

This guide is currently evolving as we continue adding content. If you are using a Classic version (V2 or V1) please go here for help material.

Better yet, why not switch to V4? It is totally worth it! We'll even show you how you can import your existing CoffeeCup project and convert it to CSS Grid.

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.

Do you have a special tutorial request? Let us know!


Application Overview

App Overview

#1: The Real-Time Canvas. This is a browser-based working area. A major advantage is that what you are creating, will look and feel the same as when the site is published on the web. The canvas is mainly used for the live design view, selecting or reordering elements, and editing texts.

#2: The Control Panes. On the right, there are 4 panes, each with specific roles for visually managing the content, layout, styles, HTML, CSS and Javascript, and page properties.

#3: Viewport Slider & Breakpoint Manager. Right above the working area, you will see a bar aka 'The Responsifier’. This bar, contains a number of tools for managing the design at all possible devices widths.

Breakpoints, which indicate changes in layout or content styles for a certain screen size, are noted with a dot along the top of the Width Slider. Framework specific breakpoints are indicated by a color, while custom breakpoints will display as white. Add and delete breakpoints using the +/- at the left side of the width slider bar.

#4: The Toolbar. Access commonly used functions such as the Page Manager, project Resources, browse the Components Library, launch a Preview in a specific browser, Toggle Breakpoints, even Publish.

Choosing A CSS Framework

CSS Frameworks are used by millions of designers and developers. They use well organized HTML, CSS and Javascript that is frequently maintained and updated. Furthermore, they allow for creating cool interactive components such as dropups, navigation menus, galleries and more without wrestling with extra scripts — sweet!

With Site Designer, you can kickoff your site projects from three epic framework choices: Foundation, Bootstrap, Materialize.

4 Frameworks

When you first start the app, you'll be prompted to choose the framework you want to build your project with. You can also save your preference for future site projects as well.

Which one should you choose? Well, that's like trying to pick the best wine. They are all great at building professional designs. With only a few key differences, it all boils down to your personal preferences.

Foundation

Foundation offers minimal pre-set styles on elements with just 3 default breakpoints (layout sizes). With less pre-set styles to manage, it can be easier to apply your customizations.

Bootstrap

Bootstrap has been king of the frameworks for a while and is loved by many for its highly styled element classes. These pre-set styles allow for rapid design with a consistent appearance. It also features a wider set of default breakpoints for more screen size variation.

Materialize

Materialize, based on Google's Material Design, is opinionated about how UX elements should behave. Its impressive interactive components capabilities make it a rising star!

In a coding environment, there are a lot of differences, but unless you have a client who requires a specific framework or you plan to work with the raw code later down the road, then there is no need to dive into the nitty-gritty. Aside from the CSS class specific options and attributes, each framework has an identical mobile-first, visual workflow. That's what's nice about working with them in the CoffeeCup environment - we make it easy to customize the default framework styles for unique looks. 

Not a fan of CSS Frameworks? Vanilla lets you tackle the design your way! It does not have any pre-sets — no fixed breakpoints, no predefined selectors, no default element styles. It is lightweight, yet totally responsive thanks to CSS Grid and Flexbox.

Just a little note, to create interactive components with Vanilla you would have to connect your own scripts. Otherwise, you can use the built-in interactive scripts of Bootstrap, Foundation and Materialize to make framework specific drop-down menus, photo galleries, popups and more.

Vanilla

Vanilla also gives you the ability to work desktop-down. Build your pages wide, then move the width slider to the left to tweak the layout and styles for smaller screens. Or start in the middle and tweak your design for larger and wide screens.

The framework you choose for your project will be reflected in the top left corner of the app. This helps you identify which one you are working with quickly when jumping between multiple projects.

Placeholder Picture

THE CANVAS (WORKING AREA)

This area visualizes what the web site visitor will experience when landing on the page. In combination with the Slider (part of The Responsifier), every device width can be previewed while designing.

If you are interested to see how a specific part of the design behaves at different screen widths, select any element in that section. In normal browsers the content will flow out of view when resized, however, in Site Designer the selected content is auto-scrolled back into view. A small, but an extremely handy perk of the app!

Drop-Down Selector

Hover over any element. Click to select nested items from the dropdown or use the icons to edit text, duplicate, or delete the item.

On the canvas, elements can be selected by clicking on them or by selecting them from the dynamic dropdown. A selected element can be dragged and dropped into a different position or container. Selected elements can also be duplicated or copied and pasted into a different area.

Insert Page Text / Working with Text Editor

Text elements can be edited right on the screen when the Text Editor is active. It can be activated in a number of ways. Right-clicking a text element will open up a contextual menu with the option Text Edit.

You can also double click the text on screen to begin typing your words. Lastly, click the A the icon at the top of the Styles pane, or when you hover over any text element.

When the Text Edit Mode is activated a blue banner indicator will appear at the top of the panel.

Inline Text Editor

Several typography controls will display as well for making inline edit. You can bold words within a paragraph, insert a link, change colors or font and more. Only use these style controls when you want to make a variation from your regular, default typography selections.

For example, bolding words in the middle of a sentence, or changing a color of a word would be styled inline with the text editor pane.

Additional Resources

Super Hot Tip!

The style choices configured on the Text Editor panel are for inline editing only. Your default typography selections (like font type, color, size, spacing, etc) should always be configured on the Styles Pane.

It is a common mistake to accidentally apply styles within the Text Editor pane. While it will work, it can cause difficulties for you in the future if you ever need to make global styles. Plus it makes the backend markup kinda messy.

Be sure to click out of the Text Edit/Inline Editor mode before you begin changing the appearance of the text.

THE CONTROL PANES

On the right side of the UI, there are three panes each with a specific role in creating the responsive design. The icon is replaced by the pane name upon hover. Here’s an overview of each of the panes, details on each pane are provided in the next sections.

The pane on the most left is the Content pane. The Content page is divided into three sections: Elements, Components, and Symbols.

Under Element, page elements such as headings, paragraphs, buttons, images and videos (and a whole bunch more) can be inserted into on the canvas or nest within a container.

The subpane Components gives access to all prebuilt components like navigations, cards, and modals that are included in the project. 

The Symbols section includes elements such as a logo, page header, or common items such as a footer, that need to be kept in sync across all places and pages of the project.

Control Panes

Control Panes for managing and styling your project.

The second control pane, the Styles pane, is probably the most frequented. It is organized into two main parts. The top section is used to configure the HTML / content part of the element. For example, framework classes can be ‘filtered up’ from a predefined list, CSS Type and custom Classes and ID's can be applied or you can select an Element's State (Hover, Active, Out Of View) for which you want to style.

The second part of the Styles pane is divided into three sections: Layout, Design, Effects. These contain all the inputs, tools and controls to manage the design's layout, style elements, Typography, Dimensions and so on. Layout controls such as Flexbox and CSS Grid can be found here as well.

Styles Panes

The Styles pane serves as the command center for applying all characteristics to elements and layout.

The third pane is the Element pane. The top part of this panel gives a page-inspector view, a tree-like, overview of all elements on the page. It offers a fast way of selecting and reordering elements and, for example, toggling the visibility of hidden elements. The bottom part offers a preview of the CSS rules added. And Property fields for special elements that require linking with a resource (such as an image file, video link, or custom HTML).

Finally the last tab is the Settings pane. Here you can set meta data for search engine optimization. Enter a page title, description, keywords, or insert content into the head and footer sections.

Toolbar

TOOLBAR FUNCtIONS

The main toolbar gives access to functions less relevant to the design workflow. There are buttons to reach the Page manager or manage project Resources such as images and additional files. Get quick access to the Themes manager as well as pre-built components.

Access more advanced controls such as activating Feature Queries and insert Structured Data. You can also use the toolbar functions to Preview the design on any installed browser, to Export and Publish the site.

GUIDES

The Guides button allows you to visually toggle indicators around elements and the grid structure making it easy to know where elements are located and spaced.

Gridlines are lightly colored horizontal and vertical lines that appear around elements in your project. These guidelines are used to define the boundaries of elements and containers on the page.

Guides

X-Ray mode allows you to see at a glance how the elements containers are set up. When this is enabled, all grid options are turned on background images are removed and an opacity is set on all elements allowing you to see the grid configuration. You will also notice that things are color coded for easy recognition.

THEME MANAGER

View default themes for Materialize, Vanilla, Foundation and the Bootstrap frameworks. Use these themes to jump-start your website creation. Go to File > New From Theme to launch the theme manager. Once you select your theme, just change the text and images to fit your needs, and your task is complete!

Theme Manager

To build your website free of a pre-designed theme, use one of the “blank” themes and start with a clean canvas.

If you have downloaded a theme from the Theme Shop, double click the .rsdtheme file and the theme will automatically install within your Theme Manager. You'll then able to choose it from the theme prompt.

TOGGLE BREAKPOINTS

Breakpoint mode can be used to define styles for a particular media query, independent of the slider position. By disabling all breakpoints styles are not tied to any media query.

Toggle Breakpoints

This, for example, allows you to have more space in the working area while working on the default styles. If you are used to working desktop-down this feature can be extremely handy. Just be sure to re-enable them when you are ready to make adjustments for larger screens.

Device View

Use Device View to preview your creation across various types of screens. This helps you test how your content will display on specific devices and determine if tweaks are needed.

Device View
Styles Panes

Click the Toggle button to change the device orientation. This allows you to switch between portrait and landscape mode.

Popular devices are pre-loaded such as iPads, iPhones, Kindles, Galaxy phones and more. Modify your list to the devices of your choosing or enter custom Width and Height values.

Pages (Page Manager)

Need to add a page to the project? Click on the Pages icon in the toolbar. This will launch the page manager drop-down menu. You'll be able to see a list of all the pages in the site and can cycle among them.

From here you can quickly Add a Blank Page or Duplicate an existing page in the project.

Select Manage Project at the bottom of the drop down to open the Page Manager.

Pages

Managing your project pages, changing page order, and adding meta data is easy from this section.

Pages

To add, duplicate, or delete a page in the project, use the icons in the lower left corner of the page manager. To rearrange the page order, click the up/down icon to the right of the page to drag it into position.

Your page names are used as the link destination. When linking from other locations you will use the page name. Remember to never use spaces within your page names. If your page names are multi-words long, always use hyphens to separate the words, or smush them together to make one long word.

Currently, the app supports up to 125 pages per project. This number continues to increase on a regular basis.

DESIGN FOR...

The Design For.. toolbar icon allows you to activate Feature Queries.

Feature Queries

This feature allows you to create production-ready designs with CSS Grid as the layout framework — as well as provide an alternative stylesheet for unsupported browsers! By applying fallbacks, your design will always look good everywhere.

Feature Queries

First, build your layout first for Internet Explorer (and any other browser that may not support CSS Grid). Once the default layout and styles are in place, switch the Display For control to Grid, and then tweak the design for modern browsers.

Export to codepen

Skilled users will love the ability to export an element's markup to CodePen. This way you can use it with a CMS or other place without having to go through a full export.

CodePen

Simply right-click any element to activate the option to open in CodePen.

Components

The benefit of using a CSS framework is the ability to create more complex site features. The frameworks offer an elegant way to build navigation menus, accordions, cool tab panels, modal dialogs, drop ups, and much, much more without having to mess with external scripts.

Placeholder Picture

Save custom components to your library to reuse them throughout your projects. Items can be given a description and organized in folders to keep you organized.

Add Components from your library using the Components toolbar icon.

STRUCTURED DATA

Structured Data icon gives you the ability to insert JSON-LD Schema.org page identification tags that is used by the search engines to interpret your site and page content.

Structured Data

In the context of a website, Structured Data is "extra" information which enables search engines to better understand the content on a page. Describing your page content with this method offers a number of benefits. Generally speaking, this improves a site's visibility in the results for relevant searches and leads to more organic traffic.

In Site Designer, the workflow to apply this markup about your content is easy and intuitive. No ex- or import required! Simply use the drop down menu and browse the keywords to locate the one that best identifies your business, organization, or creative works.

Structured Data

Drill down as much as you want. Submit what cuisine your restaurant serves, label your church's sermons, post business hours, and so more. When you're done, you can click the Test with Google button to see if they recommend any additional information.

PUBLISH AND EXPORT

Control your content with two options to choose from for putting your site online; publish to S-Drive or export to any server using an FTP client.

With Publish to S-Drive, the app does all the work for you by automatically uploading all files to your CoffeeCup Account. No muss, no fuss! To do so, click the Settings toolbar button and switch to the Publish section. Then enter your CoffeeCup account information.

Publish to S-Drive

The General Settings is where you can configure the project name and export folder structure.

General

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. Click either the Export toolbar icon or go to the File menu > Export to begin the export process.

Resources

The Resources toolbar icon launches your file management window. This is where you manage additional project files.

Create folders to organize your content such as images, documents, and scripts. When the site is published or is exported, the file structure will remain intact.

Resources