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.

The Content Pane

The Content pane uses three sub-panes for organizing the various website building blocks, one for content Elements, one for Components, and one for Symbols.

Content Pane

When the Content pane is selected the most frequently used Elements, sub-pane is open by default. From this pane, you can add headings, buttons, images and more. These elements are the smallest site building blocks.

Components usually consist of several elements. Together they perform a more complex role such as a navigation menu, a photo gallery, a (series of) cards, an accordion or tabs.

Symbols are special elements or groups of elements that are kept the exact same throughout a project. When one instance of a symbol is updated, all other instances in the project will be changed as well. This, for example, allows for updating a footer across all pages with one single edit.

Content Pane

Content Elements

Elements are the most basic building blocks. They have been organized into categories. We placed the most frequently used elements, Text and then Images at the top of the pane. Further down there’s a collection of ‘common’ elements (we could not agree on better wording indeed…) to add, for example, videos or custom HTML snippets.

Elements like buttons and social media icons are grouped as Interaction elements. The last category consists of elements that can help to create sophisticated responsive Layout constructs. Each of these categories is addressed in a bit more detail below.

If an element links to other locations (such as Buttons and Social Media) the URL and destination info is configured on the Element pane.

With the exception of inline links, all link elements including Text Links, Picture Links, Container Links, and Button Links are configured on the Element Pane.

Link Properties

Links can be configured to direct the audience to another page in your project, a third party web address, another location on the page, or to a document. Link configurations include:

HREF: Insert the link destination.

TITLE: Used to provide additional information upon hover to help describe the purpose of a link.

TARGET: Specifies a window or a frame where the linked document is loaded. These include the following four choices:

Self: Opens the linked document in the same frame as it was clicked (this is default).

Blank: Opens the linked document in a new window or tab.

Parent: Opens the linked document in the parent frame.

Top: Opens the linked document in the full body of the window

ATTRIBUTES: Are framework specific actions.

Inline Link

Text elements

There are a few different text elements available. Each of the elements performs a different (semantic) role. A Heading element, for example, describes the topic of the section that follows. A Paragraph is usually a block of text. The Paragraph element comes in 3 variations, Small, Medium, and Large to help represent actual content when drafting a layout.

The Text and Text Link elements are used generally for short pieces of content. The latter being used when you would like to apply a link to other content. 

The List elements (Unordered, Ordered and Link) are used to create structured lists. The Unordered List will generate a list with bulleted dots representing each list item. The Ordered List element will generate a numbered list, and the Link List will make a bulleted list of link. The last option, the Description List, will generate an indented list.

Content Pane

The Blockquote element is perfect for formatting page quotes.

The Font Icon and Font Icon Link elements give you the ability to popular a small font icon graphic (the Icon Moon collection). The font icons and associated links are configured on the Element pane.

Simply choose the element that you feel will most suit the purpose of the text.

Elements with a little arrow on the right of the button come in variations. Clicking the arrow of, for example, the Heading element allows you to choose from a heading 1 - 6.

Element Selection

Click the arrow to select an element variation.

The placeholder texts can be replaced by typing or pasting text blocks in Text Edit mode. Triple-clicking a text element will start the text editor. Alternatively, you can use the edit button on the Design pane or use the right-click menu. The Text Editor can also be used to add inline links and formatting.

Text elements can be edited in place when the Text Editor is active. The editor can be activated in a number of ways. Right-clicking a text element will bring up a contextual menu that gives access to common functions, including Text Edit.

image elements

When a Picture element is added, initially a placeholder image is used. This allows for rapid experimenting or prototyping without immediately having the spend time on finding, optimizing, etc. real images.

Picture Elements

A Picture Link element gives you the ability to apply a link to the graphic so when clicked the reader is re-directed to a new place.

Replacing the placeholder happens on the Element pane. You can also right-click and select 'Edit Picture'.

From the Element pane >  Selected Element Properties > Picture use the dropdown to switch between the placeholder and a local or online image.

When selecting a local image, you will be asked to select one from the file system. The chosen image will be added to the project and be displayed instead of the placeholder image. When you choose to publish or upload your project, this images will be included in the images folder.

Image Source

Select your image source from the dropdown on the Design pane.

You can also provide a link to an online image. In that case, you can insert (paste) the URL to the image in the input box that appears below the dropdown.

Online Image Source

Enter a URL to insert an online image.

You will notice that a newly added image will not be wider than 200px. This can be changed on the Styles pane with the max-width control.

Using the  Picture  element, you can change the image at breakpoints, serving smaller images to mobile devices for better performance.

Media Elements

The Video and Audio elements allow for embedding responsive media in the page. Indeed, responsive because most other video embeds will not automatically adjust to different screen widths!

Media Elements

Two options are provided to add background videos to the canvas, Background Video Container and the Full Screen Background Video. Both video background options consist of two elements: a Container element and an HTML5 Video element. 

The Background Video Container gives you the ability to add a video background section to the web page. Size adjutments can be configured to the parent Container at the height and width of your needs. The alternative, the Full Screen Background Video, is used to cover the entire viewport (canvas).

Video Placeholder

When one of these elements are added to the canvas, a media placeholder will appear. On the Element pane > Selected Element Properties you can configure the video source details and apply a Poster. The element supports MP4, M4V, Webm, Ogg, Quicktime, and Mov file types.

Video Background Controls

Click the red X next to the 'Video_default.Mp4' to remove the placeholder. Click the blue Video Source button to add in a new source file. The Poster options allow you to configure a cover image to display before the video is played.

Watch a demonstration showing how to work with the background video elements:

Use the Video Platform element to sync with a file loaded on a third party source such as YouTube or Vimeo. You will enter the full URL for the video source located at the third party site.

With the HTML5 Video element you can simply load up your MP4, M4V, OGV, OGM, WAV, M4A, WEBM, OGG and MOV files locally or from an online link.

Video Element

Using the Audio element, play MPEG, OGG, WAVE, and FLAC tracks. You'll be able to quickly post your weekly church sermons or share your garage band's latest jam.

Audio Element

Common Elements

Well, maybe not all that common… though the horizontal Rule certainly is. The rule places a line across the page. It makes a great way to break up content on the page.

On a landing page a Hero Unit is a large, captivating headline image (often, but not always with a bold header overlaid), that relates to the text beneath.

Common

The HTML Element can be used to add custom code snippets or exports from other apps. This can be CoffeeCup apps like Web Form Builder, Responsive Content Slider or 3rd party apps. To not interfere with the other elements on the page currently a placeholder visual is displayed.

How to use the HTML Element

Adding custom HTML or code objects to your page is easy. Markup for the HTML element is inserted on the Element pane within the HTML box.

Add HTML

Please note, to not interfere with the internals of the app some objects, mostly the ones using Javascript, objects cannot be previewed live in the working area right now. You will need to use the ‘Preview on…’ icon in the toolbar to view them in the browser. For some items, you might need to publish to view the HTML element in action.

Step1
Drop the HTML Element. Place it where you want the custom code or object to appear. This works great for all types of objects, from menus and web forms, to cool slideshows.
Placeholder Picture
Add code — tweak the design. The code can be inserted into the HTML box on the Element pane. It can be positioned and styled just like other elements with borders, backgrounds, etc.
Step3
If needed, connect additional code or link to resources. Stylesheets and other resource files can be linked using the Head (or Footer) boxes on the Settings pane.

InteractiON Elements

The elements in the group generally perform and action following interaction with the visitor or user. A Button Link is the most common link element. When clicked, it will direct the reader to a new location. It can open a menu, reveal a hidden element or show modal dialog. It can also take the user to a different location, on the page, site or to an entirely different site. Component (see below) often include this interactive behavior.

Interaction

Variations of the Button Link element include Button Link Image which images a graphic or a Button Link Icon which pulls a font icon within the button. The Download Button element is used to immediately download pdfs, images, etc that are loaded within your project resources.

Configure Button Link elements with the link destination on the Element Pane > Element Properties.

The Button element is used when configuring external features such as a custom form.

The PayPal Button is used to build custom HTML Paypal payment buttons. From the Element pane, simply enter your PayPal ID to sync the button with your merchant account.

The Form Container, together with the Button element can, for example, be used to create custom web forms. It can also can include other form elements found under the Input dropdown. Please note that the form (elements) can be hooked up — sync'd with custom scripts on the Element pane. However, form scripts or creating a fully functional form are beyond the scope of this app. If you are unsure how to create a custom form script then we refer to Web Form Builder.

The Social Icons can both be used to build a following on the social networks and allow visitors to share information. When added to your page a default icon will appear. You can change the social media type and connect to your social media account from the Element Pane.

Social Buttons

The Element Pane will give you the ability to select which social account to activate. Once selected, the standard icon for that service will appear. Basic styes can be applied to change the size, colors and layout.

Depending on the type of social account activated you will be presented with additional options such as Follow and Share.

Follow: Direct the user to your social page so they can 'like' your page.
Share: Allows the user to share a post of message. For example, re-tweet.

Only certain social media programs allow for follow and share. In some cases a Button Link or Picture Link elements might be most appropriate. For example, LinkedIn only works for individual pages at this time. We are working to add support for company profiles to the panel. It is also best to use Picture Link elements if you would like to use custom social media icons.

Layout Elements

Layout elements offer more granular control over the page layout. They are also be used to build logical groups of elements or groups with a specific role of function such as a footer or card component.

Layout Elements

List Containers are unordered lists with each list item being its own container. They are often used to build navigation components.

Containers (DIV) often serve as ‘wrappers’ for related elements. When creating a card (component) the container often encapsulates one of more text elements, an image, a button and sometimes sub-container with additional elements. We will look at this in more detail in the Component section.

Feature Queries

The Container DIV is the most common container element. However, you do have the choice among 9 various Container element types.

While not required, best practices are to use a container that is semantic, meaning they provide greater meaning to the search engines what that container div holds. For example, a 'Container NAV' would be used when building a navigation, while a 'Container Footer' would be appropriate for page footer sections. Read more about using semantic container in the reources below.

Feature Queries

Column elements are pre-nested Containers with layout properties applied to allow content to stack for mobile and expand for widescreens.

A Link Container functions exactly as a container, but wrapped in an label, making it one big link element.

Use Containers to Build Nested Menu

Components Library

You've carefully crafted a site feature that is simply perfect. And now you want to duplicate this masterpiece somewhere else but don't want to build it all over again. Meet the Components Library. This feature lets you save and reuse content, rescuing you from repetitive design work and speeding up production time.

You can save anything to your component library. Generally, they make up a combination of elements that together produce a special function.

A great example of using components can be seen in this Help Guide. Most of its pages share common features such as a chapter list, additional resource links, quote showcases, and video & image hero sections.

Since these items are saved to the library, anytime a new chapter is added, they can be popped into place quickly and then edited appropriately. Watch how it works:

Interactive Components

One of the coolest advantages of using CoffeeCup Apps is the ability to utilize interactive site items. All three of CSS frameworks (Foundation, Materialize, and Bootstrap) 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

Better than legos!
Prebuilt, interactive website features that can be dropped into a project and customized with your preferred styles.

Components

CoffeeCup apps give you a leg up by including ready-made, customizable site items. Access these by clicking the Components icon in the top toolbar. Browse the ever-growing CoffeeCup Component Library, when you find one you like, click Add to Project. This will import the item into the Content pane > Components. Then style and adapt it to fit your content.

Working with Components

Creating your own interactive components is done visually by combining HTML elements, (predefined & custom) CSS, and the framework specific attributes. Mixin interactive scripts to create off-screen navigations, flex-cards, info-pop-ups, or galleries. Foundation, Materialize, and Bootstrap all offer detailed documents on how components are structured.

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.

Here is an example of Foundation components, that can be crafted visually within CoffeeCup web design apps:

PROJECT COMPONENTS

After adding a component to your project, you can access them on the Components sub-pane of the Content pane.

Feature Queries

Component Controls

The upper part of the pane shows a preview of the component. To improve visibility — a white component does not display that well on a white background — the background color of the previewer can be toggled. The bottom left button can change the setting between white, black and transparent.

The plus and minus buttons next to the background color button can be used to zoom in and out. In case there are similar components in the project, this provides a good level of detail to find the right one.

The preview shows the currently selected component from the list below the preview window. Clicking on a component will expand it so the name can be edited. To add a component to the canvas, click the plus (+) button. It will get inserted below the currently selected element.

To remove a component from the list use the delete (X) button next to the component title. Note this will not remove the component from the canvas, only from the list.

Create Custom COMPONENTS

To save a selection from your project as a component, first select it on the canvas, then go to the Components Section. Be sure to select the Parent element for the component such as the main Container element.

Component Controls

Click Create Component from Selection button to generate a fresh component based upon the currently selected element (group). This component will be placed at the bottom of the list. Project components can not be reordered, filtered or sorted at this moment.

Give your component a Name so that you can identify what it is and add a description. To save it to your Component Library to reuse in other projects, click the up arrow next to the component title.

Save Component

When saving to your library, use the blue button in the bottom left corner to create folders. This way you can organize your components into categories.

Save Component

WORKING WITH PREBUILT COMPONENTS

Most of the components found in the theme are core framework components. Using these ‘base’ components, themes can be used for quick functional prototyping and as a solid, proven, foundation for new projects.

Components generally consist of a number of nested elements combined with predefined classes. The image shows the classes for an accordion item.

Accordion

The image shows that the is-active Foundation classes have been disabled. This makes sure that any custom styles are only tied to the accordion-item class. We will talk more about the use and de-selecting of classes in the Style pane section.

SYMBOLS

Symbols are elements or groups of elements (components) that are kept the exact same throughout a project. When one instance of a symbol is updated, all other instances in the project will be changed as well.

Symbols Gif

Sync it up!
Update common items all at once. Edit footers, navigations, logos, and anything else with just one edit.

This, for example, allows for adding a footer link across all pages with one single edit. Keep in mind that a single element such as a buy button or copyright notice that comes back in various place of a project can be a candidate for a symbol as well.

Symbols are managed using the subpanel within the Content Pane.

Component Controls

In the image below the footer symbol is selected on the Symbols sub-pane. The entire symbol is visible in the preview area, just as with the components. On the left, part of the footer is also visible on the canvas.

When a symbol is selected, it is surrounded by an orange line on the canvas. This is to help differentiate between symbols and ’normal’ element groups. The Symbol container will also have an orange dot on the right in the tree view of the Element pane. This pane will be discussed later in this guide.

Symbols Preview

Symbols can not be nested — symbols can not contain other symbols — because that could create an update loop nobody can get out of...

Adding a Symbol to the Canvas works the same as for components. However, any changes to a Symbol will update all of the ‘instances’ — wherever they are located in the project, the app will keep them all exactly the same everywhere.

Creating a New Symbol also works in the exact same way as creating a new Component. When a symbol is deleted, it will be removed from the list, but all instances will still be in the project. From that moment they will behave as normal element groups, any changes will no longer trigger updates anywhere else.

When looking at the image below, you will also note a few differences. For starters, the name of the Symbol is followed by an instances count. This tells you how many times the Symbol is used in the project.

Symbols See On

The name of a symbol can be changed using the Name input. With the See on function, you either can circle through the pages where an instance of the symbol is located, or directly jump to a specific page with the dropdown. Using this function, the canvas is automatically scrolled to the place on the page where the Symbol is located.