In the first blog in this series, we looked at how to prepare for converting your website from a fixed width one to a responsive one. In our second blog we looked in detail at what exactly Responsive Website Design is and how it works within EverWeb. In this instalment we get down to the actual work of converting your site!
Creating An Example Site
To start, let’s create an example EverWeb project file to work on.
- Launch EverWeb then select the button to ‘create a new website’.
- If you already have EverWeb open select File-> New website from the menu.
- From the Theme Template Chooser select the ‘Algonquin’ theme in the left hand column.
- From the list of page types displayed on the right, select the ‘Blank’ page style.
- Click on ‘Select’ to finish.
Converting Your First Page
As you can see from the blank Algonquin page, it is:
- A fixed width page 1000 pixels wide.
- The page uses both page and browser background options.
- The page has no header
- There is a semi-transparent white, full width, rectangle across the top of the page
- An Image Slider widget, displaying an image of two hikers, sits in the background with the Navigation menu, a button, TextBoxes and the semi-transparent rectangle on top of the widget.
- there is a ‘Blank’ Title box beneath the Image Slider Widget
- The Footer has it’s own full width rectangle, in a mid-grey color.
- The Footer also contains the EverWeb logo and some outdated looking social media buttons.
If you have followed the previous blogs in this series, you will know that there are a number of different ways in which we can convert the page. you could duplicate the page and work on the copy, or you could create a new website project with a blank responsive page and use the project file we just created as a reference point. In this simple example, we are going to make a duplicate page on which we are going to work on…
Secondary click on the page ‘Blank’ in the Web Page List. Select ‘Duplicate’ from the menu. A new page, Blank 1′ is created. Double click on the page name and rename it as Responsive Blank’. Press Enter to confirm the name.
Now let’s convert the page! Go to Page Settings tab of the Inspector Window and change the Page Layout from ‘Centered Layout’ to ‘Responsive’. You’ll see a warning message about changing the possible effects of changing the page layout. As this is a copy of our original page, click ‘Yes’ to continue. You have now converted your page in to a Responsive Page!
Reconstructing The Page
As you can see, many of the objects that were layered on top of each other are now either beside, or below, each other. Typically objects cannot be layered in the same way or manner in a responsive page layout as they can in a fixed width page layout. You will also notice that there is only a page background, so there are no vertical bars running down each side of the page. From this you may have already deduced that your original page will have to be modified to fit in to the way in which Responsive Web Design works. During this process, though we will try to retain as much of the structure of the original page when recreating it as we can.
Recreating the Footer
Let’s start with what’s easy and that’s the Footer. At the bottom of the page you will see the mid-grey colored rectangle and the four social media buttons. We are going to recreate the rectangle with the four buttons on top of it:
- Start by clicking on the Widgets tab in the Inspector Window.
- Drag and drop the Responsive Row widget in to the Footer Section of the page. This will be used to replace the background mid-grey rectangle on the page. It’s always a good idea to name the Responsive Rows in your page. In the Widget Settings, replace the existing Responsive Row Name ‘Responsive Row’ to ‘Footer Row’.
- We can now add a color to the Responsive Row widget. The Responsive Row widget should already be selected. You can tell if it is as you should see the Responsive Row Widget Settings displayed in the Inspector Window. If not, click on the Responsive Row widget in the Footer.
- Once the Responsive Row widget has been selected, click on the Shape Options tab in the Inspector Window. In the Fill section, click on ‘None’ and change the menu option to Color Fill.
- You will see a color swatch displayed below the words color fill. Next to the swatch is the color wheel. Click on the color wheel. The Color Picker will display. Click on the Pipette. then move over to the mid-grey rectangle and click on the mid-grey color.
- The Responsive Row will now appear with a mid-grey, full width background color! Close the Color Picker.
- Now that you have the new background rectangle, delete the original mid-grey rectangle from the page.
- The next step is to update the social media icons. Double click in the Responsive Row widget. You will see its Widget Settings displayed in the Inspector Window.
- Next go to the Insert Button menu and select the FaceBook Page button. Enter a URL (you can always change this later if you want) and press ‘OK’ when finished. The button is added to the Responsive Row.
- Although the FaceBook button is selected, click on the mid-grey Responsive Row widget instead. Now add the YouTube button. Once this has been added, again reselect the Responsive Row widget and add in the Twitter button. As Google+ is no longer available, you don’t need to add the Google+ button in to the Footer. You may want to add another button of your own choice instead. In my example, I will add a Pinterest button so I have four buttons in my Footer.
- Once you have finished adding the buttons, select all of them. Now go to the Metrics Inspector and make the height and width 32px instead of 64px.All of the buttons will shrink in size.
- Finally, we need to add the EverWeb logo image in to the Responsive Row widget. As it is a white logo on a white background you may need to take a bit of time locating it. Once you have found and selected it, secondary click on the image and select ‘Embed In-> Footer Row 1. The image will be added in to the Responsive Row in the Footer
- To finish the Footer, let’s add some spacing between the buttons as they are all side by side at the moment. We should also add some top and bottom spacing to the Responsive Row widget as well. Double click on the mid-grey Responsive Row widget background color. The Responsive Row’s Widget Settings will appear. In the Padding section, set the Top value to 10, and Bottom value to 20. Set the Insert Margin value to 30. The Footer is complete.
- Experiment with the different Responsive Row settings to see their effect on the buttons and image. You can also rearrange the order of the buttons and image just by drag and dropping them from one place in the Responsive Row to another. If you have four buttons, try putting the EverWeb logo image in the middle of them. Alternatively try moving the buttons around so they are displayed in a different order in the Footer.
- Now that the Footer is complete, delete the old Social Media buttons from the page.
In the next blog, we will work on the top part of the page to add a navigation, a company logo, page titles and subtitles and a full width background image to the page.