Mac SEO Blog

EverWeb’s Image Slider has gained new features in version 1.8 with the addition of slideshow Captions, a Transparency option for your Slideshow background and the ability to add URL links to slides. So, why not give an existing slideshow an update or create a new slideshow from scratch incorporating some of these new features?

If you want to start a new slideshow, just drag and drop the ‘Image Slider’ widget from the ‘Widgets Inspector’ on to your page. Place and size the Image Slider placeholder as desired.

With the placeholder still selected, go to the ‘Widget Settings’ in the ‘Inspector Window’. Here is where you add, arrange and delete slide images. Drag and drop images from anywhere on your computer into the Assets List. To reorder the files in the list just drag and drop the image filename to where you want it. You can use Shift+click to select contiguous files or Cmd+click to select multiple files that are not next to each other in the Assets list.

If you have added an image that you do not want, highlight it’s filename in the Assets List and press the backspace key to remove it. Although the filename disappears, it can be always be added back using the ‘Choose…’ button.

You can also add images using the ‘Choose…’ button. When using ‘Choose…’ you will see a list of the image files  associated with your EverWeb Project. If the image file you want is not listed, click on ‘Choose…’ at the top of the list and navigate to where the image files you want are located. In EverWeb 1.8 you can now select contiguous files by using Shift+click to select contiguous files or Cmd+click to select multiple files that are not next to each other

When selecting Images for your slideshow, make sure that they are optimised for use on the Web. Large image files  slow the loading of your web page and affect the performance of your slideshow. EverWeb detects large files on import and offers you a choice as to whether you want to use the original file or a web optimised version.

It’s also important to use images of the same size, quality and orientation in your slideshow e.g.  your images should either be all portrait or all landscape and not a mix of both. Images should be also of the same dimension and quality in your slideshow.

In the example below we have created a web page for a fictional company, ‘Fantastic Journees Inc’, with the company name in the top left hand corner of the page. Below the company name is the Image Slider followed by a Navigation Menu with a rectangular colored shape behind it providing a background contrast.

The original Image Slider page created in EverWeb 1.7.

We can start to update the Image Slider by making it ‘Full Width’. Select the Image Slider then go to the Metrics Inspector and click on the ‘Full Width’ button. In addition make the Image Slider ‘Fixed Position’ at the same time. Lastly, select Arrange-> Always On Top from the menu.

Next select the company name and make this also ‘Full Width’, ‘Fixed Position’ and ‘Always On Top’. If the find that the text is right up against the left hand margin of the page, use the Text Inspector to add a margin in using ‘Insert Margin’.

Repeat the above steps for the Navigation Menu and it’s background coloured rectangle. Rearrange any objects that may have moved position on page due to the use of ‘Fixed Position’.

With the basic page layout updated, let’s update the Image Slider. In this example we are going to add a caption to each slide.

To add a caption to a slide, select the image file name in the Assets List. Next enter the text  you want for your caption in the ‘Caption’ box. To change the font size and style, click on the Fonts button and use the Fonts Panel to select the options that you want to use.

If you want to add a URL link, enter it in the ‘URL’ box. If your visitor clicks on the image they will be taken to the page you have linked. When adding links, make sure you use the full descriptor e.g. ‘http://www.fantasticjournees.com/homepage.html‘. Remember to test the link using ‘Preview’ before going live with your changes.

Note that if you enter a link in the ‘URL’ box, it will override ‘Click to enlarge image’ if you have ticked it in the Behaviour section.

If you want to add a background colour to your caption select the ‘Background’ color swatch in the ‘Caption’ section at the bottom of the Widget Settings. Use ‘Background Opacity’ to change the background transparency. If you do not want a background color at all set the value to zero.

You can place the caption where you want within the Image Slider using a combination of ‘Caption Left’ and ‘Caption Top’. These options operate like x and y co-ordinates when placing the caption. When you publish the page, the caption automatically scales and resizes as you change the size of the browser window as seen in the two screenshots below.

The Image Slider is full width and resizes as you adjust the browser size, as does the Navigation Menu.

As the browser window shrinks you see that the caption automatically resizes. You can also see the results of the use of Fixed Position and always on top here as the items below the Navigation Menu scroll under the menu.

Use ‘Caption Width’ to define the height and width of the caption text and background box color if you have one.

When creating captions for all of your slide images, try to make the text about the same length for each slide so that the caption box remains a consistent same size from slide to slide when viewing the slideshow.

In addition to captions, you can now make the slideshow background transparent. This is useful when you use Thumbnails and want the slideshow to blend in with the page background color. See the two screenshots below.

The Image Slider with Thumbnails and the original background color.

The Image Slider with Thumbnails and with transparent background selected.

And finally, don’t forget that there are some great Transition effects to play with such as Pulse and Flash. Try experimenting with these as they can really liven up a slideshow especially when used with vibrant background colours that you set using the ‘Background’ color swatch in the Appearance section.

The Image Slider update keeps your website slideshow fresh and up to date a new modern, dynamic look and feel. With a little experimenting of Image Slider’s new, and old, features, you will give your visitors a great slideshow experience!

EverWeb 1.8 has a host of new features that give you more design flexibility than ever. In the example below, we are going to use a combination of three of these new features – ‘Always on Top’, ‘Fixed Position’ and ‘Full Width’ – to create a fixed header. With a fixed header  your web page contents slide under the the ‘fixed’ header as you scroll up and down the page.

In this example, we will create a Master Page using the Spa template from EverWeb’s template library. The Master Page can then be applied to any web page in your website project.

1. To start, add a new Master Page. Click on the ‘New Master Page’ button or select File-> New Master Page…’ from the menu. This example uses  the ‘Home’ template of the Spa theme. Once you have created the Master Page, double click on its name and over type it with ‘Spa Master Page’.
2. In the Page Inspector, set the ’Header Height’ to 160.
3. As this is a Master Page, remove any objects that are in the body of the page. Your page should look similar to the screenshot below.
4. To add a Navigation Menu to the header, just drag and drop the Navigation Menu Widget in to the Header section. Place, size and style all the objects that are in the header as desired such as shown below.
5. Select all the objects in the header and then tick the checkbox ‘Fixed Position’ in the Metrics Inspector This will keep the objects in place when you scroll up and down the web page.
6. Use the Shapes button in the Toolbar to add a rectangle to the page. In the Metrics Inspector tick the checkboxes ‘Full Width’ and ‘Fixed Position’. The rectangle will be stretched across the full width of the screen.
7. Move the rectangle to the top of the the page and set the height of the rectangle so that it is meets the bottom border of the header as shown below. Remember that you may need to hold the Cmd key down to move the rectangle from the body of the page into the header.
8. As the rectangle now obscures the other objects in the header (as in the above screenshot) select Arrange-> Send to Back from the menu to place it behind all of the header objects.
9. With the rectangle now in place change it’s color as desired using the Fill section of the Shapes Options.
10. To complete the Master Page, select all of the objects in the header. Select Arrange->  Always on Top from the menu.The reason for using ‘Always on Top’ is that Master Page objects normally lie underneath the contents of web pages. In our example, however, we need the Master Page header objects to be on top so that web page contents can slide beneath them. ‘Always on Top’ is how we can force objects to be on top of everything else in order to achieve the effect we want.
11. Once your Master Page is complete, create a web page and attach the Master Template ‘Spa Master Page’ using the ‘Master Template’ dialog box in the Page Inspector. Add the content that you want to include in the body of the page. As you scroll up and down the body contents, the contents will slide under the header.
12. When you have completed your page, use Preview to see how the page looks before you commit to publishing it on the Internet. You can see the results of scrolling in the screenshots below.
    

    The initial view of the page…

    
    

… and the effect when scrolling down the page.

Many websites today have social media buttons pinned to the side of the page so that they are always clickable as you scroll up and down the screen.

This is a great feature for your website and is easy to do with EverWeb 1.8. To achieve the effect need to use the new ‘Fixed Position’ feature in the Metrics Inspector. ‘Fixed Position’ lets you lock the position of an object on its x-axis. This means that as you scroll up and down your page (i.e. along the y-axis), the object remains fixed in place.

Just follow the simple steps below to easily have social media buttons on the vertical and always visible.

1. First add  the social media buttons that you want to your page, e.g. Facebook, LinkedIn, Pinterest, Email, Google Plus etc. Using the ‘Insert > Button menu to add buttons to your page or use drag and drop your buttons from the Widget Inspector on to your page. When placing buttons line them up vertically close to the left or right hand edge of the page.
2. When you add each button, make sure that you tick the box ‘Fixed Position’ on the Metrics Inspector. This will lock your button in place on the horizontal x-axis (see screenshot below.)
   

   To fix the social media button in place, first select it, then checkmark the box ‘Fixed Position’ in the Metrics Inspector, as shown in the example above.

3. Remember to make sure that your Social Media buttons are properly aligned and distributed.
   Select all of the buttons that you have placed on the page. Next use the ’Arrange > Align Objects > Left’ menu so the buttons appear flush to the left, and use ‘Arrange > Distribute Objects > Vertically’ to evenly space the buttons.
4. If you are adding buttons to a Master Page, you may need to use ‘Always on Top’. Objects on Master Pages lie underneath those on your normal web page. If you find your buttons are not visible use ‘Always on Top’ so that they appear above all other objects on your page.
5. The last  step is to use Preview to see how your design looks and to test out your ‘Sticky’ buttons before publishing (see screenshots below.) Always remember to test your buttons. Once you have published your website, don’t forget to test each button to make sure that your links work properly!

Use Preview to see how your ‘Sticky’ buttons work.

As you scroll up and down your web page, the social media buttons remain in place as the page content slides under the buttons.

What is Referral Spam?

Referral spam is a technique used by spammers to make it seem like you are getting a lot of visitors from their website which entices you to visit their site. This gets more visits to the spammers website.

Although technically harmless to your website, the biggest issue is that referral spam appears in your analytics software, such as Google Analytics, and misrepresents the data in there. It will appear as if you are getting more traffic than you actually are and your conversion rates will be significantly lower.

You can see if you are getting referral spam by doing the following;

1. Log into your Google Analytics account
2. Go to your website Acquisition->All Traffic->Referrals
3. You can usually identify referral spam because it will come from a domain that either has nothing to do with your website content, or implies it is related to seo, traffic monetization etc… Referral spam is usually 100% new users, 0% conversion and a very high bounce rate

Referral Spam Example List

Can Referral Spam be Stopped?

There are a couple things you can do to help slow down referral spam. However, because these spammers use many different domains and techniques, it does require some maintenance.

You also cannot remove any previous referral spam from your Google Analytics, you can only make sure that in the future you do not see them.

Also, there are so many different domains that spammers may use. In fact there are thousands of domains that may appear in your Google Analytics.

The technique suggested here requires a list of domains so that Google, or your website, know to either not count the traffic as real traffic, or completely block them from accessing your server.

How to Stop Referral Spam

You can stop referral spam by creating a Google Analytics filter which will make sure that when you check your stats in the future, these spam websites won’t appear in any Google Analytics reports. Unfortunately you won’t be able to remove them from previous reports with this filter. To do that, you’ll have to create a Segment which we’ll have to do another blog post for in the future.

To set up a filter to stop the referral spam, follow the steps;

1. Log into Google Analytics
2. Go to your Reports page for your website
3. Click the Admin tab at the top of your browser
4. On the next screen select ‘All Filters’
5. Then press the ‘New Filter’ button
6. 
7. On the next screen you will actually set up your filter. Here are the settings to use;
   1. Filter Name: Referral Spam
   2. Filter Type: Custom
   3. Exclude: Selected
   4. Filter Field: Campaign Source
   5. Filter Pattern: A list of domains separated by a | character. Do not include http:// or www. They are only domain names. The list will keep changing as you notice more referral spam from new domains. Here is what I have set up in this screenshot which you can copy and paste into this field;4webmasters.org|trafficmonetize.org|guardlink.org|best-seo-offer.com|howtostopreferralspam.eu|free-social-buttons.com|100dollars-seo.com|webmonetizer.net|erot.co|floating-share-buttons.com
      

      Set up your referral filter as shown

       

8. Lastly select all ‘Available Views’ and press the ‘Add’ button to add them to the ‘Selected Views’ list.
   

   Apply all your filters to your views

    

9. Now click Save

Starting in 24 hours, your new reports will stop showing the domains you have entered in the above steps.

Blocking the Domains from Accessing your Website

You can actually block the domains from even accessing your website if you have the knowledge to create a .htaccess file. If you use your own web hosting provider you can create a .htaccess file as described here,

For EverWeb + Hosting customers will be adding this feature automatically for you in an upcoming release. Stay tuned for our announcement.

I hope this post was useful and if you have any questions, be sure to post in the comments below.

We have just released an update to EverWeb. This new version (1.8.1) contains several fixes for many widgets which previously displayed a ‘file not found’ error message after publishing on OS X 10.7 and 10.8. We have also included an updated PDF user manual, which can be found under the Help menu. Download the new update from within the application by going to EverWeb > Check For Update, or by visiting EverWeb’s downloads page.

Other fixes include a fix for certain widgets not being displayed properly when previewed, and a fix for the video widget. There are also new localizations for Japanese, Spanish, Italian, and German.

The full list of changes can be seen below.

Just a reminder that if you were experiencing issues publishing with 1.8, please use the Publish Entire Site option from the File menu.

CHANGES
– Fixed a bug in 1.8 where image sliders, video, audio, and many third party widgets would display file not found errors when published on OS X 10.7 and 10.8
– Fixed a problem with background stretch images on Master pages not drawing properly
– Should fix a problem where some widgets would not properly display their preview within EverWeb and only display a green ‘updating’ icon
– An updated PDF user manual (under the Help menu)
– A fix for the video widget no working (make sure to make a small change to any page that uses the video widget so that it will be republished OR republish your entire site)
– A fix for some changes not publishing, specifically the navigation bar when adding new/deleting/renaming pages that are included in the navigation bar
– It includes debugging information for the crash some users are getting when publishing. If you continue to get a crash when publishing with this version, please make sure to copy and paste the crash report to us so that we can take a look at it.
– Checking for unused assets and checking for which page is using an asset works for custom code in the header and footer fields now
– No longer uses fancy quotes in header/footer fields
– ‘Check for Update’ will download the right version for 10.6 users now
– Imported new localizations: Japanese, Spanish, Italian, German

The speed of your website is a top priority for us and an important indicator of the quality of your site. We know that visitors hate slow loading website and that search engines can penalize your website for being slow.

EverWeb already includes lots of features to help make websites load quickly, but we’re always working on more.

In EverWeb 1.8 we made a number of changes to make sure you website loads faster for you visitors;

1. We only include jQuery when required by a widget you may be using

2. We provide an option when importing PSDs, TIFFs and PDFs to convert them automatically to a web format, significantly reducing the file size and the time it takes a them to load in your browser

3. We have an all new option to automatically optimize PNG files on export so they have a smaller size but the same image quality

4. We only include the styles and typefaces actually used with Google Font so they load faster

Along with the above, we have already implemented significant optimizations for the next version of EverWeb. In fact, the new features coming in version 1.9 have already reduced the EverWeb website by 35% in file size and made it load significantly faster.

Did you know we have thousands of users participating in the EverWeb discussion forums? If you’re having a problem with EverWeb or just want to talk with like minded people, come join us on the EverWeb discussion forum.

The EverWeb discussion forum has a wealth of questions and answers to help you with virtually all your issues. There’s also some really smart people in there that can help you work through an issue you may be having.

EverWeb developers are also around to help you with issues as well. Sometimes we even post beta updates so you can see what’s coming in updated releases of EverWeb and help shape it’s future.

So come join us on the forums, we’re looking forward to meeting you!

Some other helpful resources;

The EverWeb Video Tutorials

The EverWeb SEO Video Course

The EverWeb Facebook Group

In EverWeb 1.8 we introduced Auto Save and Automatic Backups.

Auto save is enabled by default and will make sure your project is always saved each time you make any change to your site.

Automatic backups will automatically backup your project file to a location of your choice at set intervals. This means you can go back to a previous version if you make a mistake or always ensure you have a backup incase something happens to your original project file.

Set you auto save and backup preferences

First, go to EverWeb->Preferences in your menu bar in the top left hand corner of your screen. Then select the ‘Backup’ tab. From here you can enable/disable the auto saving feature as well as customize the backup behaviour.

By default EverWeb will backup your files to you Library folder within the EverWeb directory. This folder is hidden from you on current versions of OS X. You can change this to any location you want. We recommend saving it to a dropbox folder. This will ensure that your project backups get published to the cloud so that even if you have a hard drive failure, you can always recover your project.

From the Preferences dialog you can also select the number of backups to keep and the frequency of backing up. EverWeb will remove the oldest backups automatically once they ‘Number of backups to keep’ number is reached. Storing more backups requires more space of course.

Restoring from backups

If you ever need to restore your project from a backup you can do so from the File menu->Projects Window dialog.

Once the dialog is opened, select the little arrows to the right of the project you want to restore and select ‘Restore from backup’.

Select your EverWeb project file backup

Once you do that you will get a new dialog showing all the backups you currently have. You can double click the backup you want to restore and EverWeb will automatically open it and replace the current working copy of your project with the backup.

Your current working copy of your project will be moved to the trash folder on OS X. In a worst case scenario, you can open your trash folder to recover your previous, working copy project file.

Restore a project from your backups

What if I delete my Project file?

When you delete your project file EverWeb will also remove your backups. If you delete you project file from within EverWeb, it will be moved to your trash folder. If you need to recover it, and assuming you have not yet emptied your trash folder, you can find it in your trash folder.

Aside from all the great new features in EverWeb you may have missed, we made some improvements to existing features to make working with websites much easier. Here are just a few you may or may not have noticed;

1. Previewing and Publishing is much faster

We’ve enhanced the speed of publishing and previewing your website. You’ll notice that as long as you aren’t changing a master page, or making a change that would effect the navigation bar, these features will be significantly faster.

2. Better font support in the Navigation menu

You will now find that light, hairline, medium and semibold fonts will now work properly in the navigation bar. Hairline fonts are now supported in textboxes too!

3. Caching issues on preview

You may have been affected by the caching issues of the preview feature where some font styling would not work right in your browser. We’ve made sure that when previewing locally, a cache file is not stored by your browser so you shouldn’t see this issue anymore.

4. Reduced dependencies on jQuery

We have reduced the dependencies on jQuery so that you website can load faster and not depend on external libraries unless absolutely necessary. In addition, we’ve added better code for included jQuery so your websites shouldn’t display problems in countries that may block it from Google’s servers.

We hope you like the above additions. There is so much more in this release and we invite you to download it and check it our for yourself (it’s free to try!)

With the release of EverWeb 1.8 we included a lot of new features. I know some may get lost in the release notes so I want to outline three great new features we’ve included.

1. Support for Social Media Images and Favicons.

The Social Media image is what you see when you post your page to sites like Facebook. You can select any image to be the ‘Social Media’ image for each page on your site. If this is not specified then Facebook and other sites will use the first image on your page, or non at all.

To se the Social Media Image go to the Inspector->Page Settings. You’ll see the Social Media Image under the ‘Page Details’ section.

The Favicon is set on a per site bases and appears in the path bar in your web browser. It should be a small, 16 by 16 image but EverWeb will resize and convert an image you select. To set the Favicon go to the File menu and select ‘Edit Publishing Settings’. Scroll down until you see the Favicon button and select your image.

Sometimes you need to clear you browser cache to properly see your Favicon.

2. New stretch and stretch to fill background image settings

If you go to Page Settings->Browser Background you will see new Image fill options for ‘Stretch’ and ‘Stretch To Fill’. These options will stretch an image across the entire browser background and resize it as the browser window is resized.

The new Templates that come free with EverWeb 1.8 (Go to EverWeb menu->Check for New Templates) will show these new features.

Combined with the new Full Width and Fixed Positioned options for shapes, you can really make some really modern and cool designs

3. New option in Arrange Menu -> Always On Top

This option places the object over all other objects even if it is from a Master template. If you have multiple objects with this option set, the order comes from the bring to front, send to back etc… options under the Arrange menu. This is useful for having a navigation bar on a master page always on top on the child pages, especially when using the all new Fixed position option.

BONUS: Check out the new options in the Image Slider. You can now set a caption and a specific URL for each slide. That means you can redirect users to a specific page from each slide.

Pro Tip: Change the font styling of the captions by using the ‘Fonts’ button in the toolbar when the Image Slider is selected. It’s really easy to add nice styling to the Image Slider.