Meet Site Designer

Your new best web development friend

Play with me
Learn about me
Primo design features

Visual controls for sculpting unique website experiences

Placeholder Picture

Responsive Site Designer provides a visual interface for the powerful Bootstrap 3 (and 4), Materialize, and Foundation 6 front-end frameworks. We also added the highly praised Components Library — easily add your own and reuse them across projects. Or even better, select from a big bag of uber-cool prebuilt components such as responsive navigations, galleries, video backgrounds, framework components and more.

New in V2 are also Symbols for Content Syncing, Awesome Animations (that are easy to make), Image Filters & Blends, Payment Buttons, plus a plethora of new, impressive Design Controls. Scroll down and enjoy the demos, or head straight to the full list of fresh features.

 $69

A small price for saving hours.

Bring your design buddy home!

With the support of the most popular front-end frameworks and an impressive list of design functions, Site Designer is the #1 web site builder app.

Get started with this legendary app to create epic mobile-friendly designs while saving tons of time.

Buy for WindowsDownload Windows Trial
Buy for macOSDownload macOS Trial

Demo 3: blend modes

Mix multiple backgrounds and colors together along with Photoshop-like blend modes such as Overlay, Hard Light, and Color Burn.

Double
Exposure
Placeholder Picture
Placeholder Picture

Double exposure, a trendy effect that is hard to recreate even with Photoshop. But with RSD V2 you can get it running directly on pure CSS! Here we show a fixed forest image on the background with a girl scrolling over it and, lastly, text that blends on top. All them combined give you an incredible result that will make all the difference.

Order now to make stuff like this

Demo 4: blended action

Apply scroll effects for desktop-viewers to stop them in their tracks as the image comes into view. Texts stay there which makes this accessible and SEO friendly.

Multiple Backgrounds & Effects.

Make something truly original.

Get me started

Demo 5: TYPOGRAPHY

Look mom, without images! Which makes this accessible and SEO friendly. Available as a component too so you can learn how to fuse the styles together.

Your Text

Components

Better than legos

Prebuilt, interactive website features that can be dropped into a project and customized with your preferred styles. Build and create your own too and share between projects. — Modals, navigations, dropdowns, alerts, and many more. The collection grows constantly!

Placeholder Picture
Main features
New design controls
Get the RSD

Site Designer page navigation

A little demo of this cool component. An single button that open an accordion overlay on small screens. A clean dropdown menu on desktops. Can be used as page or site navigation.

Navigate
The features

DEMO 8: BACKGROUND VIDEOS

They work with HTML 5 video as well as with videos from platforms like Vimeo and Youtube. Use them as header and people are sure to stick around!

Go crazy with cool background videos!

They are easy to customize and even more effective when used at the top of the page with cool scroll-over effects and more. Get ALL OF OUR SOFTWARE TOOLS for $199 and make your own today.

Order Now
Symbols

Sync it up!

Yes it's finally possible: update common items all at once. Edit footers, navigations, logos, and anything else with just one edit. We're talking huge timesaver here.

'N-ough said seen.

'On-load' and 'in-view' animations

Use the power of animation

In a world where everything is competing for attention, adding that extra bit of life to the design increasingly makes the difference. Animations and transitions can be used to spark interest, help the visitor focus on a specific area, increase usability or simply help to capture the attention just long enough.

In the new Responsive Site Designer creating these animations is super easy. 

Demo 9: animated icons

A subtle animation where the icons slowly animate into place when the page loads, or when the icons are scrolled into view.

Creative Design

Creativity spurs from iteration and focus, not from solving coding problems. With our tools content and design come first.

Responsive Sites & Emails

Not just for websites and components such as Content Slide Shows. Our tools even solve the responsive email design problem!

Multiple Frameworks

Design with the famous front-end frameworks — entirely visually. From the popular Bootstrap 3 (and 4), to the nifty Foundation 6 and Materialize.

The Coolest Features

Syncing Symbols, Filters & Blend Modes, Flexbox, Column Layout, Width Slider, Customer Breakpoints and much much — MUCHO — more...

Clean Code

Our apps are lean coding machines. The generated code us super clean and easy to work with for developers after export.

Technical Support

The CoffeeCup support team is considered the friendliest and most helpful team around. Just ask around.

Demo 10: animated backgrounds

There are tons of ways backgrounds can be made to animate using the new Responsive Site Designer. Colors, opacities, overlays, scaling, translate, filters or blends can all be used to grab the visitor's attention and create 'WOW' effects. In this demo the surf background slowly moves to the right.

Hang Ten

Choose your weapon. Get gear. Conquer any wave.

Weapons and more
get paid in style

Customizable payment buttons

Simply drop a Payment button, paste in your PayPal button ID and you are ready to get paid! It is an easy way to sell items, ask for donations or to get paid for services through a trusted payment provider.

Style the buttons any way you want — font, color, size or shape — using the intuitive design controls. Go here to learn how to set up these buttons in PayPal.

Placeholder Picture
multiple framework support

Use the power of Bootstrap and Foundation

CSS Frameworks are used by millions of designers and developers. Bootstrap 3 (and 4 alpha) and Foundation 6 are the most popular. And Responsive Site Designer is the only app that features them both!

Designing with these well tested frameworks has many advantages. They use well organized HTML, CSS and Javascript that is frequently maintained and updated. Furthermore, they allow for creating cool interactive components such as dropups, navigation menus, galleries and more without wrestling with extra scripts — sweet!

Placeholder Picture
Placeholder Picture
Placeholder Picture

RESPONSIVE SITE DESIGN FEATURES THAT ARE OUT OF THIS WORLD

RSD 1.5
RSD 2

Enhanced project security. Continuous automated backups to keep your websites secure.

—

Link in videos from Youtube, Vimeo, DailyMotion and Vine.

—

Define styles for a specific media query, independent of the slider bar position in Breakpoints mode.

—

Save commonly used items to your Components Library and reuse them with any of your projects.

—

Support for multiple classes (go wild, make a variation of a variation)!

Single Class Only
Up to 6 Classes

Got a large website? No problem!

Up to 75 Pages
100 Pages (for now)

Create nested containers.

Single Level Only
Up to 3 Levels

Additional container elements for Lists and Links.

—

Create semantic HTML containers for navigations, footers, headers and more.

—

Build print-style multi-column layouts where content flows into new columns automatically while keeping everything balanced.

—

Automatic link encoding for your URL's. Keep environment variables like $ and %, in the URL's.

—

Control the units of measurements on the fly! Choose from px, em, rem, %, ww, vh, vmax and vmin.

—

Support for inline tags like (strong, em, small, code and even subscript)!

—

Enhance your sites semantics using built-in Aria, Microdata, and RDFA attributes.

—

Adjust the X and Y scale of any element.

X Coordinate Only

Forget Photoshop — use visual CSS controls to apply filters and blend colors.

—

Create colorful backgrounds using Radial Gradients.

—

Easily reset and remove styles applied to any element, globally or on an individual breakpoint.

—

Add some flair to the way your content loads with transition effects.

Single
Go Crazy!

Create awesome layering of background images using multiple images, colors and gradients.

—

Support for OS X Sierra and above & Windows 7 and above.

Up to El Capitan and Windows 10
TUTORIAL OF THE WEEK

Animate anything

Select any element on the canvas. On the Design pane, set the State dropdown to 'Out of view'. Now specify what the element will look like and where is is positioned before the vistor sees it. Now set the State dropdown back to 'Regular' and in the Transition section simply enter a time for the element to transition from the Out of view state to the Regular state and after how much time to should happen (delay).

That's all there is to it to create attention grabbing effects in Site Designer!

Get Site Designer and be awesome too!
Placeholder Picture