Converting a static VSD theme into a rockin’ responsive design

If you’re like me, the sound of rebuilding your fixed-width website sounds like a daunting task. However, I found that with a little bit of planning and with the power of Responsive Site Designer the process was smooth sailing. Why a responsive design? We make a pretty convincing argument on why you should adapt or die. It is a good read if you’re still on the fence about switching...

I’m less code-savvy than my CoffeeCup peers, so Visual Site Designer has always been my top app for site building. But, as we all know, VSD only uses absolute positioning, the layout cannot flex and scale. So anyone visiting the site on a mobile device would always get a zoomed-out version that is impossibly hard to read or click — what a bummer! Also Google has begun adjusting their indexing to favor these mobile-friendly sites over all others, which means going responsive is critical to your site’s survival on the web.

Switching to Responsive Site Designer is better not only because it gives you the ability to create a mobile-friendly website, but because it also provides design tools for creating improved, more modern, websites. But the real gem is the ability to view the site at any possible width and make adjustments for that width while designing. How does that work? Let’s jump straight into that!

Onward to the Transition

I’ve decided to dissect a Visual Site Designer theme and convert it to a device independent design using RSD. We have so many popular designs from which I selected my personal favorite: Colorful.

Original VSD Theme

Since we already know what we want the end result to look like, all we need to do is recreate the general display and move the content, text and images, over.

Alright ladies and gents — let’s get to building!

Download the project images. If you haven’t ordered a copy of RSD yet, order it right now for only $129 (for a limited time...)

I’m going to start this project with a blank theme. Go to File > New From Theme and select the option Blank Desktop Down Pixels (Blank DDP). This option will allow us to create the Colorful design at full screen first, before responsifying it for smaller screens.

Preparing The Grid

With a blank project in front of us, let’s configure the base of the design. After examining the original design, I believe we will need five rows to hold the content for the homepage. These rows can be divided and merged into individual columns (just like a spreadsheet) to divide up the blocks of content. But first, let’s tell RSD what the default styles should be for all rows. This saves us from having to re-enter the same standard settings each time we add a row.

To do this, select the row by hovering over the column. In the top left you’ll see a handy indicator that says Column with a small pull down option. Click that and choose Row from the drop down options. Now go to the Design pane on the right. Just below the ‘Style bar’ you find the ‘Apply To’ style selector drop down . If we change this to Type the style settings will be applied to all elements of that type, rows in this case. Now scroll down and set the Max-width to None from the Dimensions section. This will allow all the rows we add to the project stretch the full width of the viewer’s screen.

Now we’re ready to add four more rows to the layout. The fastest way to do this is from the Design pane. Hit the duplicate button four times, or hit the add row button from the Layout pane. To make it easier to see where these rows begin and end, you can turn on the grid row outlines under the Show Guides icon on the toolbar.

We also want to set a background color to the page. Again, use the selection drop down in the live preview area, but now select the grid. Then jump over to the Design pane and under style, again, choose Apply To: Type. Scroll down to background and set the color to: FFD733. Wow that’s bright — feeling colorful already! Now yellow will blanket the design by default. When we want part of the layout to be a different color, we’ll apply that new style to the specific rows or columns.

Intro Section

Select the top column and from the Design pane, give it the class name intro-col. With the ‘Apply To’ drop down set to ‘class’ the style setting will only be applied to columns that have this class. Only this particular column uses this class, so any changes we make will only have an effect here. Now we can scroll down to the max-height and min-height controls and set them to 30px. In the next step you will see exacty why I did this.

Logo Row

Now let’s work on the row with the colorful headline. Select the 2nd row (make sure you have row and not the column selected please...) and give it a class name logo-row. To make the row a bit more spacious give it some bottom padding of 50px. Then scroll down and add a background color, in this case set it to a dazzling 1DA79F greenish color.

Next, double click on the column to launch the design controls. From the Background section, add the image header_bg.png by selecting Resource from the Image drop down. Set the background position to the top right with no repeat. Also make sure the size is set to automatic. All settings are shown in the image below.

Now the row is ready for us to add elements. We’ll first need to divide up the row so that we can place the 2 headers next to each other. A subgrid is perfect for this. Go to the Elements pane, at the bottom grab a subgrid element and drop it into the green row. (You can also double-click elements to add them). You know the routine, it needs a class name — in this case I named it logo-subgrid.


Do we always need subgrids?

The short answer is no. But in this case, since the rows don’t have a maximum width, the content would stretch indefinitely. To constrain the content and center it in the middle of the row, subgrids come really handy.

To make sure that the content stays nice and centered for the viewer (and not ever expand out too wide), we set the max-width to 1000px and used the right/left auto margincheckboxes to keep it centered. Spacing it out a bit, I applied top margin of 50px and bottom margin of 7px. Now you will also see the paint drops appearing, they seem to be dripping from the top row!

Select the top subgrid-column and name it logo-subgrid-column. I used flexbox here to position the upcoming content. To do this, scroll down to the Position section and select Display Flex. This will launch the flexbox controls. Go ahead and make sure they are set with the following values:

  • Direction: Row
  • Wrap: No Wrap
  • Justify: Flex Start
  • Items: Stretch
  • Content: Stretch

The subgrid is ready for content elements. From the Elements pane, drag in a heading 1 into the top subgrid-column, then give it a class name top-logo-heading. In the Typography section (on the Design pane) I selected the Century Gothic font, specified a size of 70px and made it white. Space is created on the left through a 20% left-margin. Next, give the word a triple-click on the screen to launch the inline editor and change the text to *colorful.

Now add another heading 1 to the same column. Give it the class name logo-heading-small, then change font to color FFD733, with a font type Carter One and size 24px. Triple-click the words to change the text to Website. Click off the element to close the inline editor (or use the Finish button). Next is to rotate the text orientation so that it is at a slant angle. To do this, scroll down to the Effects section under the Design pane and set rotate to -9 deg Now it can be pushed down by giving it a top margin (of about 50px).

For the lower subgrid-column, we’ll use that to hold the shadow so that it sits just below the text. First, merge the 2 columns on the Layout pane. Then prop in a picture element and name it logo-shadow. From the Picture drop down select Local Image to add shadow.png. Then scroll down to the Dimension to set the max-width to 400px. Some margins need to be added to the picture as well. I gave it top margin of -24px to pull it up and a left side margin of 25% to push it to the right.

Before we wrap up this row, let’s jazz up the star in the corner. A triple-click on the text will launch the inline editor. Highlight the star and give it a class name and change the color to FFD733. I made it a little bigger too at 90px to make it really stand out.

Navigation Row

This next row will be used to hold the site’s menu buttons. The original design has these buttons aligned to the left of the page. While this can certainly be done in RSD, I deviated a bit in the rebuild because I think these buttons look more appealing centered.

The usual procedure is at play here. Give the third row a class name nav-row with a background color of 1DA79F. Next I added a container which will hold the navigation buttons. By using a container, I will be able to keep the buttons in the center of the design without worrying they will move apart from each other. I used the class name nav-container and gave the container a max-width of 800px then auto centered the margins.

Button Time! I will add and style a single button first, then duplicate it so that all four buttons match. First, grab a button link element and name it nav-button. The typography settings I tried to mimic as close to the original as possible. I kept the button font color white but made it bold and used a font-size of 20px. The button background color is set to green 36B2A9. In the border section, I rounded out the corners by tweaking the radius to 40px for both X and Y.

With the styles set for that button, hit that duplicate icon three times. Now, with all four buttons in place, triple click each one to change the text to Home, Services, About, and Contact respectively. Link destinations can be set in the design pane in the Href box.

Truth, the buttons will need to be positioned a bit better. That’s simple enough! Just select the nav container and set Display to Flex. For the flex settings this time choose Wrap and Justify: Center. Now, if we select a button and set flex-growth (in the Flex section) to 1, they will take up the full width of the container and be equal in width. Why they all react when I have only one button selected? Because they all share the same class, ain’t that awesome! This is what the page looks like now:

This row is about done. It needs a little tweaking so that the design isn’t so flat, but we’ll come back in a little bit. Time to move to the main content section…

Main Row

The next row is reserved for the meat of our design. Give the 4th row a class main-row. Give the row some padding so the content will have generous space around it. I set the top padding to 70px and lower padding 10px. The background for the main section is red, so I set the background color to Ef1E1E.

Similar to the logo row, we’ll need to use a subgrid to divide up the drop zone for the content. Drag-n-drop a subgrid to the red row with a class name main-content. Restrict the max-width to 1000px, and center it using the auto center margin checkboxes. From the Layout pane, divide the top sub-grid row into two equal columns (6 Spans each ). This will give you four drop zones (columns) in the red row. Don’t forget, you can turn on the section indicators under Show Guides in the toolbar of the app. :)

The original VSD design used images pretty heavily. This included the logo text up top and the large hero text in the body. That’s not a good design technique as the words cannot be read by search engines. By using actual text the bot can read and index it properly.

Jump over to the Elements pane, grab a heading 1 and add it to the left subgrid-column. I am using class name main-heading for this one. Go ahead and change the text to LET’S GO PLAY and set the font to Carter One with a large size of 60px, Aligned to the right and a white FFFFFF italicized font. Lastly, I added a tiny bit of font shadow to give it more volume. Check the Shadow box and give it a blur of 2 and off-sets of 1.

This text will needs to be place at about the mid level with the ball image that we’re about to add so I gave it a top margin of 120px.


Inspector Gadget

Don’t underestimate the power of the Inspector pane. When working with like subgrids and containers, the Inspector pane can show you how the sections are structured. Mouse over any of the layout indicators to highlight the corresponding section on the page. You can double click any layout or content element to pull up their design controls. You can even drag-n-drop to rearrange the order of elements.

To complete the hero text section, add another heading 1 and add the same class name. To pull up the second heading element add one more class; I used sub-heading. Now any style changes to the firts element will apply to both, but any style changes to the second element will only apply to heading 1 elements that have both classes. How cool is that! Set the top-margin to 0. Now change the text to WITH COLORS. Then, with the inline editor still open, highlight the word WITH and change it to yellow FFD733.

The original VSD design has some green paint spilling on the word GO. This was done using an image. Unfortunately, this is something CSS can not do just yet. Therefore, I chose not to do that and use text only, so that the entire message could be read by the search engines.

Picture time! There are two images in the body of this design. One for the large ball and another subtle shadow right below the text. First, add an image element beneath the second heading element in left-side subgrid column. To import the image, use the drop down next to Picture in the Design pane and add the shadow.png image. It needs to stretch the width of the text to give the appearance that it is being projected by the text. To do this, set the max-width to none. I also applied a left margin of 20%. This makes the placement consistent with the shadow below the ‘colorful’ text — light can only come from one direction after all!

The next picture element can be dropped into the top right-side subgrid-column. I gave it the class main-image then replaced the placeholder by adding the ball.png image. Enlarge the ball by setting the max-width to 400px.

Now it is time for the detailed message of the page. I deviated again from the original here as the VSD version has a single paragraph that spans across the page. That is hard on my eyeballs though and makes the text feel more tedious to read. Plus, I’m a chatty-kathy, so I made my paragraphs a bit longer and I decided to instead split the single paragraph into two.

Our layout for the red section still has the two lower subgrid-columns so I first added a paragraph large element to one side and named its class paragraph-main, with a font color white FFFFFF at a size of 19px. Top margin 24px and bottom margin 30px were also applied. Then add a medium paragraph to the other sub grid column and apply the same class. Boom! Lastly, add a text link element that says Read More to the right-side subgrid column and color it yellow FFD733.

If you personally like it better as a single paragraph, just merge the subgrid-columns together in the Layout pane then add and style the elements the way you want. RSD makes it easy to try new looks and experiment with new layouts.

Footer Row

This final row will be used to hold our footer info. Start by giving the row a class name, I would suggest something like ‘footer’, and give the section some space by adding 20px top padding.

Since I need to put content on both sides, but centered in the middle, I will again use a sub-grid element to lay it out. Drop in a sub-grid element, restrict the max-width to 1000px, and from the Layout pane, divide the top sub-grid row into two equal columns. Next, add a paragraph short element to the top left sub-grid-column and triple click to change the text to © 2016 Colorful, Inc. All rights reserved.

The paragraph can be copied over to the right-side column. There change the text to Colorful Website | CoffeeCup Software. For sure we want that to link to us! To do so select ‘CoffeeCup Software’ and in the text editor pane click on the + link button. Simply paste in a link in the pop up box and set appropriate styles for linked text. Presto!

To add the navigation links beneath it, we’ll use a container element. When you add the container it sometimes can show very small, but it will expand once we start adding the links. Give the container a class name footer-container.

I used flexbox on this container to align the links appropriately. Select the container and jump to the Position tools. Select display Flex and use these configurations:

  • Direction: Row
  • Wrap: No Wrap
  • Justify: Flex Start
  • Items: Stretch
  • Content: Stretch

Lastly, add a text link element and give it a class name footer-nav. Style the link with red Ef1E1E with small 13px font size and a right-margin of 3%. Then hit the duplicate button three times and adjust the text as needed.

Then bam! You got yourself a good-lookin’ footer — and a groovy page designed! Oh, yea, the second subgrid row can be deleted...


HTML Entity Cheat Sheet

Wondering how I added the © symbol in the footer? While these are not built into RSD, there are tons of websites that list HTML entities. A little trick is to copy the image of the symbol with your mouse and paste it into your project. RSD will understand the entity and display the symbol. and are two of my personal favorite sites for grabbing these cool superscripts, trademark symbols, arrows, bullets and more. Plus, this trick works with Responsive Email Designer too.

Finishing Styles

With the structure and content in place we can tweak the design so that it does look less, well...flat. Let’s start at the top and work our way down.

Now I want to give a few rows some depth. Applying a gradient is a nice way to make these rows stand out. Gradients can be selected from the design page under the background section, the Image drop down provides this option. RSD gives you four color areas. In this project, I only use the first and last color boxes in the gradient selections. Here is a row-by-row breakdown of the gradient colors I used in this rebuild:

Nav-row starts out lighter up top with a gradual dark color moving downwards. So for the first box: 84D0CC and the fourth box the color used is 36B2A9. I also added top and bottom margin to the nav container to space everything out a bit.

Main-row uses F53711 for the first color box with a 90% Stop, with D22200 in the fourth box set at 100% Stop.

Footer-row uses all four color boxes for the gradient effect. From left to right:

  • FFFE579 - 0 Stop
  • FFEA94 - 10 Stop
  • ffd733 - 66 Stop
  • dbb727 - 100 Stop
Fun Effects!

RSD offers some cool controls to bring life to your design. This includes transitions, effects, as well as the ability to adjust styles for certain states.

For example, the navigation buttons are more effective when they can indicate to the viewer what page they are at in your site, or signal that they are clickable. The best way to relay this is to set styles for hover states as well as when the page is active. Let’s look at the home button and we can set these special directional settings to them all at once.

Select the home button, and go to the setting in the Design pane. Under Style, use the State drop down to select hover. With that selected, we can now style how we want the button to appear anytime someone has put their mouse over the button. I changed the font color to yellow FFD733. For dramatic effect, I also changed the background color to 1DA79f.

What is even cooler is that the effect does not have to be instant. With the regular state selected, go to the Transitions section. Then select Ease-in Ease-out and set a dureation of 0.2s and delay of .2s respectively. Hit Preview in the toolbar and mouse over the buttons? Snazzy, right!?

Now, add a new class active to the home button, and change the button background color to 1DA79F. This will indicate to the reader the page that is currently active. On the services page add it to the services button and remove it from the home button and so on. Now on each page it will be clear to the visitor where he is at.

Time to Responsify

With the web page completed, we’re ready to examine it at smaller sizes using the handy Slider. Grab the slider with your mouse and begin sliding it to the left. I notice that the ‘let’s go play…’ text starts to wrap at about 860px, So I decided to add a Breakpoint right there. At that point I can configure layout and style changes for screens smaller than that size. Breakpoints are the secret weapon in responsive design, and with RSD all it takes is a single click to add a breakpoint to your design.

Simply click the line directly above the slider and you’ll see a white dot appear. When the dot is lit up in the center, that means it is active and saving any changes made to apply at that specific size.

First Breakpoint at 1000px

First, make sure that the breakpoint is active. The content in the main section is a bit out of whack, for example the shadow below the text starts to move up because the image shrinks. Seeing the shadow out of place makes them feel unrealistic. Stacking the text and image is a better option. Select the subgrid-column with the text heading, and go to the Layout pane. Here, change the width to 12 spans.

Repeat for the subgrid column with the beach ball. Then set the margins for the picture to auto to center it.

Back to the headings. First of all they will need to be centered. With the first heading selected, just go to the Typography section on the Design pane. Select text-align: center. The space above the first heading seems a bit much now, I lowered that top-margin to 20px.

The shadow from the headings needs to be tamed as well. The max-width is reduced to 40px and the margins are set to auto. To focus the shadow a bit more on the right, 60px of padding is added. The ball picture seems a bit close. A margin of about 60px makes it better.

The last adjustment I made at the size is to the main-paragraphs. The font was a bit too large, so I lowered them to 17px so they would be easier to read.

Second Breakpoint is added at 580px

At about 580px nothing is terribly wrong, the navigation buttons adjust and wrap happily. However, I feel certain things could look a bit better for screens that are smaller. And here’s the rule, add a breakpoint whenever you feel the design can be improved a bit!

I feel the double paragraphs became too squished. So I decided to stack them for better visibility. With the subgrid-column selected, go to the Layout pane and change the span to 12. Repeat for the second subgrid-column. I did the same for the footer columns. There, I also centered the content in the second column. The heading is centered using text-align. The links by setting the flex justify property to center.

As I examine the rest of the design at this size, I think it is best to decrease the font size of the logo heading so they aren’t so massive. Change the COLORFUL text to 50px and set the left-margin to 0px. The shadow picture also gets a reduced margin and a max-width of 400px.

More changes are made to the text and images in the main section as well. Font sizes are being reduced, and the shadow picture now gets a max-width of 300px. You can play with the settings to get a result you like best, or have a peek at the project file you can download below for the exact settings I used. And with that, the website will look crazy good, no matter what device the visitors use to browse my website!

Now you can marvel at your creation!

Use the slide bar to move across screen sizes and see how the design holds up. This way my interpretation of the VSD theme. You may unlock all sorts of cool possibilities with Responsive Site Designer and I invite you to tinker with the settings yourself. The clickable controls make it so smooth to try on new looks, sizes, colors, layouts and more. Your creativity can truly run wild. Don’t forget that for a limited time, you can own this app for only $119 (that’s a massive $70 savings)!

Download the Colorful homepage theme below, or check out the next tutorial where I show you how to add new pages or duplicate pages within the Colorful project.

Are you building sites with Foundation Framer or Bootstrap Builder?

Try this tutorial using this colorful theme too. Just remember that the workflow is opposite. You would build mobile-first and work your way out to larger screens. Below are the project files to help you out. :)