Your First EverWeb Responsive Website 5: Fixed To Responsive!

This post is also available in: Français (French)

If you’re a long time EverWeb user, you’re sure to be excited about its new responsive capabilities introduced in version 2.8. For many of you, now is the perfect opportunity to convert existing fixed width websites in to responsive ones. If you’re considering the jump, here are some tips on how to make it as easy as possible…

1. Always work with a copy of your project file as changing the Page Layout from Fixed Width to Responsive can’t be undone. It’s also worth remembering that you can’t duplicate a blog in an EverWeb project file so duplicating the project file is the best way to go. To make a copy of your project file, go to the Projects Window. Click on up/down arrows to the right of the project file name in the ‘Recent Projects’ list. Select ‘Duplicate…’ from the menu. When the duplicate has been created it will be added to the Recent Projects list with the same name as the original but with ‘Copy’ added at the end.
2. Always keep an original reference source handy when redesigning your site. You can refer to this when editing converted pages. Either use your website’s ‘live’ page, the original project file (e.g. have the original and copy project files side by side) or duplicate each page in the project before as you convert it. A visual reference makes is easier to locate and reposition objects on the converted page to recreated the same, or similar, look as the original page.
3. When you change the page layout from Fixed Width to Responsive you may find that your page looks a bit of a jumble with objects all over the page, especially if you have a lot of objects on the page. Objects that were layered on top of each other in a fixed width layout, will now be displayed beside each other in a responsive layout. e.g. if you have used a shape as a background color. Removing such shapes that underly other objects is worth doing before converting if possible. If using Picture Frames for images, remove them before changing the page layout.
4. Some existing objects will become redundant in a responsive page layout e.g. the aforementioned background shapes. The same goes if you use a background shape for the Navigation Menu widget. It’s no longer needed as it’s included in the widget’s Widget Settings. Some objects, such as fixed width lines that are sometimes used to separate sections in fixed width pages, should be removed altogether as they do not work well in a responsive page. A clean, simple approach is better in responsive design.
5. Try a ‘Top Down’ approach. Even if your converted page at first looks like a visual frenzy, there’s a lot you can do to quickly get your page back in order. Try working methodically from the top of the page downwards. This, typically, will mean first locating the navigation menu widget. When you’ve found it, you may want to make it Full Width in the Metrics Inspector and turn on the widget’s Responsive Options in the Widget Settings. Drag and drop the widget to the top of the page.
   If you use TextBoxes, you may want to make them Full Width to help quickly organise your page. Alternatively, if you want to keep objects as fixed width, add a Responsive Row widget to the page and embed the TextBox(es) in to it (see the next tip for more info!P
6. Use the Responsive Row Widget. When changing the Page Layout to Responsive, you may have objects such as buttons, social media icons, images and text that would be better placed inside a Responsive Row widget. Social media buttons are perfect for such a task. First add a Responsive Row widget to the page.Next, secondary click on the object you want to embed in to the Responsive Row widget. From the menu that appears, select ‘Embed In’ and choose the Responsive Row widget that you just added to the page.
7. When using a Responsive Page Layout, the objects you place on the page will always be full width so how can you include a left and/or right margin? Some widgets and TextBoxes allow you to add ‘padding’ to full width objects, but there’s a better way. Select the full width object you want to add margins to and then click on the Metrics Inspector. In the ‘Size’ section of the Inspector, you’ll see the ‘Margins’ setting for Left and Right margins. Add the margin values that you want. The page will automatically adjust in the Editor Window.
8. Testing your page design is more important than ever! As you only have one page design (instead of two or even three) for all devices, it’s important to test on all devices, especially if you change your page design later on. Just because your page design looks good on one device type, it doesn’t necessarily follow that it will look good on another device type.
9. Design Decisions. So far we’ve reviewed the practical aspects of converting pages from a fixed width to responsive page layout. The process in itself may also require you to make some design change decisions along the way. Fixed Width and Responsive design approaches are not the same so you may find that you have to remove objects, use different widgets, or rethink aspects of your design and workflow when converting to a responsive page layout. This actually may prove to be a good opportunity to update your website if you haven’t done so in awhile!
10. Clean Up Time. Once you have converted your pages from fixed to responsive, you may want to delete any redundant fixed width pages in your project file. It’s also worth checking for unused assets that can be deleted. This will reduce the project file size so keeping editing the project file snappy, as well as saving disk space. Remember that before taking such steps, ensure that you have kept a backup copy of your project file safe in case you ever need to revert back to it in the future.

EverWeb makes converting your website from fixed width to responsive a relatively straightforward task especially if you take some precautionary steps and are open to the possibility of some design changes en-route.

If you have any thoughts or questions, please let us know in the Comments Section below.

This post is also available in: Français (French)