Getting Started with EverWeb 4: Learning About SEO

April 24th, 2016

 

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

 

Introducing EverWeb version 1.9.6

April 6th, 2016

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!

Getting Started With EverWeb 3: Master Pages

April 1st, 2016

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.

 

Master Page example

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.

 

 

Getting Started with EverWeb 2: The Editor Window

March 16th, 2016

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…

 

EverWeb New Web Page

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.

Editor Window Overview

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!

 

 

Getting Started with EverWeb 1: Creating Your First Website

February 26th, 2016

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.

 

EverWeb Projects Window

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.

 

EverWeb's 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 EverWeb Website Project

February 21st, 2016

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.

 

 

Introducing EverWeb 1.9.5: Optimized for Speed, Efficiency & Stability

February 9th, 2016

We’re very happy to announce the release of EverWeb version 1.9.5. The new version optimizes EverWeb for speed, memory efficiency and stability – especially beneficial for large websites and those with lots of large image files. The 1.9.5 release contains many under the hood enhancements, highly requested improvements and bug fixes including:

  1. EverWeb is now available in Chinese (Traditional & Simplified), Portuguese (Portugal), and Swedish
  2. Added support for dragging and dropping images directly from Photos.app
  3. Images that are large enough for retina display but don’t have a ‘@2x’ tag are exported as retina
  4. Text boxes with background color and text using export as text are exported correctly
  5. Optimized loading and storing of cached background images for shapes
  6. Cache files automatically removed in low memory situations
  7. Reduced EverWeb’s memory usage
  8. Confirmation message when updating new templates
  9. Fixed issues with fonts not previewing properly in Fonts Panel Window
  10. Fonts Panel Window remembers the size of the Font Preview section
  11. Fixed right clicking in Master Page List and selecting ‘New Page’ always creating the new page in the Web Page List
  12. Fixed a rare crash on launch when logging into an account
  13. Text objects are not marked as modified unless there is an actual change
  14. Fixed a bug with changes not being applied when editing a text box and then selecting another page right away without clicking outside of the text box
  15. Gradients set to 0 or 180 degrees now work properly with the full width options
  16. ‘Convert To Directory’ now immediately updates the Web Page List Inspector
  17. Improvements to the Widget API
  18. New PayPal Widget option ‘Global Shipping Settings’ for PayPal Global Shipping Options
  19. Dropdown Navigation Menu Widget background colors are properly exported
  20. Improvements in font export for the Heading Tags Widget
  21. ‘Export Text as Image’ no longer exports misaligned
  22. Typing within a link at the beginning of a paragraph doesn’t append keys to the end of the paragraph
  23. Mouse wheel works properly within text boxes in the Inspector
  24. When no ‘Alt Text’ is specified for a text object being ‘exported as text’, the first 50 characters are used
  25. Optimized the way export as text exports so it’s smoother on non-retina macs
  26. Includes a fix for password protected pages if you don’t enter the ‘www’ in the url
  27. Improvements to copying and pasting text from a web browser into EverWeb
  28. Fixed issues with the Image Gallery Widget
  29. Fixed an issue where the metrics inspector showed 0 for all dimensions
  30. Fixed issues with the document file icon not showing in the Finder
  31. Fixed a bug when cancelling publishing
  32. Fixed an issue with EverWeb not responding to typing in a text object or shape
  33. Fixed redraw issue of the Site Publishing Settings screen
  34. Fixed some important publishing issues
  35. Fixed Google Maps, Youtube and Facebook Widgets to work with https sites
  36. Fixed many issues and bugs submitted by the EverWeb user community

 

 New Video Widget features

EverWeb 1.9.5 adds a number of highly requested features to the Video Widget:

  1. Video Volume Settings: You can set the Default Volume Level for a video, or choose to Mute the video’s sound altogether
  2. Video Settings: ‘Autoplay’ plays the video automatically once the page has been loaded, ‘Loop’ plays the video continuously and ‘Show Video Controls’ let’s you remove the video player’s control panel.
  3. Video Poster Image: This option puts a default picture of your choice at the front of the video. The ‘Poster’ helps video download speeds as the video won’t have to downloaded first to supply the Poster Image as it’s there already. The Video Poster Image is not supported when Autoplay is checked.

When using the new Video Widget features please bear in mind the following..

  1. Downloading a video can take up a lot of bandwidth, especially on a mobile device.  We recommend that you warn your visitors of this possibility so they can decide to play the video or not. It’s also recommended that Autoplay is set OFF.
  2. Playing video or audio with sound on is not a good user experience. If a website starts playing a video or audio clip in a public place it probably wouldn’t be appreciated.

 

How To Update To EverWeb 1.9.5

You can easily update to EverWeb 1.9.5  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.

Important! 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.

If your EverWeb license has expired you can easily renew it by clicking 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.5 version.

If you do not want to renew your EverWeb license but have already downloaded EverWeb version 1.9.5 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.

 

Your Feedback…

Thanks for all of your input, comments and suggestions about EverWeb. If you have feedback, we’d love to hear from you! Just start a new thread on the forum or leave a comment below.

 

EverWeb Highlights: Winter 2015-16 Edition

February 3rd, 2016

EW Logo

Welcome to the Winter Edition of EverWeb highlights… Over the last couple of months we’ve been busy honing the latest beta test version of EverWeb, getting it ready for its official release. We’ve added some new YouTube videos for you with some highly requested ‘How To’ tutorials and some new blogs with lots of additional hints, tips and ideas for your website building projects. Here’s the summary of all that’s new…

 

YouTube Channel

The EverWeb YouTube Channel now has approximately 150 videos on every aspect of EverWeb. The video channel regularly has new video content uploaded so it’s worth signing up to! Videos are also regularly updated when we’ve added new functionality to existing features such as new options in the PayPal Widget. When you subscribe to the YouTube Channel you’ll get an email when new or updated content is released. our latest videos include the following:

How To Sell Digital Goods on Your Website – Selling Digital Goods with EverWeb & PayPal

How To Back Up An EverWeb Project File – Backing Up a Project Using Dropbox

How To Share An EverWeb Project File Using Dropbox – Use EverWeb On Multiple Computers

Is there a video tutorial that you’d like to see on the YouTube Channel? Let us know on the General Discussion section of the EverWeb Forum or in the comments section below.

 

EverWeb Blogs

Blogs are great as they wonderfully versatile from quick tips, to ‘How To’s’ and in-depth discovery articles… Our latest blogs below showcase this kind of mix some quick tips about the Image Gallery Widget and an in-depth look at shielding your visitors from the Internet’s infamous 404 message! Don’t forget that we also have a large content library available on EverWeb if you want to browse ‘back issues’ at any time.

15 EverWeb Image Gallery Widget Tips

Take Control Of ‘404 Page Not Found’ Messages in EverWeb

Is there anything about EverWeb that you want us to write about in a Blog article? What would you like to see more of? Or less of? Let us know below!

 

Social Media

We all have a favorite Social Media platform for staying connected! As well as the everwebapp.com website, 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 a  favorite Social Media platform that we don’t cover we would like to know! Just drop a comment to us below!

 

Coming Soon…

The EverWeb beta test of version 1.9.5 is now in the final candidate stage before release. If you’re interested in testing you can till download the beta from the Discussion Forum. Thanks to everyone who helps us test future versions of EverWeb and sends in feedback. It’s incredibly valuable so please let us know if you do find anything during testing.

 

 

15 EverWeb Image Gallery Widget Tips!

January 8th, 2016
image gallery

EverWeb’s Image Gallery using picture frames, Google Fonts and a shape background.


Web design trends over the last couple of years have shifted towards a more image based approach accentuated by bold yet sparse text content. The power of an image can’t be denied. Using the right images on your website will immediately create the style, tone or mood that you want everyone to see. Images instantly tell a your visitors a story and make a greater impact than text can.

EverWeb has a couple of built in widgets to help you tell your story through images: The Image Slider widget gives you a range of slideshow possibilities, which we discussed in the blog ‘Update Your Website with EverWeb’s Updated Image Slider’, and the Image Gallery. In this blog we get acquainted with the Image Gallery Widget. It’s an easy way to display and organise collections of images on a web page. Here are fifteen tips on getting the most from the Image Gallery…

 

Image Gallery Basics

  1. Prepare your images beforehand. If possible your images should all be the same size, orientation and resolution. Images that have a consistent size and resolution look better in the Image Gallery and are easier to look at for your visitors. Use photo editing software to edit your images so that they all the same characteristics. If you don’t have any photo editing software OS X’s Preview application may help as it has some basic editing features. And don’t forget that large images can impact your page loading times, so optimise your images before bringing them in to EverWeb. If your image file is large when you import it, EverWeb will warn you and will give you some optimization choices.
  2. Name your image files. Always give your image files a meaningful name. It’s good practice as they will  easier to find in the future and it can be helpful for SEO purposes. Rename your images files before importing them in to EverWeb as this is most effective for SEO. If the image has already been imported, you can rename it in the Assets List tab just by double clicking on the file name and entering a new name. it’s a less effective way but still better than not doing it at all!
  3. Create a consistent look and feel for your Image Gallery whenever possible. There may be times where you  can’t achieve the consistency you want. If, for example, you need to mix portrait and landscape images together, try grouping the portrait images together followed by the landscape images. Alternatively split the images in to separate Image Galleries.
  4. Use the ‘+’ symbol to move the Image Gallery Widget. The ‘+’ symbol in the top right hand corner of the widget moves the whole gallery around your page. Move the mouse pointer on top of the symbol then click and hold the mouse button down whilst dragging and dropping the widget to it’s new location.
  5. Drag and drop images within the gallery. You can move images you have added to the gallery just by dragging and dropping them to their new location. It’s quicker and easier than rearranging the Widget’s Assets List.

 

The page indicator section of the Image Gallery

The page indicator section at the top of the Image Gallery is highlighted for styling options to be applied

Styling Captions and Page Numbers

  1. Use Styling options for your captions. First select the Image Gallery and then click on the Fonts button in the Toolbar to access the Fonts Panel. The panel allows you to alter the text font, the text size and the text color.
  2. Align your captions left, center or right using the Alignment Options in the Text Inspector.
  3. Styling options for the page number indicator. If you have more than one page of images you will see the page number indicator in the top left hand side of the Image Gallery. If you have styled any captions you may notice that it does not affect the page number indicator. This is because EverWeb allows you to style the indicator separately. Just click in the area immediately above the top of the first row of images. You should see a narrow selection box which contains the page counter on the left and the ‘+’ symbol on the right (see above screenshot). With this area now selected, use the Fonts Panel to select the font style and size you want.
  4. Changing the page number indicator color and underline. To change the colors and underlining to go to the Hyperlinks Inspector and change the colors for Normal, Rollover and Visited as desired. You can also remove the underline as well if you don’t want it shown.
  5. Aligning the page number indicator. The indicator can be aligned left, centre or right using the Alignment options in the Text Inspector, The example screenshot at the top of this blog shows the results of some of these above customisation options.

 

Image Gallery Backgrounds

  1. If you want to add a background to your Image Gallery, just add a shape, size it to cover the Image Gallery and then use Arrange -> Send to Back to move it behind the Image Gallery.
  2. To quickly select the background shape at any time, perform a secondary click (i.e. a two finger tap) on the Image Gallery and scroll down to  ‘Pick Layer’ on the submenu. From here you can select the shape layer beneath the Image Gallery.
  3. You can also group the Image Gallery and background shape. Select both then use the Arrange-> Group menu option. When grouped, just use the Image Gallery’s ‘+’ symbol to move both Image Gallery and background shape at the same time.

 

Adding Borders and Frames

  1. Adding Picture Frames. The Image Gallery is a great place to use EverWeb’s Picture Frames feature. You’ll find the picture frames in the Shape Options tab. In the ‘Stroke’ section, click on the up/down to the right of the word ‘Stroke’ and select ‘Picture Frame.’ You then have 20 frames styles to choose from. To change the frame border size use the ‘Scale’ slider.
  2. The Shape Options tab is also where you can add a drop shadow background to the images in the gallery. Just tick the box next to the word ‘Shadow’ to activate the available options.

 

More about EverWeb’s Image Gallery Widget

Don’t forget that there are plenty of resources for EverWeb including the  EverWeb’s Image Gallery tutorial

and YouTube videos such as Image Gallery Widget – How To Add An Image Gallery To Your Website In EverWeb

 

Let us know below if you have any questions, comments or tips you’d like to add!

Take Control of ‘404 Page Not Found’ Messages in EverWeb

December 18th, 2015
404 Page Not Found error trapping page

Create effective 404 Page Not Found error trapping pages in EverWeb.

Have you ever tried to access a website pageant got a ‘404 Page Not Found’ instead? It’s a problem that Internet users come across on a regular basis. ‘404 Page Not Found’ also has siblings such as

404 Error

404 Not Found

Error 404

The requested URL [URL] was not found on this server

HTTP 404

Error 404 Not Found

404 File or Directory Not Found

HTTP 404 Not Found

404 Page Not Found

A ‘404 Page Not Found’ message is in fact an HTTP (HyperText Transfer Protocol) standard response code. The ‘404’ response code can occur for many reasons when you’re trying to access a website page on a server e.g. the link to the page you are looking for is either dead or broken as the page has either been moved or removed. The message may also occur if you have simply mistyped the name of the web page in your browser’s search box.

 

Why Are ‘404’ Type Messages Important?

If a visitor to your website comes across a broken or dead link (e.g. you have moved, removed or renamed a page but not updated the link to it) they will get the standard ‘404’ type message. The visitor can click the back button in their browser to go back, or they could move away from your website and search elsewhere instead.

The important part of a ‘404’ message is how to direct your visitor to where you want them to go next if this error occurs e.g. back to your Home page. In this way you keep your visitor inside your website so they’re less likely to leave for a different website.

Capturing and redirecting visitors who get a ‘404’ message adds professionalism to your website. Even though many of us are Internet savvy, there are still many Internet users who will be baffled by ‘404’ type messages. Giving these visitors information on how and why the ‘404’ happened is both informative and educational.

 

What Can I Do About ‘404’ Type Messages?

The easiest way to control ‘404’ type messages is to create an error trapping page in EverWeb that captures the ‘404’ event and provides your visitor options on how to proceed. This ‘error trapping’ page can also tell the visitor why they have arrived there and not at the page they expected!

 

Making Your Own ‘404’ Error Trapping  Page

You can trap a ‘404’ error and redirect your visitor to an error trapping page where they navigate your website again. Here’s how to do it…

  1. Create a new page in your EverWeb Project and give it an appropriate name e.g. ‘404 Page Not Found’. Do not include the page in any Navigation Menu. If you have mobile website pages in your Project also create a mobile version of your 404 error page too.
  2. In your error trapping page, include a link to your Home page or include a Navigation Menu. In this way the visitor has a way to return to your website.
  3. Try to include an explanation in simple language as to why the user has been directed to the page e.g.
    1. The page you are trying to access is no longer available or
    2. The link to the page your are trying to access is broken or not available or
    3. There is an unspecified problem
    4. Include a contact email address if visitors want to contact you about their problem
    5. Or just include all of the above!
  4. Once you have finished the mobile version of the page, go to the Inspector Tab. In the ‘Mobile Settings’ section check the box for ‘This page is for mobile devices’. For the page you created for desktop environments, again go to the ‘Mobile Settings’ section. In ‘Mobile Page’ drop down select the mobile error trapping page. These steps will ensure that the visitor will get the right style of page if they get a ‘404’ type error.
  5. If you have an EverWeb+Hosting account go to your Site Publishing Settings either by clicking on your Project name in the Web Page List, or by using the File-> Edit Publishing Settings menu. Check that the ‘Publish To:’ drop down box shows ‘EverWeb’. Scroll down the settings page until you get to Advanced Options. The only option in this section is ‘Not Found Page’. Use the drop down menu to select your 404 Page Not Found error page. That’s all there is to do!
  6. If you do not have an EverWeb+Hosting account and use your own host provider, they should be able to tell you how to include a link to your ‘404’ error trapping page within their own Control Panel. Note also that your host provider may offer other alternatives for capturing and dealing with this type of error.
  7. Once you have all the setup steps completed, publish your website. To test your error page, all you have to do is to type in the name of one of your websites web pages incorrectly. The error page should show up!

 

How Can I Avoid Getting ‘404’ Type Errors?

As always the best way to avoid your visitors getting ‘404’ type messages is by testing your website’s links. This is especially true if you have set up links by hand. You should also document your website and it’s links so that you always know where they are and where they should link to.

 

Have Fun With the ‘404’

404 error pages have come to be renowned for their humour, trying to bring a bit of a smile to the error message. There are lots of examples out there and even a website especially dedicated to the subject at http://www.404errorpages.com

 

If you have designed a fun ‘404’ page why not share it with us! And don’t forget there’s also a video walkthrough available on YouTube!