- Download CoffeeCup Responsive Site Designer 4.0 from our website for free. This download was checked by our built-in antivirus and was rated as virus free. CoffeeCup Responsive Site Designer lies within Development Tools, more precisely Web Development. The most popular versions of the program 4.0, 3.0 and 2.5.
- Easily switch between addresses; For example, from a work-in-progress to a live production site. Or go ftp-free by syncing with the CoffeeCup hosting platform. Get a custom domain name or use your own. Connecting is easy, simply use your CoffeeCup credentials (email and password).
CoffeeCup Software Visual Site Designer N(P)uncunal Web Project. Aintree Trailer Park 2435 Huron Conc. Huron-Kinloss Township Bruce County, ON N2Z 2X3.
Elements
Elements are the most basic building blocks of a webpage. They have been organized into categories to make it easier to locate the one you seek. We placed the most frequently used elements such as Layouts, Containers, Text and Media at the top of the pane.
Further down you can find Buttons like for using as Links, for Paypal or just regular buttons. Then, you can find an Icons section for the Font Icons and Social Icons.
The last category consists of Form Elements that can help to create sophisticated responsive forms. Each of these categories is addressed in a bit more detail below.
To add elements to your design, simply drag and drop your selections onto the canvas. You can also click the element and it will automatically appear on the canvas. Rearrange items using drag and drop too!
If an element offers multiple options, such as Heading 1-6, use the little down arrow to view the element variations and choose your desired option.
A Useful Tip!
If an element links to other locations (such as a Link or to an image) the URL and destination info is configured on the Element pane > Selected Element Properties.
Responsive Site Designer V1 & V2 videos
Working with our responsive apps is intuitive, fast & easy.
Of course we would say that, right? There’s plenty of proof for that though, and it’s not just the great customer testimonials and designs! On a rainy Atlanta Saturday one of us (Bob in this case) was playing with the app and created a nice and clean responsive design in under 30 minutes!
In addition, he recorded what he was doing and showed it to our team on Monday. We liked it so much that we forced him to cut up the video, write some instructions and share the project. See what he created below:
His creation process is summarized in 5 steps with 8 short videos that collectively take under 20 minutes to play. Hard to believe? Just follow him along as he explains and shows how he did it!
— Suzanne from The CoffeeCup Team
Important note before we get started...
This tutorial was written using RSD V1's Coffeegrinder desktop-down workflow. If you are using RSD V2, Bootstrap or Foundation then the workflow is reversed (mobile-first). We suggest that you toggle the breakpoints so that you can follow along with the steps. To do this, click the Toggle Breakpoints icon in the top menu and select Disable All Breakpoints from the dropdown list.
A responsive design in 8 short videos
Hey everybody, this is Bob. I totally had not expected to be making this 5-step article or 8-video tutorial following that rainy Oct 3rd Saturday. 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. With that, let’s jump right in.
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.
Coffeecup Site Designer V4
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.
Step 4-A: Styling the middle of the page
Next up is the mid section of the page. In about 30 seconds the dull left-aligned sub-title is transformed into something fitting: the font is set to Montserrat (as well), with a blue-ish color, the text is centered and transformed, and more space is added. The first part of the video shows these changes.
For the row with the three columns, the placeholder is updated by selecting a real image. Then the Max-width is increased to 330px and the image is centered by checking the auto boxes under the left/right Margin settings. The style changes for the text underneath the image will look familiar by now.
With the first image/text column completed, I can use the same trick as with the navigation buttons: to style the other 2 images and headings I just need to give them the same class. After changing the auto-generated class of the first image to travel-image I could have selected each of the other two images and added that class from the drop down. And then repeated this step for the headings. In this cases I opted to add the classes for both element and then to simply duplicate the column, achieving the exact same result.
With that behind us, it’s just a matter of replacing the images and updating the texts. The previous columns with the image placeholder can be deleted (which I do in the next video).
Step 4-B: Adding a ‘call to action’ section
The next video is about adding a call-out section with explanatory text and an action button. First a new row is added (from the Layout pane), then dropping in a paragraph is straightforward. The paragraph style is adjusted by changing the font type to Georgia with increased font size. Decreasing the line-height and adding opacity make the paragraph fit better in the design and the text easier read.
To keep the paragraph restrained in the middle, I unchecked the none box next to Max-width and restricted it to 800px instead. This way the paragraph won’t stretch continuously on larger screens. As we’ve seen before, checking the Auto boxes under left/right margin will center the paragraph.
The video also shows more of how the text editor works. I triple-clicked the paragraph to start editing and formatting text. Formatting part of the text is just a matter of highlighting it with the mouse and changing the style with the formatting controls on the right side.
Using a special class name makes it easy to reuse these styles throughout the site. In the video, I use the class name bold for text that is bolded in the paragraph. Now anytime I want to bold something all I have to do is highlight it and give it that same class name.
The video closes by setting up the footer of the page and styling the action button. The footer is a new row with a Text Link element dropped in. For the action button, the typographic styles and background color are updated. The good old Georgia font this time, instead of Montserrat!
The button is positioned in the middle by setting the text align to center for the parent column. A little thing to remember, for elements that are displayed as a block, you can use the margin auto checkboxes for centering. For inline-blocks, such as the button, you use the text-align of the parent. The Display control can be found in the Position section of the design pane.
Step 4-C: Wrapping up the design with a footer
To create the footer links we are almost repeating the process as for the navigation buttons. Just this time I used the Text Link element; giving the link the class name footer-link and duplicating it 2 times, I will be able to style them all at once. Initially they will stack. This is because the navigation buttons were already displayed inline-block by default. To position them next to each other go to the position section on the design pane. From the display drop down select inline-block and the links will immediately plop into line. Centering them works just as with the navigation buttons, select the column and under typography press center on the align control. Again a bit of work on the typographic settings (yup, back to Montserrat) and some margin to add the needed spacing. Wrapping it up with some text edits and dropping a horizontal rule to separate the footer from the action section. BAM!
I added a little bonus to this video too…
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.
Coffeecup Site Designer Tutorials
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!
Coffeecup Site Designer Tutorial
Clearly there is more to this app than the above. You can add pages, links, create crazy hover effects and transitions, export the project for further editing in any code editor, or publish and share for feedback and collaboration. You can also preview in your local browsers, for example allowing you to tinker with this project while reading in another window. But that does not all have to be mastered in day 1, getting started now with nice clean designs is key to making cool responsive impressions later. After all, practice makes perfect.
Coffeecup Site Designer Review
Please go ahead and download this project for tweaking or studying. A copy of the app that made all this magic is available for you to buy or try as well. Any questions, shoot me or the team a note in the forums or social media, we’re always happy to help!