Mac SEO Blog

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

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

Have you ever tried to access a website page and 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!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

November marked EverWeb’s second anniversary since launch with a new beta test version  (1.9.5) available for testing. There are also blogs highlighting the new version 1.9 features, tips on masking and a special spotlight on websites for photographers… Enjoy this month’s Highlights and let us know if you have any comments, we’re here to help!

Happy Birthday EverWeb!

EverWeb was first released to the public in November 2013 and since launch has garnered great reviews from iMore, Tuaw, MacLife and more. The EverWeb team’s goal was to deliver frequent updates to keep pace with today’s rapidly moving tech landscape and to give you the features you wanted most. Now at version 1.9, you can see below that EverWeb’s added a wealth of features and enhancements since 1.0 but still remains the most user friendly website building product there is!  Here are just some of the features we’ve added since version 1.0…

• Master Pages
• Password protection features
• 404 page not found and 301 redirect features
• Powerful PayPal E-Commerce Widget
• Integrated video tutorials
• Direct to FTP Publishing
• Enhanced Image Gallery and Image Slider Widgets
• Retina Display support
• New UI for OS X Yosemite
• Alt Text support for better SEO
• Mask button in the Toolbar
• Google Fonts Support
• Header Text Widget
• Auto Save
• Navigation Menu Widget Enhancements
• Back Up Projects feature
• Duplicate Project feature
• Popup Window Hyperlinks
• Fixed Position and Full Width Support
• Enhanced Asset Management features
• Great SEO support for mobile websites
• Faster redirects for mobile websites
• Google optimised mobile websites
• Improved, faster publishing and uploading speeds
• Smaller, faster loading websites with improved caching
• Show/Hide Toolbar and Presentation Mode
• Over 40 Theme Templates included
• 17 built in widgets that extend EverWeb further
• Language support for Spanish, Japanese, German and Italian

…and there’s much, much more that we don’t have the space to include here!

To make sure you’re up to date with the latest version,  just launch EverWeb and select the ‘EverWeb-> Check for Update’ menu option. As we look forward already to 2016, there’s lots being planned for EverWeb’s third year, so stay in touch. Our ‘Keep up to date with EverWeb’ section below tells you how…

EverWeb Latest News

EverWeb version 1.9 was released the public in October. November saw a new version, EverWeb 1.9.5, enter beta test. It’s available from the EverWeb discussion forum if you want to test it out. The beta test version focuses on speed, memory efficiency and stability as well as including requested improvements. Remember not to use ‘live’ Projects with the beta version and to always back up your Project files when using beta test products!

Our Latest EverWeb Blog Posts

November’s Blogs focused on those small but important new features and enhancements that were included in EverWeb version 1.9. For photographers with their own websites, there’s a special focus blog on how to get the most out of your website. We always welcome your comments and feedback, so let us know what you think below!

EverWeb Highlights: October 2015

Improvements in EverWeb 1.9 You May Not Have Noticed

12 Ways To Improve Your Photography Website With EverWeb

Our Latest EverWeb Video Tutorials

EverWeb’s YouTube channel has two new videos explaining how to add a link to another website in the Navigation menu and how to use EverWeb’s masking feature to crop images within the product.

Linking To An External Webpage in EverWeb’s Navigation Menu

How to Mask An Image In EverWeb – Cropping images in EverWeb

Keep Up to Date With EverWeb

Keep up to date with EverWeb on social media. For the latest news, features, tutorials, blogs, comments and more just click on your choice below or use our Twitter handle @ragesw

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Or leave a comment in the ‘Reply’ section below if you have any questions or want to know more…

One of the most important tools a photographer needs apart from a camera is a great website. Whether you are an amateur or a professional, your website represents you, your work, your passion and your personality. In a crowded market how can your photography stand out more amongst the crowd? Here are some EverWeb tips to help you out…

1. Use The EverWeb for Photographers Video Course

If you are just starting out with EverWeb, have a look at the ‘EverWeb for Photographers Video Course‘. The nine video course introduces you to EverWeb and the key features photographers need to get a website up and running quickly and easily.

2. Remember to include SEO!

This is a key element to remember and should always have a very high priority. Effectively used SEO will help your website be more visible on the Internet as it improves your chances of a higher ranking in search engine results. Make sure to complete your SEO using the ‘SEO For EverWeb Video Course‘.

3. Use Meaningful Image Names and ALT Text Descriptions

When shooting pictures, your camera will name photos sequentially e.g. IMG-0001. That’s not great for your SEO, so be sure to rename your images to something more meaningful before you bring them in to EverWeb. Use hyphens to separate each word as that’s better for search engines. And don’t forget to add in ALT Text for your images as well. ALT Text is a descriptive piece of text used to replace the image if it cannot be displayed, e.g. when you are in a reader only mode in your browser.

4. Use Watermarks and Copyright to Protect Your Work

Many photographers rightly complain that their images are ‘stolen’ from the Internet. The only practical way to stop this is to watermark your images before you bring them in to EverWeb. It’s also good to add a copyright to each of your web pages as another theft deterrent.

5. Show Off Your Personality

Photography is a very personal hobby or profession. Use this to your advantage when building your website. Design your website in such away that it shows your audience who you are, what makes you different from the crowd and what interests you most. Include a photo of yourself on your ‘About’ page, and consider making a blog about your work, experiences, where you’ve exhibited etc. There’s more information on blogging in EverWeb in the ‘How to Blog in EverWeb’ video tutorial.

6. Use Social Media To Spread The Word

One of the best ways to spread the word about your photography is by social media. Choose carefully where you want to target your time and effort when promoting your work and pick one or two social media outlets to begin with. Facebook is usually a great place to start so use EverWeb’s ‘Facebook Like’ to add share and like options to your website. EverWeb also includes widgets for Pinterest and Google+.

There are dozens of other social media outlets you can use such as Tumblr, Twitter, Instagram, 500px and so on. Take a look at the social media platforms that interest  and add links to them in EverWeb so you have a two way interaction between your website and social media. Look out for  tools on these websites that help you integrate your website with theirs. For example, Instagram lets you add badges to your website (see screenshots below), just select the badge you want in Instagram. Copy the code generated to the clipboard and paste it into an EverWeb HTML Snippet Widget. In this example, you don’t see the Instagram badge until you publish your website, so start by inserting the badge on a test web page or in an inconspicuous place on one of your web pages to see how it looks.

Log in to your Instagram account and go to your settings. When you select the badge you want, copy the all of the code in the code box to the clipboard.

In EverWeb add an HTML Snippet widget to your page. In the Widget Settings paste the code from Instagram. The badge will only display when you publish your website.

7. Use EverWeb’s Image Gallery and Image Slider Widgets

EverWeb’s Image Gallery and Image Slider widgets give you many different options to display your images. Use these widgets to create image galleries and slideshows tailored to your audience. Always put similar content together on the same page and have all your photos sized the same, in the same orientation and in the same resolution as it’s more professional. If using a slideshow, try to avoid using the thumbnails feature so that you can maximize your screen real estate for each photo and keep the visitor focused at the same time. And don’t forget to use the EverWeb’s Fonts button to change the font type, size and style of the Image Gallery and Image Slider widgets.

If you need something more specific than the Image Slider and Image Gallery widgets, check out the EverWeb discussion forum and the 3rd Party Products section.

8. Use High Quality Images

Images are going to look their best at Retina display level. They will be shaper and more detailed. Take a look at the ‘Retina Ready Images’ video tutorial for all the details on ‘Making Images Retina Ready‘. High Quality also refers to your own quality of work. Show your best photos and not the average ones!

Image should always edited in a photo editor before you bring them in to EverWeb. Programs such as Photoshop, Pixelmator, Gimp and even Preview are all fit for purpose. Within EverWeb you may find that Masking is a handy option not to forget! Don’t forget to check the size of your image files as well as if they are too large  your page download speed will be severely affected. Use the ‘Assets List’ as a check (see below) and adjust your image file sizes in your photo editor as needed.

9. Sell Your Photos Using EverWeb’s E-Commerce Features

If you are a professional photographer, you may want to offer your photos for sale. In EverWeb the PayPal Widget acclaimed widget has been considerably expanded offering a wealth of options to choose from.

If you use stock photo websites such as Shutterstock or 123RF to sell your photos add a hyperlink to your website to take your visitors to your stock photo page or add a link to your Navigation Menu as shown in our ‘Linking To An External Webpage In EverWeb’s Navigation Menu‘ video,

10. Use The Assets List

The images you use in EverWeb are stored in the Project ’s Assets List. Use the Assets List to search for photos and to check image file properties such as image dimensions, file size and image resolution. If  your page it loading slowly when published check to see if the size of one or more of your images is causing the problem. If this is the case,  reduce the file size by adjusting the images size and resolution in your photo editor.

11. Making Your Photography Website Mobile

The world is an increasingly mobile space, so having a good presence on any mobile device is a must. Testing is really important here to make sure that your photographs download quickly. Slow loading websites are the main reason why people click away to another site!

12. Make Contact Easy!

Making contact with your target audience should be simple quick and easy. Make your contact page reflect this! EverWeb’s Contact Form is ideal as it’s clean and simple to use!

Are you a photographer with a website built using EverWeb? Do you have any tips or tricks to share? Let us know below!

Every new version of EverWeb brings new and improved features and EverWeb version 1.9 is no exception with it’s enhanced HTML5 publishing engine, Presentation Mode and new Hyperlinking options. Included with these marquee features, are a host of minor enhancements and feature adds based user feedback. Here’s a run down of the some of the small, but great, features of EverWeb 1.9…

Duplicate…

Although we covered this before in the blog ‘Getting the Best from Duplicating Projects in EverWeb 1.9‘ , it’s worth mentioning again! Many EverWeb users wanted an easy way to make a copy of an existing Project file and EverWeb 1.9 adds this feature to the Project Window. To duplicate a Project file, just click on the up/down arrows to the right of the Project file name and select ‘Duplicate…’ from the menu. The duplicate is created with the same name as the original Project file but with ‘Copy’ added at the end.

Send Project File to Support…

There are some occasions where you need to send a Project file to the EverWeb Support Team. Prior to EverWeb 1.9 this was a manual process, but now it’s an integrated feature of EverWeb’s Project Window. If the Support Team asks you to send in a Project file, click on the up/down arrows to the right of the Project file name in the Project Window and select ‘Send Project File to Support…’. You’ll be asked to confirm that you need to send the file to Support. Clicking ‘Yes’ will upload it to a server and provide a link to be sent to the Support Team. Remember to only use this feature when asked to do so by the Support Team!

Pick Layer

This is a really useful little feature that can be easily missed! If you have objects that overlap or are on top of each other, such as a Navigation Menu widget on top of a coloured rectangle background shape, you have to move the top object to be able to access the object underneath. Then you would have to put the top object back in it’s original place afterwards. It’s time consuming and often requires accuracy. The new ‘Pick Layer’ option solves exactly this type of problem. Just secondary (right) click on the top object. At the bottom of the menu highlight ‘Pick Layer ->’. You will see all of the object layers available at that location from the top object down to the bottom object. Pick the ‘layer’  you want to work with it and it is then selected. That’s all there is to it – quick, simple and no fuss!

Pause on Hover

The Image Slider Widget gains a new ‘Pause on hover’ feature so that when a visitor mouses over the current slide in a slideshow, the slideshow pauses until the mouse is moved off the image. Just check the ‘Pause on Hover’ box in the Image Slider’s Widget Settings to activate this option.

Master Page and the ‘+’ Button

In the Inspector Window, the label ‘Master Template’ has been renamed to ‘Master Page’ for improved clarity.

In addition to the change of label, a ‘+’ button has been added directly to the right of the Master Page drop down selection box. The ‘+’ button allows you to add a new Master Page and customize it’s settings directly from the Inspector tab. This addition should make for more efficient work flow in the Editor Window.

New Theme Templates

There are seven new Theme Templates to enjoy in this release of EverWeb. Each new theme has six to eight different page styles included.

• Engagement
• Lavender
• Real Estate 2
• Simcoe
• Smart Watch
• Starry Night
• University

New Video Tutorials

A new video tutorial has been added for Favicon in the Site Publishing Settings screen.The video tutorial for the Image Slider has been updated as well as the Widget was significantly upgraded in EverWeb version 1.8. For more information on the Image Slider, you can also check out the blog ‘Update Your Website with EverWeb’s Updated Image Slider’.

Have you found small feature that’s been missed from our list? Let us know below!

October’s main highlight saw the release of the new EverWeb version 1.9. The latest version of EverWeb adds many under the hood features including an Enhanced HTML5 Publishing Engine for smaller, faster websites on both desktop and mobile. This and more to enjoy in this month’s Highlights edition…

EverWeb Latest News for October

EverWeb version 1.9 was released in late October with an Enhanced HTML5 Publishing Engine for faster, smaller websites. There are also some great UI enhancements such as a new Popup Window feature, Open In New Window feature, Presentation Mode and more! Check out the Blog ‘EverWeb 1.9 Released: Enhanced HTML5 Engine‘ for all the details!

Our Latest EverWeb Blog Posts

October’s Blogs focus on EverWeb version 1.9’s new Presentation Mode feature Duplicating a Project Features. There’s also in-depth blogs on how to get the best out of masking images in EverWeb, how to make a mobile website in three simple steps and much more! And feel free to comment or ask questions on any of the Blogs we feature!

EverWeb Highlights: September 2015

Building Mobile Websites in Just 3 Easy Steps

Creating Master Pages for EverWeb’s Theme Templates

Make Your Mark with Masking in EverWeb

EverWeb 1.9 Released: Enhanced HTML5 Publishing Engine

New User Interface Customisations in EverWeb 1.9

Getting the Best from Duplicating Projects in EverWeb version 1.9

Our Latest EverWeb Video Tutorials

EverWeb’s YouTube channel has four new videos to enjoy this month showcasing the new features of EverWeb version 1.9.

What’s New In EverWeb 1.9 – MacWebsite Builder

Cookie Consent Button Your EverWeb Website

Addon Domains for EverWeb+Hosting Accounts

Linking to a Popup Window In EverWeb

Keeping Up to Date With EverWeb

Keep up to date with EverWeb on the Internet! For the latest news, features, tutorials, blogs, comments and more just click on your choice below..

Facebook

Google+

Flipboard

YouTube

Or leave a comment below if you have any questions or want to know more…

When you launch EverWeb you are greeted by the Projects Window, the management centre for your EverWeb website Projects. From this window you can create new website projects, launch an existing website Project for editing and delete website Projects that are no longer needed. All of your the Projects you have already created are listed in the ‘Recent Projects’ list on the right of the window. You can sort the list using either ‘Sort By Name’ or ‘Sort By Last Modified’ date. These options are found  by clicking on the up/down arrows to the right of the words ‘Recent Projects’. On the bottom left side of the Projects Window, clicking on ‘Learn to how to use EverWeb’ takes you to a library of 47 tutorial videos to get you up and running fast if you are new to EverWeb.

Creating a Duplicate Project File

EverWeb version 1.9 introduces two new features to the Projects Window: ‘Send Project File to Support…’ and ‘Duplicate…’. Each feature is accessed by clicking on the up/down arrows the right of the Project file name (see screenshot above).

In this Blog we are going to take an in depth look at the ‘Duplicate…’ menu option. It’s a feature that’s ben requested by many EverWeb users so its great to see it in 1.9! There are many reasons why you will make a duplicate e.g. you may want a test version of a live Project file so you can safely try new features or functionality without experimenting on your live Project file. It’s also great for testing out new beta test features of EverWeb to see how your website Project can benefit from upcoming new versions of the product. Duplicating a Project file may also save you time and effort as you can create new websites quickly from ‘template’ Project files that you have set up already.

The ‘Duplicate’ function should not be used in place of backing up your Project file. Any Project file that you publish, or intend to publish, to the Web should be backed up using EverWeb’s backup feature from the EverWeb-> Preferences menu, or as part of your computer regular back up strategy.

When you click on ‘Duplicate’ EverWeb makes a copy of the Project file you selected and adds the word ‘copy’ to the end of the Project file name. As the duplicate is a new it appears at the top of the ‘Recent Projects’ list (if you are using the default Project sort order).  To change the duplicate Projects name, double click on the Project to open it. Next, double click on the Project Name in the Web Page List and enter the new name as desired. Press ‘Enter’ to finish.

When editing the Project file’s name, the Project’s Site Publishing Settings are also displayed at the same time. It’s a good opportunity to look at the  Publishing Settings to see if the publishing location is correct for the duplicate Project file. If you publish the duplicate Project to the same location as the original Project file location, EverWeb will warn you and ask you to confirm your action or cancel before publishing commences.

If you plan to re-purpose the duplicate Project file for another use, remember also to check out the Head/Footer section of the Publishing Settings for code that may cause problems, and also confirm that if using a Favicon it is the right one for your ‘new’ Project file.

Checking External Links and Widget Settings

When duplicating a Project file, check any external links that you are in your web pages and correct them, or remove them, if necessary  This may be important when using Social Media buttons that direct visitors to specific pages such as in Facebook, LinkedIn, Google+ etc. Check any hyperlinks in case you have any links to External URL’s that need to be modified or removed.

If your mobile web pages are contained in a separate EverWeb Project file you may need to review the Mobile Settings in the Page Settings tab of the Inspector Window to make sure that any external links are still valid. The same applies to any to any 404 Error Pages or 301 Redirects that you may have applied to your web pages.

Widgets are another source of links that should be checked and changed, even such things as addresses in the Google Maps should be checked to save you potential embarrassment!

Don’t forget to test out any links that you have changed in your Project file using Preview before going live.

Check Your Code

If you have any code inserted into your Project it’s worth checking it to make sure it applies to your duplicate Project. The HTML Snippets Widget, the Header/Footer code area in the Page Settings of the Inspector Window and the Head/Footer area in the Publishing Settings should all be reviewed in case the code it needs modification or removal. Whilst on the subject of code, if you have added any analytics to your website Project such as Google Analytics, you may need to create new Analytics for your ‘new’ Project file including a new verification code.

Check Anything that Uses an Email Address

Remember to check anywhere that an email address is used such as the PayPal Widget, Hyperlinks to an email message and the Contact Forms as email addresses may need review and amendment. You may also want to review any auto-reply messages that are sent when visitors such as the ‘Email Sent Success Message’ in the Contact Form Widget.

Assets Housekeeping

After duplicating a Project file you will probably edit it so that it is fit for it’s new purpose. Once you have made the changes you want it  remove any Assets that are no longer needed in the Project file. To do this, click on the Assets tab in the Inspector Window. Click on the up/down arrows to the right of the word ‘Assets’ which is just below the search box. From the menu that appears select ‘Find Unused Assets’ to locate any assets that are no longer needed and that can be deleted. Deleting unused assets will reduce the size of your Project file which is beneficial when you are editing and publishing your website.

EverWeb’s new Duplicate feature is a great time, cost and effort saver. Make sure that any re-purposed Project files are thoroughly checked so no legacy issues remain from the original Project file that are not intended to be there! Finally, as always don’t forget to test out your website using Preview before publishing.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 1.9 comes with new options to customize the User Interface (UI) to suit your needs when creating and editing your web pages. Before looking at the new version 1.9 features, it’s worth reviewing the UI features that can be found in previous EverWeb versions…

If screen real estate is at a premium, you can hide the Inspector Window on the right hand side of EverWeb’s UI. Use the menu command Window->Hide Inspector, or the keyboard shortcut Alt+Cmd+I (see screenshot below). Hiding the Inspector Window is especially useful when working with a small screen size laptop. The option only works whilst the Project is open. If you close the Project, or quit EverWeb, the Inspector Window will be visible by default the next time you open the Project.

The EverWeb UI with the Inspector Window hidden using shortcut key Cmd+Alt+I

If you want to hide the layout and object border lines so you can more easily see how your design is going to look, use the Window-> Hide Layout menu option or the Shift+Cmd+L keyboard shortcut. In addition to the layout and object border lines being hidden, all other markers such as Master Page object symbols (the black page symbol), the locked object Padlock symbol and grouped objects borders are also hidden. There is one exception to this which is the Hyperlinks Indicator. To turn off this indicator use the EverWeb-> Preferences-> General menu option.

As with ‘Hide Inspector’ if you close your Project or quit EverWeb, the settings will need to be reapplied next time you open the Project.

The new EverWeb version 1.9 introduces some new UI customisation features that can be used in conjunction to those described above. The first new UI customisation option is Presentation Mode which hides the Web Page List on the left of the screen, the Inspector Window on the right of the screen and the Toolbar at the bottom. Your current Layout and Hyperlink settings are unaffected.

Presentation Mode is ideal when you want to quickly review the look of your web page layout without using Preview. It’s also perfect when you have limited screen real estate available (see screenshot below). To activate Presentation Mode, select Window-> Presentation Mode from the menu, or use the Cmd+. (period) keyboard shortcut. When in Presentation Mode you can still edit the web page, use EverWeb’s menus and perform secondary clicks on objects as you would usually do. If you have turned off the layout boundary lines, you will notice that in Presentation Mode they become visible when you drag and drop an object around the Editor Window.

Presentation Mode in EverWeb 1.9 with the new University Theme ‘Home’ Template.

When Presentation Mode is selected, you have the ability to add back the Inspector Window and/or Toolbar to create a truly customised look to your work environment. To do so use the Window-> Show Inspector menu option (Cmd+Alt+I) and/or the Window-> Show Toolbar (Cmd+Alt+T) menu option.

EverWeb 1.9 with the Web Page List and the Inspector Windows hidden so that only the Toolbar is displayed.

If you only want the EverWeb UI to show Web Page List, and not the Toolbar or Inspector Window, first make sure Presentation Mode is off (use Cmd+. toggle to do this). Next unselect the Toolbar and the Inspector Window by the using the Cmd+Alt+T and Cmd+Alt+I commands respectively or by using their equivalent Window menu commands.

EverWeb 1.9 showing only the Web Page List

Presentation Mode is only valid per session. If you close the project or EverWeb, the setting will need to be applied again next time you open the project.

EverWeb version 1.9 also includes the often requested option to hide the Toolbar using the Window->Hide Toolbar menu option (or Cmd+Alt+T toggle). All Toolbar options are still available through the menus, with Preview being added to the File Menu in the EverWeb 1.9 release. The Hide Toolbar option is applied globally. Once applied, it remains in place and for ALL of your Projects even when you close and reopen them, or if you quit and relaunch EverWeb itself.

EverWeb version 1.9 with the Toolbar hidden using the shortcut key Cmd+Alt+T

EverWeb version 1.9’s new UI customisation options now let you display your workspace as you want it, quick and easy!

Summary of EverWeb’s UI Modes

• Hide Web Page List, Inspector Window & Toolbar = Presentation Mode (Cmd+.)
• Hide Inspector Window Only = Window-> Hide Inspector (Cmd+Alt+I)
• Hide Toolbar Only = Window-> Hide Toolbar (Cmd+Alt+T)
• Hide Web Page List Only = Presentation Mode + Window-> Show Inspector + Window-> Show Toolbar

Other Useful EverWeb UI Options

• Hide Layout = Window-> Hide Layout (Shift+Cmd+L)
• Hide Hyperlink Indicators = EverWeb-> Preferences-> General

The speed of your website is extremely important. It not just improves your visitor’s experience, but it also helps ensure higher search engine rankings.

Super Faster Websites With EverWeb 1.9

Over the last few months we worked on a new feature of EverWeb that combines all common assets uses on Master Pages into one directory. This means that your media files and styling information are only exported once resulting in;

1. Faster website publishing and uploading
2. Smaller websites
3. Faster loading websites due to browser caching. This means that for every subsequent visit to your website, they will load faster for your visitors. Also, each page visited by your customers will load faster

Plus we added a few more tricks to get your websites loading much faster;

1. Better support for retina displays using new HTML5 tags. This means modern browsers such as the latest versions of Safari, Chrome (for desktop and iOS) and Firefox, as well as many other browsers, will load your websites much faster and use less bandwidth.
2. Faster mobile redirects using optimized code that gets executed as the first instructions to your browsers so mobile pages gets redirected much faster than before. Plus we follow every one of Google’s recommendations for properly optimized mobile pages, without any additional work on your part!

EverWeb 1.9 also has these highlighted new features which we will discuss in more details in future blog posts. We also made a video tutorial outlining the new features for you.

We went even further with EverWeb 1.9 with some highly requested features and enhancements;

1. A new popup window option under the hyperlink tab so you can link to a page that pops up over the current page
2. A new presentation mode (Window menu->Presentation mode) to maximize the space given to the design canvas. This feature hides the web page list, toolbar and Inspector so smaller screens can see their entire website design
3. The ‘open in new window’ option under the hyperlinks tab now works for the link to ‘one of my pages’ and ‘to a file’ option. Now you can open PDF documents for example in a new window without any additional code or widgets

Easily Update To EverWeb 1.9

We’ve got a lot more packed into EverWeb 1.9. You can easily update by;

1. Launching EverWeb and going to the EverWeb menu at the top of your screen and selected ‘Check for Update’
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.

Do You Like EverWeb 1.9?

Tell us what you think, head over to our growing discussion forum and lets talk about the new features in EverWeb 1.9!

Helping Each Other

Oh and one more thing, we’re really obsessed with offering the best support! One big issue we found is that sometimes we need your website project files which can be BIG. So we built in a way to quickly share your project file with us. Simply click the little arrows in the projects window and select the ‘Send to RAGE Software Support’. Your project file will be automatically sent to us, no more using dropbox or other file transfer service.

EverWeb’s Mask tool is an easy way to hide part of an image without having to crop the image itself. Masking is great when you want to keep an image in tact. It’s also useful as you can reuse one image in a number of different ways so saving you time and effort. Here are some ideas on how you can get the most out of image masking…

First create a web page and style it as you wish. In the example below, we are using an online financial news service covering the Stock Market. The web page created has a newspaper style format. The web page illustrates that it’s been a good week on the Stock Market emphasising this by using the image of a bull to show a ‘bullish’ market.

Place the image you want to use on to the Editor Window by dragging and dropping it from it’s original source. Place and resize the image according to your own requirements.

The example web page shows the original image in the top right. Masks of the original image appear with different effects behind  behind the headline and in the second half of the page.

In our example, the complete image is shown in the top right of the page underneath the headline. We can now reuse the image in our news article. To do this, either select the image in the Editor Window and copy and paste it as many times as desired or drag and drop the image on to page as many times as you want from the Assets List.

These two methods use the same image file in the Assets List. Do not repeatedly drag and drop the image on to the Editor Window from it’s original source as all you will be doing is duplicating the file in the Assets List. It will also lead to slower page download speeds as well as you have to download multiple images and not just one image.

In our example, we want to isolate the bull in the picture and use just part of the image picture later on in the page. To do this, first select the image that you have copied. Next we will apply a mask.

Click on the ‘Mask’ button in the Toolbar at the bottom of the Editor Window. Alternatively, use Format-> Mask from the menu, or for speed, the shortcut key Shift+Cmd+M.

The Editor Window will now become somewhat opaque. This is the mask itself that covers the whole Editor Window. The square window at the centre of the image is the ‘unmasked’ area and is bordered with a dashed line. Notice that the image under the mask still has grab handles around it. This means that you can reposition the image  underneath the unmasked square. Click, hold and drag the image to where you want it, just make sure that when you start this operation that you do not click inside the unmasked square itself.

To move the unmasked square over the top of the masked image, click and hold the centre of the square and drag and drop it to the desired location. When you do this operation the unmasked square will then show grab handles around it.

If the unmasked square does not have grab handles around it, click once in the square. You will now be able to resize the unmasked square to show more or less of the underlying image. Click and drag the grab handle(s) to resize the square as you would do with any other object.

When finished, click in an area outside of the whole image. The masking will disappear and you will only see the part of the image that you defined in the mask. It’s important to remember to click outside of the whole image boundary for this to work correctly.

To remove the mask, select the masked image. The Mask button in the Toolbar will now be named as ‘Unmask’. Select this and the whole image will become visible again.

Masked objects are like any other objects and so can be moved, deleted, copied etc. You can add effects to the masked image using the Shape Options and Metrics Inspector options. In our example we have applied some Picture Frames,  changed the masked image shape style from a rectangle to an arrowhead and used the Full Width option to create the banner effect behind the headline.

Images can also be resized even when masked using the grab handles that appear when you select the image. As you do this, the mask will also change in size. This is useful if you find that your original masking was not ‘spot on’ and you need to do some slight readjustments without having to redo the complete mask.

In all other instances, if the masking is incorrect it’s best to unmask then apply the mask again. Additionally, avoid using ‘Undo’ and ‘Redo’ commands (e.g. if you resize the mask area then decide to undo the action) as this can have unexpected results. Finally, to mask successfully, do not move the masking square outside the boundaries of the original image as this may cause unexpected results.

The completed web page above includes four masked pictures and the original picture which should also save time on page download speeds. Masking is a excellent tool to use images in versatile ways whilst also adding design flair to your web pages.