Mac SEO Blog

Our latest EverWeb release, version 3.5, is focused on its new website search feature. If you use EverWeb for your blog, the website search features are also there for you!

Website Search in Blogs

EverWeb uses full text search in its website search feature so this means that your blog and its posts will be automatically included in any website search. This means that you don’t have to do any configuration work at all for website search to work.

However, if you want to customize your blog for search and also help boost your website’s SEO at the same time, EverWeb allows you to do this as well.

EverWeb 3.5 introduces two new features to blooging: Blog Post Short Summary and Blog Post Keywords. Let’s start with a closer look at Short Summaries.

Why You Should Use Short Summaries

A Short Summary is just that – it is a brief description of the blog post. When you search the Internet for something, the list of search results that you see are in the form of a web page title that links to a web page followed by the first words of the linked page displayed below it.

You may find that the first words of a your blog post that are displayed in search results do not convey what the whole blog post is actually about. A Short Summary can be used to replace this default text with your own descriptive text summarising what your post is actually about. This description has the advantage in that you can it as a ‘hook’ to entice potential visitors to click on the associated link.

The Short Summary is also a good place to add SEO Keywords or phrases. If you are interested in finding out more, check out our SEO for EverWeb Video Course. If you just want to find out how to get the most SEO effective Keywords or phrases for your website, take a look at the course’s Keyword Research video.

Tips on Creating a Short Summary

When creating a Short Summary in EverWeb remember:

1. Keep the Short Summary brief and to the point. You may want to do this by listing the key points of the blog, linking them together by simple, short sentences.
2. Include your SEO Keywords in the Short Summary if it is appropriate to do so. As we always remind you, do not sacrifice a great blog post description just for the sake of adding SEO keywords. It is actually counterproductive to do so.
3. Your Blog Post Title and Short Summary should clearly state to your potential visitor what the post is about. If the post title, or summary, does not reflect the actual content, visitors will probably not return to your site in future.
4. The Blog Post Title should also use SEO or Search Keywords if it is appropriate to do so.
5. The Short Summary will be displayed in the blog main and archive pages in place of the beginning text of the blog post. If you do not include a Short Summary, the beginning text of the post will be used instead.

Creating a Short Summary

Creating a Short Summary is easy:

1. First click on the Posts Page in the Web Page List of your EverWeb Project file.
2. Next click on the blog post that you want to add the Short Summary to.
3. Click on the Settings Cog and select ‘Edit…’ from the dropdown menu.
4. Enter the text that you want to use for the Short Summary in the Short Summary field,
5. Click OK to finish.

Using Keywords In Your Blog Post

As well as adding Short Summaries to your blog posts, EverWeb also lets you explicitly add ‘Keywords’ to your blog posts that you want to be available for search.

Enter the Keywords that you want associated with your blog post using the same dialog box as you use for Short Summaries. When adding keywords to your blog post, follow the same rules that you would use when adding SEO Keywords to the other pages of your site. 

Click on the Add button then enter the keywords or phrases that you want to include. Press enter to finish.

To edit the Keywords just double click on the keywords in the list, then edit the words you want to change.

To delete any Keywords, click once on the Keywords in the list that you want to remove, then press the Backspace key on your keyboard. The Keywords will be deleted.

When you have finished using the dialog box, press OK. Publish your site to implement the Short Summaries and Keywords.

Ordered Lists

The final new feature in blogging in EverWeb 3.5 is a minor one with the addition of more Ordered List types in the Blog Post Editor Window’s Toolbar.

EverWeb version 3.5 adds site wide search as its major new feature using the all new Search Field widget. This widget can be used to display your search results in a dropdown list or popup window. There is also a third option which links to the Search Results widget where you can choose to display search results on a dedicated page in either a scrollable or static results set. 

How Search Works in EverWeb

EverWeb automatically use certain fields in your project file as well as the text content of its pages as the basis for site wide search. EverWeb takes care of everything so you don’t need to do any work to set up search.  

However, if you want to, you can refine and customize your site’s Search Criteria when setting up your website search in order to refine search criteria and also to help boost SEO. It can also be useful to do a little work on your Search Criteria as there may be, for example, pages in your site that you do not want to include in your search results. For example you probably would not want to include placeholder directory pages that are blank but are used as dropdown menu headings in the Navigation Menu widget in your search results.

SEO and Search Criteria

Customizing your Search Criteria can be of benefit to your SEO, especially if you use your SEO Keywords or phrases. If you have followed the SEO for EverWeb Video Course, you will probably have already added keywords or phrases to your pages’ text and also to certain fields in EverWeb’s Inspector window to help boost your SEO. You should also find some useful SEO tips in the rest of this blog to help further boost the SEO potential of your website. Check out our SEO for EverWeb Video Course for more information.

What is Automatically Included in EverWeb’s Search Criteria?

EverWeb’s Search feature automatically uses the following search criteria:

• Full Text Search: The text content of your pages is included when performing a search. When including text in your pages, the words that you want people to search upon should be included in your page. 
  
  The text that you enter in to fields such as captions, or in the Styled Text Editor when using Widgets, is also used in Search.
  
  Remember that where possible, and appropriate, include your SEO Keywords or terms in your text. If possible position these keywords or terms in the first (or second) paragraph of your page’s text. You may even find that your search words and SEO keywords are often the same. Also remember, though, not to sacrifice the readability of your text just for the prospect of better SEO. This is counterproductive as your website’s visitors are less likely to return to your website if the text is not well written.
  
• Filename: In addition to the text content of your pages, EverWeb uses the Filename field in the Web Page List in site searches. Therefore, if you can, give your page’s filename a good descriptive name if at all possible. The additional benefit here is that a good Filename can also help your SEO!
  
• Web Page Title: Search takes in to account the Web Page Title field of your page in Search. You should aim to have a good descriptive title and include SEO keywords if it is appropriate to do so. As always please do not sacrifice your Web Page Title just for the sake of SEO.
  
  The Web Page Title is also important to include as it is used as the Page Title in the search results list. If you leave this field blank, the page title will be listed as ‘No title’ which is not helpful to anyone who is searching your site.
  
• Web Page Description: The Web Page Description field is found in the Search Engine Optimization section of the Page Settings tab if you are using EverWeb 3.5.
  
  Add the words, or phrases, that you want to be searched upon as part of your page description. Make sure that this field describes the page, and is not just a list of SEO or search related words. This field is important as it is used for both your website search results set within your website itself and for Internet searches where it is used to describe your page to the outside world.
  
  Again, it is better to have a good page description, even if it means having to exclude SEO Keywords or search words.

Excluding Pages from Search

EverWeb allows you to easily exclude any page that you do not want to be searched upon from the site search. Simply uncheck the ‘Include in Site Search’ box in the Site Search Section of the Page Settings tab of the Inspector Window to remove the page from the website search.

Excluding pages is appropriate if, for example, you have directory pages that redirect to child pages. If such a page is found in a search result, it will be empty as it is a blank page, so you should exclude pages such as these from your search criteria.Typically you use these directory pages as the main heading of dropdown menu lists in the Navigation Menu widget.

You will probably also want to exclude pages such as your ‘404 Page not found’ page from any search and if you have a dedicated Results Page that uses the Search Results widget, you may also want to exclude this too. Other examples include ‘Thank You’ and ‘Cancelled Order’ type pages that you might set up for use with PayPal widget.

SEO Power Up Addon and Search

If you have EverWeb’s SEO Power Up Addon, you can also explicitly add words that you want to be available for search, by entering them in to the ‘Keywords’ section of the Search Engine Optimization section of the Page Settings tab. This will also, of course, be advantageous for your SEO as well. To activate this field, check the box ‘Include page in search engines’. 

EverWeb SEO Power Up Addon users can also add keywords in to blog posts as described in the next section.

Search Criteria and Blogging

If you have your own blog for your website, Search also includes your blog posts in search results. Use the same methods as described above to add search terms to your blog main and archive pages.

When creating your blog posts, EverWeb will the blog post’s text and post title as search criteria, so again apply the same tips as described above for adding keywords and phrases in to your blog post.

EverWeb 3.5 has also added a couple of new features to blogging which will help you with search and SEO. You can now add specific search criteria to your blog posts. First select the blog post you want, then click on the settings cog on the left hand side underneath the list of blog posts. A dialog box will appear. Use the ‘Short Summary’ field to enter in a description of the blog post in the same way in which you would for a regular page using the Web Page Description field.

If you have purchased EverWeb’s SEO Power Up addon you can also add keywords to any post you want, which will then be used in Search and will also benefit your SEO.

Add the Keywords or phrases that you want to be available for search and SEO in the Keywords section of the dialog box. When adding keywords or phrases use the same methods as you would if you were adding Keywords or phrases to a regular page.

Setting up Search Criteria in EverWeb is super customizable so that you can define and refine your search criteria, and boost your SEO, simply and quickly.

The new website search feature recently introduced in EverWeb 3.5 uses the Search Field widget for the creation of a search bar in your site and for how you want website search results displayed. You can choose from one of three search results display options: dropdown menu, popup window or ‘One of My Pages’. When using the last option, EverWeb’s Search Results widget is used to display the website search results created from the Search Field widget in a dedicated page.

The Search Results widget is always used in conjunction with the Search Field widget so cannot be used on its own.

Before Using the Search Results Widget…

To create a website search that displays search results in a dedicated ‘Search Results page’, you will first need to make sure that you have added the Search Field widget to your website. Drag and drop the Search Field widget from the Widgets Tab on to your page. Preferably, add the widget in to a Master Page so that you only need to add the widget to your site once.

Adding the Search Field widget to your page will enable the search bar as well as giving you the three search results display options mentioned above.

Position the widget on the page then customize it as you want. Check out our post on installing and customizing the Search Field widget for more infromation.

Adding the Search Results Widget

Once you have added the Search Field widget to your page you can create the Search Results page in your site which will include the Search Results Widget. This can be a page that you have already created, or even the page that contains the Search Field widget if you want.

If creating a new page for your Search Results widget, you can use the Add button in the Toolbar to create a new page. Uncheck the ‘Include page in navigation’ option as you probably will not want a dedicated search results page to be included in the navigation menu. 

You may also want the page itself not to be included in any Search Results either. To remove the page from any Search Results, go to the Page Settings tab and open the Site Search section and uncheck the ‘Include in Site Search’ checkbox.

Once you have created and named the Search Results page, drag and drop the Search Results widget on to it. Size and position the widget as required. 

The widget displays five ‘place holder’ results on screen. Each place holder includes Page Title, Page Link and page description.

Customizing The Search Results Widget

Customize and style the Search Results widget using the Widget Settings.

• Language: Set the language that you want search related messages to be displayed in e.g. the message shown when no search results are found. You have nine different languages to choose from: English, Dutch, French, Finnish, German, Italian, Norwegian, Spanish and Swedish.
• Open Link in New Window: Use this Check box to open a clicked upon search result in a new browser window.
• Insert Margins: This field adds vertical and horizontal padding to the search results set. 
• Spacing Between Results: This field is used to add vertical padding between each result in the search results set.
• Content: Search results can be displayed one of two ways: As a scrollable set or as a results set that adjusts the results content height as needed. When using the Scrollable option, the results only scroll when there are enough search results found that go beyond the height set for the widget. 
• Use Page Description Text for Summary: When this box is checked, the text from the Page Description field in the Page Settings tab will be used as the text summary in the search results. Note that if the Page Description is short, text from the results page itself may also be added to the description in the search results.

In addition to the Widget Settings, you can customize the widget using other settings in EverWeb:

• To change the color of the links in the search results, go to the Hyperlinks Inspector and change the colors of the Normal, Rollover and Visited options are desired.
• You can add your own background color, gradient or image to the Search Results widget using the Shape Options tab in the Inspector. You can even add Parallax Scrolling if you want!

Linking the Search Field and Search Results Widgets Together

Once you have finished customizing the Search Results widget, go back to the page that contains the Search Field widget. Select the widget, then set the Search Results field to ‘One of my pages’. A little bit further down in the Widget Settings, set the ‘Search Results Page’ as the page on which you have added the Search Results widget. EverWeb will check that the Search Results widget is included on the page you select. If it is not present you will receive an error message.

Preview your website, then enter search words in the Search box to test. In our next blog post, we will look at search criteria in detail!

The recently released EverWeb 3.5 includes two built in widgets that allow your website visitors to search your site: The Search Field widget and the Search Results widget.

The Search Field widget can be used either on its own or together with the Search Results widget. The Search Results widget, however, can only used in conjunction with the Search Field widget. It cannot be used on its own. Both widgets can be used in either a fixed width page layout (e.g. a centered layout) or in a responsive page layout.

Adding the Search Field Widget to The Page

Use the Search Field widget to add a website search bar to your website. For example, the perfect place would be in a Master Page so that the widget is accessible on all the pages attached to the Master Page.

In this example, I am going to use a Responsive Page Layout.  Add the Search Field widget by going to the Widgets tab then drag and drop the widget on to the page. You can position the widget as you want to be on the page or do this step later if your page is not complete.

Customizing The Search Field Widget Settings

As you have just added the Search Field widget to the page you should see its Widget Settings in the Inspector Window. We will use these to customize and style the widget.

First, set the language that you want search related messages to be displayed in using the Language field e.g. the message that you want to display if no search results are found.

Next, choose how you want to see the search results using the Search Results field. You have three options: Drop Down Menu, Popup Window or One of My Pages.

When using the Drop Down Menu or Popup Window to display your search results, you can use all of the options except for ‘Search Results Page’ which is used only by the ‘One of My Pages’ option. Customize the settings as you want.

If you check the ‘Use Page Description Text for Summary’ box, the text from the Page Description field in the Page Settings tab will be used as the text summary in the search results. Note that if the Page Description is short, text from the page itself may be added to the description in the search results.

If you have chosen the ‘One of my pages’ option, you will need to use a page in your website to display the search results. This page must include the Search Results widget. 

Use the remainder of the options in the Search Field Widget Settings to style the search bar, the search button and the search button when it is moused over.

If you are using the ‘One of my pages’ option, style the Search Results widget using its own Widget Settings options in your search results page.

Setting Up The Pages to Be Used in Search

Once you have finished customizing the Search Field widget, you will need to define the pages that you want to be included in your search results. You will then need set up the words and phrases in your website’s pages that will be used for searching upon. 

By default, all pages in your site are included in Search, however, you may want specific pages to be excluded from search results, e.g. directory level pages that are used in navigation menus or 404 Page Not Found pages. To exclude a page from being displayed in the search results, uncheck the ‘Include in Site Search’ option in the Site Search section of the Page Settings tab. 

Adding Words To Be Included in Search

Once you have deselected the pages you do not want to include in search, you can add search words or phrases to the pages that you want to be available for search. Use these methods: 

1. Add Keywords to the Search Engine Optimization section in the Page Settings tab of your page. 
2. Add Keywords to a blog post by selecting the blog post, then clicking on the Settings Cog. Select ‘Edit’ from the menu then add your Keywords in to the Keywords section.
3. Add a Web Page Description for the page. 
4. In blog posts, use the Short Summary field to enter a description of the post.
5. Add your search words in to the text of the page, or blog post.

Add a Web Page Title To Your Page

Make sure to complete the Web Page Title in the Page Settings tab as this is used as the title if the page is found in the search results. If you have search results that have no Web Page Title, these will be displayed with a title of ‘No Title’.

Once you have finished, preview or publish your site to test out your website search!

We’re excited to introduce EverWeb 3.5 which is all about Website Search! Two great new widgets give you fully customizable website search options and three ways of displaying the search results. That’s not all though as we have added reverse wrap to the Responsive Row widget, Short Summaries and keywords to blog posts for better SEO and Open Graph tags have been added to the SEO PowerUp addon for better social media interaction.

Last, but not least, EverWeb 3.5 has been developed as a macOS Universal Binary, so will run natively on Apple Silicon Macs without the need to use Rosetta 2 as well as running on Intel Macs as always!

All this and more in EverWeb 3.5! Check out EverWeb’s new features in the video at the top of the page and below for a complete list of its new and enhanced features as well as the usual fix list.

Which Version of EverWeb is For You?

EverWeb is available in the following versions:

• If you are running an Intel Mac running OS X 10.10, macOS Yosemite, El Capitan, Sierra, High Sierra, Mojave, Catalina or Big Sur, EverWeb version 3.5 is available for you.
• If you are running an Apple Silicon Mac running macOS Big Sur, EverWeb version 3.5 is available for you as a Universal Binary. EverWeb will run natively without the need to use Rosetta 2.
• If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 3.1 is available for you.
• If you are running OS X 10.6 EverWeb version 2.5.2 is available for you.

When updating to the latest version of EverWeb, the update process will automatically download the correct version of EverWeb for your operating system.

EverWeb 3.5 Includes…

• [NEW] EverWeb 3.5 can be run on Apple Silicon Macs as a Universal Binary using macOS 11 Big Sur.
• [NEW] Search Website feature allows your visitors to search your website’s pages.
• [NEW] Website search results can be displayed in a dropdown list, a popup window or on a dedicated page.
• [NEW] Search Field widget allows you to set up a search bar and search results.
• [NEW] Search Results widget allows you to display results in one of the pages in your website.
• [NEW] Site Search section in the Page Settings tab of the Inspector window allows you to include or exclude the page in website searches.
• [NEW] The Responsive Row widget now includes a Reverse Wrap option.
• [NEW] You can now duplicate Form Controls in the Contact Form Advanced widget.
• [NEW] YouTube widget now includes a mute sound option.
• [NEW] Open Graph Tags are automatically included when you publish your site.
• [NEW] Short Summaries for blog posts allow you to enter descriptive summaries about your posts.
• [NEW] You can enter Keywords in your blog posts.
• [NEW] The Blog Post Editor Toolbar now includes options for ordered lists to be either Default, Lower Alpha, Lower Greek, Lower Roman, Upper Alpha or Upper Roman.
• [NEW] You can add Hex codes for colors in the Blog Post Editor Toolbar’s Color Picker.
• [NEW] The Blog Post Editor Toolbar now includes options for unordered lists to be either Default, Circle, Disc or Square.
• [NEW] A ‘Duplicate’ button has been added to the Contact Form Advanced widget’s Form Controls section.
• [NEW] A ‘Test SMTP Details’ button has been added to the Contact Form Advanced widget.
• [NEW] Option to only use local Jquery and not try to connect to Google servers has been added to Site Publishing Settings.
• [IMPROVED] If you add or remove pages that are included in Navigation Menu widget only the pages with the Navigation Menu widget will have to be republished.
• [IMPROVED] Improvements to loading HTML previews in HTML viewers for widgets that use plugins.
• [IMPROVED] RSS Feed widget improvements for when images can’t be found in a feed. The widget will still properly preview.
• [IMPROVED] Improved language localizations.
• [FIX] Fixed an issue with shapes that use picture frames not exporting properly.
• [FIX] Arrange-> Align-> Left and Arrange-> Align-> Bottom now work correctly.
• [FIX] Shapes using Picture Frames could not have a colored background but now can.
• [FIX] In the Assets List, secondary clicking on multiple assets and selecting ‘Add to Folder…’ would incorrectly add an external file to the images section of the Assets List if an external file was selected while some image files were also selected.
• [FIX] Select color button now copies colors properly with the right click->Copy function.
• [FIX] Assets that are used in blog posts can now be found properly.
• [FIX] Render error icon for widgets when they cannot be generated due to compilation errors.
• [FIX] Fix for exception on mouseover in Navigation Menu widget.
• [FIX] Shadows now work for widgets and when exporting responsive css.

How To Update To EverWeb 3.5

You can easily update EverWeb by either:

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.

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon. Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

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

The update 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 update period from EverWeb’s Preferences window or from your client area.

If you have passed your one year of free EverWeb updates, 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 updates 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.

More Information About EverWeb

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

• The 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 on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

The Contact Form Advanced widget was introduced with EverWeb 2.0 and has grown in to a fantastically rich and versatile widget. The idea behind this widget was to provide a feature rich but secure widget so that your contact form would be less liable to SPAM and malware attacks. But that’s not all as the Contact Form Advanced Widget has a lot of other great features that can make filling in a contact form the best experience possible, Here are our Contact Form Advanced Widget feature recommendations based on the latest version EverWeb, version 3.4…

1. reCAPTCHA: This is a great tool, provided through Google, that adds security to your form. If you do not already have reCAPTCHA set up, just click on the ‘Sign Up for reCAPTCHA v2’ button and follow the instructions. At the end of the process you will get two keys: A Site Key and a Secret Key that you will need to copy and paste in to the corresponding fields in the Contact Form Advanced Widget Settings.
   Once you have set up reCAPTCHA and published your site changes, when a visitor uses your contact form, they will be asked to identify like photos in order to send the form to you.
   
2. Submission Confirmation Messages: There are two options available when a visitor hits the Submit button. The first is that the on-screen confirmation that the form has been sent. The message is automatically displayed and you can customize the message as you want. The second message is an Email Confirmation to the visitor that the form has been sent. For the latter feature to work, you need to enable reCAPTCHA in your form.
   Note that whilst these messages tell your visitor that the form they have been completed has been sent to you, this does not necessarily mean that you will receive the form. It is unlikely that this will happen, but be sure and test your form before going live with it and also make sure to check the email address that you use in the ‘Email Address to Send Form to’ field in the Widget Settings to make sure that it is a valid email address.
   
3. Remember Required Fields: Use this kind of field wisely. Too many ‘required fields’ may irritate your visitor and lead to them not completing the form. If there are too few required fields you may find that you have incomplete data, skewed data or an inaccurate overview of the data you originally wanted to collect. Finding the right balance of Required Fields may prove essential in your form.
   
4. Validation Messages: When visitors have not completed the form correctly e.g. they have not completed fields in the form that are obligatory, EverWeb will send out a default message as per the Form Validation Error Message field. You may want to customize this message to better suit your form. It is also worth considering giving your visitors more information about how to complete the form which leads on to the next tip…
   
5. Tips and Instructions: Creating a form is often straightforward, but there may be times where you need to add detail and complexity to the form which may require you to explain in more detail what parts of the form mean and how to complete them. This can happen, for example, if you use open ended questions in your form or if you are surveying people on their opinions. This is where using Placeholder Text and/or Control Instructions/Tip can prove invaluable. The Placeholder field is great for adding an example in the field e.g. in the email address field you may want to add e.g. Jane.Doe@mysite.com as an example of what to fill in. When your visitor types in the field, the Placeholder text disappears.
   The Control Instructions/Tip field does exactly that. Add information that will be useful for filling in the released field. The instructions/tip will be displayed immediately below the field itself. You can customize the form field and Control Instructions/Tip field’s font attributes as you want.
   
6. Forwarding Your Visitor to Another Page: Once your visitor hits the Submit button, you may want to take them away from the contact form page to another in your site. This could be e.g. a thank you for filling in the form page, or to a ‘what happens after you complete the form?’ page, or you may want to just return the visitor to your site’s Home page. Use the Forward to Page field to select the page you want the visitor to taken to.

Fine tuning the settings of the Contact Form Advanced widget can lead to an enhanced visitor experience and can help you collect the data that you require. Adding information to help visitors complete the form accurately will make form filling quicker, easier and more accurate!

In the previous post, we discussed how objects are stacked in Fixed Width page layouts and how you can change the order of objects within the stack, even when you have a Master Page attached to your page.

In this post, we explore how objects in a Responsive Page Layout in EverWeb are handled when you are building your responsive website.

The Same but Different…

If you have been a long time user of EverWeb you will probably know already that when it first came out you only create websites with a Fixed Width Page Layout. This all changed in EverWeb 2.8 when the Responsive Page Layout was added.

One of the design goals that we wanted to make sure of was that you could use EverWeb with a Responsive Page Layout in exactly the same way as you did with a Fixed Width Page Layout. For example, adding a new page, editing a TextBox, drag and dropping objects, accessing menu options and and so on would all remain the same as before. This goal was achieved, however, the concept of Responsive Website Design is in many way different to Fixed Width website design. As such, whilst EverWeb works in the same way as before, the fundamentals of designing a Responsive website is distinctly different to designing a Fixed Width website.

…Different but the Same

If you are designing a Responsive website in EverWeb for the first time, take a look at EverWeb’s YouTube video site to help get your started, or the EverWeb User Manual within the product which has a whole chapter dedicated to get you quickly productive.

If you have already been using EverWeb’s Fixed Width Page Layout for your site, you may want to convert your existing site to a responsive one, or you may simply want to design a completely new site. These are the kinds of circumstances where you will quickly find out that everything is different but the same. Again, check out the EverWeb User Manual to get up and running quickly.

Object Handling in Responsive Pages

One major area of design difference is how objects are handled on the page. In a fixed width design page design, objects can be stacked one on top of the other. In a responsive page design this is not possible. For example, create a Fixed Width page then add a rectangle to it. Next add a triangle. The two shapes appear on top of each other so you will se the triangle as it is the same color as the rectangle that it sites on top of. You can change the color of the triangle e.g. to yellow, to see the two shapes clearly on top of each other.

Now go to the Page Settings tab and change the Page Layout from ‘Centered Layout’ to a Responsive one. You will see that the yellow triangle sits on the top row, the rectangle shape is below it on the second row and the EverWeb logo sits beneath the rectangle on the third row.

If you try to stack any of these objects one on top of the other, you will find that it is not possible. Instead the objects will appear move to a different row, again one on top of each other. Now try to move the bottom object further down the page so that it is on its own. You will see that this time the object just snaps back to sit under the second object.

In responsive design, stacking one object on top of another is not usually possible and all object rows in a page must be contiguous to one another. There are many reasons as to why this is necessary, but essentially it is because a responsive page is scaleable that it is a requirement that the page structure is maintained at all times, at any scaling point. Objects on the page have to stay properly contained within the page at all times, so one of the ways to achieve this is to have the objects ‘flat’ on the page rather than allowing them to be ‘stacked’.

Options! Options! Options!

The Responsive Web Design approach may be frustrating at first if you have come from a Fixed Width design background. It may take time to get used to how responsive design works and the pros and cons of it. Here are a few tips that may help you out…

1. Background colors and images. Most objects and widgets can have a background color, or image, added to them without the need for a background shape being added.
2. Group Objects Using the FlexBox and Text Section widgets. Placing objects near to each other can be easily achieved with these two widgets so it’s easy to group text, images and buttons together as you want.
3. Images. If you want to have a frame around an image in a responsive page, you can add a line to an image using the Shape Options tab. You cannot use a Picture Frame, however, as the frame is actually an image in its own right so adding it to an image would make the two images appear side by side. Instead, it is better to add a frame to the original image using an image editor then use this image in EverWeb instead.
4. Check Out Third Party Widgets. There are some great third party solutions from EverWeb Widgets, EverWeb Garden and that may give you the solution you need. Note that some of these third party widgets are free, some are paid for widget.
5. Graphics Editors. You may find that a graphics editor becomes more useful if you need to include a ‘stacked’ type object on your page. Export the complete image as a jpg or png file then drag and drop the image in to EverWeb.

Embracing Website Design Differences

Responsive Web Design offers a different way of developing your website and has many advantages over traditional fixed width designs. The advantages (discussed in the EverWeb User Manual) of responsive web design, however, makes the design approach more difficult. In some ways you may feel constrained in what you can do, as the example of stacking objects, illustrates. It’s a different paradigm, though. Once you start working with responsive pages in EverWeb, you will start to find that there are many different possibilities and solutions at hand. It is just thinking in a different way, out of the box, or maybe within a ‘boxes within boxes’ approach that typifies responsive web design.

As you may already know, an ‘object’ in EverWeb can either be a TextBox, shape, image or widget. To add a TextBox to the page, you simply click on the TextBox button in the Toolbar then start adding your text inside the box. To add a shape, you just click on the Shapes button then click on the shape you want from the thirteen available shape types. Images can be added to your page by drag and dropping them from your hard drive, cloud location, the Assets List or by using the Media button in the Toolbar. Last but not least, widgets can be drag and dropped on to the page from the Widgets tab. All nice and easy

Objects in Fixed and Responsive Page Layouts

EverWeb has two types of page layout: Fixed Width and Responsive. In the Page Settings Tab of the Inspector Window, you will see a section called ‘Page Layout’. If you click on the dropdown menu, you will see three page layout styles are available. The Left Aligned Layout and Centered Layouts are Fixed Width page layouts whilst the third page layout, Responsive, is used if you want to design a Responsive website.

Whilst the technique of adding objects to the page in either of the two page layout types is the same, the way in which objects are handled on the page can diff.

Object Stacking in Fixed Width Page Layouts

When you add an object to a page in EverWeb, it is as if you are adding a new layer on top of the existing layers of the page, in the same manner as using layers of tracing paper. To see this effect create a new Blank Home page in an EverWeb Project file. The Blank Home page uses a Centered Page Layout and has only one object in it – the EverWeb logo image located in the Footer section. To keep this example simple, delete the logo image from the page.

Now that the page is completely blank, click on the Shapes button in the Toolbar and add a rectangle shape to the page. Click on the Shapes button a second time and add a triangle shape. This shape will sit directly on top of the rectangle. As the triangle is the same color as the rectangle you might not see it, so go to the Shape Options tab and change the Color Fill to green. Now click a third time on the Shapes button and add a circle. The circle will sit on top of both the triangle and square obscuring a part of both of these objects. Again, use Color Fill to change the color of the circle, this time to red.

You can freely move the three objects around the page as you want – horizontally along the page’s x-axis and vertically along the y-axis. In this example notice that the circle always sits on top of the triangle which always sits on top of the rectangle. This ‘stacking’ of objects shows you the depth of each object on the page which occurs along the z-axis.

For the moment, you will find that you cannot change the depth order of the stack. This is reasonable as the page is viewed on screen as a two dimensional object rather than a three dimensional object.

Changing Object Order on The Page

Most of the time, you will not need to worry about the ‘depth’ of objects on the page, however, there may be times when it does become important. For example, you might want to place two shapes on top of each other to create, e.g. a player control button, which would be represented by a circle on top of a rectangle. If you add the circle shape first to the page then the rectangle shape next, you will find that the rectangle is always above the circle.

EverWeb allows you to easily change the z-axis order of objects by using the Arrange-> Bring Forward or Arrange-> Send Backwards menu options. The option you choose depends on which object you have selected. To save time, you can also secondary click on the object you want to change the order of then choose the option you want from the popup menu.

As you can see from the Arrange menu, you can also quickly move an object right to the top or bottom of the stack using the Arrange-> Bring To Front and Send To Back menu options.

Objects in Master Pages

So far, so good, but what happens if you have a Master Page attached to your page? In this scenario, the Master Page is treated as if it is another page underneath the page it is attached to. Master Page objects can be brought forward or sent backwards but only within the Master Page itself.

The page the Master Page is attached to sits independently above the Master Page. The objects on this page can only be stacked within the page itself. Again this usually is not a problem but there may be times where you want a Master Page object to be visible above all other objects e.g. a navigation menu widget. In this instance you can force the object to be at the top level of the stack by selecting it then selecting the Arrange-> Always on Top menu option, or by checking the same option in the Metrics Inspector.

You can apply Always On Top to multiple objects. Objects set this way will still have a stacking order too, so you can still use Bring Forward and Send Backwards when Always on Top has been set.

More About Object Stacking…

Knowing how and why objects are stacked will help to make designing your website easier. In the second part of this post, we will look at object stacking in Responsive Page Layouts.

Creating flexible, one page fits all devices, website designs is at the core of Responsive Web Design. EverWeb makes building responsive pages as easy as possible through its built in features, widgets and drag and drop capability. If you have built a fixed width website using a centered page layout, or are just new to web design and want to try out creating a responsive web design, you may find some challenges ahead of you…

A case in point comes when using images in a responsive page layout. As you scale the page, you can allow its images to automatically scale at the same time.

If this is what you want to happen but it doesn’t, what’s going wrong and how do get scalable images? In this post we will explore the background to images in responsive pages and explain how, with a bit of knowledge behind you, you will be easily be making pages with scalable images!

Adding an Image Directly on to a Responsive Page

Images can appear in a number of different ways on a responsive page depending on how and where they are added. For example, if you create a blank responsive page and drag and drop an image on to it in the Editor Window, you will see that the image occupies the full width of the page. Use the selection handles of the image to increase its height. When you preview the image, you should see that it scales as you change the width and height of the browser.

That is fine if you want your image to be full width across the page but often you may have one or more images that you want displayed on the page, but you do not want them full width.

Images in a Responsive Row Widget

Often images are added in to a Responsive Row widget as this widget is a great way to add fixed width objects to your page. And this is exactly what you have to remember… the images you add will be fixed width.

You can try this yourself to see the effect that it has on your page. First delete the image on the page if you added it from the above example so that your page is empty. Next, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

Once the widget is on the page, drag and drop an image inside the Responsive Row widget. Now go to the Metrics Inspector to check the width of the image. If the image is 350px or less wide, increase this to e.g. 600px wide. Make sure when you do so that you have ‘Constrain Proportions’ checked. If you preview the image, you will see that the image remains fixed in size. If you use your browser’s responsive design mode, you will be able to view the page as if it was being displayed on one of a number of different devices. For example, if you use Apple’s Safari Responsive Design Mode you can view the page as if it were being displayed on an iPhone SE, iPhone 8 or 8 Plus and so on. You should see that the image does not scale and also overlaps any device that has a screen width of less than 600 pixels wide.

the moral here of using a Responsive Row widget with images (or any other object for that matter) is that as the objects are fixed width, you may get problems on some devices if the image is too wide to be displayed properly.

Solving the Scaling Problem

So, how do we solve the problem of getting images to scale correctly and the knock on problem of having images always fitting within the width of all devices? The answer: The FlexBox and Text Section widgets!

Using either of these widgets will enable fully scalable images on your page. Choose the widget that best suits your requirements. In this example, we will use the FlexBox widget as it allows you to add more than one image at a time in the widget.

Start by deleting the Responsive Row widget from the page then add the FlexBox widget to the page. In the Embedded Objects section of the widget, click on the Add button below the ‘Embedded Objects’ list. Set the Object Type to Image.

Scroll down to the Image Settings section and click on the ‘Choose…’ button to add your image. Next, You delete the text that you see in the Styled Text Editor further down the page so that you just have the image on the page. Lastly, scroll back up to the Object Sizing Options section of the widget.

The important fields to use in this section are the Minimum and Maximum Width fields. If you set the Maximum Width as zero, the image will take up the width of the screen that is available to it from the Minimum Width value upwards. So you could make the Minimum with 250 (which will likely suit the smallest mobile phone) and leave the Maximum Width at 0. You could also set the Default Width to the same value as the Minimum Width.

Preview the page to see the effect. You should see the page scale correctly at all time. If you use your browser’s responsive design mode, you will also see that the page width will alway fit within the device it is being displayed upon.

Once you have tested your page, try adding a second Embedded Object to the FlexBox widget using the same parameters as above. Alternatively, duplicate the image and experiment with the Minimum and Maximum width values.

When using the Minimum value, it is usually a good idea to use a hard number e.g. 250. In this way you will more than likely accommodate the smallest mobile device. For the Maximum value, you could leave it as zero or even use a percentage value e.g. 95% of the width available to the object.

You can also add margins to the left and right side of the widget using the Margin fields in the Metrics Inspector which will keep the image away from the edges of the browser. There is much you can experiment with here so the advice is to start simple!

With a little bit of widget knowledge, it is easy to create great scalable images in your website that fit within any device they are displayed upon!

There are many ways in which you can link to email in EverWeb. There are a variety of ways in which you can either open your email app for your visitor to create a new email or use a predesigned for from within a page of your website.

Here are some ways in which you make linking to email work effectively for you…

Using The Hyperlinks Inspector

The most common way to link to email is by linking a piece of text or an object, such as a shape or an image, to an email app using EverWeb’s Hyperlinks Inspector:

1. First select the object that you want to link the email app to
2. Go to the Hyperlinks Inspector and check the ‘Enable as Hyperlink’ box to activate the settings.
3. Change the Link To: dropdown menu option to ‘An EmailMessage’.
4. Enter the email address that you want the email to be sent to in the To: field.
5. Enter the subject of the email in the Subject: field.

That is all that you need to do! When you preview or publish your website, when the visitor clicks on the Hyperlink, their email app will open with the To: and Subject: fields already filled in.

Using the Contact Form, or Contact Form Advanced, Widget

EverWeb includes two Contact Form widgets. The Contact Form widget debuted in EverWeb 1.0 and is a very basic form. The Contact Form Advanced widget premiered in EverWeb 2.0 and supersedes the original form. This Advanced form continues to gain new and improved features, whilst the original Contact Form remains to be used for legacy purposes.

We highly recommend that you use the Contact Form Advanced widget as it is a lot more secure than the original Contact Form widget. The advanced form also offers a lot more features and flexibility so that you can design just the form that you want to fit the style of your website!

By default, both contact form widgets include an email address field which should be filled in straight away with a valid email address where the form will be sent to when the visitor hits the ‘Submit’ button. The original contact form only includes four input fields at most whilst the Advanced form allows you to create any number of fields, each of which includes its own form control type. The Advanced form also allow you to send confirmation messages that the email has been sent as well as customizable form error checking messages and reCAPTCHA anti-Spam capability.

Using The Styled Text Editor in Widgets

The Styled Text Editor is included in the FlexBox, Text Section and PayPal widgets. You can add a link to an email app from within the Styled Text Editor using the following method:

1. Highlight the piece of text that you want to link to email.
2. Click on the Link button in the Styled Text Editor’s Toolbar.
3. To add just a ‘Send To’ email address enter
   mailto:emailaddress.com
in to the URL field. Replace ’emailaddress.com’ with the email address that you want the email to be sent to.
4. You can also include a default Subject heading by using this line in the URL
   mailto:emailaddress.com?subject=My subject 
In this instance, replace the email address as described above then change the text ‘My Subject’ to the text that you want to be displayed in the Subject field when the visitor’s email app opens.

Using the Link Field in Blog Posts

As with the Styled Text Editor, you can add email links in to your blog posts in exactly the same way, using the Link button in the Blog Post Editor.

As you probably already know, as well as the Blog Post Editor, there is also a Blog Post Preview window below the Editor window. If you add objects in to this window they will appear in all of your blog posts. Therefore, this is a good place to put objects such as an email link button. In this case,

1. Click in the location in the Blog Post Preview Window where you want to add your email link button, e.g. in the Footer.
2. Add an email icon to the Blog Post Preview Window using the Insert-> Button-> Email Me menu option
3. Use the Hyperlinks Inspector to add the link to your email app to your button.

Using the Built in Link Button in Widgets

The last way in which you can add links to your email app in EverWeb is through the ‘Link’ button in EverWeb’s FlexBox and Text Section widgets. In these instances you can add links to your email app when your visitor clicks on an image or button that you have added to the widget. Use the same method as for linking to the Styled Text Editor, as described above, to add your email link.

Adding a link to email is easy in EverWeb and knowing a couple of tricks along the way can also help take your website design one step further!