Are you ready for the easiest and fastest way to create Responsive websites without any coding or “techie” skills?

For years we have been working on the perfect Responsive website building tool and we’re finally coming close to an official release!

Now you’ll have the familiar, easy to use web site building tool you’re used to with the all new Responsive Page Layout mode.

Since Responsive Websites work a little different than regular, fixed width websites we wanted to prep you with a few basics on what a responsive website is and how you will build one in EverWeb.

What is a Responsive Website

A responsive website is one that resizes and repositions the text, images and shapes on your website depending on the size of your visitor’s web browser.

That means that on their desktop they may see images and text spread out horizontally, but on their mobile device the same text and images will adjust to stack vertically, one above the other, in order to fit within the browser width.

For example, if you are on your desktop computer, resize your browser window to see how our website fits within the width of your web browser without causing the horizontal scrollbar to appear.

This also means that only one website is required for mobile, tablet and desktop devices.

How to Build a Responsive Website in EverWeb

EverWeb 2.8 has a new Page Layout mode called ‘Responsive’. If you don’t need a responsive website, you can continue using EverWeb as you always have with absolutely no changes.

But, if you’re ready for a new, responsive site, follow along. We have a set of videos that will teach you everything you need to know about Responsive Websites in just 20 minutes.

To acess the Responsive Page Layout mode go to the Inspector and select the first tab for Page Settings. Scroll down until your see ‘Page Layout’ and from the drop down menu which will probably say ‘Centered Layout’, select Responsive.

You can also press the ‘Add Page’ button from the Toolbar and see all the new Responsive Templates (Tip: Go to the EverWeb menu and select ‘Check for New Templates’ to download all the new Responsive Templates).

We can start a website based off of the Blank Responsive Template as shown below;

Responsive Pages Vs Fixed Width Pages

You’ll notice some differences between Responsive Layout vs the Centered or Left Aligned, fixed width Layouts.

First, as you add TextBoxes, Shapes, Images or Widgets they get stacked vertically and cannot be moved anywhere on the page like you are used to with the Fixed Width Layouts.

If you look at the screenshot below, we added a shape, TextBox and image to a Responsive Page. They were automatically set to full width and stacked one after the other. If you try and drag them, you can only drag them up and down, to change the stacking order.

Now, you might be thinking that this takes away the flexibility and design of the EverWeb behavior you are used to. 

But you don’t have to worry, we thought about that too.

EverWeb 2.8 comes with a number of new widgets under thw Widgets tab in the top right. One you may become very used to is the Responsive Row widget. 

With the new Responsive Row widget you can group any existing widget and EverWeb will automatically adjust the position of all grouped widgets as the web browser is resized. Our new video tutorial shows exactly how the Responsive Row Widget works.

Images In Responsive Pages

You may notice as you add images in a Responsive Page, as shown above, they get added as Full Width. We make the “Hero” images automatically when you add an image which means they don’t get distorted as you resize your web browser. Instead, they fill the area needed with their content without being stretched.

A few tips with working with images in Responsive Mode;

1. You will need to use larger images to appear properly in larger screens such as desktop web browsers
2. You will want to make sure EverWeb’s image optimizations are enabled in the Preferences (they are enabled by default) to make sure your website loads as fast as possible
3. You can change how your image is displayed from the Inspector->Shape Options tab and adjusting the options under the ‘Fill' section

Building Your First Responsive Website

As you are probably already used to, we have created a number of video tutorials to get you started.

This tutorial will walk you through the steps of building a Responsive Page in EverWeb 2.8. New tutorials are coming out all the time, and our Free Video Tutorials page has even more tutorials to get you going.

In just 20 minutes you can learn how to create a Responsive Website but if you have any questions, our discussion forum or 24/7 customer support is here to help you.

How Can I Start Using EverWeb 2.8 and Responsive Design Mode?

EverWeb 2.8 is currently in public beta on our forums. The Responsive Page Layout is a work in progress and will always continually be updated.

We hope to have an official release of EverWeb 2.8. in a few weeks. For now, you can try the EverWeb 2.8 public beta, which we used to build our own website, and lets us know what you think.

Although we don’t know of any major issues, we do recommend working on a back up of your existing website.

EverWeb can backup your website automatically from the Projects Window. Just select the Project File from the Projects File Window and click the little arrows to the right. Then select ‘Make Backup...'