Archive for Tips and Tricks

13 Apr 2017

Creating Animation Effects in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design, Widgets

The new animation effects in EverWeb version 2.2 are great for bringing your web pages to life. The effects can be used to highlight areas of your web page that you want your visitors to focus on – essentially creating ‘Calls To Action’. EverWeb’s animation effects can also be used to ‘tell a story’ whereby you trigger effects in sequence to produce a flow of action for your visitor to follow.

Creating an Animation Effect
Animation effects are added to objects. You can animate text boxes, shapes, images and most widgets. The RSS Feed, Image Gallery and blog widgets used for blog posts, blog main and archive cannot be animated.

To animate an object in Everweb

  1. First select the object you want, then go to the Shape Options Tab in the Inspector Window.
  2. Note that animations can be applied to more than one object at a time and even to grouped objects
  3. Once you have selected your object(s), tick the box in the ‘Animation’ section of the Shape Options Tab to activate the animation options.
  4. From the first drop down menu, select the type of animation you want. At the bottom of the Animation section is a Preview window so you can see what the effect will look like when you select it.
  5. The last option in the first drop down menu list is for ‘Other.’ Use this option for an additional list of animation effects that are displayed in the second drop down menu.
  6. Once you have chosen the effect you want from the first drop down menu, use the second drop down menu to further customize the effect you have chosen. If you have selected ‘Other’ from the first drop down menu, you will only see a list of other animation effects instead of a list of customization options.
  7. After selecting your choices from the drop down menus, set the animation ‘Duration’ using the slider, by entering a number in the field entry box or by using the up/down arrows. The number shown corresponds to seconds and milliseconds. When selecting duration, the longer the time you enter, the slower the effect takes to complete.
  8. The ‘Delay’ option should be set if you do not want the animation to start immediately as the page loads or when the object scrolls on screen.This option is useful if you have a number of effects on a page and you want to ‘stagger’ them (e.g. if you are ‘storyboarding’.)
  9. The last option is ‘Replay’ which animates the object the number of times you specify.

Animation Effects in Practice
When using animation effects, use Preview to view how the effect(s) will look as effects do not animate when you are in the page design itself. It’s recommended to use the File-> Preview menu (or the Preview button) to view your animations before publishing so you can see how the end result will look. This is important especially if you have a number of animations that run one after the other. It’s also important to see if the animation is appropriate to the page and that its playback speed is correct. Use the Duration, Replay and Delay options to tweak your animation (even by milliseconds!) to get the right effect.

Animation Example: Fade Out Effect
One of the animations that EverWeb includes is a Fade effect. This is a fade IN effect. If you want a fade OUT effect instead, try the following:

  1. Create a blank page with a white background.
  2. Add a Text Box (from the Toolbar) and enter some text in it. Style the text as you want.
  3. Next, add a rectangle shape, again from the Toolbar.
  4. Move and size the rectangle so that it covers the text of the Text Box.
  5. With the rectangle shape still selected, go to the Shape Options tab.
  6. Set the ‘Color Fill’ of the rectangle to be White, the same color as the page background.
  7. Tick the box next to ‘Animation’ so you can access the ‘Animation’ options.
  8. Set the first drop down menu option to ‘Fade’.
  9. Set the second drop down menu option to ‘In Place’ which is the usual default option.
  10. Set a Duration of 1.5 which will give a fairly fast fade speed to the rectangle.
  11. Set a Delay e.g. 3.0 seconds.
  12. Leave Repeat set at 1.
  13. Preview!

What you will see in the Preview is that the text appears, but gradually fades away as the rectangle shape fades in!

This is only one example of how animation effects can be used in EverWeb. To get the most out of them I would recommend thinking of what you want to achieve then play with the effects, duration, delay and repeat options until you get the desired effect!

if you have an effect that you have created why not share it with us, or if you want to create an effect but don’t know how, let us know in the comments below!

06 Apr 2017

Setting Up Your EverWeb Project

No Comments EverWeb, Software, Tips and Tricks, Web Design

If you’re new to EverWeb, you’re probably keen to start building your website straight away. However, it’s worth taking a breath before jumping in so you can set up your EverWeb environment properly before getting down to work on your website. Start by launching EverWeb and creating a new website project, or if you have already started your project, double click on it’s name in the Projects Window to open it.

Log In To Your EverWeb Account
Start by checking that you are logged in to your EverWeb Account using the EverWeb-> Preferences menu. The first tab is ‘Account’. Enter your account details if it’s not already pre-filled, or if you have not done so already, create an account. Logging in to your EverWeb account is important as it’s how EverWeb determines whether you have a purchased or demo version of the product. The only difference between purchased and demo is the ability to publish your website is disabled for the demo version.

Auto Save and Automatic Backup
Once logged in to your EverWeb account I recommend that you immediately set Autosave and Automatic Backup on. These features are also in the EverWeb-> Preferences menu on the ‘Backup’ tab. Autosave and Backup are invaluable tools that can save you lots of time, effort and frustration if you ever have problems with a Project file and need to ‘rollback’.

‘Autosave’ saves your work on the fly and ‘Backup’ creates a back up copy of your Project file in the location you choose on a daily, weekly or monthly basis. You keep from one to 50 backups at any one time. This is useful if, for example, you’ve made changes to your website that you want to reverse out. You may need to go back a couple of backup copies to reverse out all the changes you don’t want.

When you use ‘Backup’ remember that if you delete your Project file, the backups are also deleted.

It’s also a good idea to backup your computer regularly using tools such as Apple’s Time Machine or a third party backup solution. In this way you have less risk of losing any valuable work.

Name Your Website
When setting up your Project file you’ll want to name it! It’s often a question on the EverWeb Discussion Forum, but easy to answer when you know how! By default, all new websites you create are called ‘NEW WEBSITE’. Double click on this text in the Web Page List that runs down the left side of the Project Window. Enter the name you want as the website Project and press Enter to finish.

Set Default Styles
When you start a new website Project you’ll hopefully know what fonts and color palette your website will be using. Set these choices up as defaults for the Project using the Format-> Default Styles menu to access the list of styling attributes that you can change. Click on the ‘Save’ button when finished. Note that ‘Default Styles’ are not applied retrospectively. If, for example, you have changed the ‘Body Text Font’ default, this change is only effective when creating new Text Boxes. For any existing Text Boxes, you will need to change the font manually.

Publishing Settings
There will come a time when you’ll want to publish your website! It’s worth setting up your Site Publishing Settings at the start of your project so when you are finished, or want to test, everything is already in place.

Access the Site Publishing Settings either by the File-> Edit Publishing Settings menu or by double clicking on your website name in the Web Page List. There are three ‘Publish To’ options on the drop down menu. Select ‘EverWeb’ if you have an EverWeb+Hosting plan and ‘FTP Server’ if you have your own hosting provider. Fill in the details as required. If you are using FTP Server and are not sure about the details to fill in, your host provider should be able to help. You can also checkout this video on Publishing in EverWeb. This video walk through is a couple of years old so the EverWeb UI may look a bit different to your version of EverWeb, but the principles remain the same.

The third Publish To option is ‘Folder’ which is useful for testing your website locally before publishing to the Internet.

Email. 404 Page Not Found and Favicon Setup
The Site Publishing Settings is also where you can add email addresses to your website if you have an EverWeb+Hosting plan. For help, click on the ‘?’ to the right of the ‘Email Addresses’ heading. If you have your own host provider use your host provider’s cPanel to setup your email addresses.

At the end of the Head/Footer Code section, is a section where you can select an image to use as a Favicon for your website.Checkout our article on Favicons for more information!

In the ‘Advanced Options’ section of the Site Publishing Section you can also set up a link to a ‘404 Page Not Found’ to capture instances where there may be broken links in your website. It’s a great safety net and we’ll feature this more in an upcoming blog.

Other EverWeb Preferences
The other settings that you will probably want set are the General Preferences in the EverWeb-> Preferences menu. Here you can set the guides that you see when moving objects around the page and whether you want to see the Hyperlink Indicator when you set up Hyperlinks in your web pages.

Spell checking is a great option to set up when you create your website so you don’t get misspellings on your pages! Use the Edit-> Spelling menu and tick the option you want to use. I usually recommend ‘Check Spelling While Typing’ is set on.

Finally, the Window menu can be used to set up whether the Layout is displayed or not and whether the Toolbar and Inspector Window are displayed or.

There may seem a lot that can be set up here, but with just a few minutes work, you’ll have the website project environment you want and you’ll be more efficient in process!

If you have a question about this post, please drop us a line in the Comments section below. Thanks!

16 Mar 2017

5 Reasons Why You Should Be Using Master Pages

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

I was quite surprised recently when a customer sent me their EverWeb project file and I discovered that it didn’t have a Master Page. The website was only seven pages in total so maybe it wasn’t a big deal. When I started browsing through the project I immediately realised that a Master Page would reap benefits, even with a relatively small website project.

Why Use Master Pages
Master Pages were one of the first major features added to EverWeb back in version 1.2. It was one of the most requested features that iWeb lacked and rightly so as it immediately gives you these great benefits…

  1. Design Consistency. Presenting your website with a consistent design on every page is vital when you want your visitors to easily navigate your site to find and discover what you want them to. Placing objects in consistent locations on your web page and using the same style approach for things such as titles, buttons, logos and so on is really important so your visitors don’t get a frustrating experience. Consistency should also extend to page settings as well. Having a consitstent framework to design your site in is easier for you as well as being easier for your visitors.
  2. Design Accuracy. Web design also needs to be pixel perfect. Have you ever visited websites where things like titles and buttons jump around a bit as you move from page to page. Or the background color changes slightly when it really shouldn’t? Your website should focus your visitor on it’s content, not the distraction of a poorly placed objects on the design canvas. A Master Page will instantly take these issues away and you’ll have a more focused visitor as a result.
  3. More ProfessionalYour website is often the first place potential and existing customers go to when they want to discover more about you, your company, your products or your services. Often it’s your calling card for the digital age. Creating a professional appearance is a must. If you have followed the first two points above, you’re already getting there. Take time to think about the design of your Master Page(s) as and test the results on mobile, tablet and desktop devices. If necessary create Master Pages for each environment so that you offer your visitors the right experience on all platforms. It’s the professional approach!
  4. Easier Website Maintenance and Updates. Having one Master Page to maintain and update rather than all of your web pages is a no brainier. Having just one page to update means you’re less liable to make mistakes. Updating many pages with the same changes is boring and repetitive which is where errors start to creep in.
  5. Saves Time. We all know that time is a valuable commodity to most people. Using a Master Page is the perfect tool for this. If you do make a mistake, or need to make changes or a quick website update it’s faster and more efficient to do so using a Master Page. All changes immediately get applied to any page that uses the Master Page so it couldn’t be easier!

Creating a Master Page

Creating a Master Pages is very simple to do – just click on the ‘New Master Page’ button in the blue Master Page section of the Web Page List. If the blue section is not visible, it’s probably because the splitter bar (right above the Project name) needs to be dragged down to reveal it. Next you will see the the Theme Template Chooser, so select the Theme and Page Style you want as you would do when adding any regular page in EverWeb. Note that you can’t make a Master Page from of a blog page style.

Once the new Master Page has been created it’s added to the Master Page section. Name the Master Page in the same was as you would for a regular page. In fact, use the Master Page in exactly the same way as a regular page. The only difference is that you will only add objects that you want to appear on all pages that are going to be using the Master Page. Typically, this means that the body area of the page is usually empty as this is where regular page content will go.

In my customer’s case, I took her company logo, tag line, contact details from the header and footer and the social media buttons she used and placed them in the Master Page in the same locations as they were on the regular pages. I then made sure that the Page Settings for content width, content height, header, footer, background color and browser background were set correctly. Again, that’s another real benefit of the Master Page. You only need to set up page defaults once.

Using your Master Page

Once you have finished your Master Page, apply it to all of the pages you want to use it with. To do this, select the regular page that the Master Page will be attached to. Next, on the Page Settings tab of the Inspector Window select the Master Page to attach using the dropdown menu in the Master Page section. You’ll see that the page changes, adding in the objects from the Master Page.

The objects that come from the Master Page all have a black page symbol in the top right hand corner meaning that you can’t edit them from a regular page. You can only edit these objects by editing the Master Page itself.

Now that you’ve applied the Master Page, you’ll probably notice that you have the same objects twice on the page. As the Master Page objects ‘sit’ underneath the regular page and can’t be deleted unless you edit the Master Page itself, you can delete the duplicate objects from the regular page so only the Master Page objects remain on the page.

When you’ve completed this task for all pages in your site that are using the Master Page, publish the entire site using the File-> Publish Entire Site menu.

If you need it make changes in the future to all of your pages at one time, you’ll only have to do the changes to just the Master Page. Adding and working with Master Pages even on small websites is something that takes very little time, and will save you lots of time in the future!

if you have a question about Master Pages, please let us know in the Comments Section below. Thanks!

02 Mar 2017

EverWeb’s Contact Form Advanced Widget Explained

No Comments EverWeb, Software, Tips and Tricks, Widgets

The Contact Form Advanced (CFA) widget is a great successor to EverWeb’s original Contact Form widget. The new widget debuted in EverWeb 2.0 offering a highly customisable form that can include drop down menu selections, radio buttons, checkboxes, pre-filled text fields and much more.

EverWeb version 2.1, and the recently released version 2.1.1, add more options and capabilities to the CFA widget which we will go through in detail later on. To start, let’s take a look at perhaps the most important new option: SMTP Settings…

SMTP Settings in the Contact Form Advanced Widget

EverWeb 2.1 now includes SMTP Settings to make sending and receiving email easier!

SMTP Settings
The CFA Widget Settings now includes an ‘SMTP Settings’ section. This is designed to help the contact form be more reliably delivered to the form recipient. It’s important to fill in the SMTP Settings correctly otherwise the form won’t work properly. The new ‘More Help’ button steps you through the process of filling in the settings if you are unsure about what to fill in. The steps also cater for everyone, whether you have an EverWeb+Hosting account or your own hosting provider.

The CFA widget in EverWeb version 2.1.1 has also been updated to improve the reliability of sending and receiving emails if you do not use the SMTP settings, which is like how the original Contact Form widget works.

Troubleshooting SMTP settings
If you’ve followed the above steps but still find that your contact form is not working, try these troubleshooting tips:

  1. Use EverWeb version 2.1.1. This release typically fixes most issues with the CFA widget so is highly recommended. If you’re having problems with your contact form and are not on the latest version, update EverWeb first to 2.1.1, republish your website (use File-> Publish Entire Site) then test your contact form again.
  2. Check that you have completed the steps from the ‘More Help’ button in the widget.
  3. Check that the ‘Email Address to Send Form to’ section has been filled in with a valid email address. It may seem obvious, but quite often people forget to fill in this field!
  4. Check that the password you’ve used in the SMTP Settings is correct. If you’re unsure, you may need to reset your email password. If you reset your password, exit EverWeb and log out of your email. Relaunch EverWeb and log back in to your email and try again.
  5. Check your SMTP settings with your hosting provider to make sure they are correct if you are unsure about any settings you may have entered.
  6. Check your webmail! I made a contact form and was not receiving email, so I checked my webmail and found that the emails were being received. The problem was that my Apple Mail wasn’t configured correctly so didn’t receive the emails even though they were correctly sent.
  7. Publish your website. Using preview with a contact form will not work as the widget sends email to the outside world which it can’t do when using preview. Sometimes you may also find that publishing your entire site may be beneficial. Use the menu to do this as the Toolbar ‘Publish’ button will only publish changes made to the website.

Important! When using any contact form, it’s paramount that you test that the form works. Remember that when you hit the ‘Submit!’ button and get the message ‘Your message has been sent’ this doesn’t mean that the message has been received! So… test, test, test!

Updated Form and Controls Options
EverWeb 2.1 (and 2.1.1) now let’s you reorder and delete Form Controls and Option List items. Reordering items is done in the same way as other you would for items in Asset Lists in other EverWeb widgets by clicking and dragging the control up and down the list until you have moved it to its new location when you just release the mouse button. In EverWeb version 2.0 you had to delete the widget and start again if you wanted to remove controls, so this is a welcome enhancement.

Fixes for the CFA Widget
The updated widget also contains some bug fixes including an important one where the form is now correctly sent to the email address that you enter in the widget.

If you are new to the widget there’s also a Contact Form Advanced widget video tutorial available to get you acquainted!

As always, if you have a question, let us know… we’ll do our best to help!

09 Feb 2017

Writing Your First Blog Post? Read This Before You Start!

No Comments EverWeb, Software, Tips and Tricks, Web Design

There’s a whole host of reasons why blogging is essential for your website. A regularly updated blog reminds your audience that your website (and by extension you and/or your business) is alive and kicking! It helps drive SEO traffic if fresh content is added regularly and a well written, and marketed, blog may foster a lively discussion forum. Blogging also helps define your website’s ‘personality’. We create websites with a particular ‘audience’ in mind, and your blog should reflect this. Lastly, a blog lets you expand on subjects that may be less core to your website, or where you want more in-depth coverage on a particular topic, product, idea and so on…

If you’ve just updated, or purchased, EverWeb version 2.0, now is the ideal time to start your own blog! EverWeb’s new blogging tool can be used straight away whether you have an EverWeb+Hosting account or your own hosting provider. There’s no setup needed. So, the technical part is easy and it may be that writing your own blog is the difficult part! Here are some thoughts and insights to get you started with blogging…

It’s a Learning Experience!
Writing a blog is always a learning experience and you’ll probably make mistakes along the way. Will your audience like what you write? How often should you post? What happens if you run out of inspiration or have writer’s block?

Undoubtedly you’ll have questions about blogging, most of which will be down to you to answer, e.g. you’ll post every Tuesday. The best advice I can give is to do your homework before you start. List the questions you have and try to find your answers through trusted friends, family and internet resources such as ProBlogger which is great for first time bloggers. In the example, blogging every Tuesday will help you post consistently. That’s good for you and good for audience building. People love consistency!

Focus Your Ideas
Blog posts need ideas! It’s usually best to have only one main message, idea or theme per post. This will focus you when you write. It also makes your post easier to read and understand for your audience. You’ll lose focus, and possibly your audience, if you have more than one message or idea in your post.

Keeping ‘one idea per post’ also means you have more ideas available for future posts. If you’re going to post on a regular basis this is important. There’s nothing worse than having a deadline and nothing to write about. Keep an ideas list to hand and always have a standby blog post ready for emergencies.

Know Your Audience
It’s important to always write FOR your audience, using an appropriate style and tone e.g. if you write in a formal style when your audience is ‘informal’, you may drive away your audience. Aldo be careful not to talk down, patronize or insult your audience either. It will drive any traffic away immediately!

The ideas you use in your posts should also be relevant to your target audience. Always keep your audience in mind as this will focus you and your posts. I always ask myself, what’s interesting for my audience, what’s new, what features should I look at and why? What’s the benefit? For inspiration, I’ll look at relevant sources e.g. when writing about EverWeb I may look at other EverWeb related articles, the EverWeb Discussion Forum, websites relating to SEO, web design and so on to keep on track.

The Blog Title and First Sentence!
Once you have your idea it’s time to start writing! This is often the most difficult part of blogging: the first words! It can stop you cold in your tracks. Try breaking through this block just by writing something – anything – as a first sentence even if it’s really bad! You can go back and change it later. The important thing is that you’ve written something! and you’ll probably find that the rest of the post flows easily. Finish by editing the title and/or the first sentence which you’ll probably find is now a lot easier to do.

Keeping Audience Attention
Humans have an incredibly short attention span and living in a world of soundbites makes it more challenging to keep your audience focused on your post. If you don’t hold your audience’s attention for 90 seconds they’ll probably get bored and go elsewhere. Try to make a strong post title and a first paragraph that engages e.g. set a question that you will answer later. Look at other blogs that inspire and engage you. What appeals about one blog post and not another? What keeps you reading or turns you away? Use the Editor Toolbar features such as bold and italics sparingly – just for emphasis!

How Much Should I Write?
It’s a common question but there’s no easy answer. There are a couple of things you should consider though. The first is that Google loves content! Preferably fresh, unique content. So don’t plagiarise content from other writers as Google will penalise you and you’ll probably get sued if you’re found out. The only exception is when you’re quoting in which case you should credit the author and content source anyway. And just copying and pasting your own content around the internet also won’t work.

Although Google loves content and it’s great for your SEO, quality content is where you should be focused. It’s more important than word count or SEO! If in doubt always remember quality above anything else!

Check, Check and Double Check
If you read anything on the Internet, even from professional news websites, you’ll find articles littered with spelling and grammar mistakes. It’s frustrating to continually pick through mistakes. To avoid posting ‘mistakes’, when you’ve finished your post, save it then then walk away from it. If possible, get someone else to proof read it for you. If that’s not possible, come back to it later, read it through again and then correct any mistakes.

The other tip is to learn about how you write e.g. I know I am bad with ‘its’ and ‘it’s’ and when to use them and when not. For me, it is (it’s!) a blind spot I always check for now when I write. Try listing your own weaknesses so you can correct your copy before publishing!

Summarize
It’s always good to round off your post by coming full circle to answering the question you first posed. In this post, it’s that writing your first blog post is a learning process and that preparation before you start will reward you and your audience. You’ll make mistakes for sure, but even if you do, it’s a learning experience!. With blogging there is no rule book, but a few tried and trusted guidelines will help get the creative juices flowing! Good luck with your blogging.

If you have any hints and tips to share please drop a line below in the comments section. I’ve only scratched the surface here, so feel free to have your say! Thanks!