Mac SEO Blog

In the blog post ‘EverWeb Responsive Design Primer‘, we explored the background to Responsive Website Design and how it is implemented in EverWeb.

In this post, we will create a new responsive website in EverWeb. If you have already created a fixed width website using a Centered or Left-Aligned Page Layout and want to convert it to a Responsive website design, it is best to start a new project file and recreate the existing site from scratch. The Responsive Page Layout uses a different approach to web design than a fixed width design so changing the page layout of an exiting fixed width page to a Responsive page layout is not recommended. If you do want to do this, however, EverWeb will warn you beforehand that changing the page layout cannot be undone.

We will cover converting a fixed width site to a Responsive website in detail in a future post.

Creating a New Responsive Website Project

The great thing about building a responsive website in EverWeb is that almost all the features of EverWeb you used in developing fixed width websites still apply, so as usual create a new website project using the ‘Create a new website’ button on EverWeb’s Projects Window.

New Choices with Theme Template Chooser

When you create a new website project, the first thing you do is create a new page using the Theme Template Chooser. The Chooser has been enhanced in EverWeb 2.8 so you can filter Theme Templates based on whether you want to see ‘All’ of them or  ‘Fixed Width’, ‘New’ or ‘Responsive’ Theme Templates. It is worth exploring some of the over 20 new Responsive Theme Templates to give you a good idea as to how to structure your website’s responsive pages.

In addition to filtering, the Theme Template Chooser adds a Responsive blank page to the ‘Blank’ Theme Template a new ‘Blank Responsive’ Theme that includes a blank ‘Home’, ‘Video’, ‘Image Gallery’ and ‘blog’ pages. For the moment, select the ‘Home’ page style of the ‘Blank Responsive’ Theme Template.

New Page, New Ways…

Now that you have added the first page to the new project, it is worth looking at how the page differs from the Fixed Width ‘Centered’ and ‘Left Aligned’ Page Layouts. In the Page Layout section of Page Settings tab in the Inspector Window, you will see that the Page Layout is set to ‘Responsive’. The ‘Content Width’ and ‘Header Height’ fields are greyed out. As mentioned in the previous post, as responsive web design uses Full Width objects a ‘Content Width’ value is not needed.

In the same vein, ‘Header Height’ is also unnecessary as a ‘header’ is just like any other Full Width object on the page. Although there is no header, there is a Footer to provide an ‘end’ section to the page. Scroll down the page to the Footer. You will see that it contains a ‘Responsive Row’ within which is the ‘Made with Love with EverWeb’ image file.

Responsive Row & Other Full Width Objects

The ‘Responsive Row’ is, in fact, a Responsive Row widget. Click in an area of empty space in the Responsive Row widget then go to the Widget Settings button.  Here you can change the ‘Responsive Row Name’ from the default ‘Responsive Row’ to something more relevant such as ‘Page Footer’. The Responsive Row naming shown in the Editor Window is useful when you have many Responsive Row widgets on the page.

The Responsive Row widget is special as it acts a a ‘super container’ that can hold non-full width objects. If you have objects that you do not want to be full width e.g. TextBoxes, shapes or in this example, the ‘Made with Love with EverWeb’ image file, add a Responsive Row widget to the page, then with the widget still selected use the Toolbar to add a TextBox, or Shape, or drag and drop an image file from an external source or the Assets List on the Responsive Row widget. You can even drag and drop other widgets on to the Responsive Row widget. This is useful when you need to use non-full width widgets such as the PayPal, Live Photo and Facebook widgets. Use the Widget Settings to adjust the spacing and justification of the objects within the Responsive Row widget.

For more information on the Responsive Row widget, click on the Help ‘?’ in the top right hand corner of the Responsive Row Widget Settings or check out our Responsive Row Widget YouTube video. The video will take you though how to fully use the widget.

The Responsive Row widget is a good example a full width object in responsive design. Most objects that you add to your Responsive Page Layout are designed to be full width. Many of EverWeb’s existing widgets have been updated in version 2.8 to be full width capable. When a widget is not full width capable, EverWeb will advise that you can add such an object by placing it in a Responsive Row widget.

Whilst the Responsive Row widget is incredibly useful, the new FlexBox, Responsive Image Gallery Widget and Text Sections widgets have great features and scope. And remember that most widgets do not need to be enclosed inside a Responsive Row widget, unless you have a specific need to do so.

Adding Objects to The Page

Start building the page by adding a Navigation Menu widget. First, click in the main body area of the page so that the Responsive Row widget in the Footer is no longer selected. Next, drag and drop the Navigation Menu widget on to the Editor Window. When the widget is added, it is placed right at the top of the page as a full width object. Style the widget in the same manner as you have always done in EverWeb.

Next drag and drop an Image Slider widget on to the page. When added, the widget sits as a full width object immediately beneath the Navigation Menu widget. Add some images in to the Slider, again in the same way as you always use the Image Slider.

Now add a TextBox to the page using the Toolbar. Again it is added as a full width object, directly under the last added object – the Image Slider widget. Edit and style the text as you want in the same way usual. Remember that if you do not want the TextBox to be full width, add a Responsive Row widget first then add the TextBox whilst the Responsive Row widget is still selected.

Embedding Objects

In this example, I have already added a TextBox, but not to worry. I can add a Responsive Row widget to the page which will be added immediately below the TextBox. Click back inside the TextBox to select it, then secondary click. In the menu that appears, scroll down to ‘Pick Layer’. You will notice that your TextBox has a checkmark against it as it is already selected. Further down the menu is the option ‘Embed In’. This option is used to to embed objects, such as the the TextBox, in to a Responsive Row widget. You will see the two Responsive Rows on the page listed: ‘Responsive Row 1’ and ‘Page Footer’. Click on ‘Responsive Row 1’. The TextBox is now added to the Responsive Row widget. Go to the Metrics Inspector and uncheck the ‘Full Width’ checkbox and then use the TextBox’s selection handles to change its width so that it no longer full width.

You have now created the basic of your first responsive page by adding and manipulating full and non-full width objects. There are many ways you can manipulate objects on the page and we will look at this in the next instalment!

If you have a question, please let us know in the Comments Section below. Thanks!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw