Mac SEO Blog

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!

Gumroad is a website that brings ‘super simple commerce to creators’. Creatives specialising in films, courses, music, books, comics and other genres use Gumroad to easily sell their products on line.

Gumroad includes a simple set up, a heavily optimized purchase experience and backend tools to analyse your sales data, manage your customers and build your audience.

Integrating Gumroad with EverWeb

Integrating Gumroad with your EverWeb website is easy as there are a number of ways in which you to do this. Such flexibility means that you can sell your products in whichever way is best for your existing and potential online audience. If you want, you can also sell physical goods as well.

When you begin using Gumroad, you will first add a product to your profile. When you add your first product, you will eventually come to the Share Your Product screen…

If you have previously added a product, go to the Products menu, then select the product that you have already added, then select the Share menu option.

There are three ways in which you can link to Gumroad from within your EverWeb website.

Using a URL Link

The first method is by adding a URL link in to your site. Use the ‘Copy URL’ button in the ‘Share your product’ screen to copy your product link to the Clipboard. 

Next go to your page in EverWeb where you want to place the link. You can use a EverWeb’s Hyperlink Inspector to link the Gumroad URL to a piece of text or an image, or you can add the link to a link button in, for example, the FlexBox Widget.

When using the FlexBox widget, select the Embedded Object that you want to attach the link to in the Widget Settings. Next, scroll down to the Link button in the Button Settings section of the widget. Click on the ‘Link’ button and paste the Gumroad URL in to the URL field. Click OK to finish then preview, or Publish, your page to test the button.

Using Gumroad’s Overlay Widget

The second option is to use Gumroad’s Overlay widget. Using the Overlay widget allow your website to have inline purchases without having to leave your site. You can customize the widget’s button text and there are also options to automatically trigger a payment form and to allow single product purchases.

Once you have set your text and options, click on the ‘Copy’ button to copy the generated code to the clipboard 

Next go to the page in EverWeb where you want to add your product. If you are using a Responsive Page Layout, you will first need to have a Responsive Row widget on your page. If you do not have this widget on your page, drag and drop it on to the page and position it where you want it.

With the Responsive Row widget in place, go back to the Widgets tab and drag and drop the HTML Snippet widget on to the page. In the HTML Code box of the widget, paste in the code from the clipboard. Click on the ‘Apply’ button when done. The Editor Window will update. Preview or publish your site to test.

Using the Gumroad’s Embed Widget

The last option is the Embed widget which lets you embed your products in to your website. This is also a useful option if you do not have an HTTPS website. 

Select the Embed widget option and, as before, use the ‘Copy’ button to copy the code to the clipboard.

As with the Overlay widget option above, you will again need to drag and drop an HTML Snippet widget in to a Responsive Row widget on your page. In the HTML Code box, paste the code from the clipboard and press ‘Apply’ to finish. The Editor Window will update. Preview or publish your site to test. 

If you are using a Centered or Left Aligned page layout, you can add the HTML Snippet widget anywhere on your page. The Responsive Row widget is only needed for the HTML Snippet widget when using a Responsive Page Layout.

Watch The Video

Check out the link below for a video walkthrough that shows you how to link your Gumroad products in EverWeb.

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’s third party provider community continues to expand with the recent arrival of EverWeb Garden. This new third party provides additional widgets to supplement those that are built in to EverWeb already.

At launch, EverWeb Garden has about 60 widgets to choose from with more to follow. At the moment these widgets are free as they are in a limited time beta test period.

A Broad Choice of Widgets

EverWeb Garden not only has a large number of widgets ready at launch, but the widgets themselves are great for enhancing your website. The widgets have a modern design approach and are highly customizable to suit your needs and match the look and feel of your website. Below is a short summary of some of the categories and widgets that are available.

Media Themed Widgets

There are a host of media themed widgets available such as the Soundloud widget . This widget lets you copy a song’s URL from SoundCloud with the SoundCloud widget, and add options such as download, share and buy buttons as well as adding the song’s artwork.

The EventBrite widget allows you to sell tickets for events and lets your customers purchase from within your site.

Other media themed widgets include Video, YouTube and Flickr Galleries and customizable Plyr audio, video and Vimeo player widgets.

Widgets That Work With Data

If you have ever wanted a table, list, pricing grid or piechart in your web page, EverWeb Garden has you covered with widgets to meet these needs. There’s even a calendar widget too. Again these widgets offer easy and full customizations.

New Style Navigation and Notification Widgets

There are plenty of navigation themed widgets to suit almost all website needs including a fly-out menu, Hidden menu and fading navigation menus. If you want to catch your visitors attention, there are also popup notification widgets available.

Enhanced Design Widgets

If you want your site to really shine, there are new widgets that just do that by displaying images in cool new ways, a variety of sliders and there’s a tabs widget, tip cards and a lonely card widget to add extra pizzaz to your pages!

E-Commerce Widgets

If you have a PayPal account you have two E-Store widgets to enhance your product listings.

More About EverWeb Garden

EverWeb Garden at launch will feature different yearly Standard, Advanced and Pro plans. The Pro plan, for example, will include custom widget development, standard and premium widgets as well as an ‘early widget access’ and priority support.

If you download EverWeb Garden widgets during the beta test period, or purchase them directly once they are out of beta, remember that for any support on these widgets, please contact EverWeb Gardens directly.

So, sign up now for a wealth of free widgets before the beta test period ends, the clock is ticking!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

One of the things that we always strive for in EverWeb is to make things as simple as possible. Usually this means trying to apply simplicity to often complex tasks of features. Take responsive web design in EverWeb as an example, where we made something that is conceptually difficult easy for EverWeb’s fixed width website builders to grasp. The new responsive paradigm takes EverWeb users to a new level of website building!

The PayPal widget is another great way in which complexity is simplified. The widget lets you build your own e-commerce store with Buy Now, Add To Cart, View Cart and Donate buttons without having to go in to PayPal itself. Many of the most commonly used PayPal options are immediately available in its Widget Settings.

Simplicity in EverWeb also comes in ways in which we only really appreciate when we discover them. In EverWeb version 3.3 we have added a very simple new way to update widgets simultaneously. This, of course, is a great time saving feature, especially when e.g. you need to update multiple PayPal widgets on your web page with a new look ‘Buy Now’ button.

How To Simultaneously Update Widgets

When it comes to simultaneously updating your widgets, there are a couple of things to note. The first is that you can only simultaneously update widgets of the same type e.g. only PayPal widget or only FlexBox widgets. The second point to note is that you can only update widgets on a per page basis.

With the above rules in mind, updating is easy. Using the PayPal widget provides a perfect example, because if you have an online store page in your site, updating each individual PayPal widget with e.g. a new ‘Buy Now’ button can potentially take a long time!

All you need to do is to select all of the PayPal widgets on your page that you want to update. Once they are all selected, go to the Widget Settings and, in this example, change the button style from say the default ‘Buy Now’ button to either a Custom Pay Button Image or a Styled Button. Once you make the change, all of the selected PayPal widgets will update.

This feature is very useful in the PayPal widget as you can also easily change your Form Alignment all at one time, change the shipping fees or even update the email address used for PayPal in the widget.

One important point to note is that you should be careful about what you are updating. Staying with the PayPal widget as an example, if I decided that once I have new buttons, I could update the font use in the Product Description. If I highlight my text and change the font, hey presto! All of the PayPal Widgets selected will have their font update. They will also have their text updated too! So caution is advised when using this feature. In this example, you can try to back out of the change by using the Undo command (Cmd+Z).

One Thing Not To Forget!

The above example shows what can happen if you forget to deselect the widgets after you have made the wholesale changes that you want. Remember that once you have finished updating your widgets, click on a different part of your page to deselect the widgets!

New Feature, Old Feature!

Whilst being able to update the same type of widget simultaneously is a new feature for EverWeb’s widgets, this feature has been a staple for other object types such as TextBoxes, Shapes and Images since EverWeb 1.0. Typically, you can change most aspects of the selected objects using the Shape Options and Metrics Inspectors. When updating TextBoxes, it is possible to update the text font without the text being updated at the same time. In this instance, you can only select all of the TextBoxes. You cannot select the text within more than one TextBox at any one time. Once you have selected the TextBoxes you want to update, click on the Fonts Panel button (or use the Cmd+T command) and change the font to the one you want.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

If you have either a small or large EverWeb built website, you will find much to enjoy in our recent EverWeb 3.3 release. Much work in this release has been focused on ‘under the hood’ improvements to make working with EverWeb and your published website faster than ever!

Improved Speed and Optimizations!

For EverWeb 3.3 we looked at every area of the product to see where we could apply optimizations to make creating your website faster and more responsive than ever!

Performance improvement start when opening your project file which should now be quicker. Adding a new page to your site will be snappier, editing a blog post smoother, and previewing and publishing are quicker than ever.

EverWeb in general should be smoother as the Editor Window now refreshes faster when you update any field or setting in the Inspector Window. When resizing the EverWeb app itself, you should also see a faster refresh too.

We also took time out to re-engineer EverWeb’s widgets so that you get speed improvements of up to 700% in the Editor Window’s refresh performance when updating the Widget Settings. This improvement also translates to your published website, especially if you use a responsive page layout. Your pages will load faster, regardless of whether you are using EverWeb’s built in widgets, or those from a third party provider.

Performance improvements have also been applied to blogging where you should see a more streamlined experience when adding new posts and editing posts.

How To Speed Up Your Website

For your website to benefit from the speed improvements in EverWeb 3.3, all you need to publish your complete site using the File-> Publish Entire Site menu command. When you do this, EverWeb now will now delay some webpage scripts from loading leading to a significant improvement in the performance of your website. Your website visitors will see the benefit and there is also the bonus that this improvement will help boost your search engine rankings!

EverWeb’s New Search Options

As well as speed improvements and optimizations, you can now search your project file for almost anything! EverWeb’s new search features will save you time, especially if you are working on a large project file that includes a lot of pages. EverWeb’s new search abilities start when you add your first page to your project file. If you know the name of the Theme Template that you are looking for, you can quickly find it using the search box in the bottom left hand corner of the Theme Template Chooser dialog box. Alternatively, you can also use predictive search. When the Theme Template Chooser appears, start typing in the name of the Theme Template that you want. As you type, EverWeb will ‘home in’ on the template that you want.

Search has also been added to the Widgets tab in addition to the Assets tab. This is an especially useful option for those who have a lot of third party widgets installed. Searching for the widget you want has never been quicker or easier!

You can now also search for the page that you are looking for using the new search feature that is at the bottom of the Web Page List. Again this is a feature that will typically be of most use in large website project files. Searching for the page you want when you have a project file full of nested folders and hundreds of pages is now simple and easy.

Retracing Your Steps

If you ever need to retrace your steps when working in EverWeb, you can now step through the pages that you have already visited in your current session by using the forward and back arrows to the left of the Web Page List’s search box. This is a useful feature when, for example, you want to track changes that you are making to a number of different pages in your site and you can’t remember which pages you have already changed. Just step through the pages you have already visited using the back and forward arrows.

Finding and Replacing Your Words

Whilst Find and Replace is a long standing feature of EverWeb, it usually does not get too much coverage. However it is a great time saver that may be easily overlooked. If you need to find, or replace, words on your page, just use the Edit-> Find menu option, or the Command+F shortcut key, to call up the Find Panel. Enter the characters that you are looking for, then click on the Next button. As you would expect this feature works like it would in a word processing app, so you can also Find and Replace, either incrementally or using the Replace button, or globally on the page using Replace All. Note that this feature only works on TextBoxes, so it will not work where you have text within widgets or in blog posts.

Blog Search

Although not a feature of EverWeb itself, you can now let your visitors search any blog that you may have in your site. EverWeb PowerUp now provides a free to use Blog Search widget! You can find out more, either directly from the EverWeb PowerUp website or find out more in All About iWeb’s ‘EverWeb PowerUp Adds New Free Blog Search Widget!‘ blog post.

EverWeb 3.3 is a highly recommended update as it brings speed improvements, code improvements and EverWeb wide search capabilities!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

We’re delighted to introduce EverWeb 3.3 which includes new ways to search for Theme Templates, widgets and pages in the Web Page List. There are also dramatic optimizations which will make EverWeb faster to use and also make your website faster for your visitors too. Get improved Google page speed grade of up to 50%

EverWeb 3.3 is a big under the hood update! For a complete list of what’s new, improved and fixed, as well as how to upgrade to the new version, please see below,

You can also check out EverWeb’s new features in our ‘What’s New in EverWeb 3.3‘ 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.3 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.3 Includes…

[NEW] You can now search Widgets.

[NEW] You can now search in the New Templates Window.

[NEW] You can now search Web Page List files.

[NEW] The new Page Navigator under the Web Page List lets you easily return to the last page(s) you were working on.

[NEW] Holding down the Option key and expanding a directory in the Web Page List will expand all directories within that directory

[NEW] The Popup window (found in the Hyperlinks Inspector) is now responsive.

[NEW] Selecting an image in a blog post is now reflected in the Assets List.

[NEW] The Image Gallery Lightbox effect when clicked upon is now responsive.

[NEW] You can now duplicate buttons in the Text Section widget.

[NEW] EverWeb can now update multiple widgets of the same type at once from the Inspector->Widget Settings

[NEW] The Contact Form Advanced widget has a new Transparent style.

[NEW] The Contact Form Advanced widget lets you specify the height of the Text Area control.

[NEW] PayPal widget now includes a second Options list

[NEW] Added MYR currency to PayPal widget

[NEW] Visual modifications to all select asset buttons. You now see the name of the selected asset.

[IMPROVED] The Color button in the Toolbar now behaves differently based on what is selected e.g. If a shape is selected, using the Color Picker will change the background color. If a TextBox is selected, using the color picker will will change the text color.

[IMPROVED] Pagination in the Image Gallery widget and blog archive will scroll to the top when used to change page.

[IMPROVED] All Youtube videos are https now.

[IMPROVED] Styled Text Editor in the Inspector will get a default height if none is specified in a widget.

[IMPROVED] Widgets have been optimized helping websites load faster.

[IMPROVED] Widgets should preview much faster when updating settings from the Inspector.

[IMPROVED] Faster code to update Widgets from the Inspector.

[IMPROVED] Improved Page and Browser Background drawing so it is much faster in the Editor Window. Tiled images should be faster so dragging objects within the design canvas will be faster.

[IMPROVED] Image Slider has had its code updated

[IMPROVED] Typing in the Blog Post Editor should now be faster

[IMPROVED] The Blinking caret in text objects new as a slight shadow added to it so that it is easier to see when used with dark backgrounds

[IMPROVED] Blog page titles in Google will now show any quoted text in the blog title

[IMPROVED] Improved Contact Form error messages if the user doesn’t have PHP 5.6 on their server.

[IMPROVED] The Ruler now looks more like that of Apple Keynote.

[FIX] The Page Layout label for Responsive Page Layout was incorrectly labelled as Dynamic Width in some languages.

]FIX] Fixed some FTP publishing issues.

[FIX] Minor bug fixes for the Contact Form Advanced widget and the Image Gallery widget.

[FIX] The required field for the Contact Form Advanced widget’s checkbox and radio button controls now works.

[FIX] Fixed an issue where rulers could cover the Design Canvas

[FIX] Some Theme Templates that use the Image Gallery and some of EverWeb’s other widgets would not load properly. The Theme Template now loads properly when adding a new Theme Template page.

[FIX] The Page Background-> Image ->Scale to Fit on mobile phones now works in the same way as on desktop devices.

[FIX] Fixed issues with full width objects within the Responsive Row Widget.

[FIX] Image gallery popup windows now appear above the navigation bar

[FIX] The Image Gallery widget will now drag properly from the ‘move’ icon in the upper right hand corner

[FIX] Shapes in the Footer Section that are aligned with the Footer top in Master Pages were not getting exported to the Footer

[FIX] Fixed an issue with copying text with links whose anchor text contains fancy quotes ‘’ or “”.

[FIX] Fixed pasting of text into a Widget’s Styled Text Editor.

[FIX] Using the Test Connection button then closing the EW Window no longer shows an error saying something is publishing.

[FIX] Copying text that has hyperlinks in it from other sources such as iWeb or your browser won’t extend the hyperlink for the entire paragraph.

[FIX] Some Contact Form inspector issues fixed, specifically with the Text Area control

[FIX] Images that did not have a retina version may have drawn differently in previous versions of EverWeb. Images now draw exactly the same in EverWeb as they do when you publish your site to a browser.

[FIX] Opening projects built on a retina machine and bringing them to a non-retina machine or vice versa works better now and loads any widget much faster.

How To Update To EverWeb 3.3

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.

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

Shopify is an online platform that helps build your business ‘all from one place’. Shopify aims to help you with all aspects of your online business from sales and marketing to support and management. It is an approach that now reaches over 1,000,000 businesses in 175 countries. 

Although Shopify offers a one stop shop for online businesses, this may not always be the best option. Many established online businesses may just want to use Shopify only to increase their market reach. Other businesses may prefer not to put all of their resources in to one platform in order to reduce business risk and increase business resilience.

Integrating Shopify with EverWeb

Integrating Shopify in to your EverWeb website is best done through Shopify’s Buy Buttons as they can be directly added in to your website’s pages and blogs. The buttons can include images, a description of the product and the price of the product. If you update your product in Shopify, the The Buy Button in EverWeb will also be updated.

Before You Begin…

There are a couple of things that you should check before starting to add Shopify Buy Buttons to your EverWeb website

1. You have products in your Shopify Admin and
2. These products are available to the Buy Button Sales channel. 
3. Shopify Payments has been activated. If this feature has not been activated, a transaction fee will be levied against each customer purchase that uses a Buy Button.

Adding A Shopify Buy Button To Your Site

There are two forms of Shopify Buy Button: for one product (and all is variations) or for a Collection. 

To create a Buy Button for one product

1. Log in to Shopify then go to the Shopify Admin screen
2. Click on ‘Buy Button’. Choose the option to ‘Create Buy Button’. In this example choose ‘Product Button’ as this button will be for one product only.
3. Next select the product that you want to use the button with from your catalog. The search function can be used to quickly find the product you want if you have a lot of products in your catalog.

Buy Button Customization Options

The next step is to apply customization options to the button. Where you have different variations for your product, you can choose to select either ‘All variants’ or select just one variant.

The color of your Buy Button, its size and its font are all customizable. Any changes you make can be previewed at any time.

Choosing The Buy Button Layout Style 

For the Buy Button layout, you have three options to choose from:

• Basic: Only the button itself is displayed. 
• Classic: The button is displayed with a product image and price
• Full View: The button is displayed with a product image, price and description.

Once you have selected the button layout of your choice, the next decision you need to make is to decide what you want to happen when the customer clicks on the button. Again, there are three options:

• Add Product to cart
• Direct to checkout
• Open product details

The last option, Open product details, allows customers to view the product description, select any available product variants, and add the product to the shopping cart. If your product has multiple images associated with it, these will also be displayed. This Open product details type will not available if the ‘Full View’ layout style has been selected as it includes these details already.

Note that when a customer clicks to go to the Checkout, Shopify will by default, open a new browser window. If you do not want this, go to the Advanced Settings and change the ‘Redirect in the same tab option’.

Click on ‘Next’ to complete the Buy Button setup!

The final step is to click on ‘Copy Code’ which will copy the Buy Button code to the Clipboard which you can then use in EverWeb.

Creating Buy Buttons For Collections

If you have products in a Collection, creating a Buy Button will add a button for each product in the collection. The collection’s Buy Buttons can be customized in the same way as for single product buttons.

Adding Buy Button Code Into EverWeb

The last step in creating the Buy Button was to copy the button code to the Clipboard. You can now use this code in your EverWeb website project file.

1. Go to the page in your website project where you want to add the Buy Button.
2. In the Widgets tab in the Inspector Window, drag and drop the HTML Snippet widget on to the page.
3. Click inside the ‘HTML Code box’ then paste the code from the Clipboard.
4. To make sure that the changes are applied you must click on the ‘Apply’ button. You will see that the Editor Window will be updated.
5. Size anYou can now move and position your ‘Buy Button’ around the page as desired.
6. When you have completed your changes, publish and test your website.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Customer service plays an ever more important part of our digital lives. Whenever ordering or buying something online, or sending in an email enquiry or complaint, we expect to have immediate feedback that our request has been received and acknowledged. Confirmation is key in the digital day. We all want to keep track, and have acknowledgement, of what we have done!

As a business you will want your website to be slick, saving your visitors time and unnecessary clicks. Contact forms are a great example where visitors often have to perform extra unnecessary clicks to get out of the contact form once they have sent it!

EverWeb‘s Contact Form Advanced widget is the perfect tool to automate your customer service experience as well as delivering a professional end user experience at the same time. EverWeb 3.2, released in April 2020, has added new features to the Contact Form Advanced widget that give you new, flexible options to better automate and personalize the contact form experience for your visitors.

Customizable Confirmation Emails

The first new feature in the widget gives you the ability to send a confirmation email to your website visitor once they have submitted their contact form. Scroll down to the Confirmation Email Settings section of the Widget Settings where you will find the ‘Send Confirmation Email’ box. Check this setting then edit the ‘Confirmation Email Subject’ field as you want.

The next field down is where you can customize the Confirmation Email message. The message is customizable so that you can include data from the ‘Form Controls’ section further up the widget settings. The format used is % sign followed by the form control name in lower case followed by another % sign. For example, if you have a form control of ‘Name’ you would enter %name% in the Confirmation Email box so that the customer’s name appears in the message.

When adding your own form controls to your message, use lower case even if the form control is capitalized. If the form control has spaces between words, e.g. ‘Email Address’, leave the spaces in when adding the form control to the message e.g. %email address%.

If you want to include all of the fields that are in the Form Controls section then use %allformdata%.

To use this feature you will need Contact Forms Enhanced Addon and reCaptcha SPAM protection enabled.

Page Redirection After Form Submission

Once your visitor has submitted their contact form to you they will be left on the contact form page. Why not redirect them automatically to another page instead, such as the Home page of your site? This is now easy to do in EverWeb 3.2. In the Form Submission Settings section of the widget is the new ‘Forward To Page’ option. You can choose to forward your visitor to any page in your site, or even to a blog post if you want to!

New Email Branding Options

Right at the bottom of the Contact Form Advanced widget’s Widget Settings is the new option Remove Account Login Links in the Misc Settings section. You can use this option when you want to remove the ‘branding’ that is included in the submission emails. Checking the box removes the links that allow you to login to your EverWeb account to manage your form submissions, search, export as CSV and download visttor file uploads. To use this feature you will need to have purchased the Contact Forms Enhanced Addon, however this does not have to be selected in the Inspector or used in the form for removal of Branding to work.

Customized Form Error Validation Messages

One other useful feature you can use to personalize your contact form is using your own error message text when required fields in the form have not been filled in. This feature debuted in EverWeb 3.1 and can be found below the Submit Button section of the Widget Settings.

Adding automated personalization features using EverWeb 3.2’s new features in to your contact form is a great way to professionalize your business in a simple, convenient way.

…and we will be introducing more Contact Form Advanced widget features in the upcoming EverWeb 3.3 so stay tuned!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram