Articles tagged “Responsive Design”...

A single design with great viewing experience on all devices

Designing for all devices Following our previous responsive design adventures you will feel pretty familiar with the tools and workflow in Responsive Site Designer . Here’s a quick...

A Website Needs to Adapt... or Die

Preface: A Mobile Explosion It was the end of 2009, about 8 years after the dot-com bubble burst; the Internet counts close to 200 million domain names, and over 230 million websites (none of...

Adding a form to Responsive Site Designer

Web Form Builder is an amazingly powerful, responsive form creator. Create forms for registrations, surveys, purchasing and more. Now that you have created a totally cool form, it is...

Adding a Responsive Menu To Your Page

Before we start, make sure you have secured your copy of (responsive) Menu Builder . This awesome app helps you create HTML & CSS3 navigation menus without coding—sweet! For the...

Adding Hover Transitions and Effects

In this article, we are going to walk you through how to apply a transition and an effect to a Button Link element. This is accomplished by adding some transition and effect properties to the...

Adding Responsive Google Maps to Responsive Layout Maker

window.location.href = "https://www.coffeecup.com/help/articles/1432"

Adding Responsive Videos to Responsive Layout Maker

We all know videos can be a very powerful tool in helping your visitors make a decision on what to buy or simply learn more on what you have to offer. Inserting these videos into Responsive...

Adding the design layer

Adding the design layer with visual CSS3 controls Content creates design atmosphere The site we are constructing is for a good cause, a shelter for cats (and other animals). Sometimes it...

Build your own layout in 9 simple steps

A solid, custom, responsive layout design in 9 simple steps This article will teach you how to create a structure of a responsive page design, focusing only on the placement of the content...

Can I Mix Vertical and Horizontal Menus?

When you start Menu Builder for the first time, you will have to choose the type of layout you would like your menu to use. Once you select a layout, it cannot be modified later.... or can it???...

Centering your Buttons in a Menu

Here you will find the steps to center your buttons for a horizontal menu. If you need help with adding a background please see this article Extending Menu Background Across Entire Page ....

Chapter 1: Getting Started

When opening the program, you are presented with the Image Mapper Wizard, which asks whether you would like to start a new image map, or open an existing one. Image Mapper Wizard...

Chapter 1: Managing The Responsive Grid with Layout Maker

Row & Column Management in the Grid Keeping the content and page elements organized at every possible display width is virtually impossible without the use of a good grid system. Grid based...

Chapter 2: Design and configure your image map

Design pane The design tab holds many of the editing features of the program and can assist in setting up your new image map! These tools allow you to specify different links using the right...

Chapter 2: Understanding HTML & CSS3

The Code Powering Your Menu No need to get into details here in this chapter, after all, Menu Builder does all the work for you. But this we want to make clear before we go any further: HTML...

Chapter 2: Using Elements for Content-Driven Responsive Layouts

Populating the layout design with content elements This part of the application is so intuitive that it barely needs any explanation. Simply decide on your content needs, drag them on your...

Chapter 3: Exporting your Image Map

Ready to export your image map? When exporting, you have two choices to select from (responsive and non-responsive). To start the export process go to File > Export Image Map select the type of...

Chapter 3: Prototyping and Layout Design

Customizing Content and Styles Each element, including the grid itself, the rows and columns, can be customized. These customization options are located on the...

Chapter 4: Refining Your Design

Responsifying the Design The preview (and editing) area in Responsive Layout Maker is an actual browser. This has the advantage that the design will look and behave exactly like it will when...

Chapter 5: Explanation of Terms and Functions

To help you take advantage of the full potential of Layout Maker, we have put together a glossary of the most common terms we use through the software to help you become more familiar with the...

Chapter 6: Editing Confirm and Notification Emails

With the ever changing world of web design and ever growing mobile market, your form notifications need to be crisp and responsive. By making this change, you are allowing customers to access the...

Chapter 6: Exporting your responsive email

There are two ways to generate your email in Responsive Email Designer; to your CoffeeCup account or to your local computer. Depending on your skill sets and needs, one may work better for you...

Chapter 6: Responsive Layout Maker VS Responsive Layout Maker Pro

Responsive Layout Maker comes in two versions, Responsive Layout Maker and Responsive Layout Maker Pro. Both versions allow you to create amazing site layouts, but there are distinct differences...

Chapter 7: How-to's and Resources

How-to's and Tutorials: With Responsive Layout Maker (RLM) not only can you create a wireframe/prototype, you can also export and create a responsive website from the generated files. Here...

Chapter 7: Responsive Layout Maker Quick Start Guide

Layout Maker also allows you to include additional pages, giving you the ability to fully mock up an entire website. As you add pages, they will automatically appear in your Navigation element....

Chapter 8: Adding Your Menu To Your Website

Exporting your Menu Now that you have completed building your menu, it is time to get it into your website. When you select this option, you’ll be prompted to save your menu. Once this is...

Chapter 8: Responsive Layout Maker Quick Start Guide

Now that your layout is ready for the public, you’ll want to explore your options for putting it on the web. You can publish to S-Drive by entering your CoffeeCup account information, export...

Complimentary Templates

Download Responsive Themes Build cool, device-independent, sites and forms. Visually. These themes will provide an optimal viewing and interaction experience for every viewer...

Convert a static email to a responsive design

From an unreadable newsletter, to a responsive version in just a few hours I got this email from Zappos™ with the intriguing subject “Update regarding Zappos emails…”...

Create a Nested Menu from Scratch

One of the most important parts of a website is the navigation menu. The navigation menu is like the roadmap the user must follow in order to reach their destination. Make the journey...