Articles tagged “Responsive Design”

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...

Responsive Email Designer Theme Pack

Responsive Email Designer Theme Pack Looking for inspiration on how to create a responsive email? If so, then we got you covered! Here is a preview of awesome responsive themes included with...

Responsive Layout Maker Quick Start Guide

Introduction Billions of people access the Internet from devices with all different screen sizes. To assure a good looking, usable website on every single device, it's gotta be responsive....

Responsive Site Designer Resource Overview

Your help guide for our #1 responsive apps Welcome to the resource headquarters for the most advanced responsive design apps on the web. This article offers a global overview of 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...

design with flexbox

Design opportunities with Flexbox are AAAA mazing... You only need a bit of practice to master this skill. That’s why we created a comprehensive guide with syntax explanations and real...

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...

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...

Menu Builder Quick Start Guide

If you want to build good looking, well functioning navigation menus, you’ve come to the right app. CoffeeCup Menu Builder has been designed to help you build sophisticated, standards...

Responsive Web Design

About creating a web design, that fits all sizes Hold on now, if it fits unlimited device and screen sizes, the web site must be like...infinite? Without predefined size, impossible to...

Responsive Actions - The Stack

The Stack This is one of the most frequently used responsive action. The reason for that is simple, at small screens there is little room for content to be displayed next to each other....

Grid Systems and Frameworks

  We are working on it! We have a lot of information that we want to cover here, so be patient with us as we continually update this article. How (Responsive)...

How to make your Image Map Responsive

This article has been updated! Version 5.0 of CoffeeCup Image Mapper will create stunning responsive image maps which means no more having to “hack” the code to produce one! The Wizard will...

Responsive Content Slider

Create Responsive Slideshows and Presentations Direct from the CoffeeCup labs is Responsive Content Slider. This app gives you the ability to combine pictures, text, buttons, icons and...

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...

How to use Push & Pull in Responsive Layout Maker

We know that you were taught that pushing and pulling were unacceptable in school, but that is only if you do it to a living being. It does not count when it is an Element in your 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...

Putting it all together

Now that you know how Layout Maker works, let’s put your skills to the test. Here we are going to walk you through a quick process on how to build a layout. This only covers the basics, but...

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....

Design Responsive Tables with Flexbox

Flexbox makes responsive table design a lot easier Tables have always posted a bit of a problem in responsive design. Depending on the table type and use-case, the challenge could be big...or...

Solving the IE11 fixed background bug

How we solved the IE 11 fixed background bug In our efforts to make the best possible experience with all of our themes, we attempted to fix a reported bug regarding fixed backgrounds in...

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...

How to apply mouseover effects to a background image

In this article, we are going to walk through how to apply a mouseover effect on an background image that will then display text in place of the image. We accomplish this by using multiple...

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...

What are CSS3 Media Queries?

Media queries are a powerful ingredient of Responsive Web Design (RWD) supported by all modern browsers. A media query is a small bit of CSS code that works by asking (querying) the...

Responsive Layout Template Pack Preview

Layout Maker Template Pack Looking for inspiration on how to create a responsive layout? If so, then we got you covered! Here we have put together an awesome bundle of responsive layouts that...

From static to responsive

Converting a static site into a responsive design A fluid layout (recap) With a layout created in Responsive Site Designer (or Layout Maker for that matter), we’re off to a...

How to use CSS Display Properties in Responsive Layout Maker

Display Properties are used for controlling the way elements flow within your layout. All elements have a default display depending on what type element it is. Usually this is block or inline....

Predefined Classes used in Responsive Layout Maker

It is always helpful to have predefined classes when designing any website. That is why both Coffeegrinder and Bootstrap 2 have included a few predefined classes that can make building your...