EverWeb Responsive Design Primer

December 6th, 2018

EverWeb Responsive Design Primer

 

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

Celebrating 5 Years with the NEW EverWeb 2.8 Featuring Responsive Web Design!

November 22nd, 2018

EverWeb 5th Anniversary and version 2.8 Released

 

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

Introducing EverWeb version 2.8 with Responsive Web Design!

November 15th, 2018

What's new in version 2.8

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

Managing Email Addresses In Your EverWeb Website Project

November 1st, 2018

Manage email addresses in EverWeb

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

10 EverWeb Pre-Publishing Tips

October 18th, 2018

10 EverWeb Pre-Publishing Tips

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

Secondary Clicking in EverWeb

October 4th, 2018

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

Exploring EverWeb’s Text Formatting Options

September 20th, 2018

EverWeb's Text Formatting Options

 

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

 

Take Advantage of EverWeb’s Stock Photos!

September 6th, 2018

EverWeb Stock Photo Feature

 

In our previous blog we looked at how to customize images in EverWeb but how can you easily find the right images for your website in the first place? The Free Stock Photos feature introduced in EverWeb version 2.7 has the answer!

 

About EverWeb’s Free Stock Photo Feature

The Free Stock Photos feature includes over 500,000 free to use Stock Photos. Whilst there are many photos included, there are also other types of image files included such as computer created graphics and icons, drawings, sketches and so on covering a wide variety of subjects.

The images in the Stock Photos feature can be used without having to purchase them. As the images are royalty free you do not need to pay any licensing fees or ask permission to use them in your website.

 

Accessing EverWeb’s Stock Photos Feature

Accessing the Stock Photos feature is easy. There are two ways:

  1. In your EverWeb Project file, click on the Media button in the Toolbar and select the ‘Free Stock Photos…’ menu option or
  2. Use the Window-> Stock Photos… menu option. You can use this option from within your Project file or from the Projects Window if you want to browse images without opening your project file.

When you open the Stock Photos feature, it opens the Image Search window. This is where you search for the images files that you want to include in your website. If this window becomes obscured at any time you can use the Window-> Image Search menu option to show it above all the other windows on your desktop.

 

Adding Stock Images To Your Website

To add images to your web page, you first need to search for the right image(s). To do this, just enter your search criteria in the search box at the top of the Image Search window to the right of the magnifying glass. When searching, try to be as accurate with your keywords choice as possible and use as few words as you can in the search criteria. This will give you the most accurate results when you press Enter to perform the search.

When the search completes you will see a grid of images that match your search criteria. If no images are found you will see  ‘No Results Found!’ displayed. The image grid can be resized to your liking, even down to a single column, by dragging the bottom corner of the Image Search window.

Once you have found the image that you want, just drag and drop it from the Image Search window on to your page. You can only drag and drop one image at a time.  The name of the image file will be the same as your search criteria. So for example, if you searched for the word ‘Chakra’ the file name in the Assets List will also be called ‘Chakra’. The file extension will depend on the type of file you have imported e.g. a JPG or PNG file. If you are drag and dropping more than one image from the same search results, EverWeb will add a number at the end of the file name so, for example, your files in the Assets List right be named Chakra, Chakra-1, Chakra-2 etc.

 

High Resolution Images

If you drag and drop a high resolution image on to the page, EverWeb will warn you as doing so may slow your page loading time when browsed by your visitors. You have three choices: ‘Convert to Web Resolution’ which is recommended, ‘Add as High Resolution’ which is not recommended but available if you need to add the image anyway in high resolution and ‘Add to External Files’ which allows you to save the high resolution image file to your Assets List. Using this option makes the file available as a download for your visitors.

 

Downloading External Image Files

If you add the image file to your Project’s ‘External Files’ in the Assets List, the file is available for use as a download. This may be useful as it will save you having the full High Resolution file on the page itself. Your users can download the file instead if they want to. To do this, create a hyperlink on the page, e.g. a piece of text or add a special button.

One you have your text or button on the page, make sure that it is selected. Next go to the Hyperlinks Tab in the Inspector Window. In the ‘Link To’ dropdown menu select ‘File’. The options below the dropdown will then change, In the next section you will see ‘Name: No File Selected’. Click on the ‘Choose…’ button below the text. You will see the External File that you save earlier listed for use. Select the file. When you publish your website, your visitors will be able to click on the hyperlink and download the file to their computer.

 

Adding Images To The Assets List

Your image search may result in several images that you want to use in your website. You can easily store these images for later use in the Assets List. Simply click on the Assets Tab in the Inspector Window and drag and drop each image you want to keep into the list. When you want to use saved image just drag the file out of the Assets List and on to the page.

 

Using Previous Search Parameters

When using the Image Search window you can retrieve previous search keywords by clicking on the magnifying glass. A popup menu will show you your previous searches. Click on the search term you want and press Enter to perform the search again. To clear the list of search terms use the ‘Clear all searches…’ menu option.

 

Closing The Image Search Window

The Image Search window remains open throughout your EverWeb session until you close EverWeb itself. If you want to close the Image Search window at any time during your EverWeb session, just click on the red close button in the top left hand corner of the Image Search window.

 

Finding the perfect image  is easy and free with EverWeb’s Stock Photo feature!

 

 

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

 

 

 

 

Customizing Images in EverWeb

August 23rd, 2018

Customizing Images in EverWeb

 

As the saying goes ‘a picture paints a thousand words’ and this is more true today than ever before. The impact of a good image can never be underestimated so finding the perfect images for your website is worth taking some time and effort over. Images project how you want your website to be perceived by your visitors and how your visitors will perceive your site, brand, company philosophy and so forth. Choosing the right images starts with your Home, or landing page where your visitors usually have their first point of contact with your website.

Making sure that images are presented properly is very important as first impressions last. The images you use should be sharp and properly optimised so that the page loads quickly in your visitor’s browser. This is especially important when using an image as a page or browser background, in an image gallery or in a slideshow. Even images that you just drag and drop on to your page need to be properly optimized for use on the Web.

 

Finding The Right Images

Finding the right images for your page can be a tedious, time consuming process, but EverWeb’s Free Stock Photo library should take all the hassle out of searching for great free to use stock photos to use in your website. Just click on the Media button or use the Window-> Stock Photos… menu option to access the Stock Photo Library. Type in your search criteria and press Enter. Once you find the image you want, drag and drop from your search results on to the page. If the file is large, EverWeb will prompt you to import an optimized version that is web page loading friendly.

Alternatively, drag and drop your own image files on to the Editor Window. Again if EverWeb finds that the image will affect page loading speed, you will again see the dialog box asking if you want to convert the image to web resolution.

 

Customizing Images

Once you have drag and dropped you image file on to the Editor Window, you can start customizing it in a number of different ways. Use the following options with the image selected…

 

1. The Metrics Inspector

The Metrics Inspector is possibly the first place you want to go when customising an image file as often you will want to keep your image’s proportions fixed as they are. When you scale the image larger or smaller you will usually want its height and width to remain proportionate to each other to stop image distortion. To fix the image file’s proportions check the ‘Constrain Proportions’ box.

There may also be times where you want to flip the image left to right or top to bottom. Use the Rotation section of the Metrics Inspector tab to set these options.

 

2. Image Masks

If you only want part of your image to be displayed, use masking to hide the part of the image you do not want to see on the page. Masking is similar to cropping, but the difference is that masking hides the part of the image you do not want to see, whilst cropping deletes the part of the image that you do not want to see. The advantage of masking is that it allows you to change your mind and remark the image whenever you want. To mask an image, first select it then click on the Mask button in the Toolbar.

 

3. Shape Options

The Shape Options tab is where most image customization can be achieved. There are lots of great options that can be applied to your image. Make sure that the image is selected before applying one or more of these options:

  1. Shape is the first option in the Shape Options tab and it allows you change the shape style of the image. Your image file is  probably rectangular, but you can change it to something different, for example an oval, or star shape, just by selecting the shape style that you want from the drop down.
  2. The Image Fill options let you display the image in its Original Size or Stretched, Scaled to Fill, Scaled to Fit or Tiled. When using the Tile option you may find that you have to expand the image size using the grab handles so that the tiling is displayed. Using these options allows you the flexibility to display the image in a number of different ways to accommodate your page design.
  3. You can also use Image Fill to change the image displayed when you mouse over, or mouse down, on it. Start by changing the Fill from ‘Normal’ to ‘Mouse Over’. From the dropdown list, change the fill type from ‘None’ to ‘Image Fill’. Select a different image file from the one you used in the ‘Normal’ state using the ‘Choose…’ button. Preview the page and mouse over the original image to see the mouse over image displayed instead.
  4. Remember as well that the ALT Text box should always be filled in as this is useful for your SEO. The text that you use should describe what the image is about.
  5. Use the Stroke option to add a border around the image, either using dashed, dotted or solid line, or using one of the 15 built in Picture Frame types.
  6. Shadow and reflection options also give you design flexibility but generally should be used sparingly e.g. you may use a light shadow around an image which has a very light edge to it. The Opacity option is useful when you have an image that you want to be more in the background e,g. if you have text placed on top of it you want the text, not the image, to stand out. Usually an opacity of about 50% gives a nice background type of effect.
  7. The last option is Animation. Again, this should always be used sparingly for maximum impact. Just select the type of animation you want and test it using Preview before publishing.

 

Customizing images in EverWeb is quick and easy and saves you time and effort as you can do a lot with an image within EverWeb itself.

 

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

8 Website Design Mistakes To Avoid in EverWeb

August 9th, 2018

Creating your first website is an exciting experience and EverWeb’s drag and drop approach makes it very easy to build yourself a website that is unique in a very short space of time. Designing and building web pages can also be a learning experience. You may find that your web pages change and mature over time as you develop your goals and ideas. You will also find that technology and the tools you use to create your website will also grow and evolve. EverWeb, for example, is often updated regularly bringing with it a wealth of new features that can be added easily to your website.

When creating your website there will always be good practices to follow and mistakes to avoid. Here are 8 tips to help you avoid common mistakes that we can all make when developing our websites….

 

1. Always Create A Mobile Website

With the proliferation of mobile phones over the last 10 years, creating a mobile site in EverWeb is essential. Creating a mobile website is advantageous as most of our browsing today is performed on mobile devices. The other key reason for putting mobile first is that Google prioritizes mobile websites in its Search Engine Results Page (SERP) rankings over desktop devices.

 

2. Pay Attention to SEO!

Prioritizing your mobile website over your desktop website design immediately boosts your website’s SERP rankings with Google. EverWeb itself also has built in tools to give you an extra edge in Search Engine Optimization (SEO) and SERP rankings. For example, EverWeb’s Language Localization settings will help your SEO and can focus your website towards your local target market or audience. EverWeb’s Page Settings tab in the Inspector Window can also help using fields such as Web Page Title and Web Page Description completed with text and keywords that improve your SEO and  get your website higher in page rankings. Check out our SEO for EverWeb Video Course for full details on getting the best possible SEO for your website

 

3. Always Create Fresh, Up To Date, Website Content

Adding great content to your website is key to attracting new visitors and retaining those who have already found you. Good content is effective in retaining and growing your website’s audience.

Websites that have static and out of date content fail to attract new visitors or retain those who have already visited.  Websites whose latest content is more than a a few months old give the impression that either they are out of business or have nothing new and fresh to offer their target audience. Quick, regular, quality updates to your website are key to keeping and growing your audience.

 

4. Start Blogging!

If you have not done so already, creating a blog can be incredibly useful. A blog can keep your website up to date IF you create high quality content on a regular basis. Blogging is also good for your SEO as Google and other search engines like to crawl websites for new, original content. The key words here are ‘original content’. Search engines are smart and will down you for putting out content that you have put out before, such as copying and pasting paragraphs from an old blog post in to a new one just to get the post out! It is actually better not to post than to post in this way.

Whilst blogging can be advantageous there are negatives as well, so you have to decide if blogging is the right choice for you and for your website. If you choose to blog, you may have to also moderate comments that may come as a result of your posts. You also need to keep ideas flowing and find the time to create posts on a regular basis. So weigh up your choices and if you decide to start blogging plan your posts well in advance.

EverWeb’s blogging feature is a great way to create blog posts. And look out for the upcoming EverWeb 2.8 release which will have some more useful tools to make your blogging even easier!

 

5. Effective Website Navigation

Finding your way around a website is key to the your visitor’s experience and your website navigation should reflects this. Most websites use a menubar for desktop devices and a Hamburger Icon menu for mobile devices. You can implement both of these menu styles using EverWeb’s Navigation Menu widget.  These navigation menu styles are what most people are familiar with. If you do not want to use navigation menus, make sure that it is still easy for your visitors to identify how to get from page to page (and back!) in yuor website. Often test driving your design amongst family and friends is a good way to find out what works and what does not. Remember to be open to constructive criticism as there are many different levels of Internet user out there and what may be easy for you to understand may completely baffle others!

 

6. Clean, Easy Website Design

A lean and clean design will help your visitors be immediately comfortable using, and exploring your website right from the ‘landing’ (Home) page. A website  with plenty of white space and effective imagery on its pages will create an effective, efficient user experience. Sometimes in web design it is easy to prioritise form over function, but bear in mind that no matter how great your design is, can you visitors actually find their way around it easily?

 

7. Sending Out The Right Message!

Within your design, you will want your website to convey a message, goal or intention. This message should be clear and simple. Websites that are cluttered and have too many messages, or mixed messages, will discourage visitors from exploring your website further. A Home page with a simple straightforward message is best as it will focus your visitors on what your website offers.

 

8. Calls To Action and Contact Forms

Many websites have a target or goal. This can be to sell products and services, market products, collect email addresses, promote a cause or event and so on. This is where you will want your ‘Call To Action’ to be front and center. A Call To Action is the term used to get your visitor to take the next step, e.g. to sign up for a newsletter or webinar, to enter a promotion, to get a free e-book, get money off a next purchase and so on.

Call To Actions are typically a button on your page and the message in the button should be simple, clear and effective e.g. ‘Sign Up’, ‘Download’, ‘Subscribe Now!’ etc. The words used in the button are typically action oriented.

If you are using EverWeb’s Contact Form Advanced widget, make sure that it is easily visible and not buried deep down the page. The form itself should, typically, be quick, easy and simple to complete with as few fields as possible. Most of us don’t want to fill in endless details!

 

By using the above tips you should be able to avoid many of the most common website design mistakes people make when making their own website. It is always a learning experience designing a website, so get to know your audience and always test drive your website before going live. Get feedback on what works and what does not work so that your website gets off to a great start!

 

If you have a tip on website design that you would like to share with us, please let us know in the Comments Section below. We would love to hear from you!

 

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw