Responsive Design Resource Index

Here’s a breakdown of the tutorials and helpful articles which will assist you in navigating the features found in Responsive Site Designer, Foundation Framer and Bootstrap Builder. If you are interested in a specific topic not listed here, you should check out the forums. The CoffeeCup crew along with an army of seasoned fans are always happy to help.

 

Search Tip

Find what you need quickly by searching keywords on this page. To search, hit the Command + F (for Mac users) or Ctrl + F (for PC users) on your keyboard.

Learn the essentials

These articles focus on using the main interface sections. Teaching you the foundation needed to use all the included features and tools.

An Introduction into Responsive Web Design
Understand the basic principles of responsive design. Add Various Content Elements to a Project
Discover all the elements and learn how they are used.
Meet the Workflow and Control Windows
Learn the 4 main sections of the user interface. Learn How to Style Elements in the Design Pane
Work with CSS selectors, and understand styling controls.

Fast Instructional Tutorials

Learn the app and build a responsive page at the same time using these guides. While the designs in these articles may not be what you envision for your new website, we highly recommend reading them both from start to finish. It will give you the foundation you need to be successful with this app and allow you to breeze through crafting your own custom designs, or to modify any of the pre-loaded themes.

Video Guide - Site Creation in 5 Steps
1 responsive design. 5 steps. 8 helpful videos - oh yeah! Start Here: Build the Layout
Master the layout and the rest will be a piece of cake.
Converting a VSD Theme in RSD
Learn the fundamentals when converting a fixed site.

A Comprehensive Tutorial

The 5 step series are an in-depth walk through discussing how to convert a static site to a fully responsive pages. 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
Understand what it means to start a responsive project. Step 2: Practical Responsive Site Design
This tutorial will walk you through creating a full webpage. Step 3: From Static to Responsive
Learn how to use the width slider and breakpoints.
Step 4: Adding the Design Layer
Style various elements within the theme tutorial. Step 5: A Single Design that Works on all Devices
Learn how to responsify a design for various screen sizes. Responsive design is like the Harry Potter bus
Options for creating a responsive design.
Follow the 1-5 step series to learn how to create this cool theme
rsd theme

Responsive Concepts

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.

Grids for Bulletproof Design
Understand the grid system and how it’s used with a site. Learn to Stack Content
Make content adjust to a single column for small screens. Using Push & Pull Techniques
These design tricks are used to position elements.
Managing the Responsive Grid
Add rows, and divide & merge columns like a spreadsheet. Creating Navigation with Inline Block
Work with CSS selectors, and understand styling controls. Explanation of Terms and Functions
Find definitions for commonly used design terms.

Helpful How-To’s

The following articles are helpful for enhancing your responsive pages.

RSD Quick Start Tips
 Ten hot advice tips to help you get started Publish or Export Your Project
Upload your design to S-Drive or export to your server. How to Create Links
Links to files, documents, external pages, and more. Adding Responsive Content Slider
Learn how to embed attention-grabbing slides. Insert a Web Form
For contact forms, collecting info, mailing lists, and more. Background Property
Apply cool backgrounds to sections of the site. Inserting Navigation Made with Menu Builder
Direct viewers to the right destination.
Foundation Framer Quick Start Tips
 Overview of the app and features Style Changes using Breakpoints
 Examine the site at any size and adjust layout as needed. Picture Element
 Add pictures and assign sizes for various size screens. Hover Transitions and Effects
 Apply a transition and an effect to a Button Link element. Apply a Mouseover Effect to a Background Image
 Use this mouseover technique for an eye-catching results Designing With Flexbox
 Control alignment, size and positioning of elements. Take Payments on Your Site with PayPal
 Create and add PayPal buttons to your site.

Tips and Tricks

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.

How to Work with CSS Selectors
Style and edit multiple common elements at once. Fixed Background
 Lock down a background so other content scrolls over it. Wrap Text Around an Image
 Learn how to make text flow around image elements. Responsive Google Maps
 Steps for adding a device-friendly map to your site. Explore the Complimentary Themes
 100% customizable responsive templates Responsive Site Designer Forums
 Ask questions, gain inspiration, and make new friends.
Semantic Shenanigans
 Handy tips for naming CSS properties Borders & Border Radius
 Outline content and apply rounded corners. Box Shadow
 Cast a shadow from the frame of almost every element. Inserting Google Custom Search Engine
 Adding the helpful page search widget Example Sites
 Get inspired by viewing these customer-made RSD sites. More Tips-n-Tricks & Videos
 Helpful advice provided by RSD customers.

We’re just getting started!

We’ll be adding new articles, tutorials, and help material frequently so be sure to sign up for our newsletter to be kept in the loop as new write-ups become available. If you have any tutorial requests drop us an email within your account and we’ll see what we can do for you. :)