Archive for Tips and Tricks

30 May 2016

Easy PDF File Downloading in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials

One of the ways in which you can attract more visitors to your website is by offering an incentive – something that’s free and of value to your visitor, but easy and cost effective for you to produce. Many websites offer PDF file downloads as such incentives to attract and retain visitors. Electronic incentives are also great marketing and promotional tools to use in social media to attract visitors to your website!

Creating PDF File Download Link in EverWeb
Creating download links to your EverWeb designed website in itself is the easy part. Most of your time and effort will be devoted to creating your content and preparing it in a format that’s suitable for downloading. Here’s how to create a PDF file download link with EverWeb…

Create Your Content

  • First of all create the content you want to use as download content. The content should be something that easily hooks your visitor to wanting to download the file. The content of the download itself also needs to be good. If you create poor content people won’t come back to your website!
  • Make sure the content is your own. Only use the work of others if you have express permission in writing to use their content in your work. If in doubt check first before proceeding as you won’t want to get sued later for breaching someone else’s copyright! Your own content that you create should be copyrighted with the copyright symbol, the year and your name or company name as appropriate.

Convert and ZIP Your Content

  • Once you’ve created your content, save a copy of it in PDF file format if appropriate to your content. Most word processing, spreadsheet and presentation apps export to PDF as an option. Once you’ve converted your content to PDF, open the resulting PDF file to check that the contents have converted properly!
  • PDF stands for Portable Document File and for good reason too as it can be downloaded, opened and read on either MS Windows or Apple OS X without needing any additional software.
  • Whether your content is in a PDF or another format (e.g. video or audio content) it’s best to ZIP the file that the download is as small as possible. Zipping a file will result in a faster download for your visitors and will use less bandwidth.
  • To create a ZIP file in OS X secondary click (i.e. a two finger tap) on the PDF file you’ve created and select ‘Compress’. This will create a ZIP file of the PDF in the same location as the original content file using the same file name as the PDF together with a ‘.ZIP’ extension.

EverWeb Hyperlinking

Creating Your Download Link in EverWeb

  • Now the ZIP file has been created we are ready to create the download link in EverWeb. Go to the page in your EverWeb Project where you want the download link to be. The download link object can be either text, graphic, button or even an image. Whatever you choose, make sure that your visitor can easily access the download link!
  • If you’re going to use text as your link remember your SEO. Try to avoid using stock phrases such as ‘Download your free file HERE’ (with ‘HERE’ being the link word in this instance). Try using text that’s related to the content itself e.g. “Download my ‘Guide to SEO’” where ‘Guide to SEO’ is the link text. If using an image file, remember to complete the ALT-Text with a description of the link.
  • Select your download link object and create a Hyperlink by ticking ‘Enable as Hyperlink’ from the Hyperlink Inspector. If you’re using text select the text inside the text box and not the text box itself.
  • In the ‘Link To’ box select ‘A File’. You’ll see that under ‘Name: No File Selected’ is the ‘Choose…’ button. Select this and then select ‘Choose…’ again. Select your ZIP file and select ‘Open’.
  • If using text as your download link object, you may want to adjust the colors and underlining in the Hyperlink Formatting section of the Inspector.

Always Test Your Work

  • Your download link is complete! The best way to test that the download link works properly is to publish the website to your server then try the link. When you publish in this way the ZIP file gets uploaded to your server and will get downloaded to your visitors PC when they click on the download link. If you try to test the download using EverWeb’s Preview or Folder option, you may get unexpected results.
  • If you want to play safe, create a test download link in an obscure part of a web page, publish to your server and see if it works from there first before trying it for real

Having downloadable content on your website is a great way to attract visitors to your website. Setting up PDF file download links in EverWeb is super easy so take time creating effective content for your downloadable freebie that incentivizes your visitors to come back to your website again and again!

22 May 2016

10 Tips for Trouble Free Publishing in EverWeb

No Comments EverWeb, Software, Tips and Tricks

Publishing your website to the Internet takes just the click of a button with EverWeb. It’s satisfying knowing that your hard work’s almost paid off and your website soon to go live for the world to see. But what happens if it doesn’t work or its taking so long that you think the publishing process has stalled completely? Our Q&A session below takes a look at some common questions that get asked about publishing with EverWeb, and the steps you can take to help resolve such issues.

Q. How do I know that my website’s still publishing and not stalled?
A. There are a couple of ways to check that your website is still publishing. Once EverWeb has processed the website project file, the upload to server process continues in background. You’ll notice a progress circle indicator appearing to the right of your website name in the Web Page List. The circle should fill as publishing progresses. Alternatively, go to the Site Publishing Settings (use the File-> Edit Publishing Settings menu) where you can see each file being uploaded to the server.

Q. When I publish my website it doesn’t appear on the Internet.
A. Check that you’ve published your website to the right location. It could be that you’ve published to your local hard disk instead of the Internet. In the File-> Edit Publishing Settings menu check that ‘Publish To’ is set to ‘EverWeb’ or ‘FTP Server’ and not ‘Folder’, then try publishing again.

Q. I’ve updated my website project and published it but the changes don’t appear on the Internet.
A. Clear your browser history or try refresh the page a few times. In some cases you may need to quit and relaunch your browser.

Q. Can I publish my website to the Internet using a trial version of EverWeb?
A. The only difference between a trial version of EverWeb and a purchased version is that you cannot publish either locally or to the Internet with the trial version. You’ll need to purchase EverWeb to publish.

Q. I’ve uploaded a website using FTP but EverWeb publishes pages I’ve recently deleted. If I publish to ‘Folder’ it works fine. However, when trying to publish via FTP again the deleted pages get published!

A. Use File -> Publish Entire Site to republish the whole website again. You may have been using the ‘Publish’ button which only publishes changes. In this instance, a complete publish of the website may be needed.

Q. I’ve just switched to an EverWeb+Hosting account, but when I publish my website I still see the old one in my browser.

A. When switching to EverWeb+Hosting you need to update the ‘nameservers’ as they tell a domain which server to point to. The process can take up to 72 hours to completely update so bear this in mind when you are planning your switch over. An EverWeb tech note on nameservers will walk you through the process…

The second possibility is that you may be looking at an old URL for your old website. browsers often have autofill enabled when you start typing

Last but not least, quit and restart your browser as this will clear the browser cache.

Q. When I try to publish my website it gets stuck part way through.

A. This could be a firewall related issue. It could also be related to using networks in hotels or public places where certain types of Internet connection may be blocked or restricted.

Alternatively check to see if you are publishing via FTP over SSH. EverWeb only supports publishing via regular FTP or via FTP over SSL. In EverWeb go to the EverWeb-> Preferences… menu. In the Account tab deselect ‘Use Secure Publishing’. If you still have problems, uncheck ‘Use passive publishing connections’ in the ‘Publishing’ tab of the Preferences.

Q. I’ve published my website via FTP but hours later it’s still not visible on the Internet.

A. It’s possible that the directory/pathname is incorrect so the files don’t go to where they should go! Check the Directory/Path details in the File -> Edit Publishing Settings menu then try again.

Q. My website publishes but really slowly!

A. If you have a large number of images or if the image files you use are large, this may slow publishing. Large image files could also result in slow page loading in browsers. Optimize large image files before importing them in. When importing a large TIFF PSD or PDF file, EverWeb asks if you want to optimize it to web resolution.

If you’ve already imported large image files, remove them from the Assets List. This will keep the image place holder on the page. Drag and drop the optimised version of the image on to the placeholder to complete the task.

Q. Any general tips on publishing with EverWeb

A. Always keep your copy of EverWeb up to date with the latest release. There are always improvements, enhancements and optimisations with every release.

If you do experience problems with publishing, check the EverWeb forums to see if others have had the same or similar problems.

Check to see if the problem is related to your Hosting Provider

There’s always the option to log a ticket with EverWeb Support.

Do you have any publishing hints and tips that you’d like to share with the community? Let us know in the comments section below!

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!

15 Apr 2016

Using Google Calendars in EverWeb

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

Adding a calendar to your website is a simple, easy and effective way to let others know your agenda and availability. It’s also great in business situations where you want to show things such as available appointment times, room availability for meetings or if a piece of equipment is available for hire on a particular day. Including a calendar in your EverWeb made website only takes a few steps using Google’s calendaring feature.

In this example we’re going to create a calendar showing the availability of a music studio for hire.

  1. First of all you’ll need to have a Google account. If you don’t have one go to www.google.com and click on the ‘Sign In’ button located in the top right hand corner of the browser window and create an account from there.
  2. If you have not done so already, log in to your Google account and go to Google Calendar by clicking on the grid icon in the top right of the browser window. The grid icon displays all of Google’s cloud based apps you can access. Click on the Calendar app.
  3. You’ll see this month’s calendar displayed. Next create your own calendar that will be shown on your website the studio’s availability. If you’ve used Google Calendar before, you may already have one or more calendars set up already. Different calendars can be used for different purposes e.g. one for your own availability and one for studio bookings. To create a new calendar, go to the ‘My Calendars’ section and click on the drop down arrow. Select ‘Create new calendar’.
  4. On the ‘Create new calendar’ page, name your calendar e.g. ‘Studio Bookings’ and complete the form by filling in the fields you want include.
  5. It’s important to remember to tick the box to ‘Make this calendar public’. If you don’t no-one will see the calendar content on your website.
  6. When you have completed the form click on the ‘Create Calendar’ button at the bottom of the window.
  7. You’ll now see the calendar in the ‘My calendars’ list. Now the calendar has been added, hover the cursor over the calendar name and click on the drop down button to the right of the calendar name. Select the option ‘Calendar settings’ from the menu that appears.
  8. On the next screen you can edit the calendar display by selecting ‘Customize the color, size, and other options’ link in the ‘Embed this calendar’ section. Google Calendar allows you to change the display size of the calendar, has color and bordering options, the initial calendar view options such as weekly, monthly or agenda view and more.
  9. Once you’ve finished customizing your calendar, click the ‘Update HTML’ button, Select all the code in the ‘Copy and paste the HTML…’ box and copy it using Cmd+C. Having copied the code to the clipboard you can return to the calendar by clicking on ‘Google Calendar’ in the top left of the browser window.
  10. On the calendar view add in some events so you can see that the calendar functions properly on your web page. To create an event just click on the time you want the event to start and drag the mouse cursor to it’s end time. You’ll then be able to create the event.
  11. There are other options available on the calendar page such customizing the color of the events in the calendar. Just click on the drop down button to the right of the calendar name for the menu of options.
  12. The code snippet you copied to the clipboard is what you need to embed the calendar in to your page in EverWeb. If you change the customisation options in your calendar after you’ve copied the code, you’ll need to ‘update’ the HTML code, recopy the resulting code and reapply it in EverWeb.
  13. With the code copied to the clipboard, launch EverWeb and go to the page in your Project file where you want to add the calendar.
  14. Drag and drop the HTML Widget on to the page from the Widgets tab. Paste the code that you copied in to the ‘HTML code’ box and press the ‘Apply’ button.
  15. The widget will update. Move the calendar to where you want it on the page. The width and height of the calendar will be the dimensions that you chose in Google Calendar.
  16. Use EverWeb’s Preview to see how the calendar will look, you can even interact with it as well.

When you’re happy with the results, hit the ‘Publish’ button and you’re all done and will have a live calendar online!

25 Mar 2016

Creating and Using Video Content in EverWeb

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

EverWeb has a great, updated Video Widget in version 1.9.5 that can be used to easily add video content to your website. Creating your own video content doesn’t have to be expensive or time consuming as apps such as iMove and Keynote are both free and easy to use. There’s also QuickTime Player, which comes with OS X, that lets you screen record video then edit it with some basic editing features.

In this example, we’re going to create a video tutorial about EverWeb’s hyperlinking feature using Quicktime. The video will include an audio track narrative. Once the video and audio have been created, we’ll insert it into a web page in EverWeb. OK, here we go…

Planning and Preparation

  1. Before creating a video tutorial, plan it’s flow from start to finish. Keep in mind what the goal is i.e. what do you want to tell your audience?
  2. Your tutorial should focus on one subject or idea only if at all possible e.g. how to hyperlink a piece of text to take you to another page in your website.
  3. Try a few ‘dry runs’ to make sure the tutorial flows properly before you start recording. Doing this also helps you get used to the steps you’ll be recording. It’s also a good point to double check that the video flow is as simple and straightforward as you had planned. Remove any unnecessary steps or anything not directly related to what your subject is about.
  4. Once you have rehearsed your tutorial, close any open applications on your desktop that are not needed in the recording.
  5. Set your OS X desktop background to a neutral color and clear away any files you have placed on the desktop. This will help keep your audience focused on the video content and not what’s in the background.
  6. When making screen recordings, you may want to increase the size of the mouse pointer so it’s easier to see and follow around the screen. You can change the mouse cursor size in ‘System Preferences’. Select ‘Accessibility’ and then ‘Display’. When recording, remember to move the mouse at a steady, even pace at all times. Avoid jerky mouse movements and don’t go too fast or too slow either!
  7. Once you have set up your recording environment, go to the point where you will begin the recoding. In our example, this is the page in our EverWeb Project file with the text that we want to hyperlink.

Recording Your Quicktime Movie
With all of the preparation done, it’s time to start recording…

  1. Open QuickTime Player. If it’s not in the Dock use Spotlight to search for it.
  2. Select File > New Screen Recording from the menu and follow the instructions that appear in the middle of the screen.
  3. When you have finished recording your video tutorial, press the record button in the menu bar in the top right hand corner of the screen to end the screen recording.
  4. Next, play your recording back to make sure that it’s how you want it. You may need to re-record a couple of times to get things right. Remember that if you need to re-record, you may need to reset things that have changed in the recording e.g. in the example of Hyperlinks, you would deselect ‘Enable as Hyperlink’. If you find that re-recording keeps going wrong, take a break and come back fresh to it later on.
  5. To add a narrative audio track to your video you’ll need a microphone. This is easily solved by using the microphone included with your mobile phone, such as the one on an iPhone. Plug the microphone in to your Mac. Remember to plan and test your audio track in the same manner as you did with your video track.
  6. Before starting the audio recording, make sure the video recording is at the start of playback. Also, moving the audio and video windows close to each other will make starting and stopping recording and playback easier.
  7. Select File > New Audio Recording. Begin the audio recording and then start the video playback immediately afterwards so that your narrative recording syncs up with the actions of the video recording. Once finished, turn off the audio recording and save the audio file.
  8. To combine the audio with the video, drag the audio recording file you have saved on to the window that contains the video recording.
  9. If the video is too long, use Edit > Trim to edit it down.
  10. To edit down the audio track, select Edit > Trim followed by View >  Show Audio Track. This will allow you access and edit the audio.
  11. When you have finished editing, save the video file. It will have a .MOV extension.
EverWeb's Video Widget Settings

Video Inserted into a web page.

Adding Your Video Content in to EverWeb
With your video tutorial now complete, it’s time to add it in to your web page in EverWeb…

  1. Open your EverWeb Project file and go to the page where you want to add the video.
  2. From the Widgets Inspector, drag and drop the Video Widget on to your page. Position and resize the video placeholder as desired.
  3. In the Video Widget settings tab click the ‘Choose…’ button for ‘MP4 Video’ and select your .MOV video file. You’ll notice that there are two other file format options available: WebM and OGG. Use these options for compatibility purposes with older versions of Firefox and with Opera browsers. If you need to convert from Quicktime’s .MOV file format to WebM or OGG formats look for appropriate conversion programs on the Web.
  4. The updated Video Widget in EverWeb 1.9.5 has a variety of options for video content (see screenshot above.) Generally it’s recommended to go with the defaults most of the time unless you have specific reasons not to. For example, muting the sound is a good idea incase the video is accessed in a public area where you won’t want sound to upset people who may be nearby.
  5. Poster Image in EverWeb

    Example Poster Image in EverWeb which can be used as a Title Card for your video.

  6. It’s recommended to use the Poster Image option as the option places a picture at the front of the video whilst the video itself downloads in the background. It’s useful especially if the video is large and/or download speeds are slow to the device being used. Without a Video Poster Image the video needs to download first to supply an image. The other use of the Poster Image option is that you can easily make a title card for your tutorial, in our example, ‘Hyperlinking with EverWeb.’
  7. Remember that when using Video Poster Image it isn’t supported with Autoplay checked. You may want to advise your visitors that video downloads can be bandwidth hungry, especially from mobile devices before they hit ‘Play’ so they can choose to play the video or not.
  8. To see the results, use Preview in the EverWeb Toolbar before publishing to the Internet. Don’t forget that when you publish to the Internet to test your video content in different browsers to ensure video format compatibility.

Adding video content in to your EverWeb Project is quick easy and hassle free, all it takes are OS X’s native or free apps to get you there!