Mac SEO Blog

If you are familiar with adding a fixed width blog to your EverWeb created website, then you will know that adding a responsive blog to a responsive website will be just as easy. All you need to do is add a page to your website and use the Blank Responsive Theme Template. Choose the ‘blog’ page style and click ‘Select’ to finish. If you are using one of EverWeb’s Responsive Theme Templates, you may find that it also includes a blog page style.

Responsive Blog Design

The responsive blog main and archive pages look almost identical to those found in the fixed width blog Theme Template. Notice, however, that there is no header in the responsive blog main page. This also the same for regular responsive pages as it is in keeping with Responsive Web Design philosophy which dictates that headers are not necessary  as responsive design always uses the full width of the page at all times.

The blog main widget is, therefore, right at the top of the page. Whilst it may appear to be not a full width object, it actually is. Click on the widget to select it then go to the Metrics Inspector. Here you will notice that the ‘Full Width’ checkbox has been ticked and the left and right margins have been set at 30 pixels. When you add other full width objects to the page, for example, the navigation menu widget, you can move the widget below it just by drag and dropping it.

Finally, you will also notice that the ‘Made with Love with EverWeb’ logo in the footer area is contained within a Responsive Row as it is a fixed width object.

The blog posts page is also laid out in exactly the same manner. The only visible addition  are the new Maximum Image Width and Height options for images in the blog posts page Widget Settings so that you can fine tune them for the blog posts.

EverWeb’s under the hood improvements in version 2.8 also means that if you use the Disqus or Facebook Comment Engine for visitor comments, both are also responsive ready.

Remember that when designing your blog posts page that the Blog Post Preview Window is where you add objects that will appear on all blog posts. The Preview Window is like a ‘live’ Master Page and the rules for using it are exactly the same as for regular responsive pages.

Before Converting Your Blog…

Many EverWeb users are converting their fixed width websites in to responsive websites. If you are planning to do this read the following tips first:

1. Backup your project file. This is something that you should be doing anyway on a regular basis. You should have Backup and AutoSave set on in the EverWeb-> Preferences menu in addition to your usual computer backups.
2. Make a copy of the project file that you are going to convert. Whilst it is possible to duplicate regular pages in your project file, you cannot duplicate a blog, so duplicating the project file gives you the chance to try a conversation safely as you always have the original project file if you want to go back to the original file instead.
3. Changing your Page Layout from Fixed Width to Responsive, or vice versa, is a fundamental design change. You cannot undo this action once you have done it. EverWeb will warn you when you change the Page Layout type of this fact. This is also why it is recommended to follow the above steps before you start converting your site and its blog.
4. Alternatively why not test out converting one of EverWeb’s Fixed Width Theme Template blog pages before your own? Some of EverWeb’s Fixed Width Theme Templates include a ‘blog’ page style e.g. the ‘Antarctic’ and ‘Briefcase’ themes. Experimenting on converting such pages may help when it comes to converting your own website’s blog.

Converting Your Blog

To convert your blog you will need to change the page layout for all the parts of the blog: the blog main page, blog posts page and blog archive page. For each page, change the Page Layout in the Page Settings tab to ‘Responsive’. EverWeb will warn you that this step cannot be undone and do you want to continue. Click on ‘Yes’ to continue.

What Happens to the Blog?

You will probably find that when you convert your blog (or any other fixed width page) that objects may appear displaced over the page. Objects that are on top of other objects in fixed width layouts will now appear beside each other instead. Depending on the complexity of your blog design it can be a little daunting when you first see how the way the page is now arranged.

Take some time to become familiar with where objects are on the page. You can then group objects together to reconstruct your page in to a responsive design. The more complex the page design, the more time it will take to reconstruct the page, however, usually it should be a reasonably quick task to do. Due to the fundamental page design differences between fixed width and responsive page design there is no way to automatically convert pages from one layout style to the other.

It is recommended that you have ‘Show Layout’ set on in the EverWeb’s Window menu so you can see where the objects are . You may also find that objects in the footer have moved in to the body area.  Also don’t forget that there is no header section either so the elements of your fixed width header will need to be reconstructed in to a responsive design layout as well.

What Next?

The next blog post will look at strategies to convert fixed width pages in to responsive pages so that you can do so quickly and easily. The hints, tips and strategies for converting pages from one page layout to another are the same for all the components of a fixed width blog so we will cover the whole topic in one post.

If you have any questions, comments or suggestions, please do let us know in the  Comments Section below. Thanks!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw