Mac SEO Blog

During the month of May, there is always press speculation about what the future holds for Apple’s major operating systems: iOS, watchOS, tvOS and, of course, macOS. This year is no exception, but one thing is sure… support for 32 bit applications in Apple’s macOS operating system will end with the release of Apple’s new 2019 software for desktop and laptop computers.

The end of 32 bit support has been flagged since June 2018. Last year’s Apple World Wide Developer Conference announced that with macOS Mojave (10.14) there would be warnings when launching 32 bit apps they should be converted to 64-Bit ASAP as they would not be supported in Apple’s 2019 macOS release.

One year later and we’re almost at the next WWDC and the next macOS will then be only a few months away.

If you are still using iWeb, this should give you pause for thought especially if you plan to buy a new Mac with a new OS on it in the near future! Now may be the time to switch from iWeb but will it be easy to do so? With EverWeb, we think it’s really easy! Here’s why…

Why Go From iWeb to EverWeb?

• Both iWeb and EverWeb are drag and drop website builders for the Mac.
• iWeb and EverWeb have similar User Interfaces making the learning curve a lot quicker when moving from one to the other. You’ll get up to speed in EverWeb in next to no time.
• Both products support blogging. You can easily import your iWeb blog in to EverWeb with just a few mouse clicks.
• You can host with your own provider or with EverWeb which gives you extra benefits built directly in to the product such as password protection, 404 page not found, 301 page redirects and regular product updates throughout the year
• EverWeb fulfils the promise of iWeb with responsive web design, template pages, 100’s of free themes, in product SEO for better Search Page Results Rankings, animation effects, PayPal e-commerce built in, in product website project backups, fast, one-click publishing and much, much more.
• EverWeb always keeps up to date with technology, so there is always something new to enjoy with every product update which usually happens every couple of months.
• You will no longer have problems with iWeb crashing or other associated issues that hinder you working. EverWeb has been a 64 bit product for over a year and our regular product releases throughout the year always include stability and maintenance fixes.
• EverWeb comes with 7×24 support 365 days a year if you have a valid user licence. There’s also the EverWeb community where you can ask questions, suggest features that you would like added to the product, try out the latest beta test versions of EverWeb and see what’s available from EverWeb’s third party providers.
• Check out EverWeb’s blog (yes you’re here!) and also our YouTube channel that’s packed width videos about every aspect of EverWeb.
• EverWeb is not a subscription service so you alway keep the product that you initially purchased if you do not want to renew after the first year. You keep the product and any website you have built.
• And last but not least, EverWeb is now in its sixth year and we continue to grow and innovate! We’re committed to delivering the best we can offer to our community.

EverWeb Addon Products

EverWeb can be purchased as a standalone product if you have your own hosting provider, or with EverWeb+Hosting Lite and Hosting Pro options to suit all needs. There are also additional products that you can add to your purchase such as Site Shield Addon for HTTPS Secure websites.

Third party widgets and theme template add-ons are also available if you cannot find exactly what you need out of the box!

Making The Switch Even Easier

EverWeb Professional Services are also available so that if you do not want to recreate your iWeb website yourself in EverWeb, we can do it for you! If you want us to design a brand new website for you we can do that as well with a number of flexible options available.

You can find out more about EverWeb directly from the EverWeb website. Why not download EverWeb today? The download is the full product with the only restriction being that you cannot publish your website either locally or to the Internet unless you purchase the product.

If you have any questions relating to iWeb and EverWeb, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

One of the new widgets to come with the advent of Responsive web page design in EverWeb is the FlexBox widget. Debuting in EverWeb version 2.8, the FlexBox widget allows you to combine text, images, video and buttons in almost countless ways to give your site a completely customized look.

Using The FlexBox Widget

You can take advantage of the FlexBox widget in a number of different ways. Here some tips on how you can get the best out of the widget:

1. The FlexBox widget is ideal for use on a Responsive Page Layout, however it can also be used on a Fixed Width Page Layout as well. Although not officially supported as you cannot take full advantage of the widget’s capabilities, you can still create great web page designs.
2. If you use the FlexBox widget as a full width object on a Responsive Page Layout, you do not have to embed it in a Responsive Row widget.
3. If you are using the  FlexBox widget as a Fixed Width object, then you will need to embed it in a Responsive Row Widget. If using the widget in a Fixed Width Page Layout you do not have to do this.
4. If you want to add a filled background to the widget, such as a color or image fill, you will need to embed the FlexBox widget in a Responsive Row widget first. With the Responsive Row widget selected, use the Fill Options in the Shape Options tab to change the background to a different color or image. In EverWeb 3.0 this will become simpler as you will be able to add background fills directly to the FlexBox widget itself without the need to use a Responsive Row widget to achieve the effect.
5. When used as a Full Width object, you can apply left and right Margin Settings to the widget using the Metrics Inspector.
6. Save time and effort by duplicating Embedded Objects. The FlexBox is ideal for creating a series of embedded objects in a row that all have the same styling and formatting. Create the first Embedded Object by clicking the ‘Add’ button under the Embedded Objects list box. Add an image or video, text content and a button as you require. Next format and style the Embedded Object as required. When you have finished, click on the ‘Duplicate’ button to replicate the Embedded Object. You now only need to change the second Embedded Object’s image or video, text content and button text and links. You do not need to adjust the formatting and styling as it is already set up.
7. If you cannot add an image to an Embedded Object, first select the Embedded Object in the list. Next click on the Object Type dropdown menu and make sure that you select image. The ‘Choose…’ button in the Image Settings section will now become available. The same applies if you cannot add a video URL, but in this instance select ‘Video’ from the Object Type dropdown menu to make the ‘Video URL’ input box available.  

FlexBox Widget Videos on YouTube

The 8th and final tip is to check out our FlexBox widget videos on YouTube! The first video is called ‘The FlexBox Widget‘ and the second is called ‘Using the FlexBox Widget’s Reverse Wrap Feature‘.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are not yet using EverWeb’s Master Pages in your website, you could be missing out in many ways…

Master pages are perfect for setting standard page layout defaults for your website’s pages such as content and footer height and page and browser background colors. Any settings and objects you add to a Master Page will be inherited by any regular page it is attached to. You can also include objects that you want to see on every page of your site such as company logos, navigation menus and copyright text.

If your website is not using EverWeb’s Master Pages, there are many reasons why you’re missing out…

1. Easy to Add: Master Pages are quick and easy to add, just click on the New Master Page button. If you cannot see the button, drag the splitter bar down to reveal the blue area. You can also add a Master Page by using the ‘+’ button in the Page Settings tab or use the File, New Master Page menu option. Adding a Master Page works in the same way as adding a regular page to your site except that the Master Page is added to the blue Master Page area. When adding a Master Page to your site, you can base it on any Theme Template you want or create your own Master Page using the Blank, or Blank Responsive, Theme Template.
2. Easy to Use: You work on a Master Page in the Editor Window in the same as you do when working with a regular page. Adjust settings and add, edit and delete objects in exactly the same way.
3. Easier to Correct Mistakes and Errors: When you add a Master Page to a regular page, the master page objects can only be edited by editing the Master Page itself. Master Page objects are displayed on regular pages with a black page symbol in their top right hand corner. If a Master Page object needs to be moved on the page for example, just edit the Master Page and the change will automatically appear on any regular pages that the Master Page is attached to.
4. Saves Time: As a Master Page acts like a template, it makes setting up and customizing regular pages a lot quicker. Attaching a Master Page to a regular page saves you having to set up the page again and again. You will also save time maintaining and updating your site in the future. For example, if I want to change the page background color of my site at a later date, I just change the page background color in the Master Page and any regular page using the Master Page will automatically be updated with the change.
5. Better Website Design Consistency: You may have noticed some websites where objects that should be in the same place on each page seem to move slightly when you change pages That’s because the objects have not been added to the exact same place on each page. Using a Master Page eliminates this problem as you only need to add such objects once to the Master page. These objects will then appear exactly in the same place on each regular page. Having a consistent website design looks great and adds to your site’s credibility and professionalism.
6. Master Pages can be used in multiple scenarios: You can create Master Pages for different scenarios and purposes such as creating Master Pages for different groups of pages e.g. one Master Page for each department in a business. You can also use Master Pages in different page layouts e.g. in fixed width page layouts you could use one Master Page for desktop devices and one for mobile devices. You can even create a Master Page to give your blog a unique identity! The possibilities are almost endless!

Master Pages are a valuable tool for anyone building their own website, even if it is a relatively small site. Save time and effort both now and in the future maintenance of your site!

If you have any comments about this post, please let us know in the Comments Section below. We will get back to you as soon as possible.

Video Walkthrough…

You can also catch up with using Master Pages in our YouTube video walk through!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 2.9 introduced ‘Show on Device’, a feature that lets you choose on which device types you want an object to be displayed upon.

Using Show on Device is a great way to tailor your page content specifically for use on mobile through wide desktop devices. For example, you have placed four Text Section widgets directly under each other on your page. When viewing on a desktop computer, you want all four widgets, but on a mobile phone you only want to see three of them as you do not want your visitors to have to scroll through too much information.

Show on Device can be used in either fixed or responsive website designs, although it is probably be more useful in the latter.

Using Show on Device: Example #1

To recreate the example above, follow the steps below:

1. Start by adding a new Blank Responsive page to your EverWeb project.
2. Next add a Responsive Row widget to the page and within this add four Text Section widgets.
3. Style each Text Section widget as desired e.g. add an image, some text and button to each.
4. Make the settings for all the Text Section widgets the same as each other for a uniform look.  
5. Next select the Text Section widget that you do not want displayed on  mobile devices.
6. Go to the Metrics Inspector tab and uncheck the ‘Show on Mobile’ option in the ‘Responsive’ section.
7. To see how this work adjust the width of the EverWeb application itself. As you reduce the right hand margin of the app, the page in the Editor Window automatically reorganises itself.
8. Eventually the Text Section widget you chose to hide on mobile devices will become hidden and will be replaced in the top left of the Responsive Row widget by a grey box with an ‘X’ through it, indicating that at this width the Text Section object is hidden.
9. Preview to test that the objects display correctly at all widths before publishing.

Using View Options with Show on Device

Use the Window, Show Hidden Objects menu option to hide or reveal hidden objects.

To select a hidden object, secondary click in the Editor window and go to the Hidden objects menu option. Select the object you want to see.

Using Show on Device: Example #2

In the second example I am going to ‘replace’ one object with another as the browser width narrows.

In this example I have a full width FlexBox widget inside of a Responsive Row widget on my page. The FlexBox widget contains a lot of text. This is fine when viewed on a desktop device, but on a mobile device I want to show less text. The steps below show you how you can achieve this easily:

1. Start by selecting the FlexBox widget and duplicating it.  You can quickly do this by secondary clicking on the FlexBox widget and selecting ‘Duplicate’ from the menu.
2. Next, secondary click on the duplicate FlexBox widget.
3. Use the ‘Embed In’ option to check to make sure that the duplicate widget is embedded in the Responsive Row widget.
4. Add the duplicated widget in to the Responsive Row widget that contains the original FlexBox widget. Select the Responsive Row widget from the ‘Embed In’ menu choices if the widget has not already been automatically added to the Responsive Row widget.
5. In the duplicate widget, I now remove most of the text, as this widget will only be displayed on a mobile device.
6. Now go to the Metrics Inspector and set the object to ‘Full Width’.
7. Unchecking the  ‘Show on tablet, desktop and wide desktop’ option 
8. Select the original FlexBox widget and uncheck only the ‘Show on Mobile’ option. Keep the other three options checked.
9. Preview to see the results. When you reduce the browser width, the original Flex~box widget will be displayed until you reduce to the browser to a width suitable for mobile devices. When this happens, the duplicated FlexBox widget with less text will display instead of the original widget with the full text.

Video Walkthrough

Checkout our YouTube channel for a video walkthrough of how to use ‘Show on Device‘.

If you have any questions or comments about this blog post, please let us know and we will do our best to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are a Google+ user, you should already have been notified by Google that its social media platform, Google+, will be shutting down imminently.

If you have any data in Google+ that you want to keep, Google advises that you should download and save it by March 31st, 2019. The shuttering of Google+ will commence as of April 2nd 2019.

Google has already taken steps to wind up its social media service as you can no longer create new Google+ profiles, pages, communities or events. Google+ comments have also been removed. After April 2nd, Google will begin to remove content from Google+ which will take time to complete, so if you have content, it may still be there for a while.

Any sites that use Google+ buttons for login purposes will also cease to function over the coming weeks. In some instances, the Google+ button will be replaced with an ordinary Google button instead.

If your EverWeb created website includes any Google+ widgets, buttons or other links, now is a good time to remove them and republish your website. If you have deeply integrated into Google+, you have probably found alternatives and informed your Google+ community already. EverWeb’s Responsive Image Gallery widget

It is, of course, recommended that you no longer use the Google+ widget or button in your website. Also remember that it is only Google+ that is going away so your regular Google account will not be affected. G Suite users will also have new and updated options.

If you have any comments or questions about this post, please let us know in the Comments Section below.

The previous blog posts in this series have explained in detail how to prepare and build a responsive website in EverWeb, adding a blog to your responsive website and how to convert an existing fixed width website in to a responsive one.

When developing a responsive website, one crucial element you must bear in mind at all times is the testing of your page design. One of the most difficult development tasks is making sure that the responsive page you have created looks great on any device, from mobile to wide desktop and everything else in between.

Fortunately, EverWeb takes most of the hard work out of this process as the responsive page layout scales appropriately for all browser widths. From a design perspective you will still need to check that the page has the correct margins at any browser width, that objects on the page are always spaced appropriately, both horizontally and vertically and that images and other media display consistently at all times.

Fine Tuning Your Responsive Page Design

EverWeb includes some useful tools to help fine tune your page design:

Margins: You can set the left and right margins of a full width object in the Metrics Inspector. In EverWeb version 2.9 you can also set the maximum width of a full width object so that it does not appear too strung out on desktop or wide desktop devices. For a Responsive Row widget, look for the ‘Content Maximum Width’ setting is in its Widget Settings.

Padding Options: Many of EverWeb’s widgets include padding options that help space objects so that they display better in relation to other objects on any browser. Remember that Padding options usually add vertical and horizontal spacing to the selected object.

Hidden Objects: EverWeb 2.9 recently introduced a new feature where you can hide objects so that they only display when you want them to. The ‘Show on Device’ option is available in the Metrics Inspector. Use the View menu to Show or Hide Hidden Objects on the page and secondary click in the Editor Window to quickly select any hidden object on the page using the ‘Hidden Objects’ menu option.

Breakpoints: You can override EverWeb’s own default page breakpoints and define your own instead. The Breakpoints options can be found below Show on Device in the Metrics Inspector.

Editor Window: You can always quickly see how your page will look at any browser width by reducing the width of the right hand side of the EverWeb app itself. As you do this, the Editor Window will automatically adjust giving you an idea of how the page scales. You can also use the Window-> Presentation Mode (or Cmd+period key) menu option toggle to hide the EverWeb User Interface if you want. remember when using Presentation Mode that you are still viewing the page in the Editor Window so the page can still be edited.

Previewing Your Website

Although you can quickly see how your page will look using the above mentioned options in EverWeb, it is usually better to Preview your site before publishing so that the page can be tested in different browsers. Some browsers include responsive options so you can test how your page will look on various device types or browser widths.

Apple’s Safari browser, for example, offers a Responsive Design Mode so you can see how your page will look on an iPhone SE, iPhone 8 and 8 Plus, iPad and Mac computer. To use Safari’s Responsive mode go to the Safari-> Preferences menu. Click on the Advanced tab and check the box ‘Show Develop menu in menu bar’. The ‘Developer’ menu will appear in Safari’s navigation menu bar. To use the responsive mode, select Develop-> Enter Responsive Design Mode. You can view the device you want to view the page on in either portrait or landscape mode. Just click on the iPhone or iPad icon  at the top of the widow to toggle the view.

Apple also offers the Simulator app as part of its Xcode app. You can download Xcode if you have signed up to access Apples Developer Program but bear in mind that the download is about 4.5GB. The Xcode app is free of charge to set up. Once you have downloaded Xcode you can install Simulator on your hard disk. Simulator does exactly that, it simulates Apple hardware environments such as Apple Watch, iPhone, iPad, MacBook Pro etc. For the purposes of testing your website, Simulator is probably overkill unless you are an app developer. Using Responsive options provided natively by web browser software is usually the preferable route as it is quicker and easier than using Simulator.

Publishing Your Website

Once you have finished testing the pages of your website, hit the Publish button! When finished remember to to test that all the pages work correctly, that all menus, buttons and other links function properly and that other features such as contact forms, shopping carts are also working as they should.

If you have any questions or comments about this series, please let us know in the Comments Section, we’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

We are delighted to announce the availability of EverWeb version 2.9 which adds a host  of great new features for designing responsive websites. Highlights include, show/hide objects according to device type, breakpoints, maximum width options for the Responsive Row widget and for full width objects and rulers along the top and left margins of the EverWeb UI. For a complete list of what’s new, improved and fixed, as well as how to upgrade to the new version, please see below!

EverWeb 2.9 Versions….

EverWeb version 2.9 is available in two versions:

• OS X/macOS 10.10 and higher (64-Bit): Yosemite, El Capitan,  Sierra, High Sierra, Mojave
• OS X 10.7 – 10.9 (32-Bit):  Lion, Mountain Lion, Mavericks

If you are running OS X 10.6, EverWeb version 2.5.2 is available for you.

When updating to EverWeb version 2.9, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.9 Includes…

[NEW] Set a maximum width for full width objects from the Metrics Inspector

[NEW] Show or hide objects on your website for mobile devices, tablets, and desktop computers

[NEW] Option to Show/Hide Hidden Objects in the Window menu

[NEW] Secondary click now includes a Hidden Objects menu option to allow you to  select hidden objects at any time.

[NEW] EverWeb allows you to set Breakpoints per device type: mobile, tablet and desktop

[NEW] Option to Show/Hide Breakpoints in the Window menu

[NEW] Link to files, such as PDFs, and open links in New Windows for all widgets that provide linking options

[NEW] Responsive Rows have an option to limit the width of the content within them

[NEW] Show/Hide Rulers option in the Windows menu lets you see rulers on the left hand side and on top of the Editor Window

[NEW] Specify a custom CSS class for any object for advanced scripting options

[NEW] The PayPal widget’s ‘Product Description’ field can now have ordered or unordered lists

[NEW] The Text Section widget buttons now have an ‘Open In New Window’ link option

[NEW] The Text Section widget can have numbered or bulleted lists

[IMPROVED] FlexBox and Text Section widgets have been optimized

[FIX] Responsive Image Gallery captions and fade options now works properly in slide show mode

[FIX] Dragging widgets and images within Responsive Rows properly highlights, and removes the highlight indicator, so knows when an object will be embedded in the Responsive Row Widget

[FIX] Fixed a crash that could occur when downloading new templates

[FIX] Fixed a crash that could occur when switching pages

[FIX] Fixed issues with auto updating EverWeb

How To Update To EverWeb version 2.9

You can easily update to EverWeb version 2.9 by

1. Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

Remember, you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.

EverWeb version 2.9 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need, either the OS X 10.6 version, or OS X 10.7 and later, version.

More Information About EverWeb version 2.9

For more information about the new version of EverWeb, please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The EverWeb User Manual in EverWeb’s Help-> User Manual menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb version 2.9 Video Walkthrough

Find out more about the new release of EverWeb in our What’s New in EverWeb version 2.9 video.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

In the previous blog post, we touched upon preparing a fixed width blog in an EverWeb website project for conversion into a responsive blog and what to expect in the process. This post takes the process a step further with an in-depth look at how to quickly and easily convert your whole website from fixed width to responsive.

Adapting Your Website’s Design

When thinking about moving a website from a fixed width design to a responsive one, perhaps the most important thing to consider is the effect on your website’s overall design. Using a fixed width page layouts makes the distinction between mobile and desktop environments clear as you design a  page for each device type. You may even have designed pages specifically for tablets as well. In responsive design, these page designs merge to become one single, scaleable design. You may find that you may need to modify your existing design website to accommodate the new responsive paradigm.

The process of reinventing your website as a responsive one will also, perhaps, involve more testing than with a fixed width website.If you change a responsive page design it may have an effect on all device types, not just the device type the change is targeted at.

Preparing to Convert Your Website

Before you begin work converting your website it is worthwhile taking preparatory steps:

1. Backup your project file before you start. You should have a backup schedule in place for your computer already, and you should also be using EverWeb’s own project file backup feature as well.
2. Test that you can restore your backup. It is always a good idea to see if your backups are working correctly by restoring from one backup as a test.
3. Even with a backup project file in place it is always best to work from a copy of your project file and set up a test directory to publish to.
4. It may be useful to familiarize yourself with EverWeb’s Responsive design features. This will help you to more quickly convert your website as you will know which features and widget to use as you convert objects on the page to the new page layout.

Converting Your Website

Converting a fixed width website into a responsive one is done simply by changing the Page Layout field in the Page Settings tab of the Inspector Window from ‘Centered Layout’ to ‘Responsive’ for each page in the project file.

When converting pages, EverWeb will warn you that the change cannot be undone. The reason for this is that the page structures and design methodologies of the page layout styles are fundamentally different from each other. This is why it is best to work from a copy of your project file rather than using the original.

To create a duplicate project file, go to the Projects Window and click on the up/down arrows to the right of the project file name in the ‘Recent Projects’ list. Select ‘Duplicate’ from the menu. A duplicate will be created with the same name as the original project file but with ‘Copy’ added at the end. Open the duplicate project and rename it by double clicking on its name in the Web Page List, or by using the File-> Rename Website menu command.

Page Conversion

When you change the page layout from fixed width to responsive, it may appear that objects are scattered about the page. As a responsive page has no header, any header objects from the fixed width page layout will be placed in the main body of the page instead. You may also find that Footer objects have also been displaced in to the main body area.

Often the main task once a page has been converted is locating and reorganizing objects back to their respective places on the page. The following tips should help make this process faster and more streamlined…

1. Headers. Responsive design does not use headers as they are just regarded as full width objects. If you have a header on your fixed width page, move these objects back to the top of the responsive page and make them full width as necessary. Use a Responsive Row widget if you want to keep the objects fixed width.
2. Footers. Responsive web design does include footers so you may need to drag and drop any displaced footer objects back in to the footer area.  Remember to hold down the Cmd key when moving objects from the main body area in to the footer. You may also need to use a Responsive Row if you have footer objects that you want to keep as fixed width.
3. Make objects Full Width. Some of the objects on your fixed width page may have been full width. In the converted responsive page, locate such  objects e.g. the Navigation Menu widget, and make them full width again by checking the Full Width box in the Metrics Inspector. Drag and drop the full width object to its correct location on the page. TextBoxes, images and many of EverWeb’s widgets can also be made full width in a responsive page. If you prefer to keep some objects fixed width, place them within a Responsive Row widget so that they work properly .
4. Group similar objects together. Objects such as social media icons are often grouped together. You can collect such objects together in a Responsive Row widget. Start by adding a Responsive Row widget to your page and drag it to where you want it on the page. Next, secondary click on one of the social media icons and select ‘Embed In’ and choose the Responsive Row widget you have just placed onto the page. Repeat this process for the remaining social media objects. Use the Responsive Row Widget Settings to for spacing and alignment of the objects within it.
5. Remove any unwanted, unnecessary or redundant objects from the page. Using a responsive page may make some of the objects you have used on the fixed width page redundant. Typically these will be background color shapes and separator lines. When using the Navigation Menu widget, you can use the Widget Settings to add a background color instead of using a shape object. If you have used Picture Frames for images, these  will appear separate to the images and should be deleted as they are currently not supported in responsive pages.
6. Use Margins for Full Width objects. You can easily set a left and right margin for a full width object by using the Margin fields in the Metrics Inspector for any full width object. This is easier and more consistent than using padding options within widgets or the Insert Margin option for TextBoxes.
7. Responsive ready widgets. EverWeb 2.8 introduced new widgets that provide great design flexibility when designing pages for your website. The Text Section, Responsive Image Gallery and FlexBox widgets may give you design ideas and solutions when converting pages, for example, you may find it better to place the text from a TextBox in to a FlexBox widget. Many of EverWeb’s existing widgets have also been updated in version 2.8 so that they can be used at full width without needing to be placed in a Responsive Row widget.
8. Fixed width objects. There may be objects in your page that you want to keep as fixed width, or only work as fixed width objects (e.g. the PayPal widget). In these cases, embed such objects in to a Responsive Row widget.
9. Turn off mobile redirect on your page. In the Page Settings tab of the page, set Mobile Page to none so that no redirect takes place. This is optional as there may be instances where you do want to redirect when the page is viewed on a mobile device.
10. Testing. As mentioned earlier, this is paramount when using one design for all device types. Any change you make to the page design needs to be tested on all device types. We will cover testing in detail in the next blog post.
11. Look out for EverWeb updates! EverWeb 2.9 will add more responsive features to EverWeb. You will be able to select which device an object can appear upon, set a maximum width for full width objects and the Responsive Row widget as as well as being able to set your own breakpoints for mobile, tablet, and desktop devices.

In the next blog post, we will look at how to quickly and easily test out your new responsive page design before going live!

If you have any questions or comments, please let us know in the Comments section below. We’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

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

EverWeb’s Responsive Page Layout has many ways in which you can work quickly, easily and effectively to achieve the page design you want. Responsive website design means that you can immediately create a web page for desktop, tablet and mobile devices using just one page design. The challenge, however, is to make sure that what you create looks great on whatever device you are viewing the page upon.

Fortunately EverWeb makes this challenge easier for you as its Responsive Page Layout, widgets and other features introduced in version 2.8 are designed specifically to do as much of the work for you whilst still giving you design freedom. There is, of course, some learning required along the way and knowing about the background to responsive design in EverWeb will help in your responsive website design if you are used to creating only fixed width web pages. Here are some tips to help get you started on building a great page design suitable for all device types:

1. Use EverWeb’s application boundary: By dragging the right hand vertical edge of the EverWeb application left and right, the page layout will adjust in the Editor Window so you can see how the page will look on all device types before previewing or publishing;
2. Widgets: EverWeb 2.8 updated many of its existing widgets so that they can be used as full width objects on a responsive page. The Navigation Menu widget was also updated with Responsive features that can be applied to both fixed width and responsive page layouts. The PayPal widget, which is a fixed width widget, was updated too introducing product image and product description features making the widget even more indispensible for both fixed width and responsive pages.
3. New Responsive Widgets: EverWeb 2.8 introduced the Responsive Row, Text Section, FlexBox and Responsive Image Gallery widgets. These new widgets are extremely flexible in what they actieve so exploring what is possible with each is highly recommended. You can also find out more about their capabilities on this blog and on our YouTube channel.
4. Compatibility: Nearly all of EverWeb’s fixed width features can be used in a responsive website. There are a couple of exceptions such as Scroll Position and Picture Frames and Line frames. These features may gain compatibility wth responsive design at a later date.
5. Blogging: Many websites include a blog and it is easy to create a responsive blog in EverWeb. Just add a page to your website and select the ‘blog’ page style from the Blank Responsive Theme Template. Many of EverWeb’s other Responsive Theme Templates also include a blog page style. If you have an existing fixed width blog, this can be converted to a Responsive blog by changing the ‘Page Layout’ in the Page Settings tab. If you choose this option you will need to reorganise the blog afterwards. Also be aware that changing the page layout cannot be undone, so it is recommended that you backup your Project file first and then duplicate the blog so that you have a copy to try the new page layout on.
6. Margins: Use the Margin option in the Size section of the Metrics Inspector to add left and right margins to full width objects. Other margin options are also available such as the Insert Margin option in the Text Inspector for use with TextBoxes and the Padding option in the Navigation Menu widget. You can also use the Responsive Row widget to add top and bottom margins to sections of your page using its Top and Bottom Padding options. As there are a few different ways to add margins to a Responsive page layout, you may want to experiment to see which works best for your page.
7. Adding a Background: Many responsive websites use alternating background color bands to separate sections of the page. This makes it easier for the user to find and focus on content. To add a background color band, add a Responsive Row Widget to the page then use the Color Fill option in the Metrics Inspector to add the background color (or image if you prefer) of your choice. Add your content in to the Responsive Row widget to create the section of the page that you want.
8. Pick Layer and Embed In: These two options are really useful in responsive design in EverWeb. When you secondary click in the Editor Window you will see these two options listed in the submenu that appears. When you have two or more objects stacked on top of each other (e.g. a FlexBox widget on top of a Responsive Row Widget) use Pick Layer to select the layer that you want. Use the Embed In option when you have a full width object that you want to embed in to a Responsive Row widget.
9. Testing: As part of any website development process, you should always test your website as much as possible before going live. This is especially true for responsive page designs as such pages scale to the device they are being displayed upon. You may find for example that objects on desktop device look fine but are too close to one another on a mobile device. Conversely, your mobile device may display the page perfectly, but on a desktop there is too much white space between objects. In these instances you will need to work with the objects on the page to find an appropriate solution. This may mean using padding options in a Responsive Row widget or a Flexbox widget instead of a Text Section widget and so on…
10. Keep Up to Date: As of this blog, EverWeb version 2.8.8 is the current public release. If you have not updated to this release, you can do so using the EverWeb-> Check for Updates… menu option, or download a new version directly from the EverWeb website. We have lots of great new Responsive features coming soon in the forthcoming EverWeb version 2.9 release, which will make responsive web design even easier and better!

In the next instalment we will look at testing your responsive website and how this can be done in the most effective way.

If you have any questions about this post, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw