Mac SEO Blog

In the previous post, we discussed how objects are stacked in Fixed Width page layouts and how you can change the order of objects within the stack, even when you have a Master Page attached to your page.

In this post, we explore how objects in a Responsive Page Layout in EverWeb are handled when you are building your responsive website.

The Same but Different…

If you have been a long time user of EverWeb you will probably know already that when it first came out you only create websites with a Fixed Width Page Layout. This all changed in EverWeb 2.8 when the Responsive Page Layout was added.

One of the design goals that we wanted to make sure of was that you could use EverWeb with a Responsive Page Layout in exactly the same way as you did with a Fixed Width Page Layout. For example, adding a new page, editing a TextBox, drag and dropping objects, accessing menu options and and so on would all remain the same as before. This goal was achieved, however, the concept of Responsive Website Design is in many way different to Fixed Width website design. As such, whilst EverWeb works in the same way as before, the fundamentals of designing a Responsive website is distinctly different to designing a Fixed Width website.

…Different but the Same

If you are designing a Responsive website in EverWeb for the first time, take a look at EverWeb’s YouTube video site to help get your started, or the EverWeb User Manual within the product which has a whole chapter dedicated to get you quickly productive.

If you have already been using EverWeb’s Fixed Width Page Layout for your site, you may want to convert your existing site to a responsive one, or you may simply want to design a completely new site. These are the kinds of circumstances where you will quickly find out that everything is different but the same. Again, check out the EverWeb User Manual to get up and running quickly.

Object Handling in Responsive Pages

One major area of design difference is how objects are handled on the page. In a fixed width design page design, objects can be stacked one on top of the other. In a responsive page design this is not possible. For example, create a Fixed Width page then add a rectangle to it. Next add a triangle. The two shapes appear on top of each other so you will se the triangle as it is the same color as the rectangle that it sites on top of. You can change the color of the triangle e.g. to yellow, to see the two shapes clearly on top of each other.

Now go to the Page Settings tab and change the Page Layout from ‘Centered Layout’ to a Responsive one. You will see that the yellow triangle sits on the top row, the rectangle shape is below it on the second row and the EverWeb logo sits beneath the rectangle on the third row.

If you try to stack any of these objects one on top of the other, you will find that it is not possible. Instead the objects will appear move to a different row, again one on top of each other. Now try to move the bottom object further down the page so that it is on its own. You will see that this time the object just snaps back to sit under the second object.

In responsive design, stacking one object on top of another is not usually possible and all object rows in a page must be contiguous to one another. There are many reasons as to why this is necessary, but essentially it is because a responsive page is scaleable that it is a requirement that the page structure is maintained at all times, at any scaling point. Objects on the page have to stay properly contained within the page at all times, so one of the ways to achieve this is to have the objects ‘flat’ on the page rather than allowing them to be ‘stacked’.

Options! Options! Options!

The Responsive Web Design approach may be frustrating at first if you have come from a Fixed Width design background. It may take time to get used to how responsive design works and the pros and cons of it. Here are a few tips that may help you out…

1. Background colors and images. Most objects and widgets can have a background color, or image, added to them without the need for a background shape being added.
2. Group Objects Using the FlexBox and Text Section widgets. Placing objects near to each other can be easily achieved with these two widgets so it’s easy to group text, images and buttons together as you want.
3. Images. If you want to have a frame around an image in a responsive page, you can add a line to an image using the Shape Options tab. You cannot use a Picture Frame, however, as the frame is actually an image in its own right so adding it to an image would make the two images appear side by side. Instead, it is better to add a frame to the original image using an image editor then use this image in EverWeb instead.
4. Check Out Third Party Widgets. There are some great third party solutions from EverWeb Widgets, EverWeb Garden and that may give you the solution you need. Note that some of these third party widgets are free, some are paid for widget.
5. Graphics Editors. You may find that a graphics editor becomes more useful if you need to include a ‘stacked’ type object on your page. Export the complete image as a jpg or png file then drag and drop the image in to EverWeb.

Embracing Website Design Differences

Responsive Web Design offers a different way of developing your website and has many advantages over traditional fixed width designs. The advantages (discussed in the EverWeb User Manual) of responsive web design, however, makes the design approach more difficult. In some ways you may feel constrained in what you can do, as the example of stacking objects, illustrates. It’s a different paradigm, though. Once you start working with responsive pages in EverWeb, you will start to find that there are many different possibilities and solutions at hand. It is just thinking in a different way, out of the box, or maybe within a ‘boxes within boxes’ approach that typifies responsive web design.

As you may already know, an ‘object’ in EverWeb can either be a TextBox, shape, image or widget. To add a TextBox to the page, you simply click on the TextBox button in the Toolbar then start adding your text inside the box. To add a shape, you just click on the Shapes button then click on the shape you want from the thirteen available shape types. Images can be added to your page by drag and dropping them from your hard drive, cloud location, the Assets List or by using the Media button in the Toolbar. Last but not least, widgets can be drag and dropped on to the page from the Widgets tab. All nice and easy

Objects in Fixed and Responsive Page Layouts

EverWeb has two types of page layout: Fixed Width and Responsive. In the Page Settings Tab of the Inspector Window, you will see a section called ‘Page Layout’. If you click on the dropdown menu, you will see three page layout styles are available. The Left Aligned Layout and Centered Layouts are Fixed Width page layouts whilst the third page layout, Responsive, is used if you want to design a Responsive website.

Whilst the technique of adding objects to the page in either of the two page layout types is the same, the way in which objects are handled on the page can diff.

Object Stacking in Fixed Width Page Layouts

When you add an object to a page in EverWeb, it is as if you are adding a new layer on top of the existing layers of the page, in the same manner as using layers of tracing paper. To see this effect create a new Blank Home page in an EverWeb Project file. The Blank Home page uses a Centered Page Layout and has only one object in it – the EverWeb logo image located in the Footer section. To keep this example simple, delete the logo image from the page.

Now that the page is completely blank, click on the Shapes button in the Toolbar and add a rectangle shape to the page. Click on the Shapes button a second time and add a triangle shape. This shape will sit directly on top of the rectangle. As the triangle is the same color as the rectangle you might not see it, so go to the Shape Options tab and change the Color Fill to green. Now click a third time on the Shapes button and add a circle. The circle will sit on top of both the triangle and square obscuring a part of both of these objects. Again, use Color Fill to change the color of the circle, this time to red.

You can freely move the three objects around the page as you want – horizontally along the page’s x-axis and vertically along the y-axis. In this example notice that the circle always sits on top of the triangle which always sits on top of the rectangle. This ‘stacking’ of objects shows you the depth of each object on the page which occurs along the z-axis.

For the moment, you will find that you cannot change the depth order of the stack. This is reasonable as the page is viewed on screen as a two dimensional object rather than a three dimensional object.

Changing Object Order on The Page

Most of the time, you will not need to worry about the ‘depth’ of objects on the page, however, there may be times when it does become important. For example, you might want to place two shapes on top of each other to create, e.g. a player control button, which would be represented by a circle on top of a rectangle. If you add the circle shape first to the page then the rectangle shape next, you will find that the rectangle is always above the circle.

EverWeb allows you to easily change the z-axis order of objects by using the Arrange-> Bring Forward or Arrange-> Send Backwards menu options. The option you choose depends on which object you have selected. To save time, you can also secondary click on the object you want to change the order of then choose the option you want from the popup menu.

As you can see from the Arrange menu, you can also quickly move an object right to the top or bottom of the stack using the Arrange-> Bring To Front and Send To Back menu options.

Objects in Master Pages

So far, so good, but what happens if you have a Master Page attached to your page? In this scenario, the Master Page is treated as if it is another page underneath the page it is attached to. Master Page objects can be brought forward or sent backwards but only within the Master Page itself.

The page the Master Page is attached to sits independently above the Master Page. The objects on this page can only be stacked within the page itself. Again this usually is not a problem but there may be times where you want a Master Page object to be visible above all other objects e.g. a navigation menu widget. In this instance you can force the object to be at the top level of the stack by selecting it then selecting the Arrange-> Always on Top menu option, or by checking the same option in the Metrics Inspector.

You can apply Always On Top to multiple objects. Objects set this way will still have a stacking order too, so you can still use Bring Forward and Send Backwards when Always on Top has been set.

More About Object Stacking…

Knowing how and why objects are stacked will help to make designing your website easier. In the second part of this post, we will look at object stacking in Responsive Page Layouts.

Creating flexible, one page fits all devices, website designs is at the core of Responsive Web Design. EverWeb makes building responsive pages as easy as possible through its built in features, widgets and drag and drop capability. If you have built a fixed width website using a centered page layout, or are just new to web design and want to try out creating a responsive web design, you may find some challenges ahead of you…

A case in point comes when using images in a responsive page layout. As you scale the page, you can allow its images to automatically scale at the same time.

If this is what you want to happen but it doesn’t, what’s going wrong and how do get scalable images? In this post we will explore the background to images in responsive pages and explain how, with a bit of knowledge behind you, you will be easily be making pages with scalable images!

Adding an Image Directly on to a Responsive Page

Images can appear in a number of different ways on a responsive page depending on how and where they are added. For example, if you create a blank responsive page and drag and drop an image on to it in the Editor Window, you will see that the image occupies the full width of the page. Use the selection handles of the image to increase its height. When you preview the image, you should see that it scales as you change the width and height of the browser.

That is fine if you want your image to be full width across the page but often you may have one or more images that you want displayed on the page, but you do not want them full width.

Images in a Responsive Row Widget

Often images are added in to a Responsive Row widget as this widget is a great way to add fixed width objects to your page. And this is exactly what you have to remember… the images you add will be fixed width.

You can try this yourself to see the effect that it has on your page. First delete the image on the page if you added it from the above example so that your page is empty. Next, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

Once the widget is on the page, drag and drop an image inside the Responsive Row widget. Now go to the Metrics Inspector to check the width of the image. If the image is 350px or less wide, increase this to e.g. 600px wide. Make sure when you do so that you have ‘Constrain Proportions’ checked. If you preview the image, you will see that the image remains fixed in size. If you use your browser’s responsive design mode, you will be able to view the page as if it was being displayed on one of a number of different devices. For example, if you use Apple’s Safari Responsive Design Mode you can view the page as if it were being displayed on an iPhone SE, iPhone 8 or 8 Plus and so on. You should see that the image does not scale and also overlaps any device that has a screen width of less than 600 pixels wide.

the moral here of using a Responsive Row widget with images (or any other object for that matter) is that as the objects are fixed width, you may get problems on some devices if the image is too wide to be displayed properly.

Solving the Scaling Problem

So, how do we solve the problem of getting images to scale correctly and the knock on problem of having images always fitting within the width of all devices? The answer: The FlexBox and Text Section widgets!

Using either of these widgets will enable fully scalable images on your page. Choose the widget that best suits your requirements. In this example, we will use the FlexBox widget as it allows you to add more than one image at a time in the widget.

Start by deleting the Responsive Row widget from the page then add the FlexBox widget to the page. In the Embedded Objects section of the widget, click on the Add button below the ‘Embedded Objects’ list. Set the Object Type to Image.

Scroll down to the Image Settings section and click on the ‘Choose…’ button to add your image. Next, You delete the text that you see in the Styled Text Editor further down the page so that you just have the image on the page. Lastly, scroll back up to the Object Sizing Options section of the widget.

The important fields to use in this section are the Minimum and Maximum Width fields. If you set the Maximum Width as zero, the image will take up the width of the screen that is available to it from the Minimum Width value upwards. So you could make the Minimum with 250 (which will likely suit the smallest mobile phone) and leave the Maximum Width at 0. You could also set the Default Width to the same value as the Minimum Width.

Preview the page to see the effect. You should see the page scale correctly at all time. If you use your browser’s responsive design mode, you will also see that the page width will alway fit within the device it is being displayed upon.

Once you have tested your page, try adding a second Embedded Object to the FlexBox widget using the same parameters as above. Alternatively, duplicate the image and experiment with the Minimum and Maximum width values.

When using the Minimum value, it is usually a good idea to use a hard number e.g. 250. In this way you will more than likely accommodate the smallest mobile device. For the Maximum value, you could leave it as zero or even use a percentage value e.g. 95% of the width available to the object.

You can also add margins to the left and right side of the widget using the Margin fields in the Metrics Inspector which will keep the image away from the edges of the browser. There is much you can experiment with here so the advice is to start simple!

With a little bit of widget knowledge, it is easy to create great scalable images in your website that fit within any device they are displayed upon!

There are many ways in which you can link to email in EverWeb. There are a variety of ways in which you can either open your email app for your visitor to create a new email or use a predesigned for from within a page of your website.

Here are some ways in which you make linking to email work effectively for you…

Using The Hyperlinks Inspector

The most common way to link to email is by linking a piece of text or an object, such as a shape or an image, to an email app using EverWeb’s Hyperlinks Inspector:

1. First select the object that you want to link the email app to
2. Go to the Hyperlinks Inspector and check the ‘Enable as Hyperlink’ box to activate the settings.
3. Change the Link To: dropdown menu option to ‘An EmailMessage’.
4. Enter the email address that you want the email to be sent to in the To: field.
5. Enter the subject of the email in the Subject: field.

That is all that you need to do! When you preview or publish your website, when the visitor clicks on the Hyperlink, their email app will open with the To: and Subject: fields already filled in.

Using the Contact Form, or Contact Form Advanced, Widget

EverWeb includes two Contact Form widgets. The Contact Form widget debuted in EverWeb 1.0 and is a very basic form. The Contact Form Advanced widget premiered in EverWeb 2.0 and supersedes the original form. This Advanced form continues to gain new and improved features, whilst the original Contact Form remains to be used for legacy purposes.

We highly recommend that you use the Contact Form Advanced widget as it is a lot more secure than the original Contact Form widget. The advanced form also offers a lot more features and flexibility so that you can design just the form that you want to fit the style of your website!

By default, both contact form widgets include an email address field which should be filled in straight away with a valid email address where the form will be sent to when the visitor hits the ‘Submit’ button. The original contact form only includes four input fields at most whilst the Advanced form allows you to create any number of fields, each of which includes its own form control type. The Advanced form also allow you to send confirmation messages that the email has been sent as well as customizable form error checking messages and reCAPTCHA anti-Spam capability.

Using The Styled Text Editor in Widgets

The Styled Text Editor is included in the FlexBox, Text Section and PayPal widgets. You can add a link to an email app from within the Styled Text Editor using the following method:

1. Highlight the piece of text that you want to link to email.
2. Click on the Link button in the Styled Text Editor’s Toolbar.
3. To add just a ‘Send To’ email address enter
   mailto:emailaddress.com
in to the URL field. Replace ’emailaddress.com’ with the email address that you want the email to be sent to.
4. You can also include a default Subject heading by using this line in the URL
   mailto:emailaddress.com?subject=My subject 
In this instance, replace the email address as described above then change the text ‘My Subject’ to the text that you want to be displayed in the Subject field when the visitor’s email app opens.

Using the Link Field in Blog Posts

As with the Styled Text Editor, you can add email links in to your blog posts in exactly the same way, using the Link button in the Blog Post Editor.

As you probably already know, as well as the Blog Post Editor, there is also a Blog Post Preview window below the Editor window. If you add objects in to this window they will appear in all of your blog posts. Therefore, this is a good place to put objects such as an email link button. In this case,

1. Click in the location in the Blog Post Preview Window where you want to add your email link button, e.g. in the Footer.
2. Add an email icon to the Blog Post Preview Window using the Insert-> Button-> Email Me menu option
3. Use the Hyperlinks Inspector to add the link to your email app to your button.

Using the Built in Link Button in Widgets

The last way in which you can add links to your email app in EverWeb is through the ‘Link’ button in EverWeb’s FlexBox and Text Section widgets. In these instances you can add links to your email app when your visitor clicks on an image or button that you have added to the widget. Use the same method as for linking to the Styled Text Editor, as described above, to add your email link.

Adding a link to email is easy in EverWeb and knowing a couple of tricks along the way can also help take your website design one step further!

Adding animation to your website can add flair and fun to your site. Animating an object on your page can also serve a practical purpose as a ‘Call To Action’ for your visitors. By drawing a visitor’s attention to a particular object, such as a button, you may help increase the likelihood of the visitor clicking on the button.

About Animation Effects in EverWeb

You can use animation effects in any page layout type in EverWeb, Responsive or Fixed Width, by selecting the object you want to animate, clicking the Animation box in the Shape Options tab, then applying the animation effect that you want. you can apply an animation effect to most objects in EverWeb, the exception being the Image Gallery widget.

EverWeb includes sixteen different styles of animation of which six, Bounce, Fade, Flip, Rotate, Slide and Zoom, can have additional have directional control added to give the effect movement within the page. The movement controls are From Top, From Left, From Right and From Bottom.

Each animation can have a duration set, in intervals from 1/10th of a second up to 60 seconds. The longer the duration, the slower the animation will play out. You can also add a time delay before the animation starts, again from 1/10th of second, this time up to 100 seconds. Delay is useful when you have a number of objects that you want to activate in a timed sequence. Finally, you can set the animation to repeat, from one time only to up to 100 times.

Animation in Fixed Width Sites

When using animation in a Fixed Width (i.e. Centered or Left Aligned) Page Layout style, you can use all of the animation’s directional controls (From Top, Left, Right and Bottom) if using one of the six animations styles mentioned above. For example, you could have animated clouds crossing the page from left to right, or have titles drop in from the top of the page.

In addition, as you can stack objects on top of each other in a fixed width page. you can create ‘reveal’ effects by using the Fade animation style. This is a ‘Fade In’ animation so you can use it to make a fade out by creating a rectangle shape in the same color as the background and have it fade in over the object that you want to disappear. Check out our Animation Effects Part One and Part Two YouTube videos for more information on what you can do with animation!

Animation in Responsive Websites

Animation works in the same way in Responsive Page Layouts as it does for Fixed Width Page Layouts except for a couple of differences. The first thing is that it is not possible to stack objects in a Responsive Page Layout as you can in a Fixed Width layout. However, you can use the Fixed Position setting in the Metrics Inspector to fix a full width shape in place that can fade in over a full width shape placed over it. This will achieve a fade out effect.

The second thing to be aware of is that when using any of the six animation styles that include directional control, you should avoid using ‘From Left’ and ‘From Right’ direction controls. When using these direction controls, the object itself is placed at the left or right starting point of the animation from which it then moves in to the page when the animation begins.

As such, the object will be outside of the page’s left or right margin prior to being animated and so the page width will be greater than the width of the browser it is being displayed in. The result is that the page will drift horizontally to the left or to the right within the browser window instead of being fixed in place.

The third thing to be aware of is that when using a Responsive Row widget, you can add the animation to the widget itself and to the objects inside it. This may help you produce some interesting effects, but testing is vitally important to ensure that your animations work correctly on all device types!

Conclusion

Using animation in EverWeb’s responsive page layout style can provide some great effects to your page. However, it is important to thoroughly test your page to make sure that the animation you want works correctly under all circumstances. The best way to test is to always preview your page. If your browser supports responsive design mode, you should be able to test your page on a variety of different device sizes to see whether it holds up or not. If your browser does not support responsive design mode, it is recommended to use Apple’s Safari browser which does support this feature.

When using EverWeb you pretty much have everything to hand that you need to build a website but sometimes you may want something extra for your site. Perhaps you want better security, or you want to sharpen your site’s SEO, or you want to use the data gathered from your contact forms. EverWeb’s Addons are here to help you get even more out of EverWeb!

Site Shield Addon

EverWeb’s Site Shield Addon is designed for EverWeb + hosting customers who want a secure to transmit data across the internet to all of the devices your website visitors may be using. The ‘end to end’ data encryption of data is provided through the use of HTTPS (HyperText Transfer Protocol Secure) in place of HTTP.

WhyEverWeb Site Shield Addon Is Important

There are a number of reasons why EverWeb Site Shield Addon might be important to your website:

1. Your data is end to end encrypted across the Internet protecting you from ‘Man in the Middle’ attacks;
2. Sensitive data, such as financial data, confidential data, web shopping carts or medical data, is safely and securely transmitted;
3. Site Shield Addon will help improve your SEO rankings. For example, Google prioritizes HTTPS sites over non-secure HTTP sites;
4. Using Site Shield Addon also makes Google Analytics more effective as Referrer data is saved which is not the case if you only use HTTP;
5. Site Shield Addon builds trust with your potential and existing customers. The Padlock symbol that appears beside your URL in a visitor’s browser search box indicates that the site has secure end to end data encryption enabled. This visual symbol is a great way to let your visitors know that you take data security seriously;
6. Installing EverWeb Site Shield Addon is really easy, you just tick a checkbox in EverWeb’s Site Publishing Settings screen! There is no configuration needed. Just publish your entire site once you have checked the ‘Use HTTPS Secure URLs’ checkbox.

To purchase EverWeb Site Shield Addon, just check the Use HTTPS Secure URLs’ checkbox. A dialog box will appear which will guide you through the purchase process.

Contact Forms Enhanced Addon

EverWeb’s Contact Form Advanced widget debuted in EverWeb 2.0 as a replacement for the original Contact Form widget. Whilst you can still use either widget in your site, the Contact Form Advanced widget is:

1. More Secure than the Contact Form widget through the use of SMTP Settings in the Widget Settings.
2. Has 17 different Form Control types so you can control and customize data input in to the form just as you want.
3. Improved SPAM protection. The use of forms in a website is one way in which SPAMmers can infiltrate your email box with SPAM. EverWeb’s Contact Form Advanced widget uses Google’s reCAPTCHA to help reduce this attack vector.
4. Enhanced Form Confirmation and Submission Settings are included so that you can highly customize your form. You can even forward your visitor to a different page in your site once they have clicked on the form’s submit button.
5. Advanced Form Error Validation helps guide visitors if they have not filled out the form correctly and try to send it to you.

The EverWeb Contact Forms Enhanced Addon Advantage

These above features make the Contact Form Advanced widget the perfect tool for form creation in EverWeb. The Contact Forms Enhanced Addon, introduced in EverWeb 3.0, seamlessly integrates with the widget and offers the following advanced features:

1. Easily manage your Contact Form data from within your EverWeb Client Area.
2. Reporting on your Contact Form data is also easy and customizable.
3. Contact Form data can form the basis of mail shot campaigns by exporting the data out in to CSV format.
4. Contact Form data is securely stored on EverWeb’s Servers.
5. Use ‘Calendar’ and ‘Select Time’ Form Controls to create your own in-form calendar which can be used as the basis of a booking system.
6. Your customers can upload files to you from within the form using the ‘File Upload’ Form Control.

To purchase EverWeb Contact Forms Enhanced Addon, add the Contact Forms Advanced widget to your page then click on the ‘Contact Form Enhanced Add-on’ field then click on the ‘Add Contact Form Enhanced Features’ menu option. You will then be guided through the purchase process.

EverWeb SEO Power Up Addon

The most recent addition to EverWeb’s collection of add-ons is SEO Power Up, which debuted in EverWeb 3.4. The new add-on builds upon EverWeb’s existing built in SEO features to giving you more customization options to fine tune and focus your SEO.

EverWeb SEO Power Up lets you add your own keywords to individual pages, set the priority of your pages for SEO purposes and the frequency in which web crawlers crawl your pages. You can even designate pages in your site that you do not want to be included in SEO.

To purchase EverWeb SEO Power Up, just go to our secure online store.

More features will be added to SEO Power Up in the upcoming EverWeb 3.5, as well as a host of new features including site wide search, so check back on our blog or go to the EverWeb Forum for the latest news!

When you start to build your first website you may or may not, already know about SEO. It may be something that is extremely important to you. It may be something that you have no idea at all about. It may be something that you think might be important to you but it is shrouded in mystery that it seems almost magical or mind bogglingly confusing.

In this post, we are going to demystify SEO and explain what it is and why it can be important for you to implement it in your EverWeb created website.

What Exactly is SEO Anyway?

SEO is an acronym for Search Engine Optimization. SEO is a method by which you tune, or optimize, your website to its best advantage to Search Engines, such as Google, Bing and Alexa. The better you optimize your website, the better the chances are that your site will appear higher up in search engine results rankings.

When you enter a search term in to your browser’s search box, the search engine behind it (e.g. Google) will present you with a set of ranked results based on your search criteria. Simply put, you use SEO to improve your chances of ranking higher up in these such search results. As such, SEO can also be thought of as a process that is applied to your website. SEO is not hardware. SEO is not software. SEO is a methodology that you apply to your website.

Should Everyone Use SEO in Their Website?

Typically, you will want to apply SEO to your website if you run any form of business. Equally, you will probably want to apply SEO to your site if you just want it to be more visible on the Internet. On the other hand, you may not want to apply SEO at all to your site e.g. you may have a site just for personal reasons so it is not important for you to try to reach as many people as possible with your site.

Reasons to Apply SEO to Your Website

1. Potentially higher rankings in Search Engine Results Pages. When done correctly, SEO will improve your rankings.
2. Your Audience will be able to find you more easily! SEO is good to use as you can target the words that you think visitors will search on. If done correctly, your (potential) audience will find you more easily!
3. Customer Reach: SEO can be a great way for potential new customers to find you!
4. Better Customer Reach translates to more traffic to your site.
5. SEO Is Free! You do not have to pay anything to apply SEO to your site. You should not have to pay anyone to apply SEO to your site!
6. Improves Brand Awareness. Even if someone does not click on your website link in a search results set, the fact that you are visible may bring them back later to your site.
7. The effect of SEO can also be measured from your site’s statistics so you can adjust you SEO to see what works and what does not work.

Investing in SEO in Your Website

Just like building a great looking website, SEO is an Investment – and it should be thought of as a long term investment. As your business grows and develops over time, so your SEO should be in step with your business at the same time.

As part of the SEO process you will use Keywords, or phrases, in your website to help search engines focus on what you think is important. These Keywords may need to change over time as your business changes. It is, therefore, always important to remember that your website is a dynamic tool and your SEO should be too.

SEO As a Dynamic Concept

Your business will probably change over time due to internal and external factors. The same is also true of SEO which is not static concept but a dynamic, evolving concept. Changes in SEO usually relate to changes made by search engines as they adapt to our ever changing browsing habits. For example, a few years ago, Google decided to prioritize searches made on mobile devices over those made on desktop devices. It seems obvious now that the priority for search has changed with the growth in mobile device usage over the last ten years.

EverWeb is always looking out for changes in the way the search engine giants change the dynamic around search. One such change, for example, comes in the upcoming EverWeb 3.5 which will automatically add Open Graph Tags if you have purchased EverWeb SEO Power Up addon.

How to Begin with Your SEO Journey…

SEO in EverWeb has always been baked in to the product which means that you usually do not need to focus on it if you do not want to. If you do want to apply SEO to its best effect in your site, the best way forward is to use our SEO for EverWeb Video Course. This concise course guides you through how to apply SEO to your site’s best advantage.

EverWeb gives you most of the tools that you need to implement SEO but you can go further using our SEO Power Up addon. This addon allows you more customization options than ever so that you can prioritize what you think is important for your site’s SEO. The addon also provides more information to search engines about your site’s pages, their importance and priority. Check out the link above for more details.

Using SEO in your site can be advantageous to your business if used in the right way and if you invest in it for the medium to long term. There is no mystery around SEO either, just some easy knowledge building and experience to find out what works best for your site!

One of the most important aspects of web design is your content. The text that you use tells your visitor a lot about your website, your company and its company culture. The way you present your site’s text itself also acts to visually reinforce these characteristics.

There are many ways in which you can style your text in EverWeb, from the simple TextBox to widgets that use the Styled Text Editor to EverWeb’s own blogging environment. Then there is also the Text Inspector which allows you even more styling options for your text.

Why Use the Fonts Panel?

All of the above features allow you to style text and some of these features offer unique properties, such as indented quotes in blog posts, or Text Direction in the Styled Text Editor. There is, however, always one tool that is always available to you at all times: The Fonts Panel.

In addition to its availability being ubiquitous in EverWeb, the other big advantage of the Fonts Panel is that it has the most amount of text styling features that you can find in one place. That is a valuable asset to your workflow when building your website! Save time and effort by doing most of your Text Styling in one place rather than having to flip from, for example, the Text Inspector to the Shape Options tab to Color Picker

Accessing The Fonts Panel

Accessing the Fonts Panel is easy. Click on the Fonts button in EverWeb’s Toolbar. To make things even easier, though, just press the Font Panel’s Command+T shortcut key instead. This will toggle the Fonts Panel on and of at the touch of a button.

You can access the Fonts Panel at any time. You do not have to have any text selected either, so the Fonts Panel can always be sitting there, ready for when you need it. If there is ever a time where you know you have called up the Fonts Panel but cannot find amongst the windows on your desktop, just go to EverWeb’s Window menu. At the bottom of the menu select ‘Fonts’ from the bottom of the list. The Fonts Panel will come to the foreground.

Working with the Fonts Panel

The Fonts Panel dialog box has most of the options that you will ever need to style your text. Choose your text font from the Font Family column, the font weight from the Typeface column and the font size in the Size column. To get exactly the right font size that you want, overtype the number that is highlighted under the word ‘Size’.

Why Use Collections?

You can also collect fonts in the Fonts Panel together in to a Collection, which you can then access from the column on the left hand side of the Fonts Panel. This is useful if you want to have certain fonts and typefaces easily available for your EverWeb website Project. You may, for example, want to have a specific Font Family and Typeface for your page’s title, subheadings, footnotes and so on. Grouping Fonts Family and Typefaces in one Collection gives you a quick, easy solution that will save you time and effort.

Adding A Collection to the Fonts Panel

To create a Collection

1. Click on the ‘+’ symbol in the bottom left hand corner of the Fonts Panel.
2. A new collection called ‘New-xx’ will be created where xx is a sequential number e.g. New-11. Double click on the new Collection name and rename it e.g. with your project file name.
3. Next click on the ‘AllFonts’ collection which is at the top of the Collections column. All the fonts on your system will now be listed.
4. Select a Font Family, and Font Typeface that you want to add to your new Collection e.g. Helvetica, Bold. Use the Search box to quickly find the Font Family if you need to.
5. Your Font Family, Font Typeface should be highlighted in their respective columns.
6. Next, click on the Settings Cog in the bottom left hand corner of the Fonts Panel.
7. Choose ‘Add to Collection’ then click on the name of your collection from the list. The font will be added to your collection.
8. Repeat the process for all the specific fonts styles that you use in your Project file.

You have now added specific Fonts Families and Font Typefaces to your collection. You can now apply these to your text selections. Once you have applied the font family and typeface from the collection, the only thing you will need to do manually is to select the font Size.

Alternatively, you could set up one Collection per Font Family/Typeface to represent your project files page titles, Subheadings etc. For example, you could create a Collection called ‘Title’ that has just a Helvetica Bold font in it. Another Collection, ‘SubTitle’, could have just one item in it e.g. a Helvetica Light Oblique and so on…

Adding a Default Body Text Style

As you may already know, you can set up a default base font family, font style and size in EverWeb so you do not need to add this in to your own Collection.

Use the Format-> Default Styles… menu option. When you click on the Body Text font, the Fonts Panel will appear if it is not already visible on screen, Change the Font Fa mily, Typeface and Size to the new default that you want. If you want to change the font color default, use the specific option ‘Body Text Color’ in the Default Settings dialog box and not the color swatch in the Fonts Panel.

When you have finished, remember to click on ‘Save’ to apply your changes. Any new TextBox, new widget that you add that uses the Styled Text Editor, or new blog post that you create will adopt the new default settings.

Other Uses of the Fonts Panel

One of the useful features of the Fonts Panel and its Collections is that you can immediately see which fonts are web safe. If you have downloaded Google Fonts, you will also immediately which Font Typefaces the font has.

The Fonts Panel is where you can apply other formatting features, such as Strikethrough, to your text. There is also an option for text shadowing so that you do not have to go to the Shape Options tab to achieve the effect that you want. With the Fonts Panel, it is all on one place.

Once you have finished styling your text using the Fonts Panel, just press Command+T to toggle for the dialog box to disappear!

For those of our users in the Northern Hemisphere, spring is on its way which usually means it is time to do some spring cleaning after winter and get in to shape for the summer. So, why not do a little bit of spring cleaning on your EverWeb website project file as well?

When you create your website you will undoubtedly modify some of your ideas along the way. You may even find that you need to make sweeping changes as some of your initial ideas just don’t translate as well as you thought they would when you actually come to build your website’s pages.

Building a website can lead to lots of abandoned, and modified, ideas. It can also bloat your website project file size if you do not do some maintenance on a regular basis. So, keeping cleaning up your project file’s assets is worth doing on a regular basis.

Why Project File Maintenance is Important

There are a few reasons why maintenance is important and good to do once in a while:

1. Smaller Project File, Faster Initial Loading. As project files grow, they will take more computer memory when loading so will tend to load slower over time as they get larger in size. Keeping your project file size down will help it load faster.
2. Smaller Project Files Make Editing Your Project Faster. With each version of EverWeb we optimize its code and find ways to make important tasks such as page editing, previewing, publishing and published page responsiveness even more better than before. The other way to keep EverWeb’s performance excellent is to keep your project file is ‘mean and lean’ with a well designed website that uses optimized assets.
3. Regular maintenance of your project file will also get rid of any clutter that you no longer need in your site. This makes it easier to organize and manage your assets.

The Clean Up!

1. Check for Unused Assets: The first part of cleaning things up is to check to see if you have any assets that you are not using and will not be wanting to use in the future. To find these assets, just go to the Assets tab and click on the Settings Cog. From the dropdown menu that appears, select ‘Find Unused Assets…’ If Assets are found, they are highlighted in the Assets List. You are also asked if you would like these Assets removed, which is an action that cannot be undone. If you have any doubts, click ‘No’. The unused assets will still be highlighted so you can manually decide which ones to keep or delete. Deleting assets you do not need will reduce the size of your project file.
2. Check the Size of Your Image Asset Files. Whilst on the Assets tab, click again on the Settings Cog. This time, select ‘Sort by File Size…’ This will sort the files in descending order of file size, so the largest file will be at the top of the list. Are there any files that are appear to be very large? As you probably know, if your page contains large image files, this will will drag on the loading speed of the page in a browser. Where you have large files, try reducing the dimensions of the image in an image editor (even Apple’s Preview will do) e.g. some stock images can be 5000 pixels wide when you typically only need image widths of about 1920 wide or less in your site. Furthermore, you can reduce the resolution of the image e.g. the image may be 600dpi when in a browser you may be able to use an image of 72-170 dpi without any noticeable loss in image quality. Once you have reduced the size of the image, you can use EverWeb’s Replace Asset feature to substitute the smaller image file for the larger.
3. Manage Your Cache Files: Typically you will not usually need to manage your cache files, but if you are a bit low on hard disk space, you may find this useful to check, especially if you have a large project file. Go to the EverWeb-> Preferences-> Backup tab. Click on the ‘Manage Cache Files…’ button. You can choose to clear the EverWeb’s Preview and Publishing caches. Note that these files will be regenerated the next time you preview or publish your site. The last option is where you can clear your Backup files if you no longer need them. Remember, however, that if you delete the backup files they be moved to your computer’s Trash can from where they will be deleted according to your computer’s emptying trashcan schedule.

Remember: Keep Your Site Up To Date

Spring cleaning your site every once in a while is a good thing to do to keep everything working properly. If you have replaced some files to reduce the size of your project file and to help with page loading times, you may want to publish the full site using the File-> Publish Entire Site menu option. This can be especially useful if you have updated your version of EverWeb as your whole site will benefit from the new version’s optimizations!

And don’t forget, whilst doing maintenance on your site, check for things that may be out of date or need updating in your content. For example, if you have copyright notices on your pages, remember to update the year every year to keep up to date. If you’re site has news, now is a good time to update your home page and share the news! or is it time to update your blog with a new post. And don’t forget to give your SEO a freshen up too! In a changing world you need to keep your site fully optimized at all times!

Remember: Keeping your site fresh is the best thing you can do to keep your visitors coming back!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

The new Replace Assets feature that debuted in EverWeb 3.4 is a small but incredibly powerful addition to EverWeb‘s feature set.

Why Use Replace Assets?

Replace Assets simply replaces one image asset with another and is beneficial to use for a number of reasons:

1. The feature replaces all instances of an asset in your site with the new asset that you have chosen. This includes where the asset has been used in widgets e.g. in EverWeb’s Image Gallery widgets, or even the FlexBox and Text Section widgets.
2. The replacement asset inherits the attributes of the original asset. This is incredibly useful as it means that you do not have to do any reformatting in your website.
3. The ‘One Stop’ Replacement. You save time and effort as you only need to replace the asset once. This can be an incredible boon if you need to regularly replace an asset in your site with an updated asset.

Caution!

If you replace an asset with another, you cannot undo this action. It is therefore recommended that you have a copy of the original asset stored somewhere in case you make a mistake and need to undo your asset replacement. The good news is that you can always replace a replaced asset with another asset.

It is also recommended that you backup your EverWeb site before you use Replace Assets. You can set regular project file backups in EverWeb-> Preferences which is recommended anyway. You can also instantly backup your project file at any time by clicking on the up/down arrows to the right of the project file name in the Projects window, then selecting ‘Male Backup…’ from the dropdown menu. Follow the instructions given in the dialog boxes to complete the backup.

How to Use Replace Assets

The replace Assets feature is super easy to use.

1. First go to the Assets tab in the Inspector Window in EverWeb.
2. Secondary click on the asset that you want to replace.
3. If you are not sure that you have selected the right asset, either click and drag the asset a little bit out of the Assets tab, or use the Preview Eye to see what the asset is.
4. Once you have secondary clicked on the asset, select ‘Replace Asset…”
5. Locate the asset that you want as the replacement then click ‘Open’ to finish.
6. The asset will be replaced.

Usage Cases for Replace Assets

There are many different ways in which you can effectively use Replace Assets to help save you time and effort, now and in the future!

1. Rebranding: If you have updated your company branding, Replace Assets is the ideal one hit solution to updating your brand. For example, just replace your old company logo with the new one in the Assets List and the logo will be updated throughout your website.
2. Change of location: If you have images of your business location in your site that need updating after an office
3. Frequently Updated Images: Some websites have a fast turnaround of their content. If you are using image based content that needs replacing e.g. daily, weekly or perhaps monthly, then using Replace Assets could make this task easier.
4. Making Text Importing Easier. If you import text in to your site on a regular basis, it may be easier to save this as a PDF file in the source app then use Replace Assets to replace the old PDF text with the new in your page in EverWeb. This will save you time formatting the text every time you import it in to EverWeb.
5. Multi-lingual Websites. Sometimes you may have two websites that are essentially the same, for example you have a multilingual website. The pages for all languages are essentially the same in terms of layout and images, widgets used, social media icons etc. The only difference is the language the content is written in. If you need to update your images across each language site, Replace Assets will make this process a lot easier. Especially if all the pages for each language are in the one project file.
6. In a similar vein as multi-lingual websites, you may find that you update two similar project files with the same images e.g. you may have online help pages for an app that is available for Windows and for the Mac. As there are some differences between the two operating systems you may have started by developing one website project file for the Mac app. After completing the project file, you may have duplicated the project file for the Window version of the product, as this is quicker and easier that building it from scratch. Replacing the images in the Windows project file is easy, just use replace assets to replace the Mac images with Windows ones!

Tips on Using Replace Assets

Here are a couple of tips on using Replace Assets:

1. As mentioned above, make sure you have made a backup copy of your project file in case you need to rollback your changes.
2. Always have copies of the original images that you are going to replace at hand in case you make a mistake and replace the wrong asset.
3. Take care in naming your assets. Make sure to name your assets so that you can easily recognise each asset. This will make the replacement process easier, especially if you will be replacing assets on a regular basis. It will also reduce the risk of replacing the wrong asset by mistake. Usually it is best to follow the naming practices as outlined in our SEO for EverWeb video course, so that you better your SEO and have user friendly file names!

EverWeb’s new Replace Assets feature, is a small addition to the product that will save you time and effort, both now and in the future!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram