24 Aug 2017

10 Things To Do Before Publishing Your EverWeb Website

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

Publishing your website to the Internet is the culmination of many hours of hard work getting your site exactly how you want it. As you get closer to publishing, it’s easy to rush the final steps to get your site out for the whole world to see!

Sprinting to the project’s finish line is understandable, but too much haste can lead to a published website that’s full of errors or does not work as expected. It’s potentially embarrassing, unprofessional and can be a real negative to your site visitors. So why not take a breath then run through our checklist blow before hitting the ‘Publish’ button. Save yourself the hassle of having to go back to make lots of changes, corrections or fixes after you’ve published.

Here’s the checklist of things to review on your EverWeb website Project before publishing…

  1. Set up a Favicon for your site. The Favicon is the little square image that appears beside your URL in the web browser search box. It’s a nice professional touch to your website even if it’s not an essential feature to include.

    To add a Favicon, go to the File-> Edit Publishing Settings. Scroll down to the Favicon section and choose an appropriate image (preferably one that’s square!). EverWeb will do the rest when you publish. When including a Favicon in your site, it may take a few hours for replication around the web for it to show up in the browser search box.

  2. If you have EverWeb 2.4, or higher, set the Language Localization for your website and for any individual pages as necessary. This is a great feature to add as it will help serve your visitors searching the web with more targeted search results. Check out our blog Language Localisation in EverWeb 2.4 for Better SEO! for more details.
  3. Check that you’ve implemented a ‘404 Page Not Found’ error page for both desktop and mobile versions of your site.

    First, create a ‘404’ error page for both desktop and mobile sites then set up a mobile redirect using the ‘Mobile Settings’ section of the Inspect or tab. In this way, if a user gets a 404 Page Not Found error when using a mobile device, they will be directed to your mobile 404 Page Not Found error page and not the desktop version.

    Once you have linked your desktop and mobile pages together, go to Site Publishing Settings. Scroll down to the ‘Advanced Options’ section. There’s only one option ‘Not found page’. Click on the drop down and set the page to the desktop 404 Page Not Found error page.

  4. If you have any unused assets in your website project that you know you won’t be using in the future, now is a good time to remove them. When developing websites, there’s often experimentation that leads to some ideas that you move forward with and some that you abandon. As such, your Project file may get cluttered with extraneous image files so why not remove them and reduce the size of your Project file at the same time?

    To remove unwanted assets first go to the Assets tab. Select ‘Find Unused Assets’ from the drop down menu that’s to the right of the word ‘Assets’.

    Any unused asset will be highlighted. Review these highlighted assets before removing the ones your don’t want.

  5. As SEO is baked in to EverWeb you don’t explicitly see features labelled as ‘for use with SEO’. If you have not included SEO in the planning of your website, it’s never to late to include it. Using SEO is the best way to improve your Search Engine Ranking Results. For a better understanding of SEO and how to use it in EverWeb, or if you just want a refresher, check out the SEO for EverWeb Course.
  6. If you have an EverWeb+Hosting Plan and EverWeb 2.4 or higher, you can add end to end data encryption to your website with HTTPS. To add this, tick the checkbox ‘Use HTTPS Secure URLs’ feature in Site Publishing Settings. For more information about this feature, check out the EverWeb 2.4 Released Making Your Website Safer! blog post.
  7. If you use Social Media, add an image to your web pages for social media purposes in the Page Details settings of the Inspector tab of your webpage.
  8. Spelling, typos and grammar checking! If you’ve written your own text content for your webpages, it’s easy to miss out on finding mistakes in your own work. If possible, get someone else to read through your text to find typos, spelling mistakes and grammatical error. It’s also useful for another person to check your sentence and paragraph flow.
  9. Preview your website before publishing. Preview shows you how your site will look when published without publishing the site to the Internet. You can interact with Preview to test out most features of your website, but bear in mind that some features, such as sending email, only work when your site has been published.
  10. Before you press the ‘Publish’ button, check to make sure you’re publishing to the correct location by reviewing the ‘Publish’ section of ‘Site Publishing Settings’. It’s especially important to do this if you’ve been publishing to a ‘test’ location before going live, or if you have more than one website under your EverWeb account. Accidents can happen, and you don’t want to be publishing your site to the wrong location.

These tips should make your publishing easier and reduce the need to correct your site afterwards. If you’ve got a tip to share, please let us know in the Comments Section below! Thanks!

02 May 2016

Creating Dynamic Pages with EverWeb’s ‘Fixed Position’ Feature

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

EverWeb comes with a couple of features that help you easily create dynamic web pages. ‘Fixed Position’ is a great example of a feature that can be used to give your website a fresh, robust appearance. The feature let’s you fix an object in place along the horizontal axis enabling you to produce some cool effects for your web pages. Add in EverWeb’s ‘Always On Top’ and ‘Full Width’ features and you get even more possibilities. Here are three examples of how you can use and combine some of these features to good effect…

Vertical Buttons
Many websites have buttons vertically set in place, especially for Social Media purposes, so that as you scroll down the page the buttons stay in place and visible at all times. It’s easy to create this type of effect in EverWeb. In our example we go one step further by creating a pager with placeholder buttons and pictures fixed in place to create a fixed pane on the left and a scrolling pane on the right of the page…

  1. To start, you’ll probably want to add the buttons to a Master Page so that they can be used throughout your website.
  2. If you haven’t done so already drag and drop the buttons you want on the page e.g. down the left hand side.
  3. Use the Arrange-> Align Objects and Arrange-> Distribute Objects menus to help properly space and align the buttons.
  4. When placing the buttons remember to keep the left hand gutter of the page clear of any other objects so your buttons don’t bump in to anything as you scroll up and down the page.
  5. When placing a button check the ‘Fixed Position’ box in the Metrics Inspector tab to keep it in place as the page scrolls.
  6. When you come to preview the page, if you find any of the buttons obscured, this may be due to another object on the page ‘floating’ above the button and hiding it. This can happen when you have a Master Page attached to a regular page. Master Page objects lie beneath regular page objects which float above them sometimes causing objects, in this case the buttons, to be obscured. Use the ‘Always On Top’ feature to manually float any obscured buttons to the top of the page. This feature is on the Arrange menu and the Metrics Inspector.

The effect is shown below…

vertical Scrolling start

The vertical scroll pane is on the right with the buttons and pictures fixed in the left hand column

Vertical Scrolling end position

Vertical scrolling in action with the right pane scrolling up and the left pane remaining fixed in place

Creating a Split Horizontally Scrolling Page
Fixed Position can be used to set up a horizontally scrolling page where the left hand side remains fixed and content slides behind it when you scroll to the right. This type of effect may be something that is effective for mobile environments. To make such a page…

  1. Set the page Content Width to a wider than normal value in the Page Inspector, e.g. 2000 instead of 1000 to create a two page width effect.
    Once you have increased the Content Width value, you may have to reposition objects that were already on the page back in their original position, especially objects that are in the header and footer areas as they may have become displaced. In our example, the social media buttons were displaced, so they been moved to the left and set with a Fixed Position within the original Content Width of 1000, so creating the illusion of a two page effect.
  2. If you are creating this effect for a mobile device, you may want to also adjust the Content Height so the page stays ‘fixed’ stopping a visitor from trying yo scroll up and down as you want them to scroll left to right.
  3. To create the effect, add a rectangle that is the length of the page and color it to contrast with the page background.
  4. The rectangle shape has been set to ‘Fixed Position’ before the pictures and buttons are added on top of it. All of these objects should also be set up as Fixed Position. It’s also recommend that ‘Always On Top’ is set for all of these objects to guarantee that they always float above everything else placed on the page.
    When you create the page you may find Bring Forward, Bring to Front, Send Backwards and Send to Back useful in floating objects on the page to the ‘depth’ that you want them.
  5. In addition, EverWeb also has a great little feature called ‘Pick Layer’ If an object is obscured by another, hover the mouse over the object and perform a secondary click (double tap). On the sub menu you’ll see the Arrange menu options that were just mentioned. At the bottom of the menu is the ‘Pick Layer’ option. When you hover over this option you will see a list of all the layers that exist along the z-axis at that location. Select the layer you want.

When creating your double page effect it’s best to work in columns so that you separate one screen width from the next. You may want to test this on your desktop or mobile device to see how the effect works in practice. You can see how the effect looks in the two screenshots below.

Horizontal Scrolling Start

Horizontal Scrolling at the start position. On the Left is the dark rectangle which the contents to right will slide underneath.

Horizontal Scrolling End Position

The contents of the page slide under the section on the left which is fixed in place using Fixed Position

Creating A Picture Scroller
Our third example is one where you create a scrolling picture view. In this example, as you scroll down the page, the text on the left hand side of the page remains in place, but the picture that is embedded in the text changes as you scroll up and down the page.
To create the effect…

  1. Select the pictures you want to use. Make sure they are the same size as each other.
  2. Next arrange the pictures in a column with no gap between the pictures.
  3. Fix Position the picture column. Once you have done this, it may be an idea to group the pictures together using the Arrange -> Group menu so they remain as a ‘unit’.
  4. Now create a rectangle shape in the same color as the page background. Shape the rectangle so it’s the same width as the picture column.
  5. Place the rectangle at the bottom of the first picture and extend it downwards to hide the rest of the picture in the column that may be visible.
    Once the rectangle is in place fix it’s position and set ‘Always On Top’ on.
  6. To complete the effect, duplicate the rectangle shape. Duplicating is better than creating a new shape as you retain all of the original shape’s attributes. Place the shape above the top of the first picture. so the bottom edge of the rectangle meets the top edge of the first picture. The top of the rectangle should be extended to the top of the page.
  7. The effect is now complete as can be seen in the screenshots below. You can test out the effect whilst in the Editor Window. When scrolling down the page, make sure that the picture column does not reappear over the top of the page.
Picture scrolling effect

The picture scrolling effect at the start position

Picture Scrolling End Position

When the page is scrolled some text moves in the center of the page and the picture scrolls to the next one in sequence

When creating effects such as those above, always remember if you are creating for mobile or desktop devices as the results may look good on one type of device and not on another. It’s also worth remembering to Preview your web pages to check that you don’t have any scrollable objects bumping in to fixed objects or that you don’t have hidden objects suddenly becoming visible. There are many more possibilities with Fixed Position and the related Always On Top and Full Width features in EverWeb!