Mac SEO Blog

In the previous post, we discussed how objects are stacked in Fixed Width page layouts and how you can change the order of objects within the stack, even when you have a Master Page attached to your page.

In this post, we explore how objects in a Responsive Page Layout in EverWeb are handled when you are building your responsive website.

The Same but Different…

If you have been a long time user of EverWeb you will probably know already that when it first came out you only create websites with a Fixed Width Page Layout. This all changed in EverWeb 2.8 when the Responsive Page Layout was added.

One of the design goals that we wanted to make sure of was that you could use EverWeb with a Responsive Page Layout in exactly the same way as you did with a Fixed Width Page Layout. For example, adding a new page, editing a TextBox, drag and dropping objects, accessing menu options and and so on would all remain the same as before. This goal was achieved, however, the concept of Responsive Website Design is in many way different to Fixed Width website design. As such, whilst EverWeb works in the same way as before, the fundamentals of designing a Responsive website is distinctly different to designing a Fixed Width website.

…Different but the Same

If you are designing a Responsive website in EverWeb for the first time, take a look at EverWeb’s YouTube video site to help get your started, or the EverWeb User Manual within the product which has a whole chapter dedicated to get you quickly productive.

If you have already been using EverWeb’s Fixed Width Page Layout for your site, you may want to convert your existing site to a responsive one, or you may simply want to design a completely new site. These are the kinds of circumstances where you will quickly find out that everything is different but the same. Again, check out the EverWeb User Manual to get up and running quickly.

Object Handling in Responsive Pages

One major area of design difference is how objects are handled on the page. In a fixed width design page design, objects can be stacked one on top of the other. In a responsive page design this is not possible. For example, create a Fixed Width page then add a rectangle to it. Next add a triangle. The two shapes appear on top of each other so you will se the triangle as it is the same color as the rectangle that it sites on top of. You can change the color of the triangle e.g. to yellow, to see the two shapes clearly on top of each other.

Now go to the Page Settings tab and change the Page Layout from ‘Centered Layout’ to a Responsive one. You will see that the yellow triangle sits on the top row, the rectangle shape is below it on the second row and the EverWeb logo sits beneath the rectangle on the third row.

If you try to stack any of these objects one on top of the other, you will find that it is not possible. Instead the objects will appear move to a different row, again one on top of each other. Now try to move the bottom object further down the page so that it is on its own. You will see that this time the object just snaps back to sit under the second object.

In responsive design, stacking one object on top of another is not usually possible and all object rows in a page must be contiguous to one another. There are many reasons as to why this is necessary, but essentially it is because a responsive page is scaleable that it is a requirement that the page structure is maintained at all times, at any scaling point. Objects on the page have to stay properly contained within the page at all times, so one of the ways to achieve this is to have the objects ‘flat’ on the page rather than allowing them to be ‘stacked’.

Options! Options! Options!

The Responsive Web Design approach may be frustrating at first if you have come from a Fixed Width design background. It may take time to get used to how responsive design works and the pros and cons of it. Here are a few tips that may help you out…

1. Background colors and images. Most objects and widgets can have a background color, or image, added to them without the need for a background shape being added.
2. Group Objects Using the FlexBox and Text Section widgets. Placing objects near to each other can be easily achieved with these two widgets so it’s easy to group text, images and buttons together as you want.
3. Images. If you want to have a frame around an image in a responsive page, you can add a line to an image using the Shape Options tab. You cannot use a Picture Frame, however, as the frame is actually an image in its own right so adding it to an image would make the two images appear side by side. Instead, it is better to add a frame to the original image using an image editor then use this image in EverWeb instead.
4. Check Out Third Party Widgets. There are some great third party solutions from EverWeb Widgets, EverWeb Garden and that may give you the solution you need. Note that some of these third party widgets are free, some are paid for widget.
5. Graphics Editors. You may find that a graphics editor becomes more useful if you need to include a ‘stacked’ type object on your page. Export the complete image as a jpg or png file then drag and drop the image in to EverWeb.

Embracing Website Design Differences

Responsive Web Design offers a different way of developing your website and has many advantages over traditional fixed width designs. The advantages (discussed in the EverWeb User Manual) of responsive web design, however, makes the design approach more difficult. In some ways you may feel constrained in what you can do, as the example of stacking objects, illustrates. It’s a different paradigm, though. Once you start working with responsive pages in EverWeb, you will start to find that there are many different possibilities and solutions at hand. It is just thinking in a different way, out of the box, or maybe within a ‘boxes within boxes’ approach that typifies responsive web design.