#RESPONSIVE SITE DESIGNER SOFTWARE HOW TO#
#RESPONSIVE SITE DESIGNER SOFTWARE FULL#
#RESPONSIVE SITE DESIGNER SOFTWARE SERIES#

However, you won’t see the full impact until we start to work on adding the design layer in the next step.ĭouble-clicking on the image placeholder, brings up the Design pane on the right. 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.Ī real image, finally! Yep, such a real live image makes a big visual difference. This column gets a Picture element and I place a Heading 6 underneath the image. The width of the single column in the new row is reduced to 4 spans. This is followed by another new row under the heading. The Heading 4 in the next row starts a new page section. Again, because they share the nav class they can all be styled at once. Right-clicking on the button and selecting duplicate creates two additional navigation links. The text on the button is changed in Text Edit Mode again (triple- or right-click to activate). I use a class name ( nav) so I can style duplicated buttons all at the same time (later on). The menu consists of three Button Link elements just grabbing and placing them into the second column creates the basic structure. Just triple-click on a text element to launch the inline editor and type (or paste) the message inline, right on the screen. In this next video, you see how I edit text and add additional content elements. Make sure all content elements have enough display space and are logically grouped. Carefully forge the words (triple- or right-click to edit text) and present the message in a concise way. Prioritize and organize the content using headers, paragraphs, descriptive images, buttons, and separators. Content is king, and RSD offers an excellent environment to get your website story straight. They would be meaningless if they don’t fit the goal and message of the site. Colors and fancy imagery are supporting ingredients. They come over to read a story, learn about a product, or understand a topic.

#RESPONSIVE SITE DESIGNER SOFTWARE HOW TO#

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. The ‘stacking’ of columns is one of the most used responsive actions. This is frequently done to create horizontal space for the content on smaller displays. They are automatically pushed down and positioned below the first column. If the total width of the columns exceeds the available width, the last column(s) won’t fit.

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. The video also shows how the span drop down can be used to change the width of a column. I also added an additional row to the page, now leaving two full rows above and below the main image. Then, still on the Layout pane, I merge the two smaller columns on the right in the third row, into one. In this next video, you see how I adjust the layout - the structure - of the page. If a column has a span-width of 6 it means that half of the row is taken up by that column. Each column can stretch or ‘span’ part of a row. This template uses a 12-column grid, meaning that each row can hold that many columns. Here you can add rows, change the width of columns or combine columns with the simple click of a button. These rows and columns are managed on the Layout pane. The rows and columns provide an organizational framework that helps to create order in the way information is presented.

#RESPONSIVE SITE DESIGNER SOFTWARE SERIES#

Grid-based layouts consist of a series of rows and columns, very similar to a spreadsheet. These will later be styled to a nice website heading and large cover image. 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. Simply click on the Elements tab on the right, and drag & drop any element you fancy into one of the empty columns. This way, you can start adding page elements like paragraphs and buttons right away. An empty grid with two rows and a few columns automatically opens when the app starts. RSD uses a grid system to make sure the page elements are neatly aligned at every possible display width. But.if you like it and find it useful I am glad I did it! Please send me your feedback or virtual high-fives on Twitter.

I totally had not expected to be making this 5-step article or 8-video tutorial following that rainy Oct 3rd Saturday. To do this, click the Toggle Breakpoints icon in the top menu and select Disable All Breakpoints from the dropdown list. We suggest that you toggle the breakpoints so that you can follow along with the steps. If you are using RSD V2, Bootstrap or Foundation then the workflow is reversed (mobile-first). This tutorial was written using RSD V1's Coffeegrinder desktop-down workflow.

Responsive site designer software