Archive for Tutorials

25 May 2017

Handling ‘404 Page Not Found’

No Comments EverWeb, Software, Tutorials

‘404 Page Not Found’ type messages are a standard way that your browser reports that there’s been some sort of problem with a page that you are trying to load. The ‘404 Page Not Found’ message is an HTTP (HyperText Transfer Protocol) standard response code and the message can be generated for a number of reasons such as

  • The link to the page you’re looking for is dead e.g. the page has been removed.
  • The link could be ‘broken’ e.g. the page has been moved or the page filename changed.
  • It’s possible that the URL has simply been mistyped into the browser search bar.

How to Respond to 404 Type Messages

As a website developer you’ll want to control how your visitors respond to ‘404’ type messages as much as you can if they encounter them e.g. your visitor could just hit the ‘back’ button in their browser or they could go to a different website altogether. Ideally though, you’ll want them to stay in your website, perhaps for example, by directing them back to the ‘Home’ page.

As well as keeping your visitor in your website, capturing and responding appropriately to a ‘404’ type message adds a professional touch. Even though many of us are Internet savvy, many people will be baffled or irritated by ‘404’ messages. Giving your visitors information on how and why the ‘404’ happened, and options on what to do next is informative and diffuses frustration and confusion.

Managing ‘404’ Type Messages

The easiest way to control ‘404’ type messages is to create a ‘404’ page in EverWeb. Just add a page to your website and call it something appropriate such as ‘404 Page’. On this page add information that explains to your visitor that they’ve come across a ‘404’ type error and what they can do about it. You may want to detail the possible reasons why they’ve come across this message in the first place (see the first paragraph above.) Remember to exclude the page from your Navigation Menu as it’s used solely for handling the ‘404 Page Not Found’ event.

Your ‘404 Page’ should link back to your Home page or include a Navigation Menu as this will help keep your visitor in your website. You may also want to include a contact email address if visitors want to contact you about the problem.

If you have mobile website pages, create a mobile version of your ‘404’page. Once you have created the page, go to the Inspector tab and then to the ‘Mobile Settings’ section. ‘Mobile Page’ should be set to ‘None’ and ‘This page is for mobile devices’ should be checked.

For the desktop version of the 404 Page again go to the Inspector tab for the page and scroll down to the ‘Mobile Settings’. Set the ‘Mobile Page’ as ‘One of My Pages’ and use the ‘Page’ drop down to select the mobile 404 Page counterpart. These steps ensure that the 404 Page is always properly redirected.

If you have an EverWeb+Hosting account go to your Project’s ‘Site Publishing Settings’ by clicking on the Project name in the Web Page List, or via the File-> Edit Publishing Settings menu. Scroll down to the ‘Advanced Options’ section. In the ‘Not Found Page’ section select your 404 Page. Remember to select the desktop page unless your Project only contains mobile style pages. To finish, publish your changes!

If you don’t have an EverWeb+Hosting account you won’t have the above option in the Site Publishing Settings and so you will need to contact your Hosting Provider who should have information or guidance on how you can set up a page that handles 404 type messages.

As always, test your website to make sure that the changes have been put in to effect. It should be as simple as mistyping one of the names of your website pages in a browser window!

Stopping Errors Happening in the First Place

In the best scenario your website will be up to date so as to avoid 404 errors as much as is possible. Remember to test your links, especially those to external pages. And don’t forget to test links that you’ve set up manually just in case of mistyped URL entries!

404 error messages are here to stay, but with a few minutes work you can keep your visitors within your website if they ever get such messages!

11 May 2017

Easily Move & Resize Objects in EverWeb

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

If you use EverWeb version 2.1 or higher, you may not have discovered a couple of new, really useful features for selecting, moving and resizing objects in the Editor Window. These new features save you time and effort, as manipulating objects will not affect other objects on the page you’re working on. So you can work more quickly, more efficiently and with fewer mistakes.

Here’s a walkthrough of these super new features!

  1. Moving objects that are partially,or completely, covered by other objects
  2. When designing web pages, you may find that you have objects such as shapes or images that overlap, or cover, most of another object. That’s probably because your design requires this, or that doing so solves a particular page design issue. Whatever the reason, there may be times where you want to change your design which requires you to move an object out from underneath a pile of others. Like playing ‘Jack Straws’ you want to take one object out without disturbing the rest.

    Before EverWeb version 2.1, the tricky part would be keeping the object you wanted to move selected. Once you selected the object, it would deselect when clicked on to move it. The only way round this was to select and move the objects on top of it out of the way first then put them back later. That takes time and is frustrating and can lead to your page design becoming unnecessarily disrupted.

    With EverWeb 2.1 or higher, things are a lot better. First select the object that you want to move. The best way to do this is to click on the overlapping area of an object that covers the one you want selected. When you do this the object on top is selected. Now right (secondary) click to bring up the menu of options. At the bottom of the list is ‘Pick Layer’. When you mouse over this menu option you will see all of the objects at the location that you clicked on. Choose the object that you want to select i.e. the one that is under the overlapping object.

    You should see the object beneath the overlapping object is now selected. Next hold down the Command+Option Keys and drag the selected object out from under the rest. That’s all there is to it!

  3. Moving objects up or down the page without disrupting the page layout
  4. The second keyboard short cut enables you to move objects down (or up) your page without the whole page layout needing to be reorganised e.g. you may want to insert an Image Slider or YouTube Video widget in to the middle of your page. To create the space for the widget, you will need to move some of the page content down en masse. You could select all of the objects then move them but this often leads to some objects being left behind. To solve this problem just use the shortcut instead.

    First select an object that’s at the place where you want to open up some space. The object should be one that you want moved down the page. When selecting the object, hold down the Cmd+Shift keys at the same time. With these keys held down, drag the object down the page. As you do this, all objects underneath it will also be dragged down the page in synch. Release the mouse and keyboard keys to finish.

    Note that it’s the selected object and those below it that get moved down. If you have other objects on the same (horizontal) level as the selected object, they will not move down.

    This is also a great option if you have too much space and need to drag page contents up the page en masse and in synch!

  5. Resizing an object without disrupting the page layout
  6. There may be times when you want to resize an object and want all of the objects below it to move down, or up, the page as you resize it. For example, you have a full width rectangle containing text. You want to add more text but need to size the rectangle so it is large enough to contain the extra text. In this instance select the rectangle, press the Cmd+Shift keys (i.e. the same keys as in the last example) and resize the rectangle using one of its grab handles. You’ll notice that all content below the rectangle moves down in synch.

Moving and resizing objects around your page becomes just became incredibly easy and effective using these simple keyboard shortcuts!

03 May 2017

Finding the Distance Between Objects in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials

The latest release of EverWeb, version 2.2, adds a simple, but great, feature that makes it easy for you to find the distance between two or more objects on a web page just by using a keyboard shortcut. Finding how far objects are apart from each other can help you achieve complete accuracy when placing objects in your page design. Using the new ‘distance to objects’ feature does this with a quick, easy visual reference right in the Editor window.

When designing your web pages you probably use the Arrange-> Distribute menu options to evenly space objects, such as groups of images, shapes, text boxes, social media buttons etc., either horizontally or vertically. That’s fine, but there may be times where you have a different scenario that means this approach will not work, or is more time consuming to achieve e.g. on your page you have a text box, or Heading Tags widget, that is used for a paragraph title. Underneath this is text box containing some text content relating to the paragraph title. Beneath this are two more title/paragraph content sections.

Finding the distance between objects

As you can see here, the distance between the end of the first paragraph and second title is less than for the end of the second paragraph and the third title.

In the above screenshot, you can see that the Heading Tags widgets and Text Boxes have just been copied and pasted in to the page, so the distance between the end of the first paragraph and the second title is different from the distance between the end of the second paragraph and the third title. To make sure that the distance between the end of the paragraphs and the next title is always the same, is where the new distance between objects feature comes in to its own. It’s easier and quicker to check the distances with a shortcut rather than by using the Metrics Inspector.

Finding the Distance Between Objects

  1. First select the source object. This is the object that you want to know how far from other objects it is.
  2. Next hold the Alt (Option) key down on your keyboard.
  3. Mouse over to other ‘target’ objects on the page.
  4. You will see horizontal and/or vertical lines displayed between the source and target objects. The distance between the source and target objects is displayed in pixels.
  5. To finish, release the Alt (option) key.

The screenshot below shows the source paragraph selected with the mouse hovering over the target object.

The distance between objects feature in action.

An Extra Feature!
With the distance between object lines displayed, release the Alt (Option) key and take your hand off the mouse or trackpad. You’ll notice that the distance is still shown on screen. Now if you use the arrow keys on your keyboard, you can move the selected object and see the distance change as you do so. This is really handy when you just need to nudge a shape a few pixels. Remember though that this only works using the keys on your keyboard.

Remember as well that when you select an object then press and hold down the Alt (Option) key, you can mouse over anywhere in the Editor Window. Also, be smart when using this feature, for example, if you have three paragraphs and you want to know the distance between the each paragraph, select the second (middle) paragraph and mouse over the first and third paragraphs so you can quickly see the distance between the second and first, and second and third paragraphs.

Next time…

The new ‘distance between objects’ feature comes hot on the heels of a couple of other recently introduced keyboard shortcuts. Our next blog will take you through moving objects easily around your page whilst retaining the page content layout.

If you have any questions or comments, please let us know in the Comments below!

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!

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!