Archive for the 'web site optimization' Category

Spring Clean Your EverWeb Project File!

Thursday, March 4th, 2021

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

EverWeb’s Replace Assets Feature Keeps Your Site Always Up To Date!

Thursday, February 18th, 2021

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

EverWeb Celebrates Its 7th Anniversary!

Thursday, November 12th, 2020

The last 12 months since EverWeb’s 6th anniversary have been incredibly busy as usual! We’ve packed a lot in to four point releases this year giving EverWeb even more great features, great enhancements to existing features, lots of optimizations and even a new product addon!

As we celebrated our sixth anniversary last November, EverWeb 3.0 had just been released. We celebrate our seventh anniversary with the recently released EverWeb 3.4!

Here are just some of the highlights from the world of EverWeb this past year…

Welcome Dark Mode!

One of the most dramatic additions to EverWeb over the last year was the introduction of Dark Mode which came to the product last December. This feature is available to any macOS version that supports dark mode and we think EverWeb looks absolutely gorgeous in the dark!

Parallax Scrolling and Color Overlays

One of the most visually stunning features to come to EverWeb in recent months is the new Parallax Scrolling feature which gives you a great sense of motion when used on full width images in your site. There is no set up needed, you just add your full width image then apply the Parallax Scrolling feature to it from the Shape Options tab!

There’s also a new color overlay option so that you can add a filter to your image. This is a great feature when you want to bring objects in the foreground to the front but need to subdue the background image a bit to do so!

Set Shape As Scroll Position

Scroll Position is a great way to add anchors to your pages in EverWeb. The feature was introduced before we added the Responsive Page Layout to the product, so Scroll Position would not work very well in a responsive website. Not anymore though, as we added a new Set Shape as Scroll Position feature to Scroll Position. Now it is super easy to add an anchor directly to almost any object, in any page layout type, Fixed or Responsive!

SEO Power Up Addon: Talking Your SEO To The Next Level!

EverWeb’s new SEO Power Up Addon takes your SEO to the next level. EverWeb SEO Power Up replaces our old Sitemap Automator product with new and updated features built directly in to EverWeb.

You can now add your own SEO Keywords directly into any page you want. You can also set the importance of your pages using the Priority field and the Change Frequency field tells crawlers how often you expect your pages to be updated. These tools let web crawlers know more about the pages of your site that are important to you.

EverWeb SEO Power Up also creates your website’s XML Sitemap file when you publish your site, and its robots.txt file which helps web crawlers know which pages they can, and cannot, crawl.

The addon is available to all EverWeb customers. If you host with us, you get the extra bonus of built in GZip compression which will make your pages load faster in your client’s browser window. If you have an EverWeb+Hosting 10GB or higher account, EverWeb SEO Power Up is totally free of charge!

To purchase EverWeb SEO Power Up just click on the ‘Optimize & Submit Website to Search Engines checkbox in your website’s Site Publishing Settings. A dialog box will appear to guide you through the purchasing process.

New Additions to Contact Form Advanced Widget

As always the Contact Form Advanced widget gets special attention and this last year was no exception. We added customizable Form Validation so that you can enter your own message if your visitor fails to enter required information in to the form.

In addition, you can now also forward your visitor to a specific page after they have submitted their contact form to you. There is also a new Transparency style available for your contact form,

New Additions for Contact Forms Enhanced Addon!

EverWeb’s popular Contact Forms Enhanced Addon debuted in EverWeb 3.0 creating a super easy way for you to retain contact form data when visitors to your site use its contact forms.

We had a lot of great feedback about this addon and this helped us to make the feature even better than ever. We added totally customizable confirmation emails, the ability to remove branding from submitted emails and most recently in EverWeb 3.4 new Calendar and Set Time Controls to give you more control, and style, over your contact forms.

More Ways to Find Things in Your Project File!

In the last twelve months EverWeb has added more ways for you to find almost anything in your EverWeb Project File. You can now use search to find the web page you want in your project, the asset you want to locate, the widget you want to use and the theme template you want to add. Just use the built in dedicated search boxes!

More Speed, More Optimizations!

As always we have spent a lot of time and effort to make working with EverWeb as fast and easy as possible, even if you have large website projects. We have optimized the performance of our built in widgets dramatically over the last few months as well as making the UI performance slicker than ever!

Publishing added a new ‘auto continue publishing’ feature so that if your website’s publish stalls, the process will automatically try again after a few minutes.

As always we are always optimizing the code that EverWeb generates to create your site so that it is the most efficient as it can be!

These are just some of the highlights of the last year for EverWeb. As usual, your input is always appreciated to help make EverWeb even better. So please tell us what you would like us to add to EverWeb, or improve upon, in the coming twelve months in the Comments Section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

New in EverWeb 3.4: SEO Power Up Addon, Parallax Scrolling, Image Overlays and Much More!

Monday, October 26th, 2020

We’re excited to introduce EverWeb 3.4 which brings a new parallax scrolling feature, image overlays, a new replace asset feature, calendar and time controls for the Contact Forms Enhanced Addon and the all new EverWeb SEO Power Up Addon which takes SEO Optimization to the Next Level!

You can also check out EverWeb’s new features in ourWhat’s New in EverWeb 3.4‘ video.

Which Version of EverWeb is For You?

EverWeb is available in the following versions:

  • If you are running OS X 10.10 or macOS Yosemite, El Capitan, Sierra, High Sierra, Mojave or Catalina, EverWeb version 3.4 is available for you.
  • If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 3.1 is available for you.
  • If you are running OS X 10.6 EverWeb version 2.5.2 is available for you.

When updating to the latest version of EverWeb, the update process will automatically download the correct version of EverWeb for your operating system.


EverWeb 3.4 Includes…

[NEW] A new Replace Assets feature. Right click on the assets to replace them and they will maintain the same name. You can do it for multiple assets and a new window will open up. If you try to replace the assets with a file from the Finder with the same name in that window, it will automatically match the existing asset with the new file

[NEW] SEO PowerUp Addon.

[NEW] New Fill options for shapes and responsive rows. You can scale images set to tile and original size. You can put an overlay color with a specified transparency.

[NEW] Parallax scrolling for image fill options set to tile or Scale to Fill

[NEW] You can drag and drop colors from the color selector control or right click to copy and paste colors in between controls

[NEW] You can now Hyperlink to the current page

[NEW] New Calendar and Select Time picker controls for the Contact Form Advanced widget

[NEW] Search Engine Optimization section in Page Settings tab of the Inspector Window.

[NEW] A new File-> Open Recent… menu option has been added so you can quickly access recently used project files.

[NEW] You can now access recently opened project files from the EverWeb icon in your macOS Dock.

[NEW] You can now access recently opened project files directly from the EverWeb icon in your macOS Dock.

[IMPROVED] You can now drag and drop images directly on to the Responsive Image Gallery widget in the Editor Window.

[IMPROVED] The Web Page Description field and Social Media Icon setting are now located in the Search Engine Optimization section of the Page Settings tab.

[IMPROVED] The default font size for text when creating a new project is now 16 point.

[IMPROVED] When selecting a default font using Format-> Default Styles… The Fonts Panel is now used to select the font, font size and font style.

[FIX] FlexBox video width bug fixed

[FIX] Fixes an issue with the Responsive Image Gallery Widget which could cause a crash.

[FIX] Fixes with the Font Panel

[FIX] Fixes with some widgets removing the focus from the design canvas after you select them

[FIX] Fixes with copying and pasting options between responsive rows

FIX] Contact Form Advanced form fields can be more easily re-arranged

[FIX] Non english characters in the MENU label for responsive navigation menus can now be used

[FIX] Pages that will never be added to a navigation bar won’t mark all pages as need to publish if they are modified

[FIX] Fixed issues with copying and pasting objects from in Responsive Row to another

[FIX] Fixed styling issue with PayPal styled Buy Now buttons in mobile devices

[FIX] Animation slider will update the preview as you adjust the settings

[FIX] Font Panel size field is updated properly

[FIX] Editing some widgets would remove the focus from the design canvas

[FIX] Fixed an issue with video sizes in FlexBox widgets

[FIX] Improved error reporting for FTP publishing

[FIX] Using the mousewheel scroll in the Inspector no longer freezes while the mouse is over a text entry field 

[FIX] Fixes issues with full width shapes that have borders

[FIX] Fixes issues for shapes that have different fill colors

How To Update To EverWeb 3.4

You can easily update EverWeb by either:

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

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon. Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

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

The update is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free update period from EverWeb’s Preferences window or from your client area.

If you have passed your one year of free EverWeb updates, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of updates and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

  • The EverWeb website which has up to the moment information in it’s new blogging section
  • New EverWeb videos on YouTube
  • The EverWeb User Manual in EverWeb’s Help-> User Manual menu
  • The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

7 Design Tips for Better Responsive Pages in EverWeb!

Friday, September 18th, 2020

Responsive Web Design is the website paradigm of today. Creating websites using scaleable pages was for a long time the holy grail of website design. And with good reason too, as if done correctly, pages created in this way look and work fantastically on all devices that they are displayed upon.

The problem with this concept though, are the words ‘if done correctly‘. Responsive Web Design is, in itself, a more complex design paradigm to get your head around than fixed width page designs. There’s also the matter of design freedom Many website designers prefer using fixed width page layouts, such as the centered page layout in EverWeb, as such layouts allow text, images and other media to be placed freely on the page. Responsive Website Design is often seen as more restrictive in this respect.

There are many pros and cons in both responsive and fixed width design strategies and there is no definitive answer as to which approach is better. However, it is usually best to build your website in the way that suits your website’s goals and requirements. From this starting point, the choice over which page layout style to use should be easier.

What is certain, though, is that Responsive Website Design is here to stay. If you have EverWeb 2.8 or higher, the responsive page layout is built in to the product.

For a full deep dive in to Responsive Web Design in EverWeb, check out our YouTube videos and the EverWeb User Manual which includes a dedicated chapter on Responsive Web Design. In addition to these resources, here are some EverWeb responsive page design tips to help you along the way.

  1. Update EverWeb to the latest version. Since the introduction of the responsive page layout in EverWeb 2.8, there have been many additions and enhancements to the tools that you can use to create responsive web pages. For example, the Metrics Inspector has added maximum content width, show on device and breakpoints. There is also responsive ‘Set shape as scroll position‘ which enables robust object hyperlinking in a responsive environment. The Shape Options tab has added full width background fill capabilities for full width widgets. The Responsive Row, FlexBox, Text Section and Responsive Image Gallery widgets have all been upgraded and most other widgets have gained full width capability.
  2. The FlexBox Widget Is Your Go To Solution! Designing a website means making lots of choices. In responsive page layouts, the FlexBox widget will probably be your widget of choice to make your page design the best it can be. When combining objects together, such as text and images or images, video and text, or when you need to add a button in to the mix, the FlexBox widget has the most options and flexibility. The widget can even be a great solution when you are using only type of object on your page. If you cannot decide which widget is best to use to solve your design issues, try the FlexBox widget first!
  3. Responsive Row Widget Overuse. Often the Responsive Row widget is used for everything even when it is not needed. Whilst the widget is a ‘jack of all trades’, using it when you do not need to complicates your design and adds unnecessary code to your page. Check out our ‘Responsive Row: To Use or Not To Use‘ blog for more hints and tips on when, and when not, to use the Responsive Row widget.
  4. Check Out Show on Device! Even though Responsive Web Design is the one page solution for all device types, you may find that sometimes you need a particular design solution for one, or more, device types. This is especially so when viewing pages on mobile devices where horizontal space is limited and you do not want a page height that has your visitor scrolling seemingly forever. EverWeb’s Show on Device feature lets you control when you see objects that are inside a Responsive Row widget. For example, your Responsive Row widget contains two images and a TextBox. The TextBox has a large amount of text within it. This is fine when viewed on a desktop or tablet computer. On a mobile device, however, you may want just a summary of the text instead. To do this, duplicate the TextBox in the Responsive Row widget. Edit the text of the duplicate to produce your summary text. Then go the Metrics Inspector and uncheck all of the Show on Device options except ‘Mobile’. For the original full text TextBox, uncheck Show on Device only for ‘Mobile’. In this way you will get the full text on all devices except mobile, and you will get the summary text only on mobile devices.
  5. Margins. Setting left and right page margins really comes in to play when your page is displayed on mobile devices where you do not want your content up against the left and right edges of the screen. Usually, setting a margin of about 30 pixels from the Metrics Inspector will give you enough left and right margin space. If you are setting margins for a Responsive Row widget, remember to make sure that the objects within still fit properly. Use Preview to test and reduce the width of any fixed width objects inside the Responsive Row widget if you need to.
  6. Maximum Content Width. As you increase the width of your browser, you may find that objects on your page get too spaced apart from each other. Using Maximum Content Width you can fix the width of the selected full width object to a specific maximum value. The objects inside the full width object will not stretch out beyond the value you set.
  7. Look for Simple Solutions. One of the things you should never forget when designing is that often we overlook simple solutions to design problems. For example, you may be tempted to add a full width TextBox in to a Responsive Row widget in order to get extra top and bottom padding. However, you do not actually need to do this as you can use the Insert Margin, Before Paragraph and After Paragraph controls in the Text Inspector to do just this. Remembering simple solutions will make your site easier to manage and maintain in the long run.

If you have your own tip on how to make a better responsive page in EverWeb, why not share it with the community in the Comments Section below. We would love to hear from you!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

10 Tips for Good Website Maintenance in EverWeb

Thursday, August 20th, 2020

When most people hear the words ‘website maintenance’ the response will typically be along the lines of “Tomorrow”, “I’m too busy”, “I’ll do it later” or something similar! Yes, it can be a dry subject, but it can be a very positive experience for both you and your website visitors. Here are some tips to help inspire you to do a bit of maintenance on your EverWeb created website from time to time!

  1. Update EverWeb To the Latest Version. The first action to take when talking about website maintenance is to download the latest version of EverWeb. Apart from new and updated features, there are always bug fixes and optimizations included in each release.
  2. Republish Your Website. In every release of EverWeb we look at getting code even more efficient! This applies to both the EverWeb app itself, and to the code that gets generated when you publish your website. For example, in EverWeb 3.3 the app itself should run faster and be more responsive. If you publish your entire site using the File-> Publish Entire Site menu option, you should also find that your web pages load quicker and are more responsive in use. In a Google Page Analysis, you should see page load speeds improve by 50% from EverWeb 3.2 to 3.3.
  3. Reduce the Size of Your Project File I. If your website has assets that are not used, and that you are never going to use, in your Project File, why not delete them? Deleting unused asset will reduce the size of the Project File so that it will be quicker to load when opened, and also faster to work with when opened. Click on the Settings Cog in the Assets tab and choose ‘Find Unused Assets’ from the contextual menu and follow the instructions.
  4. Reduce the Size of Your Project File II. Whist the Assets tab is open, why not check to see if you have any unnecessarily large image file assets in your Project. Large image files will drag down page load speeds and that is not good for your visitor experience. You should replace any large files with more web friendly versions e.g. if you have a large .PNG file, you could replace it with a JPG file which takes up less space. Reducing the size of large image files will improve your page load times in browsers, and will also reduce the size of your Project File.
  5. Use EverWeb’s BackUp Feature. Backing up your project file is something that you should always do. Sometimes this will be included in your computer’s backup (if you don’t back up your computer, please try to on a regular basis!) The EverWeb Backup process will allow you to backup your project files on a daily, weekly or monthly basis. EverWeb can also keep either 1. 5, 10, 20 or 100 backup copies. To setup your Backup, go to the EverWeb-> Preferences menu and select the BackUp option.
  6. Reclaim Some Disk Space. Like many apps, EverWeb generates cache files whilst you are using the app which are deleted when you quit. There are some instances such as when publishing or previewing, that these cache files are kept in order to help speed and performance. You can delete these cache files if you want e.g. if you have old, or abandoned Projects that are no longer on your computer, you can remove the cache files. You can also delete any unwanted Backup files that you may have. To delete these files, go to the EverWeb-> Preferences menu and choose the Backup tab. Click on the Manage Cache Files button and follow the instructions to remove the files that you no longer need.
  7. Out with the Old… EverWeb is constantly adding new and improved features to make your website development easier and quicker. This may mean that over time some of the features in your website may benefit from being replaced by such new or updated features. A good example of this is the PayPal widget. Before EverWeb 2.8, you would have to insert your product image, product description and PayPal widget as separate objects then align them. This is now no longer necessary as from EverWeb 2.8 there are now product image and description fields built directly in to the PayPal widget.
  8. Check your SEO. Over time you may find that the direction of your business changes. If this happens, you may want to double check that your website’s SEO is not outdated. It is easy to update the contents of your page, but often it is easy to overlook its SEO. If you need an SEO refresher, checkout the SEO for EverWeb Video Course.
  9. Update Your Website’s Content. Updating your website’s content should be something that is done on a regular basis. It is a good way to show existing and potential customers that you are still in business. Websites that are not regularly updated, or are not updated at all, give the impression that they are not invested in their visitors and so potential and existing clients have a greater tendency to click away from such sites. Updating your website’s home page and blog on a regular basis may help retain and even grow your business.
  10. Do Your Documentation! The last way to maintain your website is to document it. Even if it is bare-bones documentation, something is better than nothing. Think about the essentials that you need to document e.g. the style of your website (fonts, colors etc), your website links, the STMP Settings details of your Contact Form Advanced widget and so on. You may find that even noting down the very basics may one day pay off, saving you time, effort and frustration!

If you are goal oriented about website maintenance, you may find that you can maintain and grow your existing business. A little effort can reap rewards!

If you have a website maintenance tip of your own, please let us know in the Comments section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Responsive Row: To Use or Not To Use?

Friday, June 12th, 2020

The Responsive Row widget is a key resource for anyone building a responsive website in EverWeb. The full width widget is like a ‘bucket’ in that you can drag and drop other widgets, TextBoxes, shapes and images in to it. This is ideal for situations where you want to use widgets that are not full width capable, such as the PayPal widget, or when you want to combine different objects together in one row.

When the Responsive Row widget debuted in EverWeb 2.8, it was easy to see the widget as ubiquitous. However, since its inception, responsive website building in EverWeb itself has evolved as its feature set has expanded as have many of EverWeb’s widgets capabilities. So, is the Responsive Row widget still the Swiss army knife of responsive web design in EverWeb that it used to be? That is a difficult question to answer. Looking back over some of my early responsive website designs has given me some insight in to how things have changed and how it is possible to update already built websites to be more code efficient and easier to manage and maintain. Additionally, this new knowledge is also advantageous when building new websites as you will be able to do this more efficiently, creatively and in less time than before.

Where The Responsive Row Widget May No Longer Be Necessary…

Since EverWeb 2.8 there have been many feature additions and updates to EverWeb that make the reliance on the Responsive Row widget less than when it was introduced. Here are common things that we used to do, but can now do in a better way!

  • Navigation Menu Widget

When supporting customers we often find that the Navigation Menu widget has been placed inside of a Responsive Row widget when it does not need to be. If you want full width navigation, just drag and drop the Navigation Menu widget on to your responsive page. It will automatically be a full width object on the page so will automatically scale to the size of the page. Use the Responsive section of the Widget Settings to set responsive specific options for the navigation.

  • Background Colors

Initially, EverWeb’s full width widgets did not have the capability of a background fill color (except for the Navigation Menu widget) or image so had to be placed within a Responsive Row widget. That changed in EverWeb 3.0 so now you can add the full width widget of your choice and set its background color or image using the Shape Option tab’s Fill options.

  • Combining Objects

When starting out with responsive design, one of the most common things that many users want is to combine text with images. It is easy to use a Responsive Row widget to do this. Just add a Responsive Row widget to the page then add TextBox and images in to it. This is a perfectly valid solution, however, you will need to make sure that your text and images are narrow enough to fit on all devices. The smallest iPhone, for example, is the iPhone SE which has a width of 320 pixels. If you have set margins on your page, then you may find that you only have a usable page width of about 280 pixels. This is fine for an iPhone SE but on a desktop computer you may have a lot of white space on either side of your text and images.

A better alternative may be to use a FlexBox widget instead. You can add the image and text as separate embedded objects. This will enable you to set each object’s minimum and maximum width so that they scale properly on all devices. No more problems with too much white space and scaling issues. Use the Spacing option to add spacing between each embedded object. This option also pads the objects in the widget so you have less need to add margins.

  • Margins

Often a Responsive Row widget is used to add top and bottom margins to objects when it is actually not necessary. Here are a couple of examples:

The Navigation Menu widget: This widget has padding and spacing options in its Widget Settings to help frame the navigation properly within the widget. You can also set the background color of the widget too by checking the ‘Use Background Color’ option.

Text Boxes: It is easy to use the enter key to add a top and bottom margin to your full width text, but it is not always necessary. Instead, delete these extra carriage returns and go to the Text Inspector. Use the Insert Margin option to create top and bottom padding as needed.

  • Widget Alternatives

Sometimes you may find that you have to experiment a little to get the right solution e.g. when using a combination of text, images and buttons should you be looking at the FlexBox or Text Section widget? you may need to experiment to find out!

When reviewing one of my first responsive websites I found that I had used a Responsive Row widget with four images all of the same size embedded in it. I suddenly thought that I could, in fact, use the Responsive Image Gallery instead. I set the background color of the widget and my added in my images which now scale to any device instead of being stuck at 200px x 200px. The Gallery Padding option added an all round margin and the minimum and maximum width options ensures that the images always size and scale correctly without a lot of white space showing on larger devices!

When You Should Use The Responsive Row Widget

There are, of course, times when the Responsive Row widget is still going to be the ideal choice! For example, when using Fixed Width widgets such as the PayPal, Audio and FaceBook widgets, or when placing social media buttons on your page.

The Responsive Row widget is also a must if you are using EverWeb’s Show on Device feature or when you need to combine objects in to one row in a way that precludes the use of either the FlexBox and Text Section widgets.

There may also be times when the best way to create padding, or a margin, on your page is to use the Responsive Row. You may even find that there are times when using Set Shape as Scroll Position is more beneficial in a Responsive Row widget than in another object.

There are many ways in which you can forego using the Responsive Row widget. Doing so can make your web page easier to manage, more streamlined and less prone to faults and mistakes. However, with web design there is usually more than one answer to overcoming design issues, it’s just knowing where to look, a bit of experimenting and some out of the box thinking!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Introducing EverWeb 3.2! More Contact Form Advanced Features, Scroll Position Goes Responsive and Much More!

Friday, April 3rd, 2020

We’re delighted to introduce EverWeb 3.2 with more Contact Form Advanced widget features, giving you our most flexible and versatile contact form ever! There is also a new scroll position anchor feature for fixed and responsive pages, Master Page enhancements, pagination options for the Image Gallery Widget and much more!

The full list of what is new and updated is below as well as our ‘What’s New in EverWeb 3.2‘ video. Enjoy!

For a complete list of what’s new, improved and fixed, as well as how to upgrade to the new version, please see below!

Which Version of EverWeb is For You?

EverWeb is available in the following versions:

  • If you are running OS X 10.10 or macOS Yosemite, El Capitan, Sierra, High Sierra, Mojave or Catalina, EverWeb version 3.2 is available for you.
  • If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb 3.1 is available for you.
  • If you are running OS X 10.6 EverWeb version 2.5.2 is available for you.

When updating to EverWeb 3.2, the update process will automatically download the correct version of EverWeb for your operating system.

The EverWeb 3.2 Video

We’ve highlighted the main features of the release of EverWeb in our ‘What’s New in EverWeb 3.2‘ video. See below for the full release notes.

EverWeb 3.2 Includes…

[NEW] Contact forms can now send a confirmation email to the website visitor. The message is customizable and can include variables based on what the visitor has entered in the form. The default confirmation email includes an example. You can use any form control variable. This feature requires the Contact Forms Enhanced Addon and reCaptcha SPAM protection.

[NEW] Contact forms can forward the visitor to any page on your website after the form has been submitted.

[NEW] Contact forms can remove the “branding” in the submission emails (i.e. the links that ask you to upgrade or login to your account to download file uploads). This features requires the Contact Forms Enhanced Addon but it does not have to be selected in the Inspector or used in the form.

[NEW] Blog posts now include the ability to customize the previous/next post links at the bottom of the blog posts widget.

[NEW] Draft blog posts can now be sorted.

[NEW] You can now set an anchor name from Shape Options-> Scroll Position in the Inspector Window. Any object can be an anchor that you can link to in the Hyperlinks tab.

[NEW] You can set an anchor on any object using the Scroll Position Toolbar.

[NEW] The new Insert-> Set Selected Shape to Scroll Position… menu option can be used in both Fixed Width and Responsive page layouts.

[UPDATED] The Insert-> Scroll Position menu has been renamed to Inert-> Insert Fixed Scroll Position for clarity.

[NEW] Preferences-> Backup-> Manage EverWeb Cache option. EverWeb may have left over published cache and preview cache. You can now easily delete these cache files.

[NEW] Master Pages can be dragged in to the regular page list. This will create a copy of the Master page in the regular Web Page List.

[NEW] If you select a Master Page, all pages in the Web Page List that use that Master Page will be highlighted.

[NEW] The Image Gallery Widget now has pagination at the top, bottom and top and bottom.

[NEW] The Image Gallery Widget now includes similar styling options to the blog pagination feature.

[IMPROVED] Content area separators are now thicker so you can better see them between each section of the page.

[IMPROVED] If your project file has only one page in it, you are not allowed to delete that page as a project file must always contain at least one page.

[IMPROVED] More FTP failure error messages have been added.

[FIX] There was a social media image bug if you had a subdirectory included in the URL field. This has been fixed

[FIX] Various internal bug fixes.

[FIX] Fixes to enable the loading of some damaged projects.

[FIX] Issues where opening projects moved from other computers could lead to a ‘Cannot Connect to Network’ error message.

[FIX] PayPal widget issues causing generic PayPal error message to be displayed when the widget is used.

[FIX] When scrollbars are set to always be showing the Widgets tab list would jump from 3 to 2 columns.

[FIX] The Video Widget on responsive pages was not working properly after clicking the ‘Full Screen’ button then returning to regular size.

[FIX] Fixes for shadow not working correctly for rotated objects in fixed and responsive pages.

The following list of improvements and maintenance fixes were introduced in EverWeb versions 3.1.5 thru 3.1.7 and are incorporated in EverWeb version 3.2:

EverWeb versions 3.1.6 & 3.1.7

  • [FIX] Fixes an issue where the page color remained red (unpublished) in the Web Page List after a website has been published
  • [FIX] Fixes aContact Form submission issue experienced by some customers
  • [FIX] Fixes a rare crash when opening a project file
  • [FIX] Fixes issues when scrolling in the Inspector

EverWeb version 3.1.5

  • [IMPROVED] Significant improvements to Responsive websites on older browsers
  • [IMPROVED] Significant improvements to importing iWeb blogs
  • [IMPROVED] Fixed Width blog post page improvements when using background colors
  • [IMPROVED] Internal improvements for better compatibility with macOS Catalina
  • [IMPROVED] Improvements to Google Fonts and blog posts
  • [FIX] Fixed issues with some widgets using background images that were broken in EverWeb 3.1
  • [FIX] Undo after making a change to a widget under Inspector->Widget Settings updates the widget properly and the Inspector
  • [FIX] Fixes an issue for macOS Catalina users not being able to drag multiple files from the Assets list at a one time
  • [FIX] Fixes for rollover underline for hyperlinks
  • [FIX] Text Section widget fixes when placed within a responsive row
  • [FIX] Simple Contact form can have letters with accents in labels
  • [FIX] Fixed an issue with full width Contact Form Advanced Widget

How To Update To EverWeb 3.2

You can easily update EverWeb by either:

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

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon. Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

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

The update is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free update period from EverWeb’s Preferences window or from your client area.

If you have passed your one year of free EverWeb updates, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of updates and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

  • The EverWeb website which has up to the moment information in it’s new blogging section
  • New EverWeb videos on YouTube
  • The EverWeb User Manual in EverWeb’s Help-> User Manual menu
  • The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

EverWeb Website Tips for Business During COVID-19

Friday, March 20th, 2020

The spread of COVID-19 across the world has left the world reeling. Many people are now working from home as a result of the necessary restrictions that have been put in place by governments across the world. For many small businesses and self employed entrepreneurs, the financial consequences are possibly devastating.

There are many challenges ahead. How can you make best use of your time at home and keep your business viable?

These simple questions may have complicated answers, but with more people staying at home, the Internet is being frequented more than ever! So now may be the perfect time to develop, or update, your website project to get the word out to the world that your business is alive and kicking!

Team EverWeb Is Here For You!

As always Team EverWeb is here for you! Our 24 x 7 x 365 (ok, 366 this year!) remains in place to help if you need it. Please remember that to use our technical support you will need a current EverWeb support and product update license.

Alternatively, there is also the EverWeb Discussion Forum that you can use if you have any questions, or if you need to know how to do something specific in EverWeb, or have feature requests for the product.

In addition, there is also the EverWeb YouTube channel with hundreds of video tutorials and this blog, as well as those by third parties, such as All About iWeb, which should help you find what you need!

So, how can you make your website the most visible it can be on the Internet for your customers to see and interact with or to purchase from? Here are some tips to get you started…

Invest in Your Website’s SEO!

If you have not tuned your website for Search Engine Optimization, now may be the time to do so! You use SEO to help improve your Search Engine Ranking Page results. The better your SEO, the better chance of your website being higher up the page when potential customers are searching the Internet for goods and services.

The SEO for EverWeb Video Course takes you though the whole process so that your website is as optimized as it can be! There’s no magic involved in SEO and it does not cost any money to implement it either! Just some of your own time.

Your E-Commerce Store Needs You!

If your website includes an online store, now may be a good time to refresh its content and look. If you have a PayPal account, EverWeb’s PayPal widget takes the strain away from adding products to your site. You can now directly add in product images and descriptions from within the widget. You can also use your own button images, or styled text buttons, to get the perfect look for your website.

Remember that your customers do not need to have a PayPal account to be able to pay through PayPal. It may be worth mentioning this in your website that PayPal is just the payment provider, and that the customer does not have to have a PayPal account to purchase goods and services from you.

Although EverWeb supports PayPal, there are other E-Commerce stores and platforms that are also supported, such as E-Junkie, ECWID and Shopify. If there is an E-Commerce platform that you need supporting, please let us know in the Comments Section below.

Keeping Your Customers Updated!

Customer contact is especially important at this time for a number of reasons. First, you want your customers to know that you are still in business, second that your business is taking precautions over the Corona virus, and third, you can effectively update your clients on the products and services that you offer. Your products and services may be subject to change due to the current business trading environment, so alerting your customers as to what is available (and when), and to any possible alternatives, is a proactive step to take.

Maintaining contact with your clients is also important so that your business is not overwhelmed by customers asking questions. You may need to consider altering your home page, or adding a specific page or blog to your site to keep your customers up todate.

The Power of Contact Forms!

EverWeb’s Contact Form Advanced widget is the perfect way to for customers to contact you. The widget is highly customizable so that your contact form blends in perfectly with your website design. If you are using EverWeb 3.0 or higher, you can also purchase our Contact Forms Enhanced addon. This is the perfect companion to the Contact Form Advanced widget in that it allows you to store all contact form submission data in one safe, secure place in your EverWeb Client Area. The database of contact form submissions can be downloaded on a per form basis which will allow you to create an email address list. You could then use this list in e.g. MailChimp to email out to your clients your latest business news and updates.

Keep Your Social Media Options Optimal!

Keeping the communication between your business and your customers is paramount at this time. Remember to include the social media widgets and buttons that are relevant to your business in your website. Social media is a great way to communicate quickly and effectively. EverWeb includes FaceBook Like, FaceBook Page Timeline, Twitter, LinkedIn, Vimeo and YouTube widgets in the product with third party widgets also available for other social media platforms. There are also a range of social media buttons that you can use as well from EverWeb’s Insert menu.

If you have any of tips that you think might help other EverWeb users during these difficult times, please use the Comments Section below! Thanks!

Safe safe and well.

Team EverWeb

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Responsive Web Design in EverWeb: Make Your Pages Fit All Devices

Thursday, August 1st, 2019

Responsive Web Design is a great way to build a website in EverWeb that is consistent across all devices. You only need to design one page which will adapt to all device types. You no longer need to develop and maintain separate mobile pages in your website. The trade off, though, is that you have to put more care and attention in to your page design than you might have done before.

When developing your website, it may be easier to think of designing pages for use on desktop computers rather than designing pages for mobile devices. This makes sense, as it may be easier to take objects out of your design as you shrink the page down towards mobile device sizes, rather than adding objects in to the page as you upscale from a mobile page towards a desktop page size.

This design approach is generally fine, but can cause some problems when viewing your page on a mobile device. You may find that the page scrolls horizontally beyond the right hand margin of the mobile device creating a gap to the right of the page.

What Causes The Page to Drift Horizontally?

Ideally, the page should fit the horizontal dimensions of all devices it is displayed upon. The basic problem is that on a mobile device, a desktop page width is being used so the page does not behave in a responsive manner. There are a couple of easy ways to solve this problem which we will come to later, but first, it is important to discuss how the problem is caused in the first place.

Factoring In Minimum Device Width

One important factor to be aware of when designing responsive pages is the width of the smallest device that you are designing for. Typically the smallest device type that your website will be displayed upon will be an iPhone SE. The iPhone SE has a horizontal display width of 320 pixels so when designing your pages consider this value as it will help make your pages fit perfectly on the vast majority of devices, both mobile and desktop.

You usually do not need to consider maximum page width, unless you have objects that are too widely spaced out on the page. Our blog, ‘Using Content Maximum Width‘ delves in to this in more detail as does our video, Content Maximum Width, on YouTube.

When adding full width objects to the page, you do not need to consider minimum device width as such objects automatically scale to the available screen width. However, in some instances, you may need to check that the ‘Full Width’ checkbox is still checked in the Metrics Inspector. The ‘Full Width’ checkbox can become unchecked when using the Responsive Row widget. For example, when adding a full width widget inside the Responsive Row widget (e.g. a Text Section, FlexBox or Navigation Menu widget), be careful to make sure that the ‘Full width’ checkbox is still checked if you still want the object to be full width.

Usually, you do not need to add full width objects in to a Responsive Row widget, but there may be specific instances where you may want to do this.

If the object inside the Responsive Row widget is not at full width, it will actually be a fixed width object instead. So, for example, if you have a FlexBox widget that is 1000 pixels wide, on an iPhone SE you will be able to scroll 1000 pixels horizontally across the page.

To solve this issue, either check the Full Width checkbox in the Metrics Inspector to make the object full width or reduce the width of the FlexBox widget down to 320 pixels or less.

Minimum Design Width For Different Device Types

You may be thinking that objects on your page are now limited to a 320 pixel maximum width. Actually, this is not the case as some widgets will automatically scale content according to the device the page is being viewed upon.

The FlexBox and Text Section widgets are good examples of automatic scaling. For example, in the Widget Settings of the FlexBox widget, set Minimum Width, Default Width and Maximum Width values to ‘100%’ for images. This will scale the image properly on all device types. That is all you need to do!

Using Show On Device For Different Device Types

If you are not using widgets such as those mentioned above, you may need an alternative method to make sure that objects appear at the right size on all device types. This is where ‘Show On Device’ in the Metrics Inspector is very useful. For example, you have an image inside a Responsive Row widget that you want to display properly on all device types. Select the image and make it 300 pixels wide in the Metrics Inspector and check ‘Show on Mobile’ in the ‘Responsive’ section. Uncheck the other three Show on Device options. The image will probably disappear as it is only visible on mobile devices. You can see the image outline by using the Window-> Show Hidden Objects menu. Also, if you reduce the width of the Editor window enough the image will appear.

Add the same image from the Assets List into the Responsive Row widget. This time make it 600 pixels wide. In the ‘Responsive’ section of the Metrics Inspector check ‘Show on Tablet’ and uncheck the other three options. Again the image may disappear but you will see its outline displayed if you have the ‘Show Hidden Objects’ menu option set on.

Finally, add the same image a third time and make it e.g. 775 pixels wide. Check ‘Show on Desktop’ and ‘Show on Wide Desktop’. Uncheck the other two options.

When you preview the page, you will notice that as you shrink the size of the browser window, the image in the Responsive Row will be fit properly for all device sizes, i.e. 300 pixels wide on a mobile device, 600 pixels wide on a Tablet and 775 pixels wide on desktop and wide desktop devices.

Testing Your Responsive Pages

When finished, it is recommended that you preview the page in Safari’s Responsive Design Mode. Safari has possibly the best responsive design browser feature. To enable it in Safari, go to the Safari-> Preferences menu. Click on the Advanced button then check the ‘Show Develop menu in menu bar’ box. Close the Preferences dialog box. You will now see the ‘Develop’ menu in Safari’s menu bar. Use the Develop-> Enter Responsive Design Mode menu option to test your website’s pages against different device types.

Responsive Design can be challenging, but with a bit of thought and creativity, problems such as horizontal page drift can be easily resolved.

If you have a comment or question about this blog post, please let us know in the Comments Section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw