Mac SEO Blog

Welcome to the Summer Edition of EverWeb Highlights which rounds up all the news, features, articles, tips and tricks about EverWeb from the last few months.

The EverWeb April 2016 Survey

A big thank you to everyone who completed the April Survey on the EverWeb Discussion Forum. We really appreciate all your feedback and suggestions on what you would like to see in future releases of EverWeb. We’re working hard on including some highly requested feature suggestions in to the next major release of EverWeb so stay tuned to the Announcements section of the Discussion Forum for the latest news!

EverWeb versions 1.9.5 & 1.9.6 Released

Since our EverWeb Highlights: Winter Edition, there have been two updates to EverWeb:  Version 1.9.5 featured optimisations for speed, memory efficiency and stability. The Video Widget also received an big update with many requested customization options added such as  volume settings, autoplay and video poster images. For more information on the feature list of 1.9.5 please see ‘Introducing EverWeb version 1.9.5’.

April 2016 introduced EverWeb version 1.9.6. featuring performance and stability improvements. The full release notes can be found in ‘Introducing EverWeb Version 1.9.6’

The release notes also detail how you can update your product to the latest version if you haven’t done so already.

Blog Updates

There are a number of new Blogs articles to read up on, including:

Getting Started with EverWeb – a six part series on EverWeb basics

EverWeb’s Heading Tags Widget

PDF File Downloads using Popup Windows

Justified Text in EverWeb

Documenting Your Website

YouTube Video Updates

We’ve added 12 great new videos to our YouTube Channel, highlighting EverWeb product features, hints and tips and many ‘How to Do’s’. Our YouTube Channel has plenty of new and updated videos and is updated regularly and it’s easy to sign up to. Some of the titles we’ve recently  added include

• Adding and Embedding a Video
• The Projects Window
• Google Maps
• The Audio Widget
• Adding a Facebook Like to Your EverWeb Website
• How to add Jump and Smooth Scroll Anchor Links to Your Website
• Adding Retina Images to Your EverWeb Website
• Resizing Header on Scroll – Full Width Resize Header Widget for EverWeb
• Using Google Fonts in EverWeb
• How to Transfer an EverWeb Project File to Another Computer
• Introduction to EverWeb – A Quick Start Guide
• Sticky Header in EverWeb – Making a Fixed Position Header

EverWeb on Social Media

We all have a favorite Social Media platform for staying connected! As well as the EverWeb website and Discussion Forum, you can find all the latest EverWeb news and info on the following social media…

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

If you have any questions, comments or suggestions, please let us know in the Comments section below, we’re happy to help!

EverWeb’s popup window hyperlink feature is an extremely useful and versatile website design tool. It’s great for keeping visitors focused as the browser background is greyed out when the popup window is in use. That’s useful when you want your visitor to concentrate on filling out a Contact Form or anything else that may require a ‘call to action’. Popup windows are also good to use for additional information that’s useful, but not essential, to the main message, or theme, of your page e.g. clicking on an image of a person shows a popup biography, clicking an address link shows a map etc. There are almost unlimited ways to use a popup window.  In the example below we show how you can use to use a popup window for downloading a PDF file. A fictional company, ‘iPicture’, wants to offer it’s customers a free download of their photography e-book ‘Point, Shoot, Share’. Their website uses EverWeb’s built in ‘Software’ Theme Template.

1. Firstly, a PDF file should be made ready. A PDF file is a good choice for downloads as it’s file format is operating system independent. That makes PDF’s easy to access almost anywhere. Many apps, such as Microsoft Word and Apple Pages,  can convert their own native document formats to PDF file format.

2. Once you have created your PDF file, convert it into a ZIP file. A ZIP file will compress the file making it quicker to download for your visitor. Locate the PDF file in OS X’s Finder, then right click on it. Select the option to ‘Compress’ the file. This will produce a new file with the same name as the original but with a ZIP extension added at the end. You may edit the name of the new file to remove the ‘PDF’ extension. Remember to keep the ‘ZIP’ extension though.

2. With the ZIP file ready, open your EverWeb Project file. If you haven’t done so already, create the page that will contain the hyperlink to the popup widow. The hyperlink can be a piece of text, an image or a button. Often a button is best as it acts as a ‘Call To Action’, i.e. something that is clearly visible and gets your visitor to respond, to take action!

3. If you want to use a button, you can easily create on by drag and dropping a rectangle shape on to the Editor Window. Next, style the rectangle as you want. Double click inside the rectangle to add the button text, in the same way you do for a text box. Use the Fonts Panel to style and size the text. To center the button text, highlight the text itself. Use the horizontal and vertical alignment buttons in the Text Inspector to center the text. If the button does not align properly, make sure  sure that ‘After Paragraph’ is set to zero.

4. After creating your download link button, you need to create the popup window. This is just another page that is suitability sized and styled. Start by adding a new page. In our example, we used the blank page style of the ‘Software’ Theme Template. Name the page appropriately to indicate it’s function e.g. ‘Popup PDF Download’.

5. As this is a popup window, it will only part of the page. In this example we will make it 400 x 400 px. To achieve this effect, go to the Page Inspector tab and use the following settings:

• Top Margin: 0
• Header Height: 0
• Content Width: 400
• Content Height.: 350
• Footer: 50

Note that the Content Height and Footer combined equal 400.

6. With the popup window’s page dimensions set, design the popup window page as desired. Add a button, in the same way as we did above, that will be used to initiate the PDF File download.

7. With the button selected, go to the Hyperlinks Inspector and ‘Enable as Hyperlink’. In the ‘Link To’ drop down box, select ‘A File’. You will see a ‘Choose…’ button appear below the ‘Behavior’ drop down section. Click on the ‘Choose…’ button and select the ZIP file you created earlier.

8. You have now completed your popup window page. Return to the original page containing the link button to the popup window page so that you can add the link in.

The E-Book Download button’s settings in the Hyperlinks Inspector

9. Click on the link button to select it then go to the Hyperlinks Inspector. This time, leave the ‘Link To’ drop down as ‘One of My Pages’. In the ‘Behavior’ drop down box, set it to ‘Open in Popup Window’.

10. When you change the ‘Behavior’ to ‘Open in Popup Window’ options to change the height and width of the popup window will appear. Set both values to 400. See the above screen shot.

11. Finally set the ‘Page:’ drop down box to your popup window page.

The Popup Window with the page that links to the popup window greyed out in the background.

You’re finished! When publishing your website, don’t forget to test that the file downloads and unzips properly to your computer. In our example, when the visitor clicks on the ‘E-Book Download’ button on the Home page, the popup window in the screenshot above will display. The Home page background can see seen ‘greyed out’, focusing the visitor on how to download the e-book.

If you have a question about Popup Windows in EverWeb, please let us know in the Comments Section below. We’re happy to help!

EverWeb’s Heading Tags Widget makes it easy to insert HTML Heading Tags into a web page without having to code. In this blog we explain what Heading Tags are, how to use them with the widget and why Heading Tags are good for your website’s SEO.

Headings, HTML and Heading Tags

Text is often organised in such a way to make it easy to read and understand. Written articles often include a title with the text broken down by headings, sub-headings , sub sub-headings and so on. The title has the most importance followed by the article’s headings which are of secondary importance, followed in third by sub-headings and so on. This hierarchy can continue further if needed, although having more than three or four levels can leave readers a bit lost..

When developing web pages in EverWeb, you probably use the same approach. Your web pages may have some form of title and the page text organised either formally, or informally to give your content a logical, readable, flow. When you ‘Publish’ your website the web pages are converted in to HTML (HyperText Markup Language) code and uploaded to the host server.

EverWeb generates code that is structured to HTML standards. In HTML, Heading Tags act as a language element used explicitly to add structure to the generated code. If you take this blog as an example, it has a title at the top of the page  and headings to break the text content down in to smaller, more manageable parts. If we want, we can explicitly make the page titles and headings in to specific HTML Headings using the Heading Tags Widget.

HTML has six levels of Heading, the most important heading is ‘h1’ with the least important heading referred to as ‘h6’. For example, an ‘h1’ tag would be used for the title of this blog as it’s the most important piece of text on the page. The blog’s headings would have an ‘h2’ tag. Any subheadings would use an ‘h3’ tag and so on… This blog’s tags would therefore be:

h1= EverWeb’s Heading Tags Widget

h2= Headings, HTML and Heading Tags

h2= Heading Tags and SEO

h2= The Heading Tags Widget

h2= Heading Tags Widget Tips

Heading Tags and SEO

Heading Tags should be used in EverWeb as it’s good for your SEO. Search engines can target Heading Tags that have been placed in a web page. Without Heading Tags, search engines treat the headings in your web page just as regular text and so will not be able to distinguish what is important to highlight, in SEO terms, on the page. This in turn may have an effect on your web page rankings.

The title ‘Global Business’ has been converted in to an H1 Heading Tag with the fonts and colours matched properly using the Fonts Panel. The heading below the title could be converted to an H2 tag and the ‘Tools & Technology’ title in to an H3 tag if desired.

The Heading Tags Widget

It doesn’t matter if you have already created web pages or not, you can still use the Heading Tags Widget. On an existing web page, start by taking the most important piece of text and converting it into a Heading Tag. This will probably be the page title. To convert the heading to a Heading Tag:

1. If you have a page title already on the page, copy it to the clipboard. If it is a new page, you can manually enter the title in to the Heading Tags Widget later on.
2. Next, drag and drop the Heading Tags Widget on to the page.
3. Paste the text from the clipboard in to the ‘Heading Text’ box in the Widget Settings Inspector or enter the text that you want to use for the title in the box.
4. Select the Heading Level you want  to use for the text, in this example it will be h1 as the title is the most important heading on the page.
5. The heading tag can be aligned to the left, centered or to the right using the ‘Text Alignment’ drop down box.
6. You can apply a bold styling to the tag by ticking the ‘Use Header Bold Styling’ box.
7. With the Heading Tag created you can now match it’s style with the rest of the page using the Fonts Panel.
8. When you have finished styling the Heading Tag, place it where you want on the page, or replace the original text with the newly created Heading Tag.

Heading Tags Widget Tips

1. Don’t overuse Heading Tags in your web pages. Search engines can detect  the overuse of tags, called ‘stuffing’, and will demote your web page rather than improve it’s ranking.
2. Use just one h1 tag per page. You can use more than one h2-h6 tags on the page as you need. Again, use wisely and sparingly.
3. Including multiple tags at the same tag level on a page is perfectly acceptable with the possible exception of the h1 tag.
4. Save Heading Tags for important pages only. Inserting Heading Tags on pages such as Contact and About pages will not be of benefit.
5. As always, don’t sacrifice your web page content for the possibility of a higher search engine page ranking. It is always better to have a better visitor experience than better SEO.

Heading Tags are useful and easy to implement, and are another tool in your SEO arsenal!

If you have any questions, please let us know! We’re happy to help!

One of the most important aspects of website development is Search Engine Optimisation (SEO.) It’s an essential element to incorporate in your web pages as it may affect your website ranking in search engine results pages (SERPs.) When creating your website in EverWeb you should add ‘Keywords’ to your web pages so they are optimized for search engine spiders. If you have not added Keywords to your website, or have not thought about SEO yet, take a look at the ‘SEO for EverWeb Video Course‘ which explains all you need to know about SEO and how to implement it in EverWeb.

The SEO for EverWeb Video Course is the perfect start to learning about how to apply SEO in EverWeb.

SEO itself is not a static concept, it’s dynamic and constantly changing as our patterns of Internet usage change and technology develops. In this Blog we’re feature some recent SEO articles below to help you stay up to date with SEO to keep your website tuned to keep it’s SERP ranking optimized.

Don’t Avoid Linking To External Websites

Do you include links to external websites in your own website? There’s a tendency to exclude external links from websites as developers and website owners believe that such links take visitors away from their own site. Google’s Gary Illyes has a different view on external links:

“The internet is built upon links, links are essential for the internet.”

Read more and see the video in ‘Google’s Gary Illyes: I’m Angry News Sites Don’t Link Out, It’s Stupid‘.

What happens if the focus of your website changes over time?

When developing your website you should include SEO as part of the development process. However, do you review your website’s SEO when you update or change it’s content? And what happens if you decide to change the focus of your website at a later date? Will this change your ranking? Find out more in ‘How Google Handles a Site When It Changes Topic Focus‘

Google Launches Mobile Friendly Update Algorithm

Google’s ‘Mobile First’ strategy for SEO gained a boost in May when it completed the launch of it’s mobile friendly ranking algorithm. It’s a good reminder that mobile’s importance is growing fast and that all websites should have a mobile version, with SEO included!

Related Topics

SEO in EverWeb

SEO for EverWeb Video Course

And don’t forget our YouTube Channel where there’s more content about EverWeb and SEO.

We recently released a popular video tutorial that demonstrates how to create a full width header that can resize as the user scrolls down the page. This can make your website have a more modern feel to it, as this type of header is becoming more widely used on professionally built websites.

This effect not only will make your site look and feel more modern, but it also adds a bit of convenience to your website visitors. Rather than having to scroll all the way back up to the top of the page, visitors will be able to access your website’s navigation menu at all times, making it much easier to navigate from page to page.

Check out the video below and see how you can add this feature to your website. The widget can be found at EverWebCodeBox.

Video Transcript

With the help of a very powerful widget, you can add a sticky header that resizes when you scroll down the page of your EverWeb site. Here is an example of a basic sticky header that I will show you how to create in EverWeb.

The widget that we will be using to create this header was developed by a third-party EverWeb widget developer named Roddy. The widget is available for purchase at a modest price on Roddy’s website everwebcodebox.com

You can locate it by clicking on the Widgets 3 link, followed by hovering over Responsive and selecting resize header. Scrolling down this page will show you another example of this widget in use.

In this tutorial I am going to show you how I created this header using the widget. This widget is powerful and comprehensive, so I will be skipping over some of the controls that I don’t need to use or ones that I accept the default values for. I am making sure that I cover the most important aspects of the widget, and provide you with enough information to be able to move forward with creating your own header.

I also want to point out that Roddy actively updates his widgets, so if you see a control in your widget that you do not see here, it is because the widget has been updated after the release of this video.

The header that we will be creating has 4 main parts to it. There is the background, the logo, the text, and the navigation menu.

So starting with a blank page for the purpose of this demonstration, I will drag and drop the widget onto the page. This is what appears by default.

The very first thing I will do is make the header full width. I do this by clicking on the Metrics tab, and then enabling the Full Width option.

I will now click on the Widget Settings tab.

The Background

The first thing I will do to the widget settings is change the background color of the header. This is done by clicking on the color control next to where it says Background. You will also notice that there is a Background B. This is because by default, the background will be a Gradient. Since I want a solid color, I will also make Background B the same color as the one I chose before.

The Logo

Next I am going to add the image. I have already added the image to the assets list, so I just need to click on Choose and then select it.

My logo appears much smaller than I want, so I will adjust the value next to width, until my desired width for my logo is displayed.

I also want the logo to be closer to the top of the header, so I will adjust the value next to Top.

The logo is also a bit further to the left than I want it to be so I will adjust the value next to Left.

I will also adjust the Resize Width so that the logo is my desired size once it has been resized.

I will also adjust the Resize Top value so that the logo is a bit further from the top.

The Text

The next thing I will do is replace the heading with my own.

I will also type in my desired Font Family. Since this is a Google Font, I will check the option for Google Font.

You will also notice that the text is overlapping with the logo, so I am going to adjust the value next to Left to move it a bit to the right.

I will also modify the resize left value.

The Navigation

The next thing we will do is add the navigation menu. This is done by adding the navigation menu widget by dragging and dropping it onto the header.

Next, I will click on the Metrics tab and enable the Full Width option. Back on the Widget Settings for the navigation menu, I am going to change the alignment from Left, to Right, since my navigation is on the right side of my header. I will also position the navigation menu somewhere around the middle of the header.

I will also click on the Fonts button to open up the fonts window to select my font.

The rest of the modifications that I make to the navigation menu will be done using the controls on the Full Width Resize Widget, so I will click back to that widget, and then select the Widget Settings tab in the Inspector, and then scroll down to the navigation menu section.

I am going to increase the value next to Resize Top so my navigation menu is bit further away from the top.

I will now adjust the link color, as well as the hover color. You will notice that some of the changes made to the navigation menu will not appear in EverWeb. This is normal. Your navigation menu will appear much different when your site is previewed or published.

I also do not want there to be a background for my navigation menu so I will select Transparent background.

I will modify the font size since I want it to be a bit larger.

I am going to decrease the minimum width for the links in the navigation menu because I want this spacing between links to be a bit smaller.

My navigation menu does not contain a drop down menu so I will skip over the drop down menu style controls.

The last thing I will do is check the boxes to fix the header and navigation and activate the resize on scroll.

We have now just re-created this header.

Just a quick reminder about all of the values that I just set. These values correspond to my logo and the way I want it to appear. Your values will all differ based on the logo and based on how you want your header to look. The way you will determine most of the values that you input will be through trial and error, which is how I determined the values for this header. For most of values that we adjusted, you will be able to see the result of changing the values right away. But for the values that have Resize next to them, you will need to preview the page in order to see the change.

And even though I skipped over some of the controls, you might still find them useful for you, so feel free to play around with them when creating your header.

EverWeb allows you to create anchor links – links that can send visitors on your site from one section on your page to another. Anchor links allow to you guide the visitor to certain sections on the page, making it easier for them to navigate your content. For example, let’s say that your home page has some important content, but that content is located near the bottom of the page. Rather than just hoping the visitor will scroll down to the bottom, you can guide them right to that particular section by using an anchor link.

There are 2 styles of anchor links that you will be able to use on your site. One style is a basic ‘jump’ that will just send the user directly down the page. The other style is a ‘smooth scroll’ which will gently scroll the visitor down the page.

This video tutorial will show you how you can accomplish either of these methods. You will need to refer to some code for one of the smooth scrolling options. There is also a widget that can be purchased to make this process even easier.

VIDEO TRANSCRIPT

In this video tutorial, I am going to show you how you can create anchor links so that you can link from one section of your page to another.

I am going to show you three different ways of accomplishing this, and I encourage you to watch all 3 methods before determining which one will best suit your needs.

The first method will be a simple method which will just jump the user from one part of the page to another.

The second method adds a couple more steps, but will allow you to have a smoother scroll to the other section of your page.

The third method is the easiest, allowing you to setup smooth scroll anchor links, but will require the purchase of a third-party widget. I will provide more information on this later in this tutorial.

So for the first method, I have this page here and I want to setup an anchor that will let the user jump from up here near the top of the page, to a section closer to the bottom.

The first thing I am going to do is create my link that will allow the user to click to go to the bottom of the page. I am just going to create some basic text, and then hyperlink the word or words that I want the user to click on.

I’m now going to enable this as a Hyperlink by clicking on the Hyperlinks tab in the Inspector window, and checking the box to enable as hyperlink. I will choose to link to an external page. In the URL field, I will type in the pound sign, followed by any text that I want to refer to this as, so in this case I am just going to call it bottom

The next thing I will do is add an HTML snippet to the page. In the Widget Settings box, I am going to type in some simple HTML. The important thing to note here is that I am putting in the same word which is bottom, that I linked to in our previous step.

I also wrote bottom inside the tags, and that does appear on the page here. So what I will do is just find an object that this can hide behind nicely, and I will just hide it by going to Arrange, and then selecting Send to back.

When the site is previewed or published, you will see that I can jump to the bottom when I click on the link.

The next method will provide us with a smooth scrolling anchor. This is going to be done using some code, which you can obtain from everwebcodebox.com, hovering your mouse over the Links menu, and then clicking on Links & Anchors. You can now scroll down to the bottom of the page, or click on the Smooth Scroll link to get there smoothly.

We’re going to highlight the script that is here, and copy it.

Back in EverWeb, this script is going to be pasted into the Footer Code section. If you only plan on having the smooth scrolling anchors on one page of your site, you can actually just paste it into the footer code box for that particular page. But if you plan on having it on multiple pages, or you are not 100% sure yet, pasting the script into the site wide footer code section will be fine.

Next, I’ll head back to everwebcodebox and copy the code next to Hyperlink code.

I am going to add an HTML snippet and then paste this code. The anchor-name can be changed to whatever you want, as well as the text that will appear as the anchor link.

Place this on your page where you want the anchor link to be located.

Now I will head back to everwebcodebox again, and copy the code for the anchor.

Drag and drop another HTML snippet onto the page, and paste the code.

I’m going to replace anchor-name with the same name I gave to the anchor in the previous step, which was bottom.

Now place this where you want the user to end up when they click on the anchor link.

When the site is previewed or published, you will be able to see that you can scroll smoothly.

This next method, which is my preferred method, involves using two widgets that are available for purchase on everwebcodebox.com. If you prefer the smooth scroll over the jump, this method is by far the easiest to accomplish and provides the most flexibility for your text link.

These widgets can be purchased by going to everwebcodebox.com, clicking on the Widgets 1 link and then go to Layout and click on Anchors.

To use these widgets, first drag the A Link widget onto your page. In the Pre Text field, type in whatever you want to appear before the link. Then in the Link Text field, type in the text that you want to appear as the anchor link. Then type whatever you want to appear after the link in the Post Text field. You can also change the font, the size, the text color, the link color, and select if you want the link to be underlined.

Then you can give the hyperlink an ID. I’ll just use the same ID I have been using throughout this tutorial which is bottom, but you can of course use whatever you want.

Place this on your page where you want the anchor link to be located.

Then go back to the Widgets tab and drag and drop the Anchor widget.

In the anchor ID field, type in the anchor ID that we just entered in the previous step.

Now you can place this anchor wherever you want the smooth scroll link to the take the user.

When the site is previewed or published, you will be able to see that you can scroll smoothly.

And those are three different ways you can setup anchor links on your site in EverWeb.

2019 UPDATE: Easily justify text without widgets in EverWeb 2.9.

Original EverWeb Justified Text Post

Justified text is used extensively in printed books and newspapers as it’s flush left and right margins give content a clean, well ordered appearance. Broadsheet newspapers traditionally used this style of alignment to place as much text content within a  limited amount of page space. Many print edition newspapers today mix justified and left aligned text for both styling and readability reasons.

Printed books and academia also use justified text, printed books for much the same reasons as newspapers.  Academic works tend to use justified text where annotations or corrections need to be applied to text. Often specific rules about content layout are required, e.g. university dissertations often require justified text with double line spacing as it’s easier for assessors to annotate and mark the content this way.

The Problems With Justified Text

In the Internet Age there’s often argument that justified text has no place in the digital media and with good reason. Whilst it looks neat and tidy in print, on screen it can result in large gaps between words (see the screenshot below for an example of this.) These gaps can form ‘rivers’ of white space flowing down a column of justified text making distracting the reader and at worse making the text just difficult. There’s also a tendency for the right margin to be ‘over hyphenated’ to accommodate words having to be split from one line to the next to accommodate the justified text look. Again this can result in readability issues.

Studies indicate that justified text slows reading speed as the eye tends to track words and lines better when the right margin (in the Western World) is ragged rather than justified. Those who have reading disabilities also have more problems with justified text than with left aligned, ragged right text.

Comparison of left, centered, right and justified text. As can be seen, the justified text tends to result in large gaps between words creating rivers of white space in the column on the right.

Justified Text in The Digital World

Printed text solves the problems inherent with justified text through subtle changes of font size, spacing and other styling attributes to make text visually appealing. In the digital world, the tools available are generally not sophisticated enough to make justified text look as appealing as printed text. As such, in most cases text manipulation is the digital world is limited in scope which is where the typesetters eye is an advantage. HTML 5 and CSS offer limited support for justified text basically for the same reasons. As EverWeb complies with the standards set for HTML5 it therefore includes left aligned, right aligned and centered text options but not justified text.

Lastly, the Internet has expanded our concept of what a page is. When designing a website you have an unlimited “canvas” to use. Pages have no limits. As such, some of the original reasons for using justified text are no longer necessary. You don’t need to cram content any more in to limited space.

When to Use Justified Text

Even with all of the problems, justified text can create a neat and organized appearance to text and IS a great way to highlight particular areas of text. To create your own justified text in EverWeb just download the free Justified Text widget from EverWeb’s Third Party Add-Ons section or directly from AllAboutiWeb.com.

Installing and Using the Justified Text Widget

The AllAboutiWeb website explains how to download and install the Widget. Once installed you will see a message that the widget has been installed. When you launch EverWeb, you will see it in the Widgets Tab.

The widget works in the same way as all of EverWeb’s widgets, just drag and drop it to where you want it on the page. The Justified Text Widget lets you create up to three paragraphs. If you need more paragraphs just drag and drop another Justified Text Widget on to the page! You can style the text using the Fonts Panel to create the effect you want.

The Justified Text Widget from AllAboutiWeb.com gives you extra flexibility in your website design. Whilst it can give your web page a neat and tidy look, always remember to prioritize the readability of your website’s text content over it’s aesthetics.

What do you think of justified text? Does it have a place in website design today? Let us know your thoughts below!

The last instalment of the ‘Getting Started with EverWeb’ series focuses on the Asset Tab. It’s a part of EverWeb you may not immediately think you need to get to grips with when building your website. However, it’s worth getting acquainted with the Assets Tab as it has many features that help your workflow, SEO and website Project file management.

What is the Assets Tab?

The Assets Tab is the file management center of your EverWeb Project and contains two ‘Assets Lists’:

Image Files: Any image you drag and drop in to your Project are listed here. Image files are imported in their native format except for TIFF, PDF and PSD files that are converted to a JPG format. Retina display images are also supported.

External Files: Media files such as audio or video and files used in hyperlinking e.g. PDF files are listed as External Files. The reason for this is that EverWeb uploads the ‘external’ file to the server when you publish your website so that it can be downloaded, or accessed, from the server as needed.

How Do I Use The Assets Tab?

There are a number of different ways in which the Assets Lists can be used and managed. Most of the features of the Asset Tab  are self explanatory, so below we explore how to get the best out of the Assets Tab as well as some of it’s lesser known features…

Predictive Search

When using the Assets List, you can search for assets with the search box (see screenshot below). You can also find assets using predictive search. Highlight the first asset in the list then start typing the name of the asset you want to find. The more you type, the closer you get to the locating the asset you want.

Previewing an Asset

To preview an Asset, you click on the preview eye to the right of the asset. You can also preview an asset by starting to drag the asset out of the Asset List. As you do so, you will see an image thumbnail. If you do not want to use the asset just drop it back in t’s original place in the Assets List.

Reusing Imported Image Files

Once you have imported an image file there is no need to reimport it if you want use it more than once.  Just drag and drop the image from the Assets List on to your page as often as you need it. There’s no need to reimport the same image every time you want to use it. Using the same image file is efficient than having the same image multiple times in your Assets List.

Troubleshoot Slow Loading Web Pages

If you have a web page that loads slowly when published, you can use the Assets Tab to check if there are any large image files that may be causing the problem. If the Assets List just shows a list of file names without any extra information included, click on the up/down arrows at the top of the Assets List (see screenshot below) tick ‘Show File Info’. Next, select the page in the Web Page List that loads slowly. Click on each of the page’s images in turn to see if any of them are large enough to affect the page load speed. If you do have a large image file, delete the image from the Assets List, optimize the original image so that it’s smaller and reimport it.

Part of the Editor Window showing the Assets Tab, The up/down arrows above and to the right of the Assets List  are used to access menu options.

Which Images are Used on Which Pages?

To quickly locate all pages that use a particular image file, first highlight the image file in the Assets List. Next, secondary click on the highlighted file and select ‘Find Pages Using Asset’ from the menu. Any pages using the image file are highlighted in the Web Page List.

To remove the highlight, secondary click on a page name in the Web Page List and select “Clear ‘Using Assets’ Indicator”.

Better SEO with the Assets Tab

Before importing an image file into your Project, make sure the filename is meaningful e.g. if you are importing a picture of the US flag, you may want to call the file ‘USFlag.jpg’. This approach is better for your SEO. Many image files use automatically generated filenames which is not good for SEO.

If you have already imported files that have non-meaningful names rename them in the Assets List. Double click on the filename and overtype the name with a more meaningful one and press Enter to finish. Although renaming image files before importing them in to EverWeb is best, renaming files that are already in EverWeb Assets List still helps.

Housekeep Your Project File

As you develop your website you may build up a collection of unused assets, e.g. image files you were going to use but later decided not to. The space these assets take up can be reclaimed by deleting them from the Assets List. Click on the up/down arrows above the Assets List and select ‘Find Unused Assets’. EverWeb will highlight all assets not currently in use and will ask if you want to delete them.

Deleting unused assets saves disk space by reducing the physical size of your website project file. It is also a good way of un-cluttering your Project’s Asset List.

The Assets List is a versatile tool to manage your EverWeb Project’s Image Files and External Files. If you have a question about the Assets Tab and it’s capabilities please let us know in the Comments section below.

More Related Blogs…

For more ‘Getting Started with EverWeb’ blogs please click on the link that you are interested in below

Creating Your First Website

The Editor Window

Master Pages

Learning About SEO

The Web Page List

One of the most important parts of the EverWeb User Interface is the Web Page List as it is where all the web pages you create are listed. The Web Page List has many different functions and features which are explored below.

The Web Page List lists all of the pages that you create in your EverWeb website project. The blue colored Master Page List contains  one Master Page – ‘Resort Master Page’. The grey colored regular page list includes the website’s Home Page,  a Directory Page called ‘Resorts’ containing three pages used in Drop Down Navigation Menu and an About Us page.

The Web Page List Structure

The Web Page List (WPL) runs down the left hand side of Everweb’s User Interface and has two sections separated by a splitter line (see above screenshot.)  The blue section at the top is the Master Page List. The grey area below it is the regular page list. Between the sections is a ‘splitter’ line which can be moved up and down to show more or less of the Master Page List from view. If you move the splitter line up high enough you can hide the Master Page List altogether this usually is not recommended. To move the splitter line, click and drag it up or down to where you want it.

If you have long page names in your website project click and drag the WPL’s right hand margin to the right to see more of the page names. Conversely click and drag the margin to the left to see less of the page names.

Both sections of the WPL allow you to create, select and delete pages. If you secondary click (a two finger tap) on a page name a context sensitive menu appears with options listed below. If you secondary click on the top line of the great area containing the website name, only ‘New Page’ and “Clear ‘Using Assets’ Indicator” are available.

New Page: Creates either a new Master Page or a new regular web page. Alternatively, you can create pages using the menus, shortcut keys or the Toolbar ‘Add Page’ button (for regular web pages only).

Rename: Opens the editing box for the highlighted page where you overtype the page name with a new name. It’s actually quicker to double click on the page name to edit it.

Delete Page: Deletes the highlighted page immediately. If you delete the page by mistake press Cmd+Z straight way to undo the action.

Duplicate: This is a useful option when you want to create a new page that is similar to the one you are highlighting

Convert To Directory: This menu option is only available in the regular page list. Regular pages can be converted to Directory Pages. A directory is like a folder that you put web pages in to. In EverWeb, directories are also used for Drop Down Navigation Menu structures which are discussed in detail below. Once you convert a regular page to a Directory Page, you can’t change it back. If you have have converted the wrong page in to a Directory Page, press Cmd+Z immediately to undo the action.

Clear ‘Using Assets’ Indicator. EverWeb has a feature in the Assets tab to find all pages that are associated with a particular Asset e.g. if you have a picture that is used on more than one page you can find which pages it is on. First go to the Assets Tab and highlight the picture’s filename. Next, secondary click on the filename and a menu appears that  includes the option ‘Find Pages Using Asset’. When you click on this option, all pages using the picture will be highlighted in yellow in the WPL. To clear the yellow highlight, click on the “Clear Using Assets’ Indicator”.

Web Page List Icons

The top of the grey regular Web Page List is headed by a line containing a triangle symbol, a folder or globe icon and the website project name. If you click anywhere on this line the Editor Window changes to the website project’s Site Publishing Settings. Use this dialog box to tell EverWeb where to publish your website to.

When setting ‘Publish To’ in the Site Publishing Settings the Publishing icon to the left of the website name changes to reflect your choice of publishing location.  If you choose ‘Folder’, the icon becomes a folder indicating that you are publishing to your local hard disk. Publishing to ‘Folder’ is useful when building your website so you can safely test it before going live. The Globe icon is displayed when publishing to the Internet, either to EverWeb (if you have an EverWeb+Hosting plan) or via FTP to your own host provider.

The Triangle symbol on the left hand side of the top line expands or collapses the content beneath it. If you click on the triangle at the top of the grey WPL area, all the pages beneath it ‘collapse’ and are hidden from view and the triangle points to the right instead of downwards. Click the triangle again to ‘expand’ the view and make the pages visible again. The triangle appears whenever you use directories which is useful if you don’t need to see the pages contained inside them or when you want to have more vertical display space available in the WPL. The triangle symbol also appears in many other areas of EverWeb such as in the Page Tab of the Inspector Window.

On the right of the Publishing icon is the website project name. By default this is initially set to ‘NEW WEBSITE’. To rename you website project double click on the name and type over it. Press Enter to finish.

Web Pages, either Master Pages or regular web pages, use the Page icon and directories use the Folder icon. These icons  can be either grey or red in color. When an icon is grey it means that the page or folder has not been changed since it was last published. When the icon is red, the page or folder has been changed since it was last published. For example, if you edit a Master Page, all regular pages using it will change to a red icon in addition to the Master Page’s page icon itself.

When you select a page in the WPL, a ‘dot’ to the right of the web page name displays providing an additional visual indicator that the page is currently selected.

The Master Page List

The blue colored Master Page List is where you create, select, manage and delete Master pages. There are a number of different ways to create a Master Page: The ‘New Master Page’ button, the File -> New Master Page… menu, the keyboard shortcut ^Shift+Cmd+N or the “+” symbol in the Master Page section of the Page Inspector. Additionally, secondary clicking in the blue Master Page section you display a context sensitive menu including the ‘New Page’ option.

Master pages are listed in the order you create them and cannot be moved as you can with regular pages. In addition, you cannot create Directory Pages for Master Pages.

To delete a Master Page, select the page in the Master Page List and press the backspace key. The page will be deleted immediately. If you delete a Master Page by mistake, press Cmd+Z immediately to undo the deletion. Remember that if you delete a Master Page it will be removed from all the regular web pages that it was attached to.

TIP: If you have designed a regular page that should have been a Master Page, drag and drop it from the regular page list in to the Master Page List area. This creates a copy of the page in the Master Page List.

The Regular Web Page List

Adding regular web pages to the WPL is done in much the same way as for Master Pages: The ‘Add Page’ button in the Toolbar, the File -> New Page… menu, the keyboard shortcut Cmd+N or secondary clicking in the grey regular web section to display a context sensitive menu including the ‘New Page’ option.

Deleting regular web pages also works in the same way, just highlight the page in the the WPL and press backspace. Again, if you have made a mistake, press Cmd+Z to immediately undo the action.

Regular web pages and Directory Pages in the regular page list section can be moved by dragging and dropping them to where you want them. If you are using EverWeb’s Navigation Menu Widget it will inherit the page order of the regular page list so ordering  pages appropriately is important. To exclude pages from the Navigation Menu Widget un-tick ‘include page in navigation menu’ in the Page Inspector for the page(s) you want to exclude.

Directories

EverWeb uses directories in the regular page list of the WPL for a number of different purposes. The main reason is that they provide the structure needed for drop down menus in the Navigation Menu Widget. As you can see in the screenshot above, the pages Bali, Palm Springs and  Malta are in the Directory ‘Resorts’. For more information on the Navigation Menu, please see the blogs on Adding a Menu and Styling Options for EverWeb’s Navigation Menu Widget. Directories are also useful if you want to create your own blog in EverWeb or if you just want your website’s pages properly organised.

To create a directory first create a regular page. Next secondary click on the page you just created and select ‘Convert to Directory’ from the menu. The page icon changes to a folder icon indicating that the page has been converted. Note that once you converted a regular page you cannot change it back. If you realize that you have converted the wrong page, press Cmd+Z to immediately undo the action.

To add a page into a directory drag and drop an existing page underneath and to the right of the directory, then drop it in place. You will see a guide line to help you when you perform the move. Once you have dropped the page in to the directory, you may need to click on the triangle to the left of the folder icon to see the page you have just dropped in there.

If you don’t have existing pages to add in to the directory, just highlight the Directory Page name and secondary click to bring up the sub menu. Select ‘New Page’ and choose the template you want to use. The page is added in to your Directory structure.

You can move pages within a directory just by dragging and dropping them to their new location. You can even take pages out of the directory altogether by dragging the page to the left and either up or down until the page is outside of the directory structure, then dropping it in it’s new location.

The Web Page List offers a flexible and easy way to organize your website project. Getting familiar with the Web Page List will also help improve your workflow as seen by some of the shortcuts outlined above.

In the next instalment of the Getting Started with EverWeb Guide we take a look at the Assets Tab.

As always please let us know if you have any comments and questions. We’re happy to help. You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

When you start using EverWeb your focus will most likely be on learning the product as quickly as you can so you can get down to the task of creating the web pages you want for your website. One thing you may not immediately think of is how to attract visitors to your web pages once you have published your website to the Internet. This is where Search Engine Optimisation, or SEO, comes in as it is the process by which you make your website as visible as possible to Internet search engines. EverWeb lets you easily add SEO in to your web pages but knowing what SEO is and where to use it effectively in EverWeb is essential. Once you have this knowledge you will vastly improve the likelihood of having  your web pages found by potential visitors.

About SEO…

When talking about SEO we typically think of Google which is natural as it’s the world’s most popular web search engine with 67% of the US search market according to Search Engine Journal. However, Google is not alone as the Microsoft’s Bing/Yahoo! search engine alliance also has a strong presence with a 29% market share. SEO applies to all search engines, although their approaches towards implementing SEO strategies may differ.

In addition to the sometimes differing SEO approaches of the search engine giants, SEO itself is constantly evolving as our needs and requirements change. Today we use mobile devices more than desktop ones and so perform more search on mobile devices then we did ten years ago so all mobile websites need to have SEO. Google has even prioritised SEO for mobile over SEO for desktop devices. Social media is also more in our lives than ever before and Microsoft’s Bing search engine weighs this factor moe in it’s search results than it used to. Such factors as these, driven by advances in technology, influence how search engines need to rank search results when you are looking for something on the Internet. For example, Google uses over 200 factors to determine how a web page is ranked and these factors are constantly in flux due to the factors outlined above. The ever increasing paced complexity of change can make SEO appear to be a minefield to navigate.

Making A Complex Problem Simpler

The ever changing dynamics of SEO can be bewildering when starting to work with it. However, successful SEO can be achieved once we realise that SEO is a just a process that helps improve websites and/or web page visibility in search engine results page rankings. There are good and bad practices to be aware of that will either help promote, or penalise, your page rankings. There are also no guarantees either with SEO as to the results rankings you will achieve. As mentioned earlier, the science behind SEO is constantly evolving so the best you can do is to stay up to date with SEO developments from Google and Microsoft/Yahoo! and the possible effects of such developments on your website’s page rankings.

Doing Your SEO Homework

SEO works by looking for ‘Keywords’ to help search engines find your website’s pages using specialist software known as web ‘crawlers’ or ‘spiders’. These software tools keep search engines indexed and web content up to date.

As such, using the right kind of Keywords will benefit your website as search engines will find your web pages more easily. So you will need to take some time to do your homework by researching what Keywords are best to use. Using generic words for your Keywords, e.g ’software’, will result in your website never being found. Google ‘software’ and you will get over 2,350,000,000 results. So be specific with your Keywords e.g. if you are a software vendor you may sell specific software, e.g. EverWeb, so use ‘EverWeb’ rather than ‘Software’ as a Keyword. This approach helps narrow the search focus and increases the chances of potential visitors finding your website. When thinking about Keywords for your own web pages, try to think about the words you would type in to find your own website quickly.

As Keywords are important it’s necessary to choose the best words to help your website stand out from the rest. Both Google and Microsoft have Keyword Planning tools for just this purpose.

When you have found your list of Keywords, select just a few of them to actually use. If you have too many Keywords you will probably lower the impact of your SEO. Google, for example, penalises websites that use ‘Keyword Stuffing’. It’s also good to remember that too many Keywords may impact your visitor experience in a negative way. Always prioritise your website content over the need for SEO.

Putting It All Together In EverWeb

When you have done all of your SEO homework, how do you translate it into practical use in EverWeb? There are a number of places to target for your SEO, most of which you can find on the Page tab of the Inspector Window.

1. File Name: Each web page has a file name which you can use to act as a Keyword.

2. Navigation Menu Display Name: SEO likes to find links to other pages so this is a good place to use your Keywords. Remember not to sacrifice the usability of your website for the sake of SEO.

3. Web Page Title: This is the text at the top of the browser window which is an ideal place to add in Keywords. Again, remember prioritise your visitor experience over better SEO.

4. Web Page Description: Although not directly used in SEO it’s a good idea to include some Keywords in your Page Description if it is relevant and appropriate to do so.

SEO Good Practices

When using SEO remembering to follow a few good practices will help promote your web pages…

1. Your Website Content

Your web page should contain original, good quality content. Both Google and Microsoft’s Bing look for fresh, quality content that is well written and easy to search for by their web crawlers. Your page content should be relevant to what web page, and website, is aiming to achieve. Always focus on good content rather than on SEO. Whilst SEO is important, the content and visitor perception of your website is more important.

2. Use Images Effectively

Use images properly in your website. Using appropriate quality images can instantly convey your meaning, or message, better than words can. When using images remember to add in some text describing the image in the Alt-Text section of the Shape Options Tab. The description should be brief but descriptive of the image itself. The Alt-Text function is also useful if an image does not appear on the page as it will be replaced by the descriptive text you have added in. Using Alt Text in your website may help search engines find and promote your website better.

3. Use Hyperlinks

Web crawlers like to see links in your pages to other pages within your website or to pages on other websites. So, use EverWeb’s Hyperlinking to do this. When you create a Hyperlink try to make the linking words something that is unique. Many websites say things like ‘click HERE’ where ‘HERE’ is the linking text. However, as we mentioned earlier, ‘HERE’ is used everywhere on the Internet! So if I want to take you to a video tutorial on Hyperlinking I could say click on the link here or I could say look at the Video Tutorial on Hyperlinking in EverWeb. For SEO, the second approach is much better.

4. The Heading Tags Widget

The Heading Tags Widget can be used to explicitly draw search engine attention to specific title text and headings in your web page. Whilst it may be useful to your SEO, it is something for advanced EverWeb users some HTML to use. The  Heading Tags Widget video tutorial will get you acquainted and we will discuss the use of this Widget in a specific blog in the near future.

Useful Resources for SEO in EverWeb

In addition to the Good Practices outlined above, you can find out more about using SEO in EverWeb using the following resources:

Blog Content

How To Use EverWeb’s SEO Features

Video Tutorial Content

The SEO for EverWeb Course

Adding Alt Text, or Alternative Text to Images in EverWeb

SEO For EverWeb – Heading Tags

Meta Keywords – SEO For EverWeb Video Course

Webpage Content – SEO For EverWeb Video Course

Using SEO in EverWeb is easy to implement using the above guidelines. Creating and maintaining good practices will help you successfully optimise your website to achieve the best search page rankings possible. Keeping abreast of Google and Microsoft/Yahoo!’s developments in SEO will also help you, and your website, up to date in the future. And remember, as always, to always keep your visitor experience as your number one concern over SEO rankings.

Next Time: In our next instalment we will look at the Web Page List and build navigation menus for your website.

As always let us know if you have any comments and questions. We’re happy to help. You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw