Mac SEO Blog

Many websites have the blog index page displayed on the Home Pages. This is a good idea as typically your website’s Home page is the one that your visitors will land on first when accessing your site. Locating the blog on the Home page also gives it high visibility and it’s easy to access if your visitors want to drill down in to articles of interest that you would not put on your regular web pages.

You can easily set up your blog index page to appear on your Home page in EverWeb. Start by creating your blog in your website project file if you have not done so already. To do this, just add a page using the Add Page button in the Toolbar. Select the Blank Template in the left column and then select ‘blog’ as the page style you want on the right, Click Enter to finish. Add a few blog posts in your blog so that you build up an index of posts to display.

Typically when you create a blog, the blog main index page is called ‘blog’ and is located in the top level of your Web Page List (WPL) structure. You can, of course, change the name of ‘blog’ to something else if you wish. You can also move the blog structure of blog main, posts and archive pages into a subdirectories as well if you want. In this example, we will stay with ‘blog’ in at the top level in the WPL structure.

Once you have your blog set up, go to your website Home page and drag and drop the RSS Feed Widget on to your page from the Widgets tab.

Size and place the widget as desired. You can always adjust the exact size and position later if needed. Creating extra space for the RSS Feed widget is easy to do using the keyboard shortcuts introduced in EverWeb version 2.1, For example, holding down the ‘Shift+Cmd’ keys whist dragging the widget down the page will move everything below the widget down the page in synch. It’s a great time saver!

With the RSS Feed widget in place and selected, go to the Widget Settings tab in the Inspector Window.

In the ‘Feed URL’ box, enter

http://www.websitename.com/blog/rss.xml

Where ‘websitename.com’ should be replaced with your own website URL.

The ‘/blog’ portion of the URL indicates the folder location of the Blog Main page in the Web Page List.

The ‘rss.xml’ at the end of the URL is the name of the file used to generate the blog main index page on the Home page. The file is created when publishing your website the first time using the RSS Feed widget. As such, you may not see the RSS Feed widget updated in the Editor Window if the ‘rss.xml’ file has not yet been created.

Check the URL to make sure it is free of any typos and adjust the other RSS Feed widget settings as you wish, then publish your website to see the results.

Remember that if you use Preview and do not see your blog, it may be that the rss.xml file has not been created yet. If this is the case, or you find that the blog listing is not up to date, republish your website to update the rss.xml file. If your blog index still does not appear, check the URL in the RSS Feed Widget in case of typos.

The RSS Feed widget is a great way to easily add your blog index to your website Home page in just a few steps!

If you have any questions or comments, please let us know in the Comments section below. We are always happy to help and have your feedback!

Video Walkthrough

You can see this feature in action in our ‘Adding A Blog Index to Your Home Page‘ YouTube Video!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Since our last update at the end of 2016, we’ve been busy, as always, making EverWeb even better. Catch up on what you may have missed in our mid 2017 Review below!

EverWeb Versions 2.1 – 2.3

The last release of EverWeb in 2016 came in November with the huge version 2.0 release that added a fully featured, integrated, blogging environment to EverWeb. The all new Contact Form Advanced widget also debuted,  taking contact form creation to a new level.

2017 kicked off with the release of EverWeb 2.1 in January, adding a new ‘Link to Archive’ feature for the blog main page as well as new security features for the Contact Form Advanced widget, more details of which can be found below. Other additions to the widget included the ability to delete form options and reorder control options.

Two new keyboard shortcuts also debuted making your workflow a lot easier and time saving. The Command+Option key shortcut lets you easily drag an object out from underneath other objects whilst the Command+Shift key shortcut lets you to drag and drop objects up and down your page whilst retaining the page layout.

For more details, follow the links to the EverWeb version 2.1 release notes.

In February, EverWeb version 2.1.1 updated the Audio, Contact Form Advanced and Image Slider widgets as well as the usual maintenance and stability improvements. The EverWeb 2.1.1 release notes have all the details.

EverWeb version 2.2 followed in April with the brand new Animation Engine bringing you 16 different types of animation effects to use in your website. This is a great feature that really makes any website pop and are great ‘Call To Actions’ for your visitors.

The new ‘Distance to Object’ feature was also introduced, making it easy to see how far one object is away from other objects in the Editor Window. To use this feature, first select an object then hold down the Option key whilst mousing over other objects. You will see the distance between the source and target objects displayed directly in the Editor Window. For more on this and the other features of this release take a look at the EverWeb version 2.2 release notes.

Our final release for the first half of the year, EverWeb version 2.3, brought optimization and speed improvements to make websites load faster as well as bringing faster upload times when publishing websites.

Blogging

There’s a lot of information available about EverWeb’s new blogging feature. If you are new to blogging, or   transitioning from iWeb to EverWeb, our YouTube videos, and blog posts are there to help you get started. If there is something you want us to feature, please let us know, we would love to help!

We also have an updated iWeb to EverWeb YouTube video for EverWeb version 2.o making transferring from iWeb to EverWeb even easier with our step by step guide.

Since EverWeb 2.0 we have refined and added features to blogging such as updating the blog main widget to include a customizeable ‘Go To Archive’ page hyperlink feature and streamlining the import ofblog posts from iWeb and WordPress into EverWeb.

Updated Widgets

A number of widgets have been updated since the start of the year, notably:

Contact Form Advanced

The Contact Form Advanced widget added new features to make sending and receiving of forms more secure and reliable using SMTP features. This is an important addition to the widget as email apps get more aggressive about spam, you will still want ‘valid’ emails to come through without any problem.

The Contact Form Advanced widget now lets you reorder its Control Options and delete Form Options

Image Slider Widget

A couple of small, but great, additions to this widget. You can now center thumbnails and you can also change the color of the previous/next arrows to be either light or dark.

Audio Widget

One of first widgets that shipped with EverWeb 1.0 was updated to include audio looping, automatic playback on page loading, the ability to set the default sound volume and a mute option.

Working with Other Products and Tools

Our blog posts featured many different aspects of EverWeb but we also took the time to look at how EverWeb can be used with other products such as Font Awesome and JotForm. Our blogs also now have more links to corresponding YouTube videos so it’s even easier to see how features work.

If there is any feature that you would like to see us cover, please let us know in the Comments Section below, we’re happy to help!

Looking Ahead!

Although it’s been a busy first half of 2017, there’s plenty more to come in the second half of the year. We’re working hard on EverWeb version 2.4 at the moment and should have more news to share with you soon!

The most important part about EverWeb is giving you the best features and experience that we can. If there is anything that you would like us to consider for the future, or anything we can do better, please feel drop us a line I note Comments Section, we’re here for you!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Using a mouse or other form of pointing device such as a stylus, trackpad or even a finger,  is a given for any computer, tablet or phone user when navigating the its OS,  apps or website browser. Each method of ‘pointing and clicking’ has its own context e.g. you can hover a mouse over text, or a shape, and see it’s color change, but you cannot use the same hover over effect if you are using a finger on a mobile phone. This blog describes ‘mouseover’ effects but refers to any kind of pointing device. When using ‘mouseover’ effects in your own website remember to take into account the devices you are going to be interacting with and use the most appropriate effect.

The effects shown are ‘Call To Actions’ where you want to bring attention to something on screen that you want your website visitor to follow. The most common example of a mouse over effect is hyperlinked text such as ‘this will take you to the EverWeb website‘.

Text Effects Using Hyperlinking

The best known mouse over effect is the hyperlinked text effect. These are created in EverWeb using the Hyperlinks Inspector:

1. First select the text you want to hyperlink
2. Go to the Hyperlinks Inspector in the Inspector Window and tick the ‘Enable as Hyperlink’ box
3. Use ‘Link To’ dropdown to choose to link to a page in your website, an external page, a file or to an email message
4. Use ‘Behavior’ dropdown list to choose if you want to open the link in a new browser window, as a popup window or as default which will replace the current page contents with the linked page contents.
5. The section below ‘Behaviour’ displays options appropriate to what you have selected for ‘Link To’. Fill in the required information as appropriate.
6. The ‘Hyperlink Formatting’ section is where you select mouseover effects by setting the following properties:

Normal: How text looks before you mouseover it. You can change the color using the color swatch. Click the ‘U ‘ button to toggle the text underline on and off.

Rollover: Sets how the hyperlinked text looks when the mouseover it. This is sometimes referred to as ‘Rollover’ or ‘Hover Over’.

Visited: Sets how the hyperlinked text looks after it has been clicked on. This can differ from ‘Normal’ if it is important to let the visitor know that they have clicked the hyperlink before.

Hyperlink Formatting options can also be used on EverWeb’s built in Navigation Menu widget as the widget uses hyperlinks to take you different pages in your website.

When hyperlinking text, try to make the text itself unique e.g. if you hyperlink the words ‘click here’, in SEO terms it will never be found because everybody uses ‘click here’ as hyperlinked text! Try where possible to describe what the hyperlink is instead of using generic ‘click here’ text.

Setting Default Hyperlink Styles

You can set the default color and under line style for Normal, Rollover and Visited  hyperlink states by clicking on the ‘Default Styles’ button in the Hyperlinks Inspector, or from the Format-> Default Styles… menu option. Changes to any of the Default Styles only apply to anything created after you have updated the default.

Mouse Over Effects Using Shapes

As well as text, you can use mouseover effects for objects such as shapes or images.  Shape objects are often used as Call To Action objects e.g. as a button to press. Images can be used in a variety of different and innovative ways as we show later on.

1. To start, add a shape from the Toolbar to your page e.g. an arrow shape which, in this case, changes color when  moused over, and is hyperlinked when clicked on to go to another page on my website.
2. With the arrow shape selected, go to the Shape Options tab in the Inspector Window. By default, the ‘Fill’ type is set to ‘Normal’ with the color set to blue.
3. To setup the change of color on mouseover, change the ‘Fill’ type from ‘Normal’ to ‘Mouse Over’.
4. Next select ‘Color Fill’ from the drop down menu.
5. Use the color swatch to change the color for the mouseover.
6. When finished, use the ‘Preview’ button in the Toolbar to test that the mouseover works properly.
7. Finally, hyperlink the arrow using the Hyperlinks Inspector as described earlier in the blog. Note, however, that as this is a shape object, the Hyperlinks Formatting options will not work as they only apply to text.

Mouse Over Effects Using Images

Mouse over effects are also great for adding ‘discovery areas’ to images. In the following example, I have a map of Paris which I want to overlay some information on top of  when my visitor mouses over the Eiffel Tower. The information is a piece of text that has been converted in to an image file.

1. Start by adding an image to your page if you have not done so already, in my example, a map of Paris.
2. Next create a Text Box but delete its contents so that it is just an empty box.
3. Place the Text Box over the Eiffel Tower and size it appropriately.
4. With the Text Box still selected, go to the Shape Options tab in the Inspector Window.
5. Select the Fill Type as ‘Mouse Over’.
6. For the effect to work, the image file used contains the text I want. This file was prepared beforehand using a graphics editing program.
7. Add the image file using the ‘Image Fill’ option from the drop down menu.
8. Finally make sure that the image is always on top by using use the Arrange-> Always On Top menu option or the ‘Always On Top’ checkbox in the Metrics Inspector.
9. As the ‘Normal’ Fill Type is an empty box you will not see anything in the Editor Window except for the Text Box outline.
10. When you Preview the page, mouse over the area of the image that contains the empty Text Box and you will see the mouse over image containing the text appearing.

In the last example, you can use social media buttons to create ‘Call To Actions’ when they are moused over. For example, you could invert the regular Facebook logo from white text on a blue background, to blue text on a white background when hovered over. To do this:

1. First obtain the Facebook logo from Facebook’s own brand resource website.
2. Once you have the original white text on blue background logo, take this into a graphics editor and invert the image. Save the inverted image as a new file name but with the same settings as the original file.
3. Now go to your page in to EverWeb.
4. For the ‘Normal’ Fill, select ‘Image Fill’ from the drop down and select the original Facebook logo file.
5. For the ‘Mouse Over’ Fill again use ‘Image Fill’ from the drop down, this time selecting the inverted Facebook logo file.
6. Use Preview to test that the mouseover works correctly.
7. To finish, hyperlink the Facebook logo to your Facebook page using the Hyperlinks Inspector.

Mouse over effects give you a variety of methods to bring to attention to ‘Call To Actions’ regardless of the pointing devices  used or the environment your website is being used in.

Watch the Video!

For a walkthrough of a some of the mouse over effects shown above, why not check out our YouTube video, Using Mouse Over Effects in EverWeb.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Read the rest of this entry »

EverWeb makes it easy to embed a JotForm contact form into your web pages. JotForm is a free to use, third party online contact form builder that does not require any coding. Like EverWeb, JotForm has great drag and drop capabilities, templates and even widgets so that you can create and customize the contact forms you want quickly and easily.

In the example below, students are going to be voting for a new Student Union president. Voting is via a contact form that is embedded in a web page. In this example the contact form has already been created in JotForm.

1. To start, click on the ‘Add Page’ button from the Toolbar in the  EverWeb project file that you want the contact form to be embedded in.
2. Select the Theme Template you want to use e.g. the ‘University’ Theme Template.
3. Next choose the page style you want e.g. the ‘Blank’ page style, then click the ‘Select’ button.
4. Make sure that you have enough space to embed the form on your page. You can adjust the page layout later, but it is a good idea to get an approximate look for your page before you embed the JotForm.
5. With the page layout prepared in EverWeb, go to the JotForm website and log in to your account if you have not done so already.
6. Select the JotForm contact form that you want to embed in to EverWeb.
7. Click on the ‘Publish’ button in the menu.
8. Select ‘Embed’ from the left hand side and then click on the ‘Copy Code’ button which will copy the embed code to the clipboard so it can be pasted in to EverWeb.
9. Now go back in EverWeb and click on the ‘Widgets’ Tab.
10. Select the ‘HTML Snippet’ widget and drag and drop it on to the page in the space that you created earlier for the JotForm contact form.
11. Click in the ‘HTML Code’ box and paste the code in from JotForm.
12. Press ‘Apply’ to finish. You should see your Jotform form embedded in your EverWeb page.
13. Optionally, you may want to make the embedded JotForm full width. If this is the case, keep the HTML Snippet widget selected, go to the Metrics Inspector and check ‘Full Width’.
14. Finally, reformat the page layout as required so that the embedded form is in the correct place on the page.
15. ‘Preview’ or ‘Publish’ the form so that you can test that it works correctly. In this example, Use Preview to check out the layout and form content.  Only click on the ‘Submit’ button when you ‘Publish’ your website and not when using Preview as it will not work correctly if you do so. When you have published the website, rest the JotForm to make sure that the email sent is received properly by your email program.

Matching Up Colors

If you need to match up the colors in your JotForm contact form with those in your EverWeb page there are two ways you can do this:

Using the Eye Dropper in EverWeb

1. Begin by selecting the object in EverWeb that needs to have its color changed
2. Next Click on the Shape Options tab in the Inspector Window
3. Click on the color swatch in the Fill section. The Color Picker appears on screen
4. In the bottom left hand corner of the Color Picker you will notice there is an Eye Dropper. Click on this.
5. Your mouse pointer will change in to a large magnifier. Move the magnifier over the object whose color you want it to match with and then click
6. Your selected object will change color and match the object you clicked on.

Using Digital Color Meter

Digital Color Meter comes with macOS. Use a Spotlight search (Cmd+Spacebar) and enter the words ‘Digital Color Meter’. As you type, the whole phrase gets autofilled by the search. Just press enter when this happens to open the application. When using Digital Color Meter, remember to set ‘Display in Generic RGB’ from the drop down menu. Once you have done this, mouse over the color you want to select. Make a note of the R, G and B (Red, Green and Blue) values that are shown in the Digital Color Meter.

When you have the color values, go back to EverWeb and select the object that you want to be the same color as in JotForm, for example, a rectangular shape. Go to the Shape Objects tab and click on the color swatch in the Fill section. This will call up the Color Picker. Select the second tab from the left in the Color Picker and enter in the R, G, B values in the corresponding Red, Green, Blue values boxes.

YouTube Video Link

There’s also a YouTube video available of this blog so check out Embedding a JotForm in EverWeb for the audio-visual walkthrough.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Sitemap Automator, the XML sitemap generator for macOS and Windows has been updated to version 3.5.

This new version comes with better support for HTTPS secure websites, support for macOS Sierra, Windows 10 and improvements to scanning websites and uploading your XML Sitemaps.

Sitemaps are an important aspect for search engine optimizations as they tell Google and other search engines how to scan and display your website in their search engine results.

Plus, with Google’s search console you can get important feedback directly from Google as to why your website may not be ranking properly. You can find out if there are any problems on your website, who links to your website, what pages rank the highest and even get suggestions to improve your search engine rankings.

Sitemap Automator is free for registered users and there is a free trial for all non license holders to try it out.

You can download Sitemap Automator from the Sitemap Automator downloads page.

If you have not heard of Font Awesome, it’s a collection of over 600 scaleable icons that you can include in your web pages and it’s absolutely free! In addition, Font Awesome’s icons do not need to be downloaded and they can be updated by those who supply them. For example, Google updated its Google+ icon about a year ago and later updated its Font Awesome icon. The updated icon is automatically used in your web pages so you do not have to update. or republish. your website. The icons can be customized so that you can combine icons together, change the icon’s color and other effects. Last but not least, using Font Awesome’s icons is a great way to ‘dip you toes’ into the ‘waters’ of HTML.

Getting Started With Font Awesome

To start using Font Awesome icons is very simple and only takes a few steps:

1. Go to the Font Awesome website and click on the ‘Getting Started’ menu.
2. Sign up by entering your email address and clicking on the ‘Send my Font Awesome embed code’ button.
3. Check your email. If you have not received an email, check your junk mail folder just in case.
4. Copy the CDN (Content Delivery Network) embed code from the email to the clipboard.

Adding Your Font Awesome Embed Code in EverWeb

The CDN embed code is going to be added to your EverWeb Project file. Font Awesome uses the CDN, or Content Delivery Network, as a simple, fast and efficient way of loading and rendering icons on your page. Now that you have copied the CDN embed code, you can use it in EverWeb:

1. Open your Project file in EverWeb
2. Go to the ‘Site Publishing Settings’ either by clicking on the website name in the Web Page List or by using the File-> Edit Publishing Settings menu.
3. Go to the Header/Footer Code section. In the Header Code section, paste in the CDN embed code.

You are now all set up to use Font Awesome icons in your Project. As you have added the code to the Project’s Header code section, the embed code is now available on all of your Project’s pages so you place add icons anywhere in your website.

Using Font Awesome Icons in EverWeb

Now that everything is set up you can start to use Font Awesome icons. Each Font Awesome icon has its own name e,g. the Instagram icon is called ‘fa-instagram’, an icon representing a desktop pc is called ‘fa-desktop’ and so on.’fa’ is used as a prefix to identify the icon as a Font Awesome icon. All available icons and their names are listed on Font Awesome’s Icons page which is sorted by category and completely searchable.

To get started, it’s a good idea to try out some examples from Font Awesome’s ‘Examples’ menu. You will find a great camera example in the ‘Larger Icons’ section which shows you how to scale the icon to different sizes, a ‘Stacked Icons’ section that shows you how you can place icons on top of one another and so forth.  Even if you have never had any experience in HTML it is easy to get started using the code relating to each icon.

To add an icon to your page in EverWeb do the following:

1. Start with an example from Font Awesome’s icon page e.g. the camera in  the ‘Larger Icons’ section.
2. Copy the code that relates to the icon on the left hand side e.g. for the largest camera icon displayed,  copy the code on the right of it to the clipboard e.g.

   <i class="fa fa-camera-retro fa-5x"></i> fa-5x

3. Next, in EverWeb, drag and drop the HTML Snippet widget on to the page.
4. Paste the code you have copied from the clipboard in to the the ‘HTML Code box’ of the widget and press ‘Apply’ to implement the code.
5. The widget will update in the Editor Window. In this example above, the camera icon and the name of the icon (fa-5x) are displayed.

If you do not want the text that is displayed, just delete the text ‘fa-5x’ from the end of the line of code and press the ‘Apply’ button again to update the widget.

Next you may want to start using other icons e.g. to use a Facebook icon with the same size as the camera example, you could use the code

<i class="fa fa-facebook fa-5x"></i>

in the HTMLSnippet widget. Use the examples in Font Awesome’s website to experiment more, especially if you are new to coding. Use the examples to stack icons, create lists of icons, animate icons and so on. There is plenty to discover! You will usually see the results of your work immediately in EverWeb as the HTML Snippet widget updates when you press the ‘Apply’ button.

More Help and Resources

The main source of help is the Font Awesome website itself. It has many examples and a blog where you can find out more information, hints and tips on using these icons.

As Font Awesome involves some coding, the W3Schools website may also be of use as it has a specific section dedicated to Font Awesome as well as further examples and information on how to start with HTML if you are interested.

Enjoy discovering Font Awesome in EverWeb!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We are pleased to announce the immediate availability of EverWeb 2.3. The new release includes some internal optimizations to EverWeb’s generated HTML and CSS code. This means your websites will load faster for your visitors, will upload faster and, in general, operate much more efficiently.

We have also included an important fix for a ‘Dropped Connection’ error when uploading websites to FTP or to your EverWeb account.

With EverWeb 2.3 you should see speed improvements in your websites from these optimizations.

EverWeb version 2.3 Includes…

• A variety of code optimizations implemented to make websites load and publish faster.
• Fix for using mouse over and mouse down effects for a regular rectangle shape which now works properly when returning to its original state.
• Fixes an issue so that uploading to FTP or EverWeb account no longer produce a ‘Dropped Connection’ error.

How To Update To EverWeb version 2.3

You can easily update to EverWeb version 2.3 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.3 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.3

If you need more information about EverWeb version 2.3

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help 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

Google+

Flipboard

YouTube

Twitter handle @ragesw

The recently released EverWeb 2.2 added an all new animation engine to the product, giving you 16 different types of animation effects to choose from. Animation effects can really bring your website to life and you can get really creative in the process! Let’s look at how to create an animation and when it is good to use, or not use, an effect in your website.

How to Create an Animation Effect

Creating an animation effect in EverWeb is easy…

1. Start by selecting an object to animate. This can be a Text Box, Shape or Image. You can even animate widgets with the exception of the RSS Feed and Image Gallery widgets. The widgets used to display the blog main, archive and blog post contents are also excluded.
2. Next, go to the Shape Options Tab and tick the box next to the ‘Animation’ section to access the available options.
3. Begin by choosing an Animation effect from the first drop down menu.
4. Use the second drop down menu for additional options for the animation effect you chose in the first drop down menu. If you selected ‘Other’ in the first drop down menu, you will see a list of additional animation effects displayed in the second drop down.
5. You can see a preview of the effect in the Preview box at the bottom of the Animation section.
6. Once you have selected the animation you want, use ‘Duration’ to specify how long the animation is to last (in seconds.)
7. Use ‘Delay’ to time when you want the animation to start, for example, if you have more than one animation effect in use, you may want to set a delay to stagger the effects them instead of them all being animated at the same time.
8. Use ‘Repeat’ to trigger the animation effect again for the amount of times you specify.
9. To see the animation effect in action, select Preview or Publish from the Toolbar.

When To Use Animation Effects

Using animation effects is a great way to bring your web pages to life, but there are also some caveats. Often sites that use animation tend to be look gimmicky. Here is our guide to when animation effects should be used:

Less is more: It’s best to use animation effects sparingly. Too many effects will just confuse your audience as they will not know where to focus their attention in the frenzy of effects on the page! Using fewer effects also makes the effects more fun and less gimmicky.

Focus: The main reason for using an animation is to bring your visitor’s attention to a particular part, or feature, of your page. For example, if you are selling concert tickets you may want to animate a ‘Buy Now’ button using a Flash or Pulse effect to lead your visitor to where you want them to be. Equate focus to ‘Call To Action’.

Timing: Your animation effects should be timed properly, not too fast and not too slow e.g. if you are animating a heart shape you will want it to beat (using the Pulse effect) at the right speed! Use ‘Duration’ to set the length of the animation and ‘Repeat’ to loop the animation. Always test your animations to make sure the timings are correct. You may find that you are adjusting your timings by 1/10ths of a second to get the effect spot on!

Suitability: When animating objects make sure that the effect used is suitable for the audience you are targeting. Remember that animation is a component of your page design and should be a natural ‘fit’ in your design. For example, if you web site is for a legal firm, you probably will want subtle effects rather than ‘comedy’ effects!

Telling a Story: The great thing about animation effects is that they can help you tell a story.e.g. a photographer may want showcase his/her work first before you see anything else on the page (such as navigation menus, text etc.) In this example, start with a blank page. To achieve this, first add all of the objects you want on to the page. Next, set a ‘Delay’ for all of the objects as this will delay them from being revealed. The last object you want revealed will have the longest delay, the first object you want revealed will have the shortest delay.

Next, you may want to use ‘Flip’ or ‘Fade’ effects to dramatically display the photographer’s images. Use a short Delay to quickly reveal each image for maximum effect. Next, you may want to fade in text boxes to explain the images using a delay long enough for the reveal of the images to have completed. Finally, the page is completed by adding a navigation menu, social media buttons etc. again using the ‘Delay’ property and the ‘Fade’  effects.

Testing: Always use Preview to see how your effects will look and if you need to adjust the Duration, Delay and/or Repeat. Remember that if you want to replay the animation effect in your browser just hit your browser’s refresh button unless you have changed the effect and need to Preview it again.

Planning and Testing

Animation can produce some amazing and fun effects. They can also add subtlety and style to your pages. The over-arching theme to remember, though, when using animation is planning and testing. Think about what you want to animate, why you want to animate and how you want to animate. Plan out the steps you need to achieve this. In the examples given above, typically you design you page first add the animation afterwards. In the photographer example, the page gets deconstructed so we want to work back from a complete web page to a blank looking page using animation to do so. Planning is essential when creating complex animations or storytelling style effects.

And as always, Test, Test, Test! Creating great effects can be sabotaged by poor timing or by delays that are either too long or too short. If you can test out your animations on others to see if your timings are correct! And don’t forget to test on mobile devices as well to see if what is effective on a desktop is also effective on a mobile phone.

Enjoy the animation effects in EverWeb 2.2 and please let us know if you have a question, or want to share any tips or effects work with us in the Comments section below!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re thrilled to announce that EverWeb version 2.2 is now available to download. The new release features a new animation framework with 16 different animation effects can be used in your website!

There is also a new ‘distance between objects’ feature, updated Audio and Image Slider widgets and much more as well as the usual maintenance and stability fixes. See below for the full list of what’s new in EverWeb version 2.2.

EverWeb version 2.2 Includes…

• [NEW] Animation Framework featuring 16 different animation effects.
• [NEW] Distance between objects indicator lets you see how far an object is under the mouse cursor from the selected object if you hold the Option key down
• [NEW] Image Slider widget now includes ‘Dark navigation arrows’ and centered thumbnails options
• [NEW] Updated Audio widget with looping, play audio on page load, mute and default sound level controls
• [IMPROVED] EverWeb works much better with large projects and uses much less memory
• [FIX] Copy and pasting styled text from Chrome into EverWeb
• [FIX] Blank paragraphs not retaining their font styling
• [FIX] Minor fixes to the blog archive widget
• [FIX] Delete key operation fixes
• [FIX] Projects resize and refresh properly between retina and non-retina displays
• [FIX] The least number of posts that can be displayed on blog main is now set to 1
• [FIX] When transferring a Project with a blog to another computer, the image links are maintained
• [FIX] Fixed Blog post image with spaces in its name not being exported properly
• [FIX] Fixed a memory leak on macOS Sierra that would cause EverWeb to slow down after using it for a while and publishing your website
• [FIX] Fixed Contact Form Advanced to use correct form address
• [FIX] Images for regular, color filled rectangles are no longer generated on publish, making publishing faster.
• [FIX] Header/Footer Code fields would replace a double dash. OS X Automatic text changes are no longer applied in these fields
• [FIX] Fixed error message when adding the blank template and EverWeb is in the Downloads folder instead of the Applications folder

How To Update To EverWeb version 2.2

You can easily update to EverWeb version 2.2 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.2 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.2

If you need more information about EverWeb version 2.2

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help 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

Google+

Flipboard

YouTube

Twitter handle @ragesw