Mac SEO Blog

EverWeb’s Responsive Page Layout has many ways in which you can work quickly, easily and effectively to achieve the page design you want. Responsive website design means that you can immediately create a web page for desktop, tablet and mobile devices using just one page design. The challenge, however, is to make sure that what you create looks great on whatever device you are viewing the page upon.

Fortunately EverWeb makes this challenge easier for you as its Responsive Page Layout, widgets and other features introduced in version 2.8 are designed specifically to do as much of the work for you whilst still giving you design freedom. There is, of course, some learning required along the way and knowing about the background to responsive design in EverWeb will help in your responsive website design if you are used to creating only fixed width web pages. Here are some tips to help get you started on building a great page design suitable for all device types:

1. Use EverWeb’s application boundary: By dragging the right hand vertical edge of the EverWeb application left and right, the page layout will adjust in the Editor Window so you can see how the page will look on all device types before previewing or publishing;
2. Widgets: EverWeb 2.8 updated many of its existing widgets so that they can be used as full width objects on a responsive page. The Navigation Menu widget was also updated with Responsive features that can be applied to both fixed width and responsive page layouts. The PayPal widget, which is a fixed width widget, was updated too introducing product image and product description features making the widget even more indispensible for both fixed width and responsive pages.
3. New Responsive Widgets: EverWeb 2.8 introduced the Responsive Row, Text Section, FlexBox and Responsive Image Gallery widgets. These new widgets are extremely flexible in what they actieve so exploring what is possible with each is highly recommended. You can also find out more about their capabilities on this blog and on our YouTube channel.
4. Compatibility: Nearly all of EverWeb’s fixed width features can be used in a responsive website. There are a couple of exceptions such as Scroll Position and Picture Frames and Line frames. These features may gain compatibility wth responsive design at a later date.
5. Blogging: Many websites include a blog and it is easy to create a responsive blog in EverWeb. Just add a page to your website and select the ‘blog’ page style from the Blank Responsive Theme Template. Many of EverWeb’s other Responsive Theme Templates also include a blog page style. If you have an existing fixed width blog, this can be converted to a Responsive blog by changing the ‘Page Layout’ in the Page Settings tab. If you choose this option you will need to reorganise the blog afterwards. Also be aware that changing the page layout cannot be undone, so it is recommended that you backup your Project file first and then duplicate the blog so that you have a copy to try the new page layout on.
6. Margins: Use the Margin option in the Size section of the Metrics Inspector to add left and right margins to full width objects. Other margin options are also available such as the Insert Margin option in the Text Inspector for use with TextBoxes and the Padding option in the Navigation Menu widget. You can also use the Responsive Row widget to add top and bottom margins to sections of your page using its Top and Bottom Padding options. As there are a few different ways to add margins to a Responsive page layout, you may want to experiment to see which works best for your page.
7. Adding a Background: Many responsive websites use alternating background color bands to separate sections of the page. This makes it easier for the user to find and focus on content. To add a background color band, add a Responsive Row Widget to the page then use the Color Fill option in the Metrics Inspector to add the background color (or image if you prefer) of your choice. Add your content in to the Responsive Row widget to create the section of the page that you want.
8. Pick Layer and Embed In: These two options are really useful in responsive design in EverWeb. When you secondary click in the Editor Window you will see these two options listed in the submenu that appears. When you have two or more objects stacked on top of each other (e.g. a FlexBox widget on top of a Responsive Row Widget) use Pick Layer to select the layer that you want. Use the Embed In option when you have a full width object that you want to embed in to a Responsive Row widget.
9. Testing: As part of any website development process, you should always test your website as much as possible before going live. This is especially true for responsive page designs as such pages scale to the device they are being displayed upon. You may find for example that objects on desktop device look fine but are too close to one another on a mobile device. Conversely, your mobile device may display the page perfectly, but on a desktop there is too much white space between objects. In these instances you will need to work with the objects on the page to find an appropriate solution. This may mean using padding options in a Responsive Row widget or a Flexbox widget instead of a Text Section widget and so on…
10. Keep Up to Date: As of this blog, EverWeb version 2.8.8 is the current public release. If you have not updated to this release, you can do so using the EverWeb-> Check for Updates… menu option, or download a new version directly from the EverWeb website. We have lots of great new Responsive features coming soon in the forthcoming EverWeb version 2.9 release, which will make responsive web design even easier and better!

In the next instalment we will look at testing your responsive website and how this can be done in the most effective way.

If you have any questions about this 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

In the blog post ‘EverWeb Responsive Design Primer‘, we explored the background to Responsive Website Design and how it is implemented in EverWeb.

In this post, we will create a new responsive website in EverWeb. If you have already created a fixed width website using a Centered or Left-Aligned Page Layout and want to convert it to a Responsive website design, it is best to start a new project file and recreate the existing site from scratch. The Responsive Page Layout uses a different approach to web design than a fixed width design so changing the page layout of an exiting fixed width page to a Responsive page layout is not recommended. If you do want to do this, however, EverWeb will warn you beforehand that changing the page layout cannot be undone.

We will cover converting a fixed width site to a Responsive website in detail in a future post.

Creating a New Responsive Website Project

The great thing about building a responsive website in EverWeb is that almost all the features of EverWeb you used in developing fixed width websites still apply, so as usual create a new website project using the ‘Create a new website’ button on EverWeb’s Projects Window.

New Choices with Theme Template Chooser

When you create a new website project, the first thing you do is create a new page using the Theme Template Chooser. The Chooser has been enhanced in EverWeb 2.8 so you can filter Theme Templates based on whether you want to see ‘All’ of them or  ‘Fixed Width’, ‘New’ or ‘Responsive’ Theme Templates. It is worth exploring some of the over 20 new Responsive Theme Templates to give you a good idea as to how to structure your website’s responsive pages.

In addition to filtering, the Theme Template Chooser adds a Responsive blank page to the ‘Blank’ Theme Template a new ‘Blank Responsive’ Theme that includes a blank ‘Home’, ‘Video’, ‘Image Gallery’ and ‘blog’ pages. For the moment, select the ‘Home’ page style of the ‘Blank Responsive’ Theme Template.

New Page, New Ways…

Now that you have added the first page to the new project, it is worth looking at how the page differs from the Fixed Width ‘Centered’ and ‘Left Aligned’ Page Layouts. In the Page Layout section of Page Settings tab in the Inspector Window, you will see that the Page Layout is set to ‘Responsive’. The ‘Content Width’ and ‘Header Height’ fields are greyed out. As mentioned in the previous post, as responsive web design uses Full Width objects a ‘Content Width’ value is not needed.

In the same vein, ‘Header Height’ is also unnecessary as a ‘header’ is just like any other Full Width object on the page. Although there is no header, there is a Footer to provide an ‘end’ section to the page. Scroll down the page to the Footer. You will see that it contains a ‘Responsive Row’ within which is the ‘Made with Love with EverWeb’ image file.

Responsive Row & Other Full Width Objects

The ‘Responsive Row’ is, in fact, a Responsive Row widget. Click in an area of empty space in the Responsive Row widget then go to the Widget Settings button.  Here you can change the ‘Responsive Row Name’ from the default ‘Responsive Row’ to something more relevant such as ‘Page Footer’. The Responsive Row naming shown in the Editor Window is useful when you have many Responsive Row widgets on the page.

The Responsive Row widget is special as it acts a a ‘super container’ that can hold non-full width objects. If you have objects that you do not want to be full width e.g. TextBoxes, shapes or in this example, the ‘Made with Love with EverWeb’ image file, add a Responsive Row widget to the page, then with the widget still selected use the Toolbar to add a TextBox, or Shape, or drag and drop an image file from an external source or the Assets List on the Responsive Row widget. You can even drag and drop other widgets on to the Responsive Row widget. This is useful when you need to use non-full width widgets such as the PayPal, Live Photo and Facebook widgets. Use the Widget Settings to adjust the spacing and justification of the objects within the Responsive Row widget.

For more information on the Responsive Row widget, click on the Help ‘?’ in the top right hand corner of the Responsive Row Widget Settings or check out our Responsive Row Widget YouTube video. The video will take you though how to fully use the widget.

The Responsive Row widget is a good example a full width object in responsive design. Most objects that you add to your Responsive Page Layout are designed to be full width. Many of EverWeb’s existing widgets have been updated in version 2.8 to be full width capable. When a widget is not full width capable, EverWeb will advise that you can add such an object by placing it in a Responsive Row widget.

Whilst the Responsive Row widget is incredibly useful, the new FlexBox, Responsive Image Gallery Widget and Text Sections widgets have great features and scope. And remember that most widgets do not need to be enclosed inside a Responsive Row widget, unless you have a specific need to do so.

Adding Objects to The Page

Start building the page by adding a Navigation Menu widget. First, click in the main body area of the page so that the Responsive Row widget in the Footer is no longer selected. Next, drag and drop the Navigation Menu widget on to the Editor Window. When the widget is added, it is placed right at the top of the page as a full width object. Style the widget in the same manner as you have always done in EverWeb.

Next drag and drop an Image Slider widget on to the page. When added, the widget sits as a full width object immediately beneath the Navigation Menu widget. Add some images in to the Slider, again in the same way as you always use the Image Slider.

Now add a TextBox to the page using the Toolbar. Again it is added as a full width object, directly under the last added object – the Image Slider widget. Edit and style the text as you want in the same way usual. Remember that if you do not want the TextBox to be full width, add a Responsive Row widget first then add the TextBox whilst the Responsive Row widget is still selected.

Embedding Objects

In this example, I have already added a TextBox, but not to worry. I can add a Responsive Row widget to the page which will be added immediately below the TextBox. Click back inside the TextBox to select it, then secondary click. In the menu that appears, scroll down to ‘Pick Layer’. You will notice that your TextBox has a checkmark against it as it is already selected. Further down the menu is the option ‘Embed In’. This option is used to to embed objects, such as the the TextBox, in to a Responsive Row widget. You will see the two Responsive Rows on the page listed: ‘Responsive Row 1’ and ‘Page Footer’. Click on ‘Responsive Row 1’. The TextBox is now added to the Responsive Row widget. Go to the Metrics Inspector and uncheck the ‘Full Width’ checkbox and then use the TextBox’s selection handles to change its width so that it no longer full width.

You have now created the basic of your first responsive page by adding and manipulating full and non-full width objects. There are many ways you can manipulate objects on the page and we will look at this in the next instalment!

If you have a question, please let us know in the Comments Section below. Thanks!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

ECWID is an an e-commerce platform that helps you easily create an online store so you can sell products and services anywhere online or in-person. ECWID can be integrated in to your website, Facebook and other social media, and Marketplaces such as eBay.

Adding ECWID In To Your Website

Integrating ECWID in to your website in EverWeb only takes a few steps…

1. First sign in to your ECWID account or create a new account if you don’t have one already, at ECWID’s website.
2. Once you have created your account or have signed in, you will be taken to your ECWID Control Panel.
3. The Control Panel will guide you though the steps you need to complete the setup. If you are just starting a new account, select ‘Create account’ and complete the details required.
4. Next select ‘Create Your Own Online Store’ where you will go through the steps required to create your own online presence.
5. You will be asked the question ‘Do you have a Website or Facebook Page?’ Select the ‘Yes, I have a website’ option.
6. On the next screen select ‘Other Platform’.
7. You are now on the ‘Add ECWID store to your site’ screen. 
8. Highlight the code in the center of the screen and copy it to the clipboard.
9. Now switch to EverWeb and go to your Storefront page.
10. Add an HTML Snippet widget to the Storefront page and paste in the code that you copied from the clipboard into the HTML Code box. Click ‘Apply’ to finish.
11. Now go back to the ECWID website and select ‘Proceed to next step’.
12. Now you will need to add in the URL of your Storefront page in to the field on the ‘Set. Store URL’ page. If you have already published your website with the Storefront page, navigate to this page in your browser. Copy the URL address from the search bar in to the field.
13. If you have not yet published your website you can come back to this step later once you have published. Alternatively, use the folder structure of your website from the Web Page List to construct the Storefront URL name.
14. After adding the URL to the field in the ‘Set store URL’ page, click on the button ‘Proceed to next step’.
15. You will be taken back to the Control Panel page as you have finished the setup.
16. You should now go to the ‘Add Products’ section of the Control Panel and add one or more products to your ECWID store. If you have not added any products in your own store, ECWID will display a demo product list when you publish your website instead!
17. Once you have added your product(s), complete your ECWID Control Panel setup so that your storefront is ready to go if you have not done so already.
18. The last step is to go back to EverWeb and publish your website. When you view your Storefront page, you will see your products listed for sale!

Video Walkthrough

You can also follow the steps in this blog post in our YouTube video Using ECWID with EverWeb.

If you have any questions about this blog please let us know in the Comments Section. We are always happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

Responsive Website Design (RWD) is the headline feature of the new EverWeb version 2.8 that many of our users have been eagerly waiting for. Whilst some will be familiar with RWD, its concepts and methodology, there will be many who will be dipping their toes in for the first time. RWD offers a different approach to web design that can create a wealth of possibilities for your website. However, RWD can also be difficult to conceptualise and implement across all devices so can become a frustrating experience.

This post is designed to give you a background to Responsive Web Design: What is it, what it is not, when to use it in your website design and when not to as well as the advantages and disadvantages of using RWD. Knowing more upfront about how RWD works will help you more easily develop great responsive websites in EverWeb!

What is Responsive Website Design?

Wikipedia quotes Responsive Web Design as

“an approach to web design which makes web pages render well on a variety of devices and window or screen sizes”

In essence, Responsive Web Design allows you to create one page design that can be used on any device browser from mobile through to large desktop. Responsive design means that the pages you create will automatically adjust to the size of the browser it is being viewed upon. This is a wonderfully simple concept, but does require a different way of approaching website page design. When comparing it to the ‘traditional’ way of making websites where you have to create a desktop page and a corresponding mobile version, there are some advantages and disadvantages to be aware of…

Advantages of Responsive Web Design

• Your website design is automatically scaleable on any device.
• Google and other search engines likes responsive websites and ranks RWD websites higher in search engine ranking results
• Promotes website design unity across devices
• Requires only one website that caters for all devices
• May reduce development and maintenance time, cost and effort

Disadvantages of Responsive Web Design

• Conceptually difficult and difficult to learn.
• Constrained design approach. Typically not a good tool when creating free form websites
• Can be costly in development and maintenance.
• Page loading times can be slower than for ‘traditionally’ designed websites.

Expectations of Responsive Website Design

Responsive Website Design can make developing fully scaleable websites quick and easy if you have the right experience and knowledge. However, there are times when building a responsive website may not be the right choice and using a ‘traditional’ website design is actually better, particularly when a ‘free format’ design approach is required.

It is recommended that you try a small test website project before developing a new RWD website project or redeveloping an existing ‘traditional’ website. In this way you will learn more about how RWD works in general and how it is works in EverWeb.

If you want to redevelop an existing ‘traditional’ style website bear in mind that it will need to accommodate responsive design methods. Invariably, some design compromise will be needed which may also have advantages and disadvantages. Do not expect your existing design to look, and/or function, in exactly the same way when redeveloped as a responsive website.

RWD Development Time, Cost and Effort

It is worth investing some time and effort in experimenting to see what is, and is not possible, with RWD in EverWeb. There is a learning curve, which can be quite steep for some as RWD often requires a different approach and way of thinking than you may be used to.

Understanding the basics of EverWeb itself gives you a good start as responsive design capabilities have been integrated seamlessly in to the product. Our post blogs and YouTube videos will also help guide you on all of EverWeb’s responsive design features and how to use them using real world examples.

Responsive Design in EverWeb

Responsive design is structured so that objects always use the full width of the page. Full width objects are like containers that hold their own content. These ‘containers’ are stacked from the top of the page downwards, one under the other. As the page is resized in a browser, the objects within the container automatically scale and reorganise themselves within the container as its horizontal and vertical dimensions change to properly fit within the browser window.

Some objects, such as the Responsive Row widget, can only be a full width object. Some objects such as TextBoxes, shapes, images and some widgets can be either be a full width or non-full width object. Some objects, such as the Facebook Like and Live Photo widgets, can only be non-full width objects.

Next…

In the next post related to responsive website design in EverWeb, we start to build a responsive website in EverWeb.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s just celebrated its 5th anniversary with the introduction of the NEW EverWeb version 2.8!  From its beginnings back in 2013, as the spiritual successor to Apple’s iWeb Mac website building product, EverWeb has grown amazingly over the last five years. Much of what we do is driven by the EverWeb community to whom we give a big ‘Thank You’ for the continued support, comments and suggestions that helps focus us on creating a bigger and better EverWeb year after year.

Over the last twelve months we’ve added an extensive range of new features to EverWeb such as a stock image library of over half a million royalty free images, a new responsive capable Navigation Menu widget, Scroll Position that lets you create page anchors you can hyperlink to and super fast publishing. We also added twenty new theme templates plus lots of feature additions to EverWeb’s in built widgets.

Introducing Responsive Design with EverWeb 2.8

Responsive Web Design is the headline feature of EverWeb 2.8. Adding responsive capabilities to EverWeb has been our most popular feature request and we’ve worked hard to integrate it into EverWeb without changing how EverWeb works. It has been a great challenge but the results, we believe, make EverWeb possibly the easiest way to create a fully customizable responsive website just with drag and drop.

EverWeb’s responsive design capabilities allow you to create scalable web pages using the new Responsive Page Layout. Responsive design means that you do not have to create separate website pages for desktop/tablets and mobile devices. EverWeb 2.8 lets you choose which way you want to build your website: the ‘traditional’ way or the ‘responsive’ way. Each has advantages and disadvantages which we will look at in more detail in future blogs.

From a web design process, if you are already familiar with EverWeb and are interested in building responsive websites, take a look at the EverWeb Video Training Library which explains the basics of responsive design in EverWeb to get you up and running quickly. Furthermore, our EverWeb YouTube channel also has lots of videos about building responsive websites, so sign up so that you don’t miss out on what’s new. There is also plenty of information on Responsive web design in EverWeb in our updated EverWeb User Manual. You can access the manual and the new chapter specifically on Responsive Web Design in EverWeb from the Help-> EverWeb User Manual menu option.

… and Many More Great Features!

In addition to Responsive Web Design, EverWeb 2.8 includes lots of other great new and updated features, for example, if you use third party widgets, our new Widget Organizer is a great way to categorise them just how you want.

EverWeb’s Responsive design feature has also had a great spin off for many of our existing in-built widgets. For example, the PayPal Widget adds  product image and text description features as well as weight options. Other widgets have had full width capability added to them such as the Contact Form Advanced, Video and Audio widgets. The Navigation Menu widget adds the ability to add and hyperlink a logo and a Stick to Top of Page feature to pin the responsive menu to the top of the page. Last but not least, the Metrics Inspector also had a new feature add with a new Margin option so you can add left and right margins to full width objects.

New Theme Templates have also been added for both fixed width and the new responsive page layouts. The Theme Template Chooser itself also sports a new filter menu so you can now view All Theme Templates or only Fixed Width, Responsive or ‘New’ Theme Templates.

We’re delighted to bring over 50+ new and updated features to EverWeb and a whole new world of creativity with our all new Responsive website design features.

We are always keen to have your feedback on EverWeb and what you would like to see added, improved or changed in the the product. Please let us know in the Coments section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

We’re thrilled to announce the immediate availability of EverWeb version 2.8 featuring all new, fully integrated, Responsive Website Design. EverWeb’s new responsive website building features are designed so that you can build either a responsive or traditional style website using the same User Interface, the same widgets and the same features as you have always done.

And that’s not all, as EverWeb comes with 50+ new and enhanced features in version 2.8 including Widget Organisation, Draft mode for Blog Posts, responsive blogs, improved Theme Template Chooser and much, much more. A detailed list of EverWeb version 2.8’s new and improved features as well as maintenance and stability enhancements can be found below.

EverWeb version 2.8 is available in two versions:

• OS X 10.7 – 10.8 (32-Bit):  Lion, Mountain Lion
• OS X/macOS 10.9 and higher (64-Bit): Mavericks, Yosemite, El Capitan,  Sierra, High Sierra, Mojave

If you are running OS X 10.6, EverWeb version 2.5.2 is available for you.

When updating to EverWeb version 2.8, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.8 Includes…

[NEW] All NEW Responsive Website Design built directly in to EverWeb

[NEW] Responsive Page Layout option in Page Settings enables responsive website design in EverWeb

[NEW] Responsive Row widget for Responsive Web Design in EverWeb

[NEW] Text Section widget for combining images, text and buttons in one highly customizable widget

[NEW] Responsive Image Gallery Widget

[NEW] FlexBox Responsive Widget

[NEW] Many widgets have been optimized for use in Full Width and Responsive page layouts

[NEW] Blogging environment optimized for Responsive Website Design

[NEW] Left and right margin settings for Full Width and Responsive objects in the Metrics Inspector

[NEW] ‘Embed In’ option to embed objects directly into the Responsive Row Widget when object is secondary clicked upon

[NEW] Responsive Blank Theme Template

[NEW] New Responsive Theme Templates have been added

[NEW] New Full Width Theme Templates have been added

[NEW] Theme Templates can be filtered to display either Fixed Width, Responsive, New or All Theme Templates

[NEW] Completely revised and redesigned EverWeb User Manual including a new Responsive Design chapter

[NEW] Widget Organization

[NEW] Updated icon design for the Navigation Menu widget

[NEW] Navigation Menu Widget now includes background color for the standard navigation menu

[NEW] ‘Stick to Top’ option in the Responsive Options section of the Navigation Menu widget pins the widget to the top of the pages when in Responsive Hamburger menu mode

[NEW] You can add a logo directly in to your navigation in the Navigation Menu widget when using Responsive Options

[NEW] Added a link to the Logo image in Responsive Options of the Navigation Menu widget

[NEW] Blog posts can be set as ‘Draft’ so they only publish when you want them to

[NEW] Blog Posts images now have Post Cover Image Options for Full Width and Responsive blogs to set maximum image height and width

[NEW] Use Website Publish Date as Blog Post Date

[NEW] Scale to Fill option added to Image Gallery widget

[NEW] PayPal Widget includes new Image and Description fields

[NEW] Weight options added to the PayPal widget. You can specify kilos or lbs.

[NEW] More descriptive error messages for FTP protocol errors

[NEW] The Insert-> Choose menu option now works in Blog Posts

[NEW] Compatibility with macOS Mojave (10.14)

[NEW] Site Publishing Settings includes an option to automatically include Google Fonts Links from Google’s Servers

[NEW] Paste at mouse location

[IMPROVED] Images should load faster and be sharper, including when used in Image Gallery and Slider widgets

[IMPROVED] Better error messages for publishing issues.

[FIX] Tracking ID in the PayPal widget has been changed to Unique ID

[FIX] Links in the regular Image Gallery widget now work correctly

[FIX] In some instances EverWeb would slow down when layout guides were selected in EverWeb-> Preferences

[FIX] When Auto Save is enabled in EverWeb-> Preferences-> Backup, the File-> Revert to Save menu option is no longer available.

[FIX] Apple Xcode Simulator now works correctly when selected from the File-> Preview menu

How To Update To EverWeb version 2.8

You can easily update to EverWeb version 2.8 by

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.

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

EverWeb version 2.8 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 upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, 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 upgrades 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, either the OS X 10.6 version, or OS X 10.7 and later, version.

More Information About EverWeb version 2.8

If you need more information about the new version of EverWeb, please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help 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 version 2.8 Video Walkthrough

Find out more about the new release of EverWeb in our What’s new in EverWeb version 2.8 video.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

Email is an essential tool in our lives and when you set up your domain name, you will usually get the ability to create email addresses associated with your domain name. If you host your website with your own Hosting Provider, you will need to use CPanel to administer your email addresses. If however you have an EverWeb+Hosting account, you can add, delete and manage your email addresses directly from your website project.

Adding Email Addresses In Your EverWeb Project

Adding email addresses takes only a couple of steps for EverWeb+Hosting account users:

1. Open your Project file if you have not done so already
2. From within your website project, double click on your website name in the Web Page List or select File-> Edit Publishing Settings.
3. Your ‘Site Publishing Settings’ will be displayed. Check that ‘Publish To’ is set to EverWeb.
4. Scroll down to the section ‘Email Addresses’. If you have already created email addresses, they will be listed.
5. Note that you will see all of the email addresses for all the domains that you have in your EverWeb account.
6. To add an new email address click on the ‘Add’ button.
7. Enter the new email address name that you want in the popup box.
8. If you have more than one domain, check after the ‘@’ sign that you are creating the address for the right domain. If you only have one domain, you do not need to check this.
9. Enter a password for the email address in the Password field. Passwords should be  strong. EverWeb will check password strength. If the password is deemed weak, you will have to add the email account again. A strong password is one where:
   1. From 8 to 20 characters in length
   2. Combines letters, numbers and ‘special’ characters. Spaces are not allowed.
   3. The password contains at least one capital letter within it.
   4. Where numbers are used as substitutes for letters e.g. 3 replaces E, 4 relplaces A etc. .
   5. The password is not easy to guess e.g. a birthdate, the word ‘password’ etc.
10. Once complete click on the ‘Create’ button to finish. Your new email address will be created and added to the list.

Deleting an Email Address

Removing an email address is straightforward:

1. Before removing an email address you may want to create an offline email back up before starting the deletion process.
2. When you are ready to delete the email account, go to the the Email Address section of the Site Publishing Settings as described in the previous section.
3. Click on the email address to be deleted to select it.
4. Click on the ‘Delete’ button to remove the email address. EverWeb will warn you that deleting the email address will also delete all the emails associated with the address.
5. Double check to make sure that this is the correct address to delete before confirming your action.
6. The email account is deleted.

Adding An Email Address To Apple Mail

One of the advantages of managing email in EverWeb is that you can setup email easily and all in one place without having to leave your Project file. One useful option is that you can add the email addresses that you have created into Apple’s own Mail program with just a few mouse clicks.

To add an email address in to your Apple Mail program:

1. Go to the Site Publishing Settings as described previously.
2. Highlight the email address that you want to add to Apple Mail.
3. Next, click on the ‘Configure in Mail’ button. If Apple Mail is not open at the time, it will launch add the email account to its program.
4. You may be asked to reenter the password for the email account that you are adding during the configuration process.
5. EverWeb may display two dialog boxes informing you that the email account can now send and receive email in Apple mail.

Checking Your Email Online

The final option in Site Publishing Settings for email addresses is to Check Email Online. This is useful when you want to check your email but do not have access to it from your computer. To check email online:

1. First click on the You can check your email over the web in ‘Check Email Online’ button in Site Publishing Settings.
2. On the Webmail screen, enter the email address and password of the account that you want to access.
3. On the next screen you have a choice of which Webmail program you want to use as default: Horde or SquirrelMail. Select one as your default.
4. Bookmark the page in your browser to save it for future use.
5. When you click on the Webmail program you will be taken to your email.

Managing Email in EverWeb offers a flexible and easy way to setup, manage and access email right from within your website project.

If you have any questions about this 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

Google+

Flipboard

YouTube

Twitter handle @ragesw

Everyone’s goal when using EverWeb is the same: To publish a website on the Internet. Although a simple goal, there are a few things that you may want to consider before pressing the ‘Publish’ button. We have made a list of tasks that are good to complete before unleashing your website on the world:

1. Test Your Website

Testing your website is possibly the most important task you can do before publishing your website. You may want to set up a test environment on the Internet to try out your website before publishing it to its ‘live’ location. If you have an EverWeb+Hosting account you can easily do this by going to the File-> Edit Publishing Settings menu.

2. Include a Favicon

Do you want to a Favicon displayed in the browser search bar for your site? The little square image that appears beside your URL in the web browser search box adds a professional touch to your website

To add a Favicon, go to the File-> Edit Publishing Settings. The Favicon section is just below the Footer Code of the Head/Footer Code section. Click on the ‘Choose…’ button and select a square image that you want to use as your Favicon. EverWeb will scale the image appropriately when you publish the website. As the Favicon needs to replicate it may take a couple of hours before you see it displayed beside your URL in a browser search bar.

3. Secure Your Website

A secure website is more important than ever for you and your customers. Apart from the privacy and data security aspects of a secure website, a secure website is also advantageous for your SEO as Google and other search engines prioritize secure websites over non-secure websites.

EverWeb provides an incredibly easy way to secure your website if you have an EverWeb+Hosting account. Just tick the ‘Use HTTPS Secure URLs’ box in your website’s Site Publishing Settings. When you publish your website end to end data encryption is automatically added to your website. Depending on your EverWeb+Hosting account, this service may be free or chargeable. To find out more please check out our blog on EverWeb Site Shield Addon.

4. SEO Important Web Pages

In addition to using Site Shield Add-on to secure your website and improve your SEO, don’t forget that SEO is also built directly in to EverWeb. As such,  remember to add keywords in to the SEO related fields of the Page Settings tab of the most important pages of your website. If you need an SEO refresher, take a look at our SEO for EverWeb Course which tells you all you need to know.

5. Add Language Localization for Better SEO

And still on the subject of SEO, setting the Language Localization for your website and any individual pages as required is also a must do task before you publish your website. Bot you and your customers will benefit as search engines will be able to serve your visitors with better targeted search results. Our blog on Language Localization has all the details of how best to implement this for your own situation.

6. Include a 404 Page Not Found Error Page

Every website you create should always have error trapping included. This is performed by a 404 Page not found page. Add a page to your website that performs this function then link it to the ‘Not Found Page’ setting in Site Publishing Settings.

Remember to create one 404 Page Not Found page for desktop and one for mobile. Link the pages together so that you see the mobile style 404 page on a mobile device and a desktop style 404 page on a desktop device. More information on creating 404 Page Not Found pages is available in our blog post ‘Control 404 Page Not Found Messages in EverWeb‘.

7. Check Social Media Links and Contact Forms

Although this should be part of your testing process, testing your social media links is something that deserves a separate mention as it is an important to many people. You can also add an image to your web pages for social media purposes in the Page Details settings of the Inspector tab of your page.

8. Check For Typos, Grammar and Spelling

If you write your own text for your website, including any blog posts, don’t forget to check for any spelling, typos and grammar glitches before publishing. It is useful to have spell check on in EverWeb if you are typing directly in to the Editor Window.

If possible, get someone else to read what you have written to catch any mistakes. It is more difficult to catch mistakes if you proof read your own work. If you do have to do your own proof reading, try stepping away the text you have written and go back to it later. You will have a fresher pair of eyes to catch any possible problems using this method.

9. Check Your Publishing Location

Publishing your website just takes a click of the Publish button, but it is worth checking the File-> Edit Publishing Settings menu option first to verify that the location set for the publish is correct. If you have set up a test website location, you will want to change this to the ‘Live’ website location. When you come to Publish your website, EverWeb will warn you that the location has changed and will ask you if you want to overwrite any site that may be in the new location you have specified.

10. Remember Your Housekeeping!

When publishing your website to the Internet, it is also a good time to consider tidying up your website. You can do this by deleting any unused assets. Unused assets take up space in the project file and it is better if they are removed when not needed. This saves disk space as well as computer memory when editing your project file.

The Assets tab is where you can remove unwanted assets. Click on the up/down arrows to the right of the word Asset just above the top of the Assets List. A dropdown menu will appear. Select ‘Find Unused Assets’. EverWeb will scan for any assets that are not being used. Use the dialog box to delete all the highlighted assets or click on ‘No’ if you want to review the highlighted assets before deleting any of them.

Once you have tested and reviewed your website, you can hit the Publish button with confidence!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

Seconday clicking is often mistakenly called a right mouse click, however, on a Mac it is actually a two finger tap on the Magic Mouse, Magic Trackpad or the trackpad on your MacBook laptop. Using secondary clicking is extremely useful in EverWeb and will become even more so with the next release which is due out in the near future. Secondary Clicking…

1. Saves Time

It’s quite often quicker to use secondary click rather than going to the EverWeb’s menu system. For example, if you have an object selected on your page that you want to move forward or backwards, you could mouse over to the Arrange Menu and use the commands there. Instead, you could just secondary click on the object and select the command you want from the pop up menu.

2. Reduces RSI Risk

Repertitive Strain Injury (RSI)affects thousands of people per year. Over use of keyboard and/or mouse use are often cited as key causes of RSI so learning to use both effectively and efficiently will help reduce your risk a bit. Using secondary click will help reduce the amount of physical travel that your fingers, hands, wrists and arms need to make when using a computer as you won’t need to mouse around your screen so much.

3. Offers Unique Options

When secondary clicking, often the list of options presents some that you will not find anywhere else in EverWeb. Typically when secondary clicking on an object in the Editor Window, you will see the Pick Layer option which you will not find anywhere else in EverWeb’s UI.

4. Is Context Sensitive

Wherever you use secondary clicking in EverWeb it is always context sensitive in the choices that if displays. The list of options will therefore be completely different when you secondary click on a page name in the Web Page List to the one you will see when secondary clicking on an object in the Editor.

5. Is Available Throughout EverWeb

You will find secondary clicking available in many places in EverWeb e.g.

• The background of the Web Page List
• Page Names in the Web Page List
• Background of the Editor Window
• Objects in the Editor Window
• Background of the Assets List
• Assets in the Assets List
• Background of Blog Main and Archive Pages
• Objects in the Blog Main and Archive Pages
• Blog Pages in the Blog Page List
• Blog Page Editor Window

6. Will Have More Features Soon…

The upcoming new release of EverWeb will feature more options for secondary clicking e.g. there is a new ‘Embed In’ option for adding objects in to the new Responsive Row widget that is used in responsive pages. There will also be a couple of other options new options available in other parts of EverWeb which we will give you news on when the update is released.

Secondary click is a great time saver and gives you extra features to help you work smarter and so faster!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Text is always an important part of a website and EverWeb has a number of ways in which text can be easily formatted. Here are tips on how to get more creative with text in EverWeb.

1. Use Default Styles

One of the best ways to save yourself time and effort is by setting up the default text properties when you first create your website project. Use the Format-> Default Styles… menu option to set the default Body Text Font, Size and Color. When you add a TextBox to your page, the default settings will be applied. You can set up, or change, your Default Styles at any time. When doing so the changes will apply onto to new TextBoxes that you add to your page and not to ones that may be on the page already.

The Default Styles you set up for text properties will also be applied to the Styled Text Editor that will be featured in some of the new responsive widgets, and some updated existing widgets such as the PayPal Widget, in the next version of EverWeb.

2. The Text Inspector

EverWeb’s Text Inspector in the Inspector Window lets you customize text in ways that are not possible using the Fonts Panel or EverWeb’s menu system. there are a couple of settings that are good to be aware of. The first is the ‘After Paragraph’ option which is set to 15 pixels by default. The second is the horizontal and vertical text alignment buttons in the  Color & Alignment section of the Inspector. Horizontal text alignment is set to ‘Left’ and vertical text alignment is set to ‘Top’. If you are creating a button and you want the button text to be centered, set the After Paragraph setting to zero, horizontal text alignment to center and vertical text alignment to middle.

The Text Inspector’s Insert Margin is also useful if you have a Full Width TextBox on your page and want to create a left hand margin so that the text is not right up against the left hand edge of the page. This will also be useful when using Full Width TextBoxes in responsive pages in the next version of EverWeb. You will also be able to set left and right margins for Full Width objects from the Metrics Inspector in the next version of EverWeb which will give you greater control and flexibility whether you are developing a traditional or responsive website.

3. The Format Menu Option

The Format Menu is a great place to find options that save you from opening the Fonts Panel. The Format-> Font menu options include special case tools such as Superscript and Subscript. There are also options to quickly increase and decrease the size of your selected text with the ‘Bigger’ and ‘Smaller’ options, again saving you having to use the Fonts Panel.

The Format-> Transformations menu is perfect when you have set Caps Lock on by mistake. You can use either ‘Make Lower Case’, ‘Make Upper Case’ or ‘Capitalize’ menu options to change the selected text case with ease.

4. Shortcut Keys

One further use of the Format Menu is that it shows you the Shortcut keys for many text options which again should save you time.

Show Fonts (Fonts Panel): Cmd T

Bold: Cmd B

Italics: Cmd I

Underline: Cmd U

Subscript: Control Cmd –

Superscript: Shift Control Cmd +

Bigger: Cmd +

Smaller: Cmd –

Align Left: Shift Cmd {

Center: Shift Cmd |

Align Right: Shift Cmd }

Select All: Cmd A

5. The Fonts Panel

The last option for text styling is the Fonts Panel which can be accessed via the Toolbar or the Format-> Text-> Show Fonts menu. When using the Fonts Panel, the Cmd T shortcut key really comes in to its own as the quickest way to toggle the panel on and off.

The buttons in the Fonts Panel, from left to right, are for:

Text Underline

Text Strikethrough

 Text Color

Text Background Color

Text Shadow On/Off

Text Shadow Color

The four controls to the right of the buttons have the following functions:

1. Triangle Symbol Slider: Used for shadow opacity. If the slider is set at the left the shadow appears invisible. If the slider is set to the right, the shadow color will be solid.
2. Square Symbol with Shadow Background: This slider allows you to adjust the shadow blur. If set at the left end of the slider, there will be no blur, if set to the right end the shadow will be completely blurred and so not visible.
3. Square Symbol: This allows you to set the offset of the shadow from the text. When set at the left of the slider there is no offset so you will see no shadow. At the right end of the slider you will have the shadow at maximum offset.
4. Rotation Wheel: The last button is a rotation wheel so that you can change the angle of the shadow as required.

Coming Soon!

The next version of EverWeb will feature a lot more choices and flexibility in what you can do with text, especially within widgets. For a closer look, a public beta test of the new version is available in the Announcements Section of the EverWeb Discussion Forum.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw