Responsive Site Designer Video Tutorials

Step 1: Adding Content Elements

RSD uses a grid system to make sure the page elements are neatly aligned at every possible display width. An empty grid with two rows and a few columns automatically opens when the app starts.

This way, you can start adding page elements like paragraphs and buttons right away. Simply click on the Elements tab on the right, and drag & drop any element you fancy into one of the empty columns.

In this first step, I drag in a Heading 1 into the first column at the top, and place a Picture element into the second row, first column. These will later be styled to a nice website heading and large cover image.

Step 2: Understanding The Grid

Grid-based layouts consist of a series of rows and columns, very similar to a spreadsheet. The rows and columns provide an organizational framework that helps to create order in the way information is presented.

These rows and columns are managed on the Layout pane. Here you can add rows, change the width of columns or combine columns with the simple click of a button.

This template uses a 12-column grid, meaning that each row can hold that many columns. Each column can stretch or ‘span’ part of a row. If a column has a span-width of 6 it means that half of the row is taken up by that column.

In this next video, you see how I adjust the layout - the structure - of the page. On the Layout pane I add a new row. Then, still on the Layout pane, I merge the two smaller columns on the right in the third row, into one. I also added an additional row to the page, now leaving two full rows above and below the main image. The video also shows how the span drop down can be used to change the width of a column.

If you add a row and it goes to the wrong location, you can use the directional arrows on the Layout pane to move it up or down.

If the total width of the columns exceeds the available width, the last column(s) won’t fit. They are automatically pushed down and positioned below the first column. This is frequently done to create horizontal space for the content on smaller displays. The ‘stacking’ of columns is one of the most used responsive actions. We will come back to stacking in Step 5 when I show you how to adjust the layout for smaller screens and how Breakpoints work.

Step 3: Content Driven Design

People visit websites for their content. They come over to read a story, learn about a product, or understand a topic. Colors and fancy imagery are supporting ingredients. They would be meaningless if they don’t fit the goal and message of the site. Content is king, and RSD offers an excellent environment to get your website story straight.

Prioritize and organize the content using headers, paragraphs, descriptive images, buttons, and separators. Carefully forge the words (triple- or right-click to edit text) and present the message in a concise way. Make sure all content elements have enough display space and are logically grouped.

In this next video, you see how I edit text and add additional content elements. Just triple-click on a text element to launch the inline editor and type (or paste) the message inline, right on the screen. I change the heading to say Visions.

Then I add a short navigation menu. The menu consists of three Button Link elements; just grabbing and placing them into the second column creates the basic structure. I use a class name (nav) so I can style duplicated buttons all at the same time (later on). The text on the button is changed in Text Edit Mode again (triple- or right-click to activate).

Right-clicking on the button and selecting duplicate creates two additional navigation links. Again, because they share the nav class they can all be styled at once.

The Heading 4 in the next row starts a new page section. This is followed by another new row under the heading. The width of the single column in the new row is reduced to 4 spans. This column gets a Picture element and I place a Heading 6 underneath the image.

Using the same duplication method as with the navigation, I selected the column for the picture/heading section, then right-click and used the duplicate function twice.

A real image, finally! Yep, such a real live image makes a big visual difference. However, you won’t see the full impact until we start to work on adding the design layer in the next step.

Double-clicking on the image placeholder, brings up the Design pane on the right. From there the Local Resource option allows for adding the Visions image to the project and select it for this image.

Step 4: Adding Design Aspects

Instead of content crammed into a pre-existing layout with arbitrary design elements, the content-driven approach creates unique web sites that are true to the original goal. With the message and content elements in place, initial design aspects are easy to add, and supporting images easy to find.

The Design pane gives access to the design powers of CSS3 through intuitive controls. Design with backgrounds, spacing (width, margin, padding), typography, shadows, colors and more.

To make the photo of the man stretch across the page, I first set the Max-width of the picture to none. Because the column span is set to 6 the photo will initially only stretch ½ of the page. To fix this, I did jump over to the Layout pane and merged the two columns. Boom — there’s the big, sharp, eye-catching image we were looking for.

Since the navigation buttons share the same class, I can design styles for all of them at the same time. However, before working on them, I positioned the buttons in the center of the page by setting the Align control to center for the parent element. The Column in this case — action performed in the Typography section of the Design pane. Also the navigation row Background is set to (close to) black

Next, I selected one of the buttons and changed the font (for the nav class) to Montserrat. The background color is made transparent.

That last step to finish up the top section of the page is to adjust the spacing between elements. The top and bottom margins are increased for the page title and navigation links. The top margin of the picture is removed, pulling it up against the navigation row. To give the image the same width as the navigation row, the padding was removed from the column.

Bonus! Hover styles for the navigation and footer links

A mouseover effect helps to show what’s clickable. For the footer it’s a subtle effect, for the navigation the hover change is easier to notice.

To add styles for when an element is hovered simply change the State drop down on the Design pane to hover. Then work with the design controls just as before. As can be seen in the video, I only adjusted the font color of the links. You can test out the hover effect by clicking Preview at the top.

All pretty slick for about 20 minutes of work, right? All that’s left is making sure the design looks good at any display width!

Step 5: Using the viewport slider and breakpoints to create great user experiences for all screens and devices

This is where things get exciting. A lot of the magic that powers Site Designer is related to the intuitive process of adapting the layout, spacing and sizes so that the design remains easy to read and use on any size device or display width.

To see what the design looks like at different display widths, simply grab the slider located at the top-right of the app and move it left (or right). The layout ‘flexes’ and adapts to the width changes. This, however, will not always be enough for all content. A block of text can become unreadably small and long, for example. If at any point the content is not presented at its best, you can add a breakpoint by clicking the plus sign on the left of the slider.

From there, everything related to the layout and design, from font-size to column structure, can be changed using the tools on the Layout & Design Panes. Let’s look at the three-column structure on the lower half of the page.

In the video, the slider is used to examine the page at every display width. At about 560px the three images feel a bit small and squished. So I added a breakpoint by clicking the + button in the top left corner. Then, on the Layout pane, the column span is increased to 6 from 4. This is repeated for the second column. The third column is instructed to take up the full width using a span of 12. Other changes can be made as well at breakpoints, you will for example see in the video that I adjusted the spacing as well.

At around 420px, another breakpoint is used to make the navigation friendlier for mobile viewers. Selecting a navigation link and changing the Display to block will do this. This stacks the navigation buttons.

A few other changes are made here, some spacing adjustments pull up the content a bit. In this case, at smaller display widths, it is nicer to stack all three middle images. Changing the column spans to 12px wil do the trick. And just like that a fully responsive page has been born!