Mac SEO Blog

In the previous blog post, we touched upon preparing a fixed width blog in an EverWeb website project for conversion into a responsive blog and what to expect in the process. This post takes the process a step further with an in-depth look at how to quickly and easily convert your whole website from fixed width to responsive.

Adapting Your Website’s Design

When thinking about moving a website from a fixed width design to a responsive one, perhaps the most important thing to consider is the effect on your website’s overall design. Using a fixed width page layouts makes the distinction between mobile and desktop environments clear as you design a  page for each device type. You may even have designed pages specifically for tablets as well. In responsive design, these page designs merge to become one single, scaleable design. You may find that you may need to modify your existing design website to accommodate the new responsive paradigm.

The process of reinventing your website as a responsive one will also, perhaps, involve more testing than with a fixed width website.If you change a responsive page design it may have an effect on all device types, not just the device type the change is targeted at.

Preparing to Convert Your Website

Before you begin work converting your website it is worthwhile taking preparatory steps:

1. Backup your project file before you start. You should have a backup schedule in place for your computer already, and you should also be using EverWeb’s own project file backup feature as well.
2. Test that you can restore your backup. It is always a good idea to see if your backups are working correctly by restoring from one backup as a test.
3. Even with a backup project file in place it is always best to work from a copy of your project file and set up a test directory to publish to.
4. It may be useful to familiarize yourself with EverWeb’s Responsive design features. This will help you to more quickly convert your website as you will know which features and widget to use as you convert objects on the page to the new page layout.

Converting Your Website

Converting a fixed width website into a responsive one is done simply by changing the Page Layout field in the Page Settings tab of the Inspector Window from ‘Centered Layout’ to ‘Responsive’ for each page in the project file.

When converting pages, EverWeb will warn you that the change cannot be undone. The reason for this is that the page structures and design methodologies of the page layout styles are fundamentally different from each other. This is why it is best to work from a copy of your project file rather than using the original.

To create a duplicate project file, go to the Projects Window and click on the up/down arrows to the right of the project file name in the ‘Recent Projects’ list. Select ‘Duplicate’ from the menu. A duplicate will be created with the same name as the original project file but with ‘Copy’ added at the end. Open the duplicate project and rename it by double clicking on its name in the Web Page List, or by using the File-> Rename Website menu command.

Page Conversion

When you change the page layout from fixed width to responsive, it may appear that objects are scattered about the page. As a responsive page has no header, any header objects from the fixed width page layout will be placed in the main body of the page instead. You may also find that Footer objects have also been displaced in to the main body area.

Often the main task once a page has been converted is locating and reorganizing objects back to their respective places on the page. The following tips should help make this process faster and more streamlined…

1. Headers. Responsive design does not use headers as they are just regarded as full width objects. If you have a header on your fixed width page, move these objects back to the top of the responsive page and make them full width as necessary. Use a Responsive Row widget if you want to keep the objects fixed width.
2. Footers. Responsive web design does include footers so you may need to drag and drop any displaced footer objects back in to the footer area.  Remember to hold down the Cmd key when moving objects from the main body area in to the footer. You may also need to use a Responsive Row if you have footer objects that you want to keep as fixed width.
3. Make objects Full Width. Some of the objects on your fixed width page may have been full width. In the converted responsive page, locate such  objects e.g. the Navigation Menu widget, and make them full width again by checking the Full Width box in the Metrics Inspector. Drag and drop the full width object to its correct location on the page. TextBoxes, images and many of EverWeb’s widgets can also be made full width in a responsive page. If you prefer to keep some objects fixed width, place them within a Responsive Row widget so that they work properly .
4. Group similar objects together. Objects such as social media icons are often grouped together. You can collect such objects together in a Responsive Row widget. Start by adding a Responsive Row widget to your page and drag it to where you want it on the page. Next, secondary click on one of the social media icons and select ‘Embed In’ and choose the Responsive Row widget you have just placed onto the page. Repeat this process for the remaining social media objects. Use the Responsive Row Widget Settings to for spacing and alignment of the objects within it.
5. Remove any unwanted, unnecessary or redundant objects from the page. Using a responsive page may make some of the objects you have used on the fixed width page redundant. Typically these will be background color shapes and separator lines. When using the Navigation Menu widget, you can use the Widget Settings to add a background color instead of using a shape object. If you have used Picture Frames for images, these  will appear separate to the images and should be deleted as they are currently not supported in responsive pages.
6. Use Margins for Full Width objects. You can easily set a left and right margin for a full width object by using the Margin fields in the Metrics Inspector for any full width object. This is easier and more consistent than using padding options within widgets or the Insert Margin option for TextBoxes.
7. Responsive ready widgets. EverWeb 2.8 introduced new widgets that provide great design flexibility when designing pages for your website. The Text Section, Responsive Image Gallery and FlexBox widgets may give you design ideas and solutions when converting pages, for example, you may find it better to place the text from a TextBox in to a FlexBox widget. Many of EverWeb’s existing widgets have also been updated in version 2.8 so that they can be used at full width without needing to be placed in a Responsive Row widget.
8. Fixed width objects. There may be objects in your page that you want to keep as fixed width, or only work as fixed width objects (e.g. the PayPal widget). In these cases, embed such objects in to a Responsive Row widget.
9. Turn off mobile redirect on your page. In the Page Settings tab of the page, set Mobile Page to none so that no redirect takes place. This is optional as there may be instances where you do want to redirect when the page is viewed on a mobile device.
10. Testing. As mentioned earlier, this is paramount when using one design for all device types. Any change you make to the page design needs to be tested on all device types. We will cover testing in detail in the next blog post.
11. Look out for EverWeb updates! EverWeb 2.9 will add more responsive features to EverWeb. You will be able to select which device an object can appear upon, set a maximum width for full width objects and the Responsive Row widget as as well as being able to set your own breakpoints for mobile, tablet, and desktop devices.

In the next blog post, we will look at how to quickly and easily test out your new responsive page design before going live!

If you have any questions or comments, please let us know in the Comments section below. We’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw