Conversion Therapy 1: Going Responsive in EverWeb

If you’re a long time EverWeb user, you probably built your website around the model of having one page design specifically for desktop devices and a comparable mobile page design for mobile devices. In EverWeb this is achieved by creating two pages each using a Centered Layout page layout style. The pages have a ‘fixed width’ of approximately 1000 pixels for desktop pages and of about 320-370 pixels for mobile pages. The two pages are then linked together using the ‘Mobile Settings’ section of the Page Settings tab.

The addition of Responsive Website Design in EverWeb 2.8 meant that you no longer had to setup and maintain two different pages in your website to cater for different device types. EverWeb’s Responsive page layout always maintains a display width of 100% of your browser’s page width so your pages will automatically scale to whatever device they are being displayed upon.

So, what’s the best way to convert your website from a ‘fixed width’ page layout to a responsive page layout? Here are some guidelines to help you plan your conversion from a fixed width site to a responsive site…

1. Check Your EverWeb Version. To create responsive pages in EverWeb, you’ll need to use EverWeb version 2.8 or higher. The version of EverWeb you are using is displayed on the Projects Window. You can also use the EverWeb=> About EverWeb menu option to find the out which version you have. If you need to update your version of EverWeb use the EverWeb-> Check for Updates… menu option.
2. Should You Create a New Project or Modify Your Existing Project? When it comes to converting your project from one page layout type to another, you can either modify a copy of your existing project or create a completely new project file instead. Usually it’s be better to create a new project file using the blank responsive page from the Blank Responsive Theme Template. You can then have your existing project open beside the new project which makes referencing the old with the new, and copying objects from one to the other, easy and less mistake prone.
   You could create new, blank responsive pages in your existing project file and copy objects from one page to the other. You could even change the page layout type of your existing pages from Centered Layout to Responsive and then ‘reconstruct’ the page. Both of these approaches are usually not recommended. In the first instance it’s easy to mess up your existing project especially if you are inexperienced with responsive web design and second, it’s easier to compare and construct your new site by having the old and new sites side by side. You can copy objects from one to the other a little at a time which will make the task easier.

Back Up of Your ProjectWhichever approach you take, it’s always advisable to back up copy of your ‘live’ website project. It’s also advisable that you work from a copy of your live project. To back up and/or make a copy of your project file, go to the File-> Projects Window… menu option. When the Projects Window is visible, click on the up/down arrows to the right of your project file name. Click on the ‘Make Backup…’ or ‘Duplicate’ menu option. Follow the instructions.

3. Use Your Desktop Page as Your Guide. Unless your live website has only mobile pages in it, it’s recommended that you model your responsive website based on the desktop pages of your live site. The reason for this approach is that your desktop pages are going to be the most content rich. This means that you can remove content from responsive pages if you need to, or select when content appears and when it should be hidden. If you work from the mobile pages of your live site, adding additional content in to your responsive page may be harder to do than it is to take out content.
4. Start by Converting the Simplest Page. It may be tempting to start your website conversion with the Home page. However, this may not be best as the Home Page may be quite complicated. If this is your first time converting a website, you may find it best to start by converting the least complex page in your site. This will help you learn about how responsive website design works and lets you experiment before moving on to the more complex pages in your site. You may also want to consider starting hy converting your Master Page if your website has one. The Master Page will usually contain fewer objects to convert.
5. Use Responsive Design Mode in Safari. Even if you are not a fan of using Apple’s own web browser there is one feature that is invaluable for when testing your site and that is Responsive Design Mode. This mode allows you to test your pages on any Apple device from the iPhone SE upwards to a 1920 x 1080 desktop desktop device. Testing your pages for all device types is essential to any website, and especially more so for responsive sites. To enable Responsive Design Mode in Safari, go to the Safari-> Preferences_> Advanced menu and tick the box beside ‘Show Develop Menu in menubar’. The Develop menu will appear from which you can toggle ‘Enter Responsive Design Mode’ on and off. If you use a different browser, look for similar options to help with simulating testing of your site on different devices.
6. Expect Compromise. Converting your site from a fixed width one to a responsive one will probably mean that there will be a certain amount of design compromise needed in your new Responsive design. Often though, these design compromises will be small. It may also take a bit of time to find solutions to design problems that may crop up, so take your time and use the EverWeb Discussion Forum if you get stuck!
7. EverWeb Feature Changes To Be Aware Of… Responsive web design uses a different design methodology to Fixed Width design which means that you may need to work in a different way. However, EverWeb’s features work in the same manner as with Fixed Width website design. There are only a couple of EverWeb features that you use in a fixed width layout that need to be implemented in a different way in a responsive design.

   The first is Scroll Position. If you have used this feature in a fixed width page layout you will have used the ‘Insert Fixed Scroll Position’. In a responsive page layout, you should use the ‘Set Selected Shape as Scroll Position’ option from the Scroll Position button instead. The Insert Fixed Scroll Position’ option does not work in a responsive page layout. You can, however, use ‘Set Selected Shape as Scroll Position’ in both page layout types.

   The second feature to be aware of is Picture Frames. Whilst you can use these in a Fixed Width page layout, you can’t use them in a responsive page layout. If you try, you will find that your picture frames and pictures will not be side by side and not one on top of the other.

In the next instalment of Conversion Therapy, we will look at how Responsive Web Design works in EverWeb itself.