For Windows and OSX
Allowing you to make design and layout changes wherever needed, breakpoints are truly the secret weapon of responsive design. And with this revolutionary app, they are a cinch to create and manage.
Use the handy viewport slider to inspect your creation at every possible display width. Anytime something doesn’t quite look its best, drop in a mighty breakpoint to optimize the layout or design.
Skip static Photoshop or vector design apps. Create directly in the browser with real HTML elements and adaptive grids. Use the full power of CSS3 with intuitive tools.
Design for all devices using easy to manage—custom—media queries. Seeing and feeling the site develop in a production environment (the browser!) is the way of the modern web.
Specify the default styles for each element. Then use your own classes to create design variations. Change the properties across the site for every element type, class, or ID with a single edit.
What about variations of a variation? The multi-class system has your back, resulting in design creativity and productivity you can’t experience elsewhere.
Working directly in the browser not only creates the unique live design experience, it also allows the code to be semantic and clean. No (confusing) code generation is needed, the CSS3 is written directly to a real stylesheet, resulting in clean and easy to interpret rules.
The inserted HTML elements are standards based. Tags can be switched with two simple clicks to use semantic HTML5 elements like
<header>, resulting in well marked-up pages and conveying meaning to search engines.
On a fast connection a significant image payload isn’t a big deal. But on mobile devices or networks, images are often the main bottleneck when it comes to website performance. Being slowed down and paying costly bandwidth fees only to be presented with big images intended for giant monitors, is super annoying.
Luckily all of this is solved by the brand new HTML picture element, implemented in Responsive Site Designer! It’s as simple as changing an image at a breakpoint for a smaller version. For each associated display width, only the specified image will be downloaded, creating a fast and great experience for big and small screens alike.
Add rows and content containers with just a simple click. Toggle column spans at custom breakpoints to create tailored layouts for smaller screens. Or create tailored tablet, laptop, desktop and everything in between layouts if you design mobile-first.
You can even use subgrids and container nesting for more ultra-precise layout control. Stretch rows, stop floats, change display properties, constrain heights...this app has it all!
The web inspector has been an indispensable tool for front end developers for years, and we made it available right within Responsive Site Designer. Use the inspector to view or change (drag-n-drop) an element's position in the DOM tree. Or hover the tree to see each element’s outline.
The applied CSS is visible in the lower pane, making it easy to understand what is happening at each breakpoint. Want to edit the code directly? So do we! (So it will probably happen...soon.)
Use CSS3 properties such as translate, rotate and skew to create powerful visual effects. On any element and without graphics editor.
Transitions smoothen the value changes defined on different states. Grab the attention and impress visitors when hovering images or pressing buttons. Move it, move it, you gotta move it!
Craft gorgeous site designs in pure HTML & CSS. Create from scratch, build upon existing themes, or replicate and responsify existing websites with ease. The one limitation? The human imagination!
Configurable element properties
Over 20 elements ready to be dragged (and dropped)
States for interactive elements
Over 1200 great font icons included
It is pretty amazing how easy it makes the whole responsive website creation process.Andrew Moss on the Forums
Responsive Site Designer is nothing less than a work of genius! A true revolution in website design.Matteo Lovatti on Twitter
RSD is such a time saver. Easily read all my svg files, queries easily manageable and more importantly affordable. Made my new portfolio with it.Angel Velazquez from AEVolucion.com on Facebook
I absolutely LOVE the new Responsive Site Designer, even for the computer code challenged it works!Heather Carter
RESPONSIVE SITE DESIGN FEATURES THAT ARE OUT OF THIS WORLD
Create & Design
Drag-n-drop content elements like headers, images, buttons, icons and more
Up to 21 (+ 33 variations)
Organize images and other assets in the Project Resource Library
Smooth and familiar front-end design workflow using custom selectors
Target types, (multiple) classes or IDs
Design for interaction with hover, active and pressed state controls
Create powerful 3D effects that will make the site come alive…
Add special widgets or custom scripts with the HTML Element
Plethora of typographical design functions, including Google Font integration
Font Family, Size, Weight, Color, Style, Line-height, Text Align, Transform, Decoration, Wrapping, Spacing (indent, Letter, Word), Text Shadow, Superscript, Subscript
Write, paste, or edit text in place with an intuitive, powerful, text editor
All the design power CSS3 has to offer without writing a single line of code
Padding, Margin, Floats, Display, Position, Overflow, Border (radius), Background (image), Width (min, max), Height (min, max), Scale, Translate, Rotate, Skew, Opacity, Box Shadow, Transitions and a few more…
Integrated web inspector with spacing outliner, DOM tree and live CSS preview
Unlimited website projects with up to 50 (for now) pages each
Responsive Tools & Elements
Full range viewport slider — view and work on the design at any possible width right in the app.
Adapt the layout or tweak the design at any display width using custom breakpoints
Responsive images: use the new HTML picture element to show different images at different widths
Focus the viewer's attention on a specific area of the image with the focal point function
Mobile-first and desktop down workflows with corresponding media queries
Adaptable Layout Creation & Management
Fluid grid systems with configurable columns, gutter and widths.
Choose pixels or…ems!
Rows can be constrained to certain widths or full-width for appealing visual (background) effects
Sublime column management: span, offset, push and pull with simple drop downs
And change these at any breakpoint for an optimal viewing experience on any device!
Subgrids and container elements give unique granular control over the layout at any width
Fix rows or place elements outside of the flow with comprehensive positioning controls
Use the tag switcher to create the most semantic HTML
Yup, turn that <div> into a <nav>
Add meta data and other head (or footer) code for SEO or plugins
Publish directly to the CoffeeCup servers and share the link for feedback and collaboration
Export clean, semantic, HTML & CSS that can be uploaded to any server
(Includes any added plugins)
Traditional CoffeeCup Perks
Free support from the fastest support staff on the web
Plethora of upgrades, free in between major version increases
Cool release special, buy now and save $60 plus get free themes
Limited time offer!
Need multiple licenses? We have special prices for design agencies and other business that require more than 3 licenses. Just contact us here and we’ll get you set up in snap.