Master of art
© CoffeeCup Software
Depending on prior knowledge and experiences, new apps might take a little to get used to. For Responsive Site Designer this probably won’t be very different. However, for those with some understanding of CSS, the workflow and UI will immediately feel familiar.
The intuitive design controls are a visual representation of CSS. This creates the both the familiarity and makes Responsive Site Designer flexible and powerful. It also makes it easy to tinker and learn for those with a different level of experience.
Responsive Site Designer is also an excellent tool for those interested in learning how to craft sites that automatically adapt to the viewer’s screen size. The visual controls, width slider, real-time preview and undo system make it easy to experiment and learn by doing.
Others prefer a bit more guidance when getting started or tinkering with the app. This tips template has been created with that in mind.
A list of tips for getting started with RSD can be found below. To quickly jump to a specific tip you can view this template in the browser by clicking on the Preview on… button on the toolbar above. Then simply click on a tip and the browser will scroll to that position. From the browser you can also drill down into a topic by clicking on links included in the tips. This will take you to a tutorial on our website with more information.
Alternatively you can consult the more comprehensive help guide or get started with a theme. Several gorgeous themes with cool design tricks have been included in the app. You can browse and access them from the Theme browser.
If at any time you feel the need for more hands-on support, we have you covered too. Clearly the most rewarding help comes from peers. Whether you’re learning the ropes, hunting for that cool trick, or helping others out, the vibrant CoffeeCup user community is always a cool place to hang out at. These friendly folks will be more than happy to share their knowledge and experience!
And just in case you happen to stumble upon a deeper technical challenge, our staff is (almost) accessible 24/7 through our technical support center.
Want your name added to the quote page? Cool, we would love to have you! Just send us something nice on Facebook, Twitter or post in the forums. We really appreciate it and have some cool tees for the best ones...
For now, have fun creating!
We usually start our designs with placeholder images. But at some point in the process these placeholder images will need to be replaced with the real deal. Here’s how.
Double-clicking the placeholder image will automatically launch the Design pane. You can also click on the pane tab directly or right-click on the image.
Use the Picture dropdown to choose a source. For online images you can simply paste the link.
Local pictures can be added to the project resources and will be included in the export or upload.
The element will take the dimensions of the new image, unless different styles have been specified.
Scroll down to the Style section. One of the first adjustments made is often the max-width value under Dimensions.
A whole variety of other design controls is available further below.
Pictures can also be changed at breakpoints — serving smaller size images to mobile users increases the performance and makes them happy!
In Text Edit Mode you can paste, or type text. Selected parts of the text can be given a distinctive formatting or turned into a text link.
The text editor can be activated with a right-click and choosing Edit Text option. You can also triple-click the element or use the Edit Text button (below the ID input box on the Design pane).
You can select portions of the texts to add Links or format them differently from the unselected text.
These (inline) styles can be given a Class name for easy reuse and updating.
We also have a comprehensive article and video tutorial that describes the various linking options in more detail.
Use the Typography controls on the Design pane to style the text of the entire element.
The formatting tools look and work the same but only affect the selected text (and the previous selections that have been given the same class name).
In web design grids are very similar to a spreadsheet. They consist of rows and content columns (cells) for aligning and organizing page elements.
Each row can be divided in a number of content columns. The maximum number depends on the grid configuration. The default is 12 columns, which will work fine in almost all cases.
The example above has 4 rows. The 1st two rows both have 2 content columns.That means each content column will take up 6 grid columns (out of 12).
The Layout pane has a bunch of tools for managing and configuring the grid. Columns can be added, merged and Span widths can be adjusted.
When the total span of the columns in a row exceeds the maximum, they will stack. This can be used to make layout changes at breakpoints.
In the above example the span widths of the columns in row 3 have been adjusted past the breakpoint. (The white dot with black filling on the top right)
Column 1 and 2 now use a span of 6 (out of 12 — half of the width). This made the 3rd column stack. The span width for the 3rd column has been set to the maximum number of 12 so it takes up the full width.
Apply styles to multiple elements at once with the powerful selector system.
Class is the default option in the dropdown but mainly used at later stages of the design. The most efficient workflow is to first define styles for element types.
Choose the Type selector from the Apply to dropdown before using the design controls further below. Styles applied to the type have a pink indicator.
With all default styles set, Classes can be added to create design variations.
The variations are related to a different usage of the element in the design. In the example above a header uses a class to add a top border and make the font italic. The font-family is still the same as specified for the type.
The image above shows that the font family for the paragraph from step 1 is specified on the Type. The same is true for the color and line-height.
The blue indicators show that the font-size and weight are specified for the class. The yellow indicator tells us that the alignment is set for this specific element only —on the (unique) ID.
Our themes not only look great, but include explanatory texts that can be a massive help in learning how to create specific design effects. The Inspector pane can be helpful and give insight too!
We are in the process of swapping out the simple filler text in the themes for explanations that describe how certain design effects have been created.
These sections mention how the HTML is organized — if containers are used for example — and what style properties are being used.
Responsive Site Designer is an excellent learning tool! At any point you can jump to the Inspector pane and look at the HTML structure and CSS properties for the selected element yourself.
Just right-click an element and select Go to > Inspector. The element order and associated CSS for each HTML element is shown. The CSS is still edited on the Design pane only (for now).
The elements can also be dragged and dropped in a different position, changing the element order. This can come handy at times when the drop zones or elements in the preview area are small.
You can also hover elements, and view the outline in the preview area. This helps to understand how much extra space (margin, padding) an elements takes up.
Move the width slider to the left and right to view the design at all possible widths. Use breakpoints where needed to adjust the layout or elements.
Responsive Design does not mean designing for a tablet or iPhone — it means designing for any width.
The width slider can be used to view the design at any possible viewport width and is instrumental for creating websites that look good on any screen and device.
The white dots with the + and - can be used to add (or remove) breakpoints. The dots will be added above the current position of the slider, at the pixel value displayed at the left of the device indicators.
The device icons indicate what type of devices are likely to be used at the current width. With all the different device sizes they are just in indication.
The zoom buttons don’t really belong in this tip ☺
Any style, from column spans to border colors, can be adjusted at a breakpoint. A breakpoint is active, receptive to style changes, when the white dot has a black center.
In the example above this means that a smaller font size is applied as of that point and until further changes are applied at a next breakpoint.
In a desktop down workflow breakpoints are active when the slider is positioned on the left of the dot. Mobile-first designs work the other way around.
Subgrids and containers provide additional control over the layout design and help to create layout variations for different screen widths.
A subgrid is a special container with rows and columns. It allows for the same layout manipulation as a normal grid. Rows can be added and their dimensions altered, column widths can be controlled with the Span width control on the Layout pane and they can be made to stack at breakpoints.
A good use example for subgrids is when you have a full-width row. Subgrids can keep all the elements centered while allowing for content organization and layout (re)structuring (at breakpoints).
Containers can be used to create (visual) element groups like the ‘activity cards’ shown above. They can hold, buttons, text, pictures and even a subgrid. Containers can also be placed in subgrid columns.
However, a subgrid can not be placed into a container already in a subgrid, nor can a container be placed into a container.
Bonus: you can use them (as overlay) to create cool hover effects and interactivity. Check out the Flex City theme for examples.
A popular design choice is to have a background that stretches across the screen, while the content such as text stays constrained in the center.
Add a row and change the max-width to none from within the Design pane.
This will allow the row to expand out full screen for the viewer. It’s great for stretching the navigation bar (see above) or creating a section with a background image that fills the entire window (see step 3).
To keep site content in the row from expanding too wide, a max-width can be used to center elements. For more control over groups of elements, a container or subgrid element can be added.
Specify a max-width that corresponds to the width of the other rows (or any other value relevant to the design intent).
The container (subgrid) can be centered by setting the left and right margins to auto. Alternatively, you can now use Flexbox for this. Simply set the Display control in the Position section to flex and BAM…all types of cool layout controls pop up.
Now you’re ready to add your content. Drag-n-drop content elements into the container or subgrid as you see fit. These elements will stay restrained to the width you set in the previous step.
The items can be positioned within the subgrid columns or container in the same way they can be positioned in a normal column.
For more centering, positioning and alignment options, check out this tip.
Use the HTML Element for adding your own code snippets or exports from other apps such as Form Builder and Responsive Content Slider.
Place the HTML Element where you want the custom code or object to appear. This works great for all types of objects, from menus and web forms, to cool slideshows.
These objects can be exports from our apps like Form Builder, but also be exports from 3rd party apps.
The code can be inserted into the HTML box on the Design pane. In the example above the code for a slideshow is shown.
The HTML Element can be positioned and styled just like other elements with borders, backgrounds, etc.
Yep, creating a larger box for adding and editing the code is on the development roadmap. ☺
Stylesheets and other resource files can be linked using the Head (or Footer) boxes.
You can use the ‘Preview on…’ button on the toolbar to view them in the browser.
Positioning elements is easy…but there are so many possibilities that this may seem daunting at first. Let’s summarizes our options.
The Display property plays an important role when it comes to the placement of elements. Most elements are displayed block by default. They take up all available horizontal space, and will always stack on top of each other.
Setting the display to inline-block places the elements next to each other. Just like block elements they can be ‘moved’ from that position using margin and padding.
Using display: inline places the elements on one line, just like inline-block. However, this time margin and padding will not have any vertically impact.
More details about placing and aligning elements using these display properties are included in this secret tip »
Using the float property is yet another option for placing elements next to each other. Floats were originally intended for text wrapping around other elements such as pictures. However, floats work really well for many layout constructs, including building an entire responsive grid system!
Flexbox offers all the layout options that floats bring, and more. However, it can not be used for text wrapping and large layout constructs shift around when loading. Don’t let that last part scare you though, within the grid we've started to use flexbox as our preferred method for arranging elements.
The position property provides additional rules for placing elements. The most most common values for this property are static and relative.
Nothing new here, both behave according to the (display) rules mentioned before. Relative positioned elements however can also be ‘pushed’ using the top, left, right and bottom properties.
An absolute element can be positioned anywhere using the same offset properties as relative elements.
A fixed positioned element always stays at the exact same position, also when the page is scrolled.
These last two values should be used with care in a responsive desig. Here’s a bonus tip » that helps taming the super powers positioning offers.
It might take a little to get used to…but once you do you’ll be pushing these elements around like a boss!
Block level elements will always stack. Even if their widths are constrained (using max-width for example) with enough space for both to sit on a single line.
The picture element is a good example. We opted to use block and a max-width: 400px as default value for them in our grid framework. This way centering them is as easy as setting the margin values for the left and right both to auto.
Block level elements naturally flow to the top-left of their parent. They can be ‘pushed’ from that position using top or left margin. Padding has the same visual effect but extends the background of the element.
Block level elements that do not take up the full space can also be left-aligned, right-aligned or horizontally centered using the auto values for theses margins.
Setting the margin-left to auto pushes a block element to the right side of the parent. A right margin can then be used to move it back a little. As mentioned above, setting both the left and right margin values to auto will horizontally center a block element within the parent. Inline-blocks behave differently here.
A convenient method for placing elements next to each other within the same parent is using the inline-block value for the display property. The width and height properties continue to be respected by the browser, similar to how they work for block level elements. However, inline-block elements can not be centered with the margin controls.
In this case centering can be achieved through the text-align control for the parent element. Selecting the parent (column or container) and setting text-align to center under the Typography section will center all its children.
The inline-block navigation links above have been centered as just explained. The inline display property works in a similar way. As expected, this will always place the elements inline — margin and padding will push the other elements away, but only horizontally and never vertically.
Just as the inline-blocks, inline elements can be right-aligned and centered using the text-align control of the parent container.
Another characteristic of inline and (inline-block) elements is that they only take up the space they need. Space can be increased using the padding or width controls.
Elements can also be pushed and by adding padding to the top or left side of the parent (column or container) element. It will keep them aligned!
And yea, automatic vertical centering is not possible using this property set. Luckily we have Flexbox now!
From float to flex.
Using the float property is yet another option for placing elements next to each other. This method is often used — and was originally intended — for pictures with text wrapped around it.
Float can also be used to push the elements to the far right (or left) of the containing parent element.
Although floats work really well in most cases, sometimes there are unintended side effects (although less now older version of IE are rapidly disappearing).
One effect is that the parent element does not automatically take up (minimally) the same height as the floated element. This isn't always noticeable if the parent doesn't use a background color or image, but it is something to be aware of.
Another example is that the order of the elements changes when they are floated to the right.
The element that was positioned first (left) in the HTML order, will be visually positioned on the far right. This can be undesirable when the float: right is removed at a breakpoint.
For these cases it is nowadays better to use Flexbox — with the widespread browser support this is something we @CoffeeCup are increasingly doing.
The icing on the CSS cake.
Static is the position value applied by the browser if no other value has been specified. These elements behave exactly as you would expect, according to the rules defined by the display property. In most cases that will be stacking and floating to left (block elements).
Relative positioned elements behave very similar to static elements with two exceptions. First of all they allow you to apply an offset value. An offset of left: 10px will push the element 10 pixels from the left, very similar to the element would shift when a margin would be applied.
Secondly, a relative positioned element creates a coordinate system for its children. This coordinate system serves as the reference point for any offset values the children might have. When using an absolute positioned element in a section, the parent container will almost always need to have a relative position.
An absolute element can be positioned anywhere in the design using the same offset properties as relatively positioned elements. These values are relative to the nearest ancestor that is not positioned static.
Element that are positioned absolutely are taken out of the flow, taking up no space and not influencing the position of the other elements. Usually the z-index property is increased to make sure the element is visible on top of the other elements.
Absolute positioned elements also possess a secret power: they can be stretched. This can, for example, be used to create perfectly fitting overlays that change to a semi-transparent color on hover.
In the example above an absolute positioned container with button is used as overlay. Using zero values for all four offsets ‘snaps’ the container within the parent. On hover the transparency is changed from 0 to 1 (with snazzy transition effect).
When the document body is the nearest positioned element providing the reference point, an absolute positioned element moves along when the page is scrolled.
An element with position: fixed uses the viewport as its coordinate system. This means it always stays at the exact same position, also when the page is scrolled.
The same top, right, bottom, and left offset properties are used to place the element.
A navigation bar or header is sometime positioned fixed to keep it in view, even when the page is scrolled. Another example is a button or icon that links back the top of the page or some other important page section.
All these controls are really powerful but there’s one thing to keep in mind. In the world of endless screen widths where content naturally flows down, they should be used with moderation and wisdom.
You can switch to other pages in the project using the drop down under the Pages icon in the toolbar. You can also change pages names and copy & paste content between them.
Simply select the page you want to view or work on from the drop down under the Pages icon on the toolbar. You can also use this menu to add empty (blank) pages or duplicate existing pages.
The ‘Manage Project’ option opens the page manager.
Double-clicking a page name allows you to edit the page name. Simply click out of the box or use the tab key to save the change.
You can ceate subpages by dropping a page another page. Pages are reordered when they are dropped in-between pages. In this case you will see a single horizontal line.
You do not need to duplicate pages to reuse certain elements as the footer or navigation. You can select any element, container, column or row and paste it onto the any other page.
Since these elements share selectors (class or type) design changes with automatically apply to all of them, no matter what page they are on.
Automatic content updates will come soon.