Mac SEO Blog

For many website developers, a blog is a key aspect in a website’s development process. A blog is a great way to give your website visitors and customers more in-depth news, features or information that you cannot easily add to your website’s landing page. EverWeb makes it easy for you to create and manage your blog and you can even use it for discussions by adding either Disqus or FaceBook Comments as Comment Engines in your blog.

Fixed Width Blogs and Mobile Devices

Whilst adding a blog is a great idea, you may also find that it can create a problem. If you have created a fixed width website using a centered, or left aligned, page layout, or are using a Fixed Width Theme Template blog page, you may have noticed that the blog is designed only for use on desktop and tablet sized devices. So, how do you make it so that you have a blog that will work properly on all device types: desktop, tablet and mobile?

When you create a Fixed Width website in EverWeb, you will typically be using a Centered Page Layout. As ‘Fixed Width’ means that the width of your page is constant, your page width will always be the value set in the Minimum Page Width setting in the Page Settings tab of the Inspector Window. By default this value is 1000 pixels, so if you are using a mobile phone for example, the page will probably be about twice the width of the display of your phone.

Desktop and Mobile Pages…

The usual solution to this issue is to create a corresponding mobile page with a width of approximately 480 pixels, so you have one, for example, Home page of 1000 pixels for desktop and tablet devices and a corresponding Home page of 480 pixels for mobile devices. In EverWeb you link these two pages together in the Mobile Settings section of the Page Settings tab. For the Desktop page you set the ‘Mobile Page’ setting as ‘One of My Pages’ and choose the mobile page you want using the ‘Page’ dropdown menu. You would then go to the page you selected in the ‘Page’ dropdown and set the ‘Mobile Page’ setting for this page as ‘None’ and check the box for the ‘This page is for mobile devices’. When you publish your site, EverWeb will automatically add the code that’s needed to make sure that when the Home page is accessed on a desktop or tablet device you will see the desktop ‘Home’ page and when you access the ‘Home’ page on a mobile device you will see the mobile ‘Home’ page.

So far so good, but when you have a blog, you cannot use this type of linking.

Blogs on Mobile Devices

The solution to the problem is to use a Responsive blog instead of a Fixed Width blog in your website. If your website design is Responsive your blog main, posts and archive pages will automatically scale to any device that they are displayed upon, so you have nothing to do.

If your website uses either a Centered Page Layout, you may not have created a blog yet, you may have created a blog in Centered Page Layout or you may have created a blog in a Responsive Page Layout. Let’s look at how you would tackle each scenario…

Before You Start…

As you will be using two distinctly different types of Page Layout in your website, it is important that you familiarise yourself with Responsive page design in EverWeb if this is your first time working with responsive pages. Responsive pages work in a different way to fixed Width page design and may take some time to get familiar with.

Please check out the chapter on Responsive Websites in EverWeb in the EverWeb User Manual, our blogs and our YouTube videos on responsive web design in EverWeb before continuing if this will be your first time working with responsive pages in EverWeb…

If You Have Not Created a Blog Yet…

If you have not yet created a blog but want to add one to your site, then the solution is to simply add a Responsive Blog to your website.

Adding a Responsive blog to your site is straightforward:

1. First create a new page in your site using the Add Page button, or the File-> New Page… button.
2. Click on the ‘Blank Responsive’ Theme on the left hand side of the Theme Template Chooser.
3. On the right hand side of the dialog box click on the ‘blog’ page then click on the ‘Select’ button.
4. You can now style the blog page, the posts page and blog archive page to match the look of your site.

If You Have Already Created a Center Aligned Blog…

In this scenario, you will need to convert your blog from a Centered Page Layout in to a Responsive Page Layout:

1. Before starting this action, it is recommended that you make sure that you backup your website. In this way if you find that you do not want a Responsive blog, you can undo the changes you have made using the backup copy of your website.
2. To start, select the ‘blog’ page in the Web Page List of the Web Page List of your Project file.
3. In the Page Settings tab, go to the Page Layout section.
4. Change the Page Layout type from Centered Layout to Responsive.
5. When you change the Page Layout type, you will be warned that such a change will change the design of your page. If you are happy to continue, then click on ‘Yes’ to change the page layout.
6. When you change page styles in EverWeb, The objects on the page will probably have moved around the page so the page may need to be redesigned to fit responsive page design rules.
7. Once you have completed the ‘blog’ page, repeat the process for the ‘posts’ and ‘blog archive’ pages.

If You Have Already Created a Responsive Blog…

If you have already created a Responsive Blog for your website, there is nothing you need to do at all as you already have a blog that will display correctly on any device it is displayed upon.

Final Words…

Creating a Blog with a Responsive Page Layout is the easiest way to have a blog that will display properly across all types of device from Desktop down to mobile phone. Your existing fixed width website does not need to change either so you get the best of both worlds!