Archive for Tips and Tricks

07 Sep 2017

10 Things To Do After Publishing Your EverWeb Website…

No Comments EverWeb, Software, Tips and Tricks, Web Design, Widgets

It’s a great moment when you finally click the “Publish” button in EverWeb and your website goes live on the Internet. All that hard work has finally paid off!

Now comes the difficult part, testing out your website to make sure it all works properly. This is something that seems to be a bit of a chore, but if you’ve prepared your website properly beforehand e.g. using the tips in the “10 Things To Do Before Publishing Your Website” blog, testing should be relatively quick and easy.

Here’s a checklist of things to look out for:

  1. Make sure your Navigation Menu is working properly. Check that the labels you’ve used (i.e. the Navigation Menu Display Name that you’ll find in the Page button of the Inspector tab) are correct and that each menu item goes to the page it’s meant to go to.
  2. If you’ve previously published your website, you may have made some changes and republished. Make sure that the updated pages in EverWeb have updated on the Internet correctly. If they haven’t, try full republish using File-> Publish Entire Site instead of the Publish button (or File-> Publish Site Changes menu option).
  3. If you have any hyperlinks in your pages, test out all the links to make sure they go to where they are supposed to go. Don’t forget to check out any hyperlinks you may have added to objects such as images or shapes as well as your text hyperlinks!
  4. Check that any contact forms you have added work correctly such as EverWeb’s own Contact Form Advanced widget. Check that form fields work correctly as well as the sending and receiving of the email itself. Although you may see the message “Your email has been sent” it does not necessarily mean that the email has been received! Remember also that problems can lie at either end, e.g. incorrect SMTP options set in the widget, or incorrect configuration options set in your email program.
  5. If you have an EverWeb+Hosting account and are using EverWeb Site Shield for HTTPS Secure URLs, check that the URL in your browser window starts with HTTPS and has a Padlock symbol next to the URL. Whilst you’re checking this, you may also want to see if any Favicon you’ve added is displayed (bear in mind that this may take a few hours to become visible due to replication round the Internet).
  6. Check that any widgets or code you may have used work correctly e.g. if you’re using icons from Font Awesome, make sure that these display properly.
  7. Check that your page layout works correctly e.g. you have a fixed header so that your page content scrolls under as your visitor scrolls down the page. Make sure that the content scrolls under the header and not on top of it! Check your Always On Top setting in the Metrics Inspector and make sure that Arrange-> Bring To Front is selected. Test any changes using Preview before publishing.
  8. Check that your website works properly on all device types: desktop, tablet and mobile. It’s extra work for sure, but it’s better for your users that you do this work! A professionally made website makes for a better user experience and is better for repeat visits.
  9. Test out your 404 Page Not Found pages. On both your desktop and mobile websites, check that the error page works. To test, just enter the website URL in your web browser’s search box but include a mistake in the page name you’re looking for. You should see your own 404 Page Not Found error page appear as a result.
  10. How about some documentation? It’s always worth having some documentation about your website project, especially if you’ve drawn content from a number of different sources. That can come in handy in future if you ever need to go back to find your source data. It’s also useful to note down all Hyperlinks references you’ve used in your website. Even basic information such as page layout items found in the Page tab of the Inspector can be useful to record.

    And finally, don’t forget your backups! Always have EverWeb’s own backup feature on in addition to any regular backup of your computer itself.

Once you’ve published your website it’s easy to want to just enjoy the fruits of your work, but making sure that your website is working properly is worthwhile in itself.

If you have any ideas or suggestions about this blog post, let us know! We’d love to hear from you!

24 Aug 2017

10 Things To Do Before Publishing Your EverWeb Website

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

Publishing your website to the Internet is the culmination of many hours of hard work getting your site exactly how you want it. As you get closer to publishing, it’s easy to rush the final steps to get your site out for the whole world to see!

Sprinting to the project’s finish line is understandable, but too much haste can lead to a published website that’s full of errors or does not work as expected. It’s potentially embarrassing, unprofessional and can be a real negative to your site visitors. So why not take a breath then run through our checklist blow before hitting the ‘Publish’ button. Save yourself the hassle of having to go back to make lots of changes, corrections or fixes after you’ve published.

Here’s the checklist of things to review on your EverWeb website Project before publishing…

  1. Set up a Favicon for your site. The Favicon is the little square image that appears beside your URL in the web browser search box. It’s a nice professional touch to your website even if it’s not an essential feature to include.

    To add a Favicon, go to the File-> Edit Publishing Settings. Scroll down to the Favicon section and choose an appropriate image (preferably one that’s square!). EverWeb will do the rest when you publish. When including a Favicon in your site, it may take a few hours for replication around the web for it to show up in the browser search box.

  2. If you have EverWeb 2.4, or higher, set the Language Localization for your website and for any individual pages as necessary. This is a great feature to add as it will help serve your visitors searching the web with more targeted search results. Check out our blog Language Localisation in EverWeb 2.4 for Better SEO! for more details.
  3. Check that you’ve implemented a ‘404 Page Not Found’ error page for both desktop and mobile versions of your site.

    First, create a ‘404’ error page for both desktop and mobile sites then set up a mobile redirect using the ‘Mobile Settings’ section of the Inspect or tab. In this way, if a user gets a 404 Page Not Found error when using a mobile device, they will be directed to your mobile 404 Page Not Found error page and not the desktop version.

    Once you have linked your desktop and mobile pages together, go to Site Publishing Settings. Scroll down to the ‘Advanced Options’ section. There’s only one option ‘Not found page’. Click on the drop down and set the page to the desktop 404 Page Not Found error page.

  4. If you have any unused assets in your website project that you know you won’t be using in the future, now is a good time to remove them. When developing websites, there’s often experimentation that leads to some ideas that you move forward with and some that you abandon. As such, your Project file may get cluttered with extraneous image files so why not remove them and reduce the size of your Project file at the same time?

    To remove unwanted assets first go to the Assets tab. Select ‘Find Unused Assets’ from the drop down menu that’s to the right of the word ‘Assets’.

    Any unused asset will be highlighted. Review these highlighted assets before removing the ones your don’t want.

  5. As SEO is baked in to EverWeb you don’t explicitly see features labelled as ‘for use with SEO’. If you have not included SEO in the planning of your website, it’s never to late to include it. Using SEO is the best way to improve your Search Engine Ranking Results. For a better understanding of SEO and how to use it in EverWeb, or if you just want a refresher, check out the SEO for EverWeb Course.
  6. If you have an EverWeb+Hosting Plan and EverWeb 2.4 or higher, you can add end to end data encryption to your website with HTTPS. To add this, tick the checkbox ‘Use HTTPS Secure URLs’ feature in Site Publishing Settings. For more information about this feature, check out the EverWeb 2.4 Released Making Your Website Safer! blog post.
  7. If you use Social Media, add an image to your web pages for social media purposes in the Page Details settings of the Inspector tab of your webpage.
  8. Spelling, typos and grammar checking! If you’ve written your own text content for your webpages, it’s easy to miss out on finding mistakes in your own work. If possible, get someone else to read through your text to find typos, spelling mistakes and grammatical error. It’s also useful for another person to check your sentence and paragraph flow.
  9. Preview your website before publishing. Preview shows you how your site will look when published without publishing the site to the Internet. You can interact with Preview to test out most features of your website, but bear in mind that some features, such as sending email, only work when your site has been published.
  10. Before you press the ‘Publish’ button, check to make sure you’re publishing to the correct location by reviewing the ‘Publish’ section of ‘Site Publishing Settings’. It’s especially important to do this if you’ve been publishing to a ‘test’ location before going live, or if you have more than one website under your EverWeb account. Accidents can happen, and you don’t want to be publishing your site to the wrong location.

These tips should make your publishing easier and reduce the need to correct your site afterwards. If you’ve got a tip to share, please let us know in the Comments Section below! Thanks!

10 Aug 2017

Language Localization in EverWeb 2.4 for Better SEO!

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

The latest EverWeb release, version 2.4, adds a new feature that uses language and regional localization to help boost your website’s search engine results rankings. Your website will be better able to target your desired audience as potential visitors will be served results that are more specific and relevant to their search than before.

EverWeb 2.4 can take advantage of geographic location and the languages used in your website, which when combined with HTML’s language features, provide an SEO boost. As you’d expect, EverWeb makes Language Localization easy with just a few mouse clicks.

You can use the language localization feature for either commercial or non-commercial purposes e.g. businesses may be focused on serving customers in their own region, country or internationally. Non-commercial websites, for example, non-profit organizations, local associations, hobbyists and so on, may gain better reach and more focused results when trying to attract their target audiences such as local or regional markets or specific language groups within their area.

How Does Language Localization Work?
Language localization works in three different ways:

  1. For the website as a whole, i.e ‘globally’,
  2. At the webpage level only or
  3. Using a combination of the above two methods i.e. the website has the global language set, but occasionally this is overridden at the webpage level when needed.

The following are some examples demonstrating how to use, and get the best from, Language Localization:

Going Global!
At the global level is where you set the language localization for the whole website only. As an example, a website has been developed in EverWeb to sell digital products globally only via the internet. In this case, you may think that no language localization is needed. However, if the website itself has been developed in Spanish, it may be advantageous to set the global language to Spanish as well to better target Spanish speaking visitors.

To set global Language Localization:

  1. Go to the Site Publishing Settings either by using the menu File-> Edit Site Settings, or by clicking on the website name in the Web Page List;
  2. In the Head/Footer section of the Site Publishing Settings is a new setting ‘Language’, just below the Favicon setting. Click on the ‘Language’ drop down.
  3. When the list appears you’ll quickly see that there are numerous languages listed together with lot of local variations based on country. To get quickly to ‘Spanish’, start typing the word itself. Predictive search is used, so as you type you’ll be taken down the list quickly. Locate Spanish.
  4. For our example, we can just use the generic ‘Spanish’ without specifying a country to target all Spanish speaking visitors.
  5. Once Spanish has been selected, publish the website. Use File-> Publish Entire Site to make sure that the whole website adopts the change you have made.

Global Setting, Local Market
In the next example, a national animal welfare organisation, based in Austria, has designed their website using EverWeb. In this instance, the website will probably want to target only potential visitors in the Austria itself. As German is the language spoken in Austria, the global language would be set to German (Austrian).

Global Setting, Multiple Markets
Switzerland is an interesting country as it has a population of about eight million people and four nationally recognised languages: German, French, Italian and Romansh. A Swiss company may build a website with webpages in some, or all, of these languages.

In this case, the developers might select the most appropriate, or dominant, language used in the website as the global Language setting in Site Publishing Settings. This could be German, French or Italian (Romansh is not included as it’s only spoken by 0.6% of the population and so not listed.) Alternatively, the website developers could decide to have no global language and set up language localization just on a page by page basis.

Whether the website uses a global language setting or not, it’s likely that this website will want to set up Language Localization on a page by page basis. To do this:

  1. Open the website Project file and go to first web page.
  2. With the Inspector tab of the Inspector Window selected, go to the Page Details section.
  3. In the ‘Language’ option, select the language that is appropriate for your page e.g. French, German or Italian. Leave the setting blank if the page is in Romansh, and use other EverWeb SEO techniques instead for this language for SEO purposes.
  4. Repeat the process for all of the other pages in the Project file that need localizing
  5. Publish the website using File-> Publish Entire Site.

Same Language, Different Countries
There may be instances where your website uses one language but targets different countries that speak the same language. For example, an English language based site may specifically target markets in the US, the UK, Canada, Ireland, Belize, South Africa, New Zealand and so forth…

In this case, you may want to set the global language setting in Site Publishing Settings to English without specifying a country, then have country specific web pages using the language of English, but with their own specific country identified e.g. English (United States), English (Belize) etc.

When using EverWeb’s Language Localization options it may take a couple of weeks to see if it has been effective on your website visitor stats. If you find no uptick in your website traffic, you may also need to implement some other measures as outlined in EverWeb’s own SEO Course.

20 Jul 2017

Mac OS Tools To Use With EverWeb

No Comments Software, Tips and Tricks, Web Design

Sometimes it’s easy to forget that macOS has a range of time and labor saving apps with features that can speed up your EverWeb website development. These apps are typically located in the ‘Utilities’ folder within the Applications folder of your Mac.

As these tools are part of your macOS, they’re absolutely free, and provide basic functionality, although there are sometimes great features hidden in these apps if you know how to find them. Let’s have a look…

Using Utilities Apps
The easiest way to open any of the apps described below is by a Spotlight Search. Just hit Cmd+Spacebar and start typing the name of the app in to the search box. As you type, the app you’re looking for will appear in the search results. Double click on the app to launch it.

Digital Color Meter
Good For: Matching Up Colors

Sometimes you may need to match up colours correctly in your website e.g. if you are converting an iWeb website to EverWeb you may want to retain your original color scheme in the process. Possibly you may reach for the Digital Color Meter app to do this as it matches color in a number of different ways e.g. HEX Code, RGB etc. There is, however, a quicker way.

In EverWeb open the Color Picker using the Color button in the Toolbar. In the Color Picker is a pipette symbol to the right of the colour swatch (i.e. to the left of the colors you have saved in the grid.) Click on the pipette and you’ll get the same functionality as you would using the Digital Color Meter.

Grab
Good For: Quick and Easy Screen, Window or Selection Captures.

Grab is macOS’s own screen capture utility. You can capture the whole screen, just the window you want or a specific selection. There’s even a timer function. The app supports shortcut keys for these features so it’s quick and easy to use. Files can be saved in PNG, JPG and TIFF formats. The limitation of Grab is that you can’t edit images you have captured which is where Preview comes in…

Preview
Good For: Basic Image Editing Tasks, Instant Alpha, Export File Formats

Preview is probably your go to app when it comes to useful tools to use in conjunction with EverWeb. It’s great for resizing images, especially when converting images to Retina display. There’s an image cropping tool which is useful if you need to refine your image a little after using tools such as Grab. Alternatively, remember that EverWeb’s Masking feature can do the much the same and is non-destructive to the image.

Preview has editing features so you can annotate your images with text or shapes. Adjusting image color is really where Preview does a great job with a host of features you would expect to find in more dedicated graphics apps.

Perhaps the tool that most iWeb users will want to use is Instant Alpha as this was included in iWeb. Instant Alpha replaces a color by making it invisible, thereby creating a transparent background where the color used to be. You’ll find Instant Alpha in other Apple iWork products such as in Pages.

Instant Alpha can be found in Preview’s Toolbar. I would recommend always having the Toolbar displayed as it brings all the features you really need immediately to hand.

Finally, you can export your images in a number of formats such as JPEG, PNG, TIFF and even PDF. To use the saved image, just drag and drop it on to the Editor Window in EverWeb or in to the Assets List if you want to use the image with EverWeb’s Image Gallery or Image Slider Widgets.

Font Book
Good For: System Font Management

Font Book is the place where all of your system fonts are stored. It’s also the place where you can add in additional third party fonts such as fonts from Google Fonts. Rememeber that if you use third party fonts other than Google Fonts, you’ll need to have them properly hosted so they’re reproduced correctly when users visit your website in their browser.

If you add fonts to Font Book, and they do not show up in EverWeb’s Font Panel, just close and relaunch EverWeb and they should appear.

Quick Time Player
Good For: Video and Audio Creation, Basic Video and Audio Editing

In addition to Preview, Quick Time Player is another of macOS’s unsung heroes. Using this versatile app, you can record both video and audio tracks. Video export options go to up to 1080p with macOS Sierra, but in macOS High Sierra expect 4K to be added.

Once you have recorded your video or audio, you can do some basic editing tasks such as splitting clips, adding clips to the end of an existing clip and even trimming a clip. All of these features can be found on the Edit menu.

Quick Time Player is great for when you want to use clips in EverWeb using it’s own Audio and Video widgets!

With macOS Utility Apps, it’s easy to add extra features to your website without any extra cost!

06 Jul 2017

Customizing Blog Navigation Links

No Comments EverWeb, Software, Tips and Tricks

When you create blog posts in EverWeb you’ll want an easy way for your visitors to navigate from one post to another as well as to the Index and, possibly, archive page. EverWeb’s Blog Posts Navigation Links are the easy way to do this. Here’s how to add and customize navigation links in your Blog Post…

Customizing Your Blog Posts Navigation Links

To customize your blog posts Navigation Links, begin by selecting your Blog Posts page in the Web Page List. Next select the Blog Post widget. This ‘widget’ appears in the Blog Post Preview Window and contains the contents of the post itself such as any text and images that you’ve added in to the Blog Post Editor Window. The widget also contains the Blog Post header information.

With the Blog Post widget selected, go to the Widget Settings in the Inspector Window. If you don’t see the Widget Settings, click on the Inspector tab in the Inspector Window and click on the Widget Settings ‘cog’ button.

With the Widget Settings displayed you can now customize the look of your Blog’s Navigation Links. Remember that as you’re changing settings in the Blog Posts Preview Window, they’ll generally apply to all your blog posts.

Display Options
EverWeb displays the Blog Post titles as Navigation Links for the ‘previous’ and ‘next’ posts and a text label, ‘Index’, for the blog main index page. You can toggle these display defaults on and off using the ‘Include navigation links’ and ‘Include index page link’ check boxes in the ‘Post Options’ section of the Widget Settings.

Furthermore, if you want to change the name of the Index page label, just enter the name you want in the ‘Index page name’ box. This action doesn’t change the name of the blog main page itself.

Changing Navigation Link Colors and Underline
After you’ve set how your Navigation Links will be displayed, you can customize the links themselves in a number of ways.

Click on the ‘Navigation Links’ Fonts button in the Widget Settings to customize most aspects of the Navigation Links all at one time using the Fonts Panel. Change the font type, font weight and font size to suit your website style but, leave the color and underline options as they are.

Changing Navigation Links Color and Underline
Blog Posts Navigation Links are, as you’ve probably guessed, hyperlinks, so you change their color and underline properties in the same way as you would for other hyperlink. However, for blog posts, use the ‘Post Link Normal’, ‘Hover’ and ‘Visited’ and Underline toggle options in the ‘Post Options’ section of the Widget Settings. Do not Use the Hyperlinks tab from the Inspector Window.

The changes you make will apply to all hyperlinked text objects you create after the change e.g. if you add a hyperlink in the Editor Window it will inherit the changed hyperlinks attributes.

Changing the Navigation Links Separator Bar
If you want to customize the color of the separator bar between the previous, index and next Blog Post links click on the ‘Navigation Links’ Fonts button in the Widget Settings. This will display the Fonts Panel again. Click on the Text box button in the Fonts Panel Toolbar and change the color from the default black to the color of your choice. The separator bar will change color, but the text of your Navigation (Hyper)Links will remain the color that you set earlier.

Adding A Link To Your Archive Page
If you want to link your blog posts to your archive page, simply add a Text Box, or button shape with text on it, to the Blog Post Preview Window. Use the Hyperlinks Inspector tab to link the text to the archive page. As the hyperlinked text is in the Blog Post preview window, it will be displayed on all blog posts.

Alternatively, you can also add a hyperlink to the archive page on the blog main page. In this case, click on the blog main page in the Web Page List and click on the blog main widget in the Editor Window. In the Widget Settings, use the ‘Show full archive’ section to add the link to your archive page. If you don’t see this in your Widget Settings, make sure that you have EverWeb version 2.1 or higher installed.

Setting up navigation links is easy and versatile, but if you have any questions or problems, let us know below!