Mac SEO Blog

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

We are happy to announce that EverWeb version 1.9.6 is now available for download for anyone with an active license. Please read the information in the ‘How to Update to EverWeb 1.9.6’ section below before updating.

EverWeb 1.9.6 Features

EverWeb version 1.9.6 focuses mainly on stability and performance enhancements and includes the following:

1. EverWeb will upload a robots.txt file to avoid Google error messages
2. New ‘Made with Love with EverWeb’ button added to the Insert-> Button Menu
3. A number of new Theme Templates are available for download from the EverWeb-> Check for New Templates… menu
4. Fixed the link to the popup window option where it would resize the popup window if the browser was too small
5. Fixed issues with dragging images from Photos
6. Publishing optimizations and speed improvements
7. Fixed issues with exporting images that were masked
8. Objects with shadows on Master Pages are now exported properly
9. Fixed an issue with Header Tags not updating properly after editing them
10. Improved French localization
11. Picture frames now draw correctly for rotated images/shapes
12. Fixed a Fonts Window issue when selecting fonts
13. EverWeb will not try to connect online if there is no Internet connection
14. Fixed a crash when copying and pasting styled text from some third party applications into EverWeb
15. Fixed image frames and shadows not being exported properly if used on a page with a master page

How To Update To EverWeb 1.9.6

You can easily update to EverWeb 1.9.6  by

1. Launching EverWeb and going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

Remember, you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.

If you purchased EverWeb as a standalone product the upgrade will not be free if your license has expired. You can check your license expiry date at any time using the EverWeb-> Preferences… menu. The ‘Next Due Date’ in the ‘Account’ tab shows the date your license is due for renewal.

The EverWeb Standalone license entitles you to EverWeb plus one year of upgrades and support. You can always use your purchased version of EverWeb without ever paying again. If your EverWeb license has expired and you want to renew it to receive another year of updates and support, click on the ‘Manage Account’ button. This will take you to the EverWeb Client Area.  Select the Services-> My Services menu. On the ‘My Products & Services’ page, double click on the EverWeb product that has expired. The ‘Manage Product’ page is where you renew your license. Once you have renewed your license, use one of the above ways to update to the new 1.9.6 version.

If you do not want to renew your EverWeb license but have already downloaded EverWeb version 1.9.6 you will not be able to publish your website(s). In this case, you can easily re-download EverWeb version 1.9.0. Follow the instructions in the above paragraph to get to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of 1.9.0 that you need either the OS X 10.6 version or OS X 10.7 and later version.

The EverWeb User Survey

We would love your feedback to help us improve EverWeb and we’ll extend your EverWeb Standalone Upgrade/Support plan or your EverWeb + Hosting account plan by one month just for filling out our short survey. Just click on the link below!

EverWeb April 2016 Survey

Thanks for taking the time to complete the survey. Your feedback is important and we will use it to improve EverWeb. So let us know your thoughts and we’ll use your feedback to make EverWeb even better!

One of the key features of EverWeb that any new user will want to quickly take advantage of is Master Pages. A Master Page is like pre-printed stationery that you design yourself – effectively a ‘template’ that can be attached to your web pages to give them a uniform look and feel. If you update your website at a later date, t’s easier as you just need to edit the Master Page and the changes will be applied to all the web pages the Master Page is attached to. Master Pages are an essential time saving tool as well as giving your website a consistent look and feel throughout.

Why Use Master Pages

Master Pages are useful as much of the work you do to build your website is focused on the ‘template’ pages you create. Once attached, you can focus on the regular web page’s content as the ‘background’ work has been done already.  You can create more than one Master Page if you have specific requirements. For example, a website for a media company may require a Master Page for each specific part of it’s business such as music, television, film, podcasts and so on. In this case it may be advantageous to have a specific Master Page for each section of the website.

Master Pages are great for setting page layout defaults e.g. header height, content width, background colors etc. Pages with predefined defaults create design consistency for you and your website visitors e.g. you probably want your company logo in the same place on every page. Placing the logo on a Master Page achieves this goal quickly, easily and consistently.

Master Pages enable you to make global changes from one place. Any changes made to your Master Page will be reflected in all the web pages that use it e.g. you may have a Google+ button on your Master Page. If Google updates the button, you can easily update your website by updating the Master Page and republishing. All the your web pages using that Master Page will be automatically updated.

How do Master Pages Work?

Master Pages work in the same way as regular web pages so editing them is done in exactly the same way. A Master Page is like a layer underneath a regular web page. As such, all the objects on a Master Page lie beneath the objects of the regular web page that it’s attached to. You’ll notice that when you attach a Master Page to a regular page all it’s objects are ‘locked’ with a black page symbol. The only way to edit these objects is to edit the Master Page itself.  Sometimes it may be necessary to ‘float’ Master Page objects on top of the regular web page objects instead of underneath them. This can be done using the ‘Always On Top’ option in the Arrange menu or from the Metrics Inspector. For more information please take a look at the Blog Easily Create ‘Sticky’ Buttons in EverWeb.

Once created, a Master Page is ‘attached’ to one or more regular web pages.

An example Master Page with a Navigation Menu Widget in the Header, a photo backdrop and company logo in the Body area, and Social Media buttons, contact details, copyright info and the Made with EverWeb logo in the Footer.

What to Include in a Master Page

It’s best to include objects in a Master Page that you want to appear on every page, or on a group of pages, in your website e.g. Social media buttons, navigation menus, company name, logo, copyright information etc. (See screenshot above.) Before adding objects to your Master Page it’s worth taking time to note down which objects you expect to appear regularly on your website pages. From this exercise you may find that you only need to use one Master Page. You may also find that you could benefit from more than one Master Page!

Remember to include any defaults that you want to apply to all pages such as Page Layout settings and styling options such as backgrounds, shapes, logos or color schemes. Additionally, Master Pages do not usually contain any page related content as this is usually added in the regular web page itself, although sometimes you may need to add some headings in to the Master Page. As such, the body area of the Master Page is usually empty of content.

Creating a Master Page

Master Pages can be created in a number of ways:

1. Using the ‘New Master Page’ button in the blue Master Page area of the Web Page List. If you do not see the blue area, or the button, it may be hidden from view. Drag the separator line down the Web Page List until the blue area becomes visible again.
2. Using the File -> New Master Page… menu option.
3. By right clicking in an empty part of the blue area and selecting ‘New Page’ from the menu that appears.
4. Using the ‘+’ button in the ‘Master Page’ section of the Page Inspector.

Using a Master Page

When creating a Master Page follow the instructions by either selecting a Theme Template style or a blank style. Once created your Master Page is added to blue area of the Web Page List. Next…

1. Name the Master Page in the same way you would for a regular web page by double clicking on it’s name and overtyping the old name with the new one and pressing the Enter key to finish.
2. Set up the Page Layout and Page and Browser Backgrounds as you want using the Page Inspector.
3. Add the objects and Widgets you want e.g. a Navigation Menu Widget in the Header, a rectangle as a background shape, logos, buttons etc.
4. Once you have completed the Master Page layout, create a new regular web page using the ‘Add Page’ button in the Toolbar. Name the regular web page in the same way as described above.
5. To attach the Master Page to the regular web page, go to the Master Page section of the Page Inspector. Click on the drop down list and select the Master Page you want.
6. You should now see the Master Page objects appear on your regular web page. As mentioned before, Master Page objects have a black page symbol in their top right hand corner and cannot be edited from a regular page.
7. You may also notice that some options you used on the Master Page are greyed out in the Page Tab of the Inspector Window e.g. Page Layout options, Page and Browser Backgrounds etc. Again, these options can only be altered by editing the Master Page itself.
8. Conversely, some Page Inspector options cannot be used on Master Pages e.g. Header/Footer Code and Mobile Settings sections are only available for use on regular web pages.

With the Master Page attached, you can now add objects to your regular page as desired.

Making Changes to a Master Page

You can make changes to your Master Page whenever you want. However, bear in mind that if you do make changes you should check all of the regular pages that use that Master Page afterwards using EverWe’s Preview button in the Toolbar. Any changes you make may affect the way in which the regular page looks e.g. be aware of any overlapping content or objects that encroach upon your page margins!

Getting the Most from Master Pages

There are a couple of EverWeb features that you can use effectively on Master Pages. Check out the Blogs Easily Create ‘Sticky’ Buttons in EverWeb and ‘How To Make Fixed Headers in EverWeb for more information on the ‘Always On Top’ and ‘Fixed Position’ features.

If you have created a regular page instead of a Master Page by mistake, you can easily ‘convert’ it by dragging and dropping the regular web page from the grey area of the Web Page List into the blue area. The will create a copy that can be used as a Master Page.

Master Pages are an essential tool for all EverWeb users. Getting to know them at the start of your website project will save you a lot of work both now and in the future!

If you have any questions about this blog please let us know! We’re happy to help. And don’t forget there are plenty of other useful resources available on all aspects of EverWeb.

• The EverWeb User Manual: The PDF User Manual can be found on the Help-> EverWeb Manual menu.
• Built in Video Links: Wherever you see a ‘?’ within a circle in EverWeb there’s a link to a video that relates to the feature next to the symbol
• www.everwebapp.com: EverWeb’s own website is a great portal to a variety of help options, from tutorials to videos to the Discussion Forum.
• This Blog: There are many different articles about EverWeb and it’s features functionality and usage to be found here.
• Social Media: EverWeb can be found on the following social media:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Next Time: Using Search Engine Opimization (SEO) in EverWeb.

In the first ‘Getting Started with EverWeb’ blog we installed EverWeb, created our first website Project file and set up some preferences before taking a brief tour of the EverWeb User Interface. We pick up from the previous blog with an in-depth look at the Editor Window’s main features and will have some handy hints and tips to share along the way for first time EverWeb users.

Editor Window Basics

The Editor Window is the large white area in the middle of the EverWeb User Interface. It’s your work canvas where you create and edit your web page content. The Editor Window can be used for editing regular web page or Master Page content. Master Pages are ‘template’ pages that you can create and which we will cover in depth in the next ‘Getting Started’ blog.

In the last ‘Getting Started’ blog we created a website Project using the ‘Home’ page style of the ‘Blank’ Theme Template which looks like this…

Above is the first page of a new EverWeb Project file using the ‘Home’ style of the Blank Theme Template.

The blue horizontal and vertical lines indicate the boundaries of each area of the web page in much the same way as a printed page has different areas such as a header, footer, margins and so on (see the screenshot below.)  Use the Window-> Hide Layout menu if you don’t want to see the lines although we generally recommend keeping them visible.

The various areas of the Editor Window. The Top margin area can be seen above the Header area. The co-ordinate system is also shown by the horizontal X axis, vertical Y axis and the 0,0 location in the top left.

Top Margin: You don’t usually see this area as the Top Margin default value is by default set to zero. The Top Margin is directly above the Header and can be used to pad out the top of your web page if needed. This section usually contains no content.

Header: The Header is immediately below the Top Margin and is typically where you place content you want at the top of each web page you create e.g. company logo, navigation menu, social media buttons etc.

Body: Below the Header is the Body area where the majority of your content will go. The ‘Body’ is bounded within the left and right margins and the Header and Footer.

Footer: If you cannot see the Footer, scroll down the Editor Window. Soon you will see the Footer  containing the ‘Made with EverWeb’ logo. The Footer works in much the same way as in a book. Place content here that you want to see on each page such as copyright information, contact details, social media buttons, a site map and so on.

Left and Right Margins: The vertical blue lines define the left and right hand margins of the web page. Change the ‘Content Width’ value to determine the width of your page.

Changing Page Dimensions

You can change the dimensions of the page size to suit your own needs e.g. you may want to create a page for mobile phone usage. To change page dimensions use the Page Layout section of the Page Inspector as shown in the above screenshot. The values are displayed in pixels. Typically, web page ‘Content Width’ will be about 980-1000 pixels wide for a desktop or tablet device and about 320-420 pixels for a mobile phone.

When defining the height of the Header, Body or Footer, the values you use are actually minimum values. For example, add a shape to the Body section of the page by clicking on the Shapes button in the Toolbar. Next, click on the rectangular shape. The rectangle appears in the Body section. Now click on the rectangle to ‘select’ it. Square ‘grab handles’ will appear at each corner and at the mid point of each side of the rectangle. If you click and drag on any grab handle the size and shape of the rectangle will change. If you do this, press Cmd+Z to undo the change you have made.

Click and drag the rectangle down the screen. Notice the rectangle’s ‘coordinates’ change. The X-coordinate refers to the horizontal, the Y-coordinate to the vertical. The top left hand corner of the screen represents X=0 and Y=0 (see above screenshot.) If you move right, the X value increases. If you move downwards the Y value increases. If you continue to drag the rectangle down the screen, eventually the Y-coordinate will exceed the default length set for the Content Height of the Body section which is usually set at 1000 pixels. When you release the mouse button, the rectangle will probably be just above the Footer area.

EverWeb works this way so you don’t have to keep changing the page height as you add more content to your page. The page automatically accommodates the extra content by creating more space.

Finally, drag the rectangle upwards until it moves off the Footer and back within the original Content Height again.

Moving Objects Around The Page

As we have just seen, moving objects is done just by ‘drag and drop’ and resizing objects is by using the object’s grab handles. If you need to move an object from one section of the page to another, hold the Command key down as you drag the object over the blue border line before dropping it in place.

If you want to delete an object just select it and press the backspace key. Try this with the rectangle. If you want to undo the action press Cmd+Z.

Adding Content To The Page

Text: You can add text in a couple of ways in EverWeb. If you want just a short piece of text e.g. a title or heading use a Text Box. Click on the Text Box button in the Toolbar to insert it on the page and start typing. If you have large amounts of text it’s best to use a word processing app and cut and paste the text in to your page. With your text or text box selected, use the Fonts menu and/or the Text Inspector in the Inspector Window add any formatting and styling that you need.

Images: If you are including images on your page, just drag and drop them in from their source location on to your page. Alternatively, use the Media button in the Toolbar to bring in photos from sources such as Apple’s Photos or iPhoto libraries.

Other Media: If you want to add audio or video content, use the built in Widgets in the Widgets tab. Just drag and drop the Widget you need on to the page, then use the options displayed in the Inspector Window as required.

Exploring the Editor Window…

Using the Editor Window is best done by trying to create a page that you want for your own website. Here are some more pointers to help you…

Widgets: EverWeb includes 17 built in Widgets which are like mini apps within EverWeb. Probably one of the first ones you will use is the Navigation Menu Widget. Try adding a Navigation Menu in to the Header section of your page. You can find more information in a previous blog about EverWeb’s Navigation Menu Widget.

Setting Page Options: To change the background of the page or browser itself use the Page Inspector. Use the ‘up/down’ arrows for a sub-menu of available options. We will look discuss page settings in more detail in our next ‘Getting Started’ blog.

Changing Object Properties: EverWeb has many different options available for all types of objects. With the object you want selected, use the Shape Options, Metrics and Text Inspectors in the Inspector Window to make the changes you want. You may want to experiment first on a shape, such as the rectangle we used earlier, to see what’s possible.

Adding in Social Media: Use a Widget or the Insert-> Button to quickly add social media buttons to your page.

Grouping Objects: EverWeb allows you to group objects together as one ‘item’. To group objects, first select the objects you want to group by holding down the Shift key and clicking on each object you want to group. Next use the Arrange-> Group menu to group the objects as one item. When you select the grouped item it has a bounding box around the grouped items but no grab handles. To move the group, click and drag one of the objects inside the group rather than any ‘blank’ space that may be within the group’s bounding box.

Different Ways To Do The Same Thing

As with most apps, there are many ways to do the same thing in EverWeb. The Menubar and the Inspector Window offer a variety of different options to help you build a website easily and intuitively. Remember that there are also keyboard short cuts and secondary clicking (a two finger tap on a trackpad or magic mouse) available in many places to save you time and effort.

This blog has only scratched the surface of what’s possible, so if there’s something you want to know or if you have a specific question, let us know below. And don’t forget there are plenty of other useful resources available.

• The EverWeb User Manual: The PDF User Manual can be found on the Help-> EverWeb Manual menu.
• Built in Video Links: Wherever you see a ‘?’ within a circle in EverWeb there’s a link to a video that relates to the feature next to the symbol
• www.everwebapp.com: EverWeb’s own website is a great portal to a variety of help options, from tutorials to videos to the Discussion Forum.
• This Blog: There are many different articles about EverWeb and it’s features functionality and usage to be found here.
• Social Media: EverWeb can be found on the following social media:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Until next time when we will explore Master Pages and more!

EverWeb is great for first time users as it combines ease of use with a rich feature set, but there’s always going to be a bit of a learning curve at the start. This is where the ‘Getting Started with EverWeb’ series can help out by taking you through the basics of EverWeb. As well as getting you up to speed quickly, ‘Getting Started with EverWeb’ will also be peppered with hints and tips, best practice advice and background information to explain specific concepts and workflow.

We begin the series with ‘Creating Your First EverWeb Website Project’ which covers

• Installing & Launching EverWeb
• The Projects Window
• Creating Your First Website Project
• Setting Your EverWeb Preferences
• A Tour of the EverWeb User Interface

Installing EverWeb

You can download EverWeb from www.everwebapp.com. Choose the right version of EverWeb for your operating system, either the OS X 10.6 version or the OS X 10.7 and later version. Remember to read the instructions on the Download page before starting your download. If you haven’t done so already, create your client account on the Rage Software website, using the instructions on the download page. Once you have finished your download you can install EverWeb on your computer…

1. The EverWeb application zip file is downloaded to the ‘Downloads’ folder in the Dock on your Mac.
2. Drag and drop the ‘everweb19.zip’ file to the desktop. The zip file name may vary depending on the current version of the product. At the time of writing, EverWeb version 1.9.5 was the latest public release.
3. Double click on the zip file. The EverWeb application file will automatically unzip.
4. Once unzipped, move the ‘everweb19.zip’ zip file to the trash can.
5. Next, open a Finder window and navigate to the Applications folder.
6. Drag and drop the ‘EverWeb.app’ file from the desktop in to the Applications folder.
7. You’re all set to go! Launch EverWeb by double clicking on the ‘EverWeb.app’ file in the Applications folder.
8. The first time you launch EverWeb, may see some warnings as OS X verifies the authenticity of the application you just installed.
9. Accept the verification messages and ‘Open’ the application as you know that EverWeb has been downloaded from a trusted source.

EverWeb will now appear on screen on the Projects Window.

If any software updates are available you’ll see a dialog box asking if you want like to download the latest EverWeb version. Please be sure to read the ‘Release Notes’ of the dialog box before deciding to update or not. If you choose not to update, you can always do so later. It’s also important to remember that when you purchase EverWeb you get a year’s worth of free software updates and support. After a year you can renew your update and support plan. Your license for the EverWeb product that you purchased never expires.

Add EverWeb To The OS X Dock

If you want EverWeb easily available for launch at all times, add the EverWeb icon to the Dock. As you’ve just launched EverWeb, it’s icon in the Dock already. ‘Ctrl-Click’ on the icon and a menu appears. Select Options-> Keep in Dock. When you close EverWeb, the icon stays in the Dock so all you need to do to relaunch EverWeb is to double the icon again.

The EverWeb Projects Window

The Projects Window

The first screen you see in EverWeb is the Projects Window (see screenshot above.) This screen lists all of your website Projects you have created on the right hand side. If it’s your first time in EverWeb the ‘Recent Projects’ pane will be empty. As well as listing your website Projects, the Projects Window where you can do lots of administrative tasks relating to your website Project files. At the moment we’ll just use this screen to create a new website project. Mouse over ‘Create a new website’. The area becomes a button when you do this, so double click on it.

The next screen that appears offers you a choice of over 50 different Theme Templates to base your website pages on. Theme Templates can be very useful and time saving as each Theme has a number of different page styles to  choose from. Scroll down the list of Themes on the left hand side of the dialog box, and choose the page style you want to use on the right hand side. Just click on the one you want then press ‘Select’. For our website Project we are going to use the first theme, ‘Blank’, and the ‘Home’ page style.

Congratulations! You have created your first website project and your first web page ‘Home’. You are now in EverWeb’s main work area, the Project Window.

The EverWeb Project Window showing the Web Page List (blue box), The Inspector Window (red box), the Toolbar (pink box) and the Editor in the center in white.

A Quick Tour of EverWeb’s Project Window

Now that you inEverWeb’s Project Window, it’s a good time to review the User Interface. The main areas are highlighted in colored boxes in the above screenshot and have the following functions:

1. The Web Page List is on the left hand side of the Project Window (in the red box above) and shows your website’s structure, including directories, and all of the web pages you have created. There are two types of pages: Master Pages, which are template pages, are listed in the blue area, and regular web pages which listed in the grey area. When you create a website Project, you automatically create your first web page for it at the same time. As you can see in the screenshot, there is our first page is called ‘Home’. Between the Master Page and regular page areas is a splitter bar. Click on this and drag the splitter up and down to show more of less of each section or to completely hide the Master Page area (which we don’t advise!)  If you create long web page names you can adjust the Web Page List horizontally. Just click and drag the right hand edge of the Web Page List to the left or right to this.
2. The white space in the middle is the Editor Window, your work canvas where you create your page content. You may see some blue horizontal lines as well. These lines separate out sections of the page like in a book. If you scroll down to the bottom of the page you’ll notice the EverWeb logo in the ‘Footer’ area of the page. We’ll explore the Editor window including the page sections in depth next time…
3. Above the Project Window is the Menubar which includes most of the commands and tools you need for your project. To the right of many of the menu options are short cut keys which are good to learn as they will save you time.
4. To the right of the Editor Window is the Inspector Window (shown in the blue box.) It’s a panel made up of three tabs
   1. The Inspector tab is where you set your Page Settings, Shape Options, Metrics, Text, Hyperlink and Widget settings. Click through the six icons to see their settings and options. We’ll explore these icons in a future blog.
   2. The Assets tab is where all the files used in your website Project, such as images, audio, video etc. are listed and administered.
   3. The Widgets tab contains seventeen predefined ‘mini apps’ that extend the functionality of EverWeb. There’s lots to choose from including a Contact Form, Image Sliders and Galleries, PayPal E-commerce, Navigation Menus and more! Additional Widgets are available form third parties.
5. At the bottom of the Projects Window is the Toolbar (shown in the pink box) which includes shortcuts to many of the functions of EverWeb that you’ll be frequently using.

Setting Up Your First Website Project

Before getting down to creating web pages for your website, it’s a good idea to set up your working environment first:

1. Save and Backup Preferences: Use the EverWeb-> Preferences menu to set up automatic back up and auto save preferences. Both options are on the ‘Backup’ tab. Click the red ‘Close Window’ dot in the top left hand corner of the dialog when finished. Whilst in the Preferences dialog box, have a look at the other preferences to get familiar with what’s where in EverWeb!
2. Set Your Default Styles: Why not set up your default styles and colors for text, shapes and hyperlinks before you begin working on your website? Use the Format-> Default Styles… menu option. This is a great time saver to do before you start working on your web pages!
3. Name Your Website Project: By default when you create a new website it’s called ‘NEW WEBSITE’. To change the name to one you want to use, double click on the words ‘NEW WEBSITE’ that appear next to the globe symbol in the Web Page List. Enter the name you want. You can letters, numbers and spaces in the name but avoid using any special characters as EverWeb will reject them. Press ‘Enter’ to confirm your new name.
4. Set Your Site Publishing Settings: When you double clicked on the name ‘NEW WEBSITE’ you probably noticed that the Editor Window changed to show your Site Publishing Settings. This is where you enter the details of where you are publishing your website to. To go back to the blank Editor window just click on the page name you created in the Web Page List. In our example we would click on the page ‘Home’. Site Publishing Settings has three options so now is a good opportunity to add in these settings:

EverWeb: Use this option is you purchased an EverWeb+Hosting plan. You should be able to complete the details on this screen using your EverWeb client account details.

Folder: If you want to publish to your local hard disk

FTP: Use this option if you have purchased EverWeb software only and use your own Hosting Provider. If you are unsure about what details to fill in, consult with your Hosting Provider who should be able to help you.

Need Help?

As with almost everything else in EverWeb, Help is easy to find. The Help menu includes the EverWeb User Manual in PDF format. The manual contains lots of good, in-depth information about all aspects of EverWeb. There are also video tutorials on many aspects of EverWeb. Where you see the question mark in a circle in EverWeb, there will be an accompanying video tutorial relating to that feature. Alternatively try EverWeb’s YouTube channel. If you get stuck, try searching the EverWeb Discussion Forum or if you can’t find anything on your problem, just ask a question, the community is there to help!

And don’t forget social media to stay up to date!

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

To end the session select the EverWeb-> Quit EverWeb menu or use the Cmd+Q shortcut. Next time you launch EverWeb you will see your Project name listed in the Projects Window. Just double click on it to open up your Project again.

Next time we’ll explore more of the Editor window… but if you have a question in the meantime, let us know below!

Documenting your website project is the kind of task you can always ‘do later’. If you’ve got a backup of your EverWeb Project file then what’s the hurry? Well, there are a few good reasons why you should…

1. Documenting gives you a snapshot of your website project at a specific point in time. It’s your reference tool for the future. If you have to change, or update, your website at a later date your reference document could suddenly become very useful.
2. Documenting helps if you need to rollback any changes you’ve made later on.
3. As you probably know, including SEO in your EverWeb project is essential, but documenting your SEO words and text is also important. If at any time you need to recreate website pages you’ll need to recreate the SEO as well.
4. You’ll be able to keep track of your Project file’s resources. When you create an EverWeb Project file you’ll inevitably import image files, drawings, text content etc. from a variety of different sources and locations. Documenting where your source material comes from will save time and effort if you need to retrieve it in future.
5. Your Project file’s technical specifications should be recorded somewhere. Having to remember and recreate your page settings, font styles, color choices, hyperlinks etc. from scratch is something you won’t want to do. And don’t forget that recreating any code you’ve added to your website can be very time consuming.
6. If you collaborate with others on your website project everyone benefits from having a common reference source. It’s also useful if you are handing off the project to others at a later stage.
7. Documentation is good for your clients! Having a properly documented website shows that you’re professional, have standards and work in an organised, methodical way.

Who Are You Documenting For?

You may be documenting your website Project for yourself, for your company or for your client. If you are documenting for a client, consider creating a technical document for yourself and a non-technical version for your client.

Do You Need Any Documentation Tools?

The answer to this question depends on the level of detail you want, the audience you’re creating the documentation for and the size and complexity of the website itself. For large websites with many pages you may want to use a project management tool such as Asana or Trello. These tools are collaborative so great for group environments. Mind mapping tools, such as Simple Mind, can also be of use to help you structure, plan and flesh out your documentation ideas. Alternatively, spreadsheet or word processing tools may be the easiest and most flexible tools for you to work with. Choose what’s best for you. Sometimes the simpler, the better. Learning a new app may take more time than it’s worth.

Using Screen Caps

You will probably take screen caps for your documentation. There are many tools available to do this but remember that OS X itself includes the ‘Grab’ app to do this task. OS X’s Preview app can also take screen captures using the File-> Take Screenshot menu. The last built in alternative is the OS X keyboard short cut  Cmd+Shift+4, followed by spacebar. When the cursor changes to a camera icon move it to the window you want to capture and click the mouse button. The screenshot will be saved to your desktop.

Documenting your EverWeb Project

You may have already created some documentation during your project, or you may have made notes along the way or you may have nothing documented at all. Whatever the state of your documentation, the easiest way to begin is by a ‘top down’ approach. It’s the quickest way and helps capture the details you want with the least amount of effort. A ‘top down’ approach starts by capturing the website Project’s highest level – the website structure and global settings, then drills down to the next level –  Master Page details and finally the lowest level – the details of the regular web pages you have created.

You may want to add a preface the Project which  defines the project’s aim, who it’s for etc. Such detail may be valuable to include if it is for a client. You may also want a page at the end of the documentation detailing anything that needs to be noted but has no real place anywhere else e.g. planned future changes, things to add to the website at a later date that could not be added earlier due to time constraints etc.

For our example, we’re going to use a spreadsheet to document the EverWeb Project file. Spreadsheet tabs are great for the ‘top down’ approach, for example, you could have one tab for ‘Global Settings’, another for the website’s structure, another for each Master Page and then tabs for each regular web  page. A spreadsheet is also good tool for adding items to record as you go. Below are some such items that you may want to check off when documenting your project. It’s not an exhaustive list, but should get you the essentials down for you.

Global Settings

Global settings are used throughout your Project file and include publishing details for your website. There are a number of settings worth capturing:

1. The version and build number of EverWeb used to create and publish your website Project
2. Site Publishing Settings (File-> Edit Publishing Settings). If you have included any code in the Header/Footer sections, highlight it all, then copy and paste it into your documentation spreadsheet so that the complete code is recorded. If you only screenshot the Site Publishing Settings you may not capture the entire code.
3. EverWeb-Preferences -> Backup. It’s good to remember the back up location of your project files as well as the frequency and number of backups you want to keep
4. Format -> Default Styles is useful for capturing link colors and underlining used for hyperlinks. It’s also useful to capture the default font type, size and color used in your Project.

Your Project’s Website Structure

Use the Web Page List (WPL) on the left hand side of the EverWeb Project Window to record your website’s directory structure. If the WPL has directories record their contents as well. To expand a directory click on the triangle to the left of the directory name. If you are screen capturing the WPL you may have to take more than one screen capture to if you have lots of pages in your website.

You may optionally want to include the Navigation Menu Widget in this section of your documentation as the Navigation Menu takes advantage of the website’s structure. The website structure section is a convenient place to record Navigation Menu information such as ‘include page in navigation menu’ and ‘Redirect to first child page’ in one place. Alternatively, you can document the Navigation Menu Widget in it’s appropriate Master Page tab and the other details when recording each page.

Master Pages

As you probably know, Master Pages are template pages that your regular web pages are usually based on. As such, it’s important to document them as they hold most of the information you want regarding the defaults your regular web pages will inherit and you only need to document this information once!

When documenting, include the following information:

1. The name of the Master Page
2. The layout of the Master Page using screen captures.
3. You’ll most likely want to record most of the Page Inspector’s details e.g. the ‘Page Layout’ section which contains page dimensions settings, the Page and/or Browser Background style and so on.
4. Note the names and source locations of any image files or media used so you can find them quickly in future if you need to.
5. Record the exact colors used on your Master Page. Trying to recreate the original color can be a time consuming if you have to do it. The OS X Color Picker can be used to find a colour’s  HEX value. Alternatively, use OS X’s Digital Color Meter. Remember that the HEX value of a color is more accurate than the given name of a color.
6. Use the Fonts Panel to record font styles, sizes and weights (e.g. light, regular, bold etc.) It’s also an idea to note down any fonts that are external to your OS X system, such as Google fonts, or any that you may have purchased.
7. Check any Inspectors which have dialogs collapsed by default, especially the Page Inspector!
8. Any coding you have added in the Master Page needs to be cut and pasted so that it’s completely recorded Using a screen capture may not capture all of your code!

Widgets

Most Widgets have their own settings and information that you may wish to record. Whilst most Widgets are simple to document, pay particular attention to the Navigation Menu Widget as you may have highly customised it. The PayPal Widget is also one to look out for as it has numerous and complex options. You may also want to record positioning details for such objects using the Metrics Inspector.

Documenting Your Regular Web Pages

After documenting your Master Pages, the documentation for your regular web pages should be relatively simple. Here are some suggestions…

1. Document each web page name and the name of the Master Page that it’s attached to.
2. Remember to the record any redirection links between mobile and desktop pages in the ‘Mobile Settings’ of the Page Inspector.
3. Document page specific items such images and media together with their source location. You may want to add details from the Metrics tab (e.g. ‘Always on Top’ and ‘Fixed Position’) and the Shape Options tab (e.g. ‘Alt Text’) if you have formatted any objects in a particular way.
4. Object hyperlinking details, hyperlinking sources and any windowing options are also worth noting.
5. Page specific Widgets, including any code snippets should be documented in full, as well as any special tricks you have used to format your page.

Documenting your website is an important, often neglected, part of website development. Whilst having a backup of your website is essential, proper documentation is an investment and may save  time and effort if you need to recreate the website in the future, or need to update it at a later date. Documentation help you understand what, and why, you created your website in a certain way in the first place.