Responsive Site Designer | CoffeeCup Software (2022)

Table of Contents
SiteDesigner Total flexibility. Use the power of CSS Frameworks combined with the flexibility of CSS Grid. Bootstrap 4 Foundation 6 Materialize Site Designer Frameworkless The customizable components in Site Designer will help you work faster without limiting creative freedom. These premium 'plug-n-play' items include all the essential features you would expect any website to include. Since they are premade, you don't have to waste time handcrafting them yourself. Pay once, own it forever! Rule your content. Filling a white canvas has never been easier. Components Symbols Elements Inspector Custom Code Fit your content. Responsify your projects to any device or browser. CSS Grid Flexbox Custom Breakpoints Device View Fallback Capability CSS Styles. A code-free design workflow.Select, click, point, pick and scroll to create websites and pages that are out of this world. Using code-free CSS controls, you can focus on design, while we take care of the code. Create reusable CSS classes Typography CSS Filters & Blend modes Color Export your content. Publish straight to the web, or hand off clean code. Publish Export Clean Code Boost Your SEO View in CodePen Site Designer Features. Everything you need to build a world-class responsive website. Create & Design.-- CSS Frameworks Templates Content Elements Resources Library Text Editor HTML Elements Fully power of CSS Interactions Responsive tools & Elements.-- Custom Breakpoints Magic Slider Focus Viewer Responsive Images Mobile First or Desktop Down Site Inspector Adaptable layout creation & Management.-- Flexbox CSS Grid Container Management Positioning Controls Finishing touches.-- Unit Switcher Boost Your SEO Publish & Share Export Clean Code Traditional CoffeeCup perks.-- Support Upgrades Enjoy the collection of responsive site templates. FAQs Videos
Responsive Site Designer | CoffeeCup Software (1)

SiteDesigner

Site Designer's code-free controls allow you to experiment with high-level features without needing to know how the markup is written. Your creativity can run wild! Build utilizing a drag-n-drop workflow in a live browser environment. Then style your content in super speed using clickable controls.

(Site Designer requires Windows 7 or macOS High Sierra (10.13) or newer.)

Try now for free

Total flexibility.

Use the power of CSS Frameworks combined with the flexibility of CSS Grid.

Responsive Site Designer | CoffeeCup Software (2)

Bootstrap 4

Bootstrap has been the king of the frameworks for a while and is loved by many for its highly styled element classes.

Responsive Site Designer | CoffeeCup Software (3)

Foundation 6

Foundation offers minimal pre-set styles on elements which makes it easier to apply your own customizations.

Responsive Site Designer | CoffeeCup Software (4)

Materialize

Materialize is based on Google’s Material Design with interactive components capabilities which make it a rising star!

Responsive Site Designer | CoffeeCup Software (5)

Site Designer Frameworkless

Frameworkless gives you the freedom to work desktop-down or mobile-first. Create your own styles without frameworks barrier.

Better than legos!

The customizable components in Site Designer will help you work faster without limiting creative freedom. These premium 'plug-n-play' items include all the essential features you would expect any website to include. Since they are premade, you don't have to waste time handcrafting them yourself.

More InfoGet Site Designer

Pay once,

own it forever!

Stop paying monthly subscriptions

Get a perpetual license and 1 year of free upgrades with the purchase of any of our products.

Rule your content.

Filling a white canvas has never been easier.

Better than legos

Components

Forget repetitive design work and speed up production time using the Component Library. Save and reuse items in other projects.

(Video) Site Designer Overview

SYNC IT UP!

Symbols

Turn nav bars, footers, signup forms, and more into symbols you can change across your whole site with a single edit.

FILL THE CANVAS

Elements

Fill a blank canvas with everything HTML5 has to offer. Drag raw elements in and style them as you desire.

STAY ORGANIZE

Inspector

The inspector gives you an elaborate overview of the page content. Search terms to drill down to the element level, and review the CSS markup.

NO CODE LIMITS

Custom Code

Use your javascripts and CSS stylesheets on the <head> or at any place of your page. Enjoy our code editor dialog full screen.

Fit your content.

Responsify your projects to any device or browser.

The most powerful layout system

CSS Grid

Create seamless layouts by adjusting your columns and rows and span your elements to bring your designs to life. Be there, or be square.

Efficiently align your items

Flexbox

Align, stack, or reorder elements with the flick of a button. It’s a phenomenal instrument that should be part of any responsive design toolkit.

Make your content rule

Custom Breakpoints

Enjoy the freedom of custom breakpoints at any pixel width. Let your content decide where they are needed and fully control any screen devices.

Check on any device

Device View

Easily preview for the wide array of modern devices. You can add any screen size to the device list. You are also able to quickly preview on any browser.

Support and customize for any browser

Fallback Capability

Design for the widest browser support (including the grandpa IE) and enhance for browsers that support the latest and greatest CSS properties.

CSS Styles.

A code-free design workflow.
Select, click, point, pick and scroll to create websites and pages that are out of this world. Using code-free CSS controls, you can focus on design, while we take care of the code.

Share your styles

Create reusable CSS classes

Work with a CSS-based class system to make style changes across multiple elements at the same time.

(Video) Recreating Microsoft's website using CoffeeCup's Responsive Site Designer live!

Font Freedom

Typography

Get access to the full Google Fonts library. Edit the typographic parameters, like line-height, kerning, tracking, weights and much more.

Transform images into stylish works of art

CSS Filters & Blend modes

Skip photo editing tools and work directly on your page canvas. Apply unique blend modes and effects like overlay, soft light or multiply to create your own brand identity.

Change colors on the fly

Color

Use the picker or the wheel to choose any color, create your palettes, and share them through your projects.

Export your content.

Publish straight to the web, or hand off clean code.

One click publish

Publish

It’s never been easier to put your website online. Publish to a world-class hosting stack that can handle any traffic you throw at it and is secured by HTTPS connection all the way through.

Production Ready

Export Clean Code

Export clean, semantic and W3C compliant code. Get your HTML & CSS, JavaScript, images, and other assets from your hard drive in a single click.

Responsive Site Designer | CoffeeCup Software (6)

Be on top of the search engines

Boost Your SEO

Add meta data and other head (or footer) code for SEO or plugins. Also activate the Structured Data workflow to tag up your content for Google and other search engines.

Responsive Site Designer | CoffeeCup Software (7)

TINKER WITH CODE

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

Responsive Site Designer | CoffeeCup Software (8)

Site Designer

Features.

Everything you need to build a world-class responsive website.

Try now for freeSee all features

Create & Design.--

Responsive Site Designer | CoffeeCup Software (9)

CSS Frameworks

Begin with a Bootstrap, Materialize, Foundation or Vanila CSS Framework.

Responsive Site Designer | CoffeeCup Software (10)

Templates

Scared of a blank canvas? Get a quick start by choosing one of the professional templates.

Responsive Site Designer | CoffeeCup Software (11)

Content Elements

Drag-n-drop elements like Containers, Images, Videos, Buttons, Icons and more onto the canvas.

Responsive Site Designer | CoffeeCup Software (12)

Resources Library

Organize images, documents, and other assets within the Project Resource Library.

Responsive Site Designer | CoffeeCup Software (13)

Text Editor

Type, paste, or edit text right on the canvas using a powerful text editor.

Responsive Site Designer | CoffeeCup Software (14)

HTML Elements

Code connoisseurs can go wild by injecting HTML scripts using the HTML element.

Responsive Site Designer | CoffeeCup Software (15)

Fully power of CSS

Padding, Margin, Floats, Display, Position, Overflow, Border (radius), Background (image), Width (min, max), Height (min, max), Scale, Translate, Rotate, Skew, Opacity, Box Shadow, Transitions to name a few.

Padding, Margin, Floats, Display, Position, Overflow, Border (radius), Background (image), Width (min, max), Height (min, max), Scale, Translate, Rotate, Skew, Opacity, Box Shadow, Transitions to name a few.

Responsive Site Designer | CoffeeCup Software (16)

Interactions

Design for interaction with hover, active and pressed state controls. Create powerful 3D effects that will make the site content come alive.

(Video) Responsive Images

Responsive tools & Elements.--

Responsive Site Designer | CoffeeCup Software (17)

Custom Breakpoints

Adapt the layout or tweak the design at any display width using custom breakpoints.

Responsive Site Designer | CoffeeCup Software (18)

Magic Slider

Full range viewport slider — view and work on the design at any possible screen width.

Responsive Site Designer | CoffeeCup Software (19)

Focus Viewer

Focus the viewer's attention on a specific area of the image with the focal point function.

Responsive Site Designer | CoffeeCup Software (20)

Responsive Images

Use the HTML Picture element to serve mobile users optimized or smaller versions of an image. Bandwidth saver!

Responsive Site Designer | CoffeeCup Software (21)

Mobile First or Desktop Down

Build site using mobile first or desktop down workflows with corresponding media queries.

Responsive Site Designer | CoffeeCup Software (22)

Site Inspector

Integrated web inspector with spacing outliner, DOM tree and live CSS preview.

(Video) Export Site Designer component into HTML Editor

Adaptable layout creation & Management.--

Responsive Site Designer | CoffeeCup Software (23)

Flexbox

A very powerful way of controlling alignment, size and positioning of elements. Also, elements can be instructed to grow, shrink and wrap (or not) depending on the size of the viewport.

Responsive Site Designer | CoffeeCup Software (24)

CSS Grid

Use CSS Grid for a modular design approach — each page section is done in a dedicated (grid) container. This makes it easy to move the sections around or reuse them in different pages. Includes Feature Queries to create fallback styles for older (unsupporting) browsers.

Responsive Site Designer | CoffeeCup Software (25)

Container Management

Sublime Container management: span, offset, push and pull with simple drop downs. Containers can be constrained to certain widths or span full-width for appealing visual (background) effects.

Responsive Site Designer | CoffeeCup Software (26)

Positioning Controls

Choose from standard positioning controls: Absolute, Static, or Fix content. You can also place elements outside of the flow with these comprehensive tools.

Finishing touches.--

Responsive Site Designer | CoffeeCup Software (27)

Unit Switcher

Change the method of measurement on the fly – EM, PX, %, VH, Auto, and more.

Responsive Site Designer | CoffeeCup Software (28)

Boost Your SEO

Add meta data and other head (or footer) code for SEO or plugins. Also activate the Structured Data workflow to tag up your content for Google.

Responsive Site Designer | CoffeeCup Software (29)

Publish & Share

Publish directly to the CoffeeCup servers and share the link for feedback and collaboration.

Responsive Site Designer | CoffeeCup Software (30)

Export Clean Code

Export clean, semantic, HTML & CSS that can be uploaded to any server
(Includes any added plugins).

Traditional CoffeeCup perks.--

Responsive Site Designer | CoffeeCup Software (31)

Support

Free support and upgrades during one full year for customers from our savvy technical staff. Also gain access to our robust User Community Forums to swap ideas, share content, get feedback, even make a friend or two!

Responsive Site Designer | CoffeeCup Software (32)

Upgrades

Enjoy one year of free upgrades with the purchase of your perpetual Site Designer license. This means after the one year, you can still keep on using the software as much as you want, another year of free upgrades will be available for $69 per year.

Enjoy the collection of responsive site templates.

Browse our growing library of responsive website templates. Download one or them all! Each theme can be tailored to fit your specific needs. Open the templates in the HTML Editor to edit the code manually, or modify them visually using the powerful Site Designer.

Browse Templates

(Video) Pre Release Version of CoffeeCup Responsive Site Designer

FAQs

What is CoffeeCup responsive site designer? ›

Introduction. CoffeeCup Site Designer is a web development tool to create and design a new website, or to modify and enhance your existing website. Site Designer is a WYSIWYG tool which provides a real-time visual design environment for building or modifying websites.

How do I use CoffeeCup website designer? ›

Text we start with a gray shaded. Area which you will fill in with different web elements. The

What is CoffeeCup com? ›

Professional web development tools. for sites, emails, and forms.

Videos

1. Responsive vs. Fluid vs. Adaptive Design
(Timothy Ricks)
2. How to add a menu to Responsive Site Designer 1.5
(Steve Kolish)
3. Responsive YouTube videos with custom options - CoffeeCup Software
(Pixel and Poly)
4. Building Sticky Navigation With Responsive Site Designer
(Coffeecup Tutorials)
5. Responsive Overview - Google Web Designer
(Google Web Designer)
6. Adobe Buying Figma and The Future of Design Software
(DesignerUp)

Top Articles

You might also like

Latest Posts

Article information

Author: Kerri Lueilwitz

Last Updated: 07/22/2022

Views: 5599

Rating: 4.7 / 5 (67 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Kerri Lueilwitz

Birthday: 1992-10-31

Address: Suite 878 3699 Chantelle Roads, Colebury, NC 68599

Phone: +6111989609516

Job: Chief Farming Manager

Hobby: Mycology, Stone skipping, Dowsing, Whittling, Taxidermy, Sand art, Roller skating

Introduction: My name is Kerri Lueilwitz, I am a courageous, gentle, quaint, thankful, outstanding, brave, vast person who loves writing and wants to share my knowledge and understanding with you.