Archive for Web Design

28 Jul 2017

EverWeb 2.4 Released Making Your Website Safer!

No Comments EverWeb, Software, Web Design

EverWeb’s just been updated to version 2.4 adding a couple of really important new features.

The first is EverWeb’s new Site Shield Addon that provides ‘End to End’ data encryption of your website, from host server to end user browser window. This is especially important if your website handles financial transactions or sensitive customer data. It’s also a great confidence plus for your website visitors knowing that your website is secure with the padlock in place in the browser search bar.

Using the Site Shield Addon makes your website HTTPS, instead of HTTP which is great for your website’s SEO as Google gives HTTPS sites a rankings boost over HTTP sites.

Anyone who has EverWeb 2.4 together with an EverWeb+Hosting Plan of 10GB or higher gets this feature absolutely free. If you’ve got a 2GB EverWeb+Hosting plan, EverWeb Site Shield is available at $29.95USD/year. Check out the Addons section of your EverWeb Client Area to purchase.

The second key feature of EverWeb 2.4 is that you can use the Language Localization feature to help boost your SEO rankings even further. If your website uses one language only, set the Language option in Site Publishing Settings to that language your web pages are written in.

If your website includes more than one language you can setthe Language option on a page by page basis in the Page Inspector. You can even combine the global website setting with page by page overrides for localisation purposes,

Selecting the new language options enables Google, and other search engines, to look at your website pages and serve search results that are better targeted to the audience you want to reach.

So, two great new features to enjoy in EverWeb version 2.4: End to End data encrypted websites and Search Engine Ranking boosts through Site Shield and the new SEO Language support options!

As well as these two major feature additions, there’s also a new dialog box asking you to confirm page and folder deletions. If you don’t want this confirmation dialog box, just tick the checkbox to not show it again.

All this plus the usual maintenance and stability improvements makes this a great release!

20 Jul 2017

Mac OS Tools To Use With EverWeb

No Comments Software, Tips and Tricks, Web Design

Sometimes it’s easy to forget that macOS has a range of time and labor saving apps with features that can speed up your EverWeb website development. These apps are typically located in the ‘Utilities’ folder within the Applications folder of your Mac.

As these tools are part of your macOS, they’re absolutely free, and provide basic functionality, although there are sometimes great features hidden in these apps if you know how to find them. Let’s have a look…

Using Utilities Apps
The easiest way to open any of the apps described below is by a Spotlight Search. Just hit Cmd+Spacebar and start typing the name of the app in to the search box. As you type, the app you’re looking for will appear in the search results. Double click on the app to launch it.

Digital Color Meter
Good For: Matching Up Colors

Sometimes you may need to match up colours correctly in your website e.g. if you are converting an iWeb website to EverWeb you may want to retain your original color scheme in the process. Possibly you may reach for the Digital Color Meter app to do this as it matches color in a number of different ways e.g. HEX Code, RGB etc. There is, however, a quicker way.

In EverWeb open the Color Picker using the Color button in the Toolbar. In the Color Picker is a pipette symbol to the right of the colour swatch (i.e. to the left of the colors you have saved in the grid.) Click on the pipette and you’ll get the same functionality as you would using the Digital Color Meter.

Grab
Good For: Quick and Easy Screen, Window or Selection Captures.

Grab is macOS’s own screen capture utility. You can capture the whole screen, just the window you want or a specific selection. There’s even a timer function. The app supports shortcut keys for these features so it’s quick and easy to use. Files can be saved in PNG, JPG and TIFF formats. The limitation of Grab is that you can’t edit images you have captured which is where Preview comes in…

Preview
Good For: Basic Image Editing Tasks, Instant Alpha, Export File Formats

Preview is probably your go to app when it comes to useful tools to use in conjunction with EverWeb. It’s great for resizing images, especially when converting images to Retina display. There’s an image cropping tool which is useful if you need to refine your image a little after using tools such as Grab. Alternatively, remember that EverWeb’s Masking feature can do the much the same and is non-destructive to the image.

Preview has editing features so you can annotate your images with text or shapes. Adjusting image color is really where Preview does a great job with a host of features you would expect to find in more dedicated graphics apps.

Perhaps the tool that most iWeb users will want to use is Instant Alpha as this was included in iWeb. Instant Alpha replaces a color by making it invisible, thereby creating a transparent background where the color used to be. You’ll find Instant Alpha in other Apple iWork products such as in Pages.

Instant Alpha can be found in Preview’s Toolbar. I would recommend always having the Toolbar displayed as it brings all the features you really need immediately to hand.

Finally, you can export your images in a number of formats such as JPEG, PNG, TIFF and even PDF. To use the saved image, just drag and drop it on to the Editor Window in EverWeb or in to the Assets List if you want to use the image with EverWeb’s Image Gallery or Image Slider Widgets.

Font Book
Good For: System Font Management

Font Book is the place where all of your system fonts are stored. It’s also the place where you can add in additional third party fonts such as fonts from Google Fonts. Rememeber that if you use third party fonts other than Google Fonts, you’ll need to have them properly hosted so they’re reproduced correctly when users visit your website in their browser.

If you add fonts to Font Book, and they do not show up in EverWeb’s Font Panel, just close and relaunch EverWeb and they should appear.

Quick Time Player
Good For: Video and Audio Creation, Basic Video and Audio Editing

In addition to Preview, Quick Time Player is another of macOS’s unsung heroes. Using this versatile app, you can record both video and audio tracks. Video export options go to up to 1080p with macOS Sierra, but in macOS High Sierra expect 4K to be added.

Once you have recorded your video or audio, you can do some basic editing tasks such as splitting clips, adding clips to the end of an existing clip and even trimming a clip. All of these features can be found on the Edit menu.

Quick Time Player is great for when you want to use clips in EverWeb using it’s own Audio and Video widgets!

With macOS Utility Apps, it’s easy to add extra features to your website without any extra cost!

23 Jun 2017

New 3rd Party “EverWeb Widgets” Now Available!

No Comments EverWeb, Software, Web Design, Widgets

Most EverWeb Discussion Forum visitors will already know Roddy McKay whose been a fantastic provider of third party widgets for EverWeb since 2013. Roddy’s EverWebCodeBox website has been a great source of widgets that extend EverWeb’s capabilities.

Roddy’s now created a completely new website, “EverWeb Widgets“, which has just launched with over 200 new widgets designed for EverWeb 2.0 and higher.

The new widgets take advantage of EverWeb’s updated widget API so offering a more feature rich experience than those in the EverWebCodeBox. The widgets are organised in to 20 categories making it easy to find what you want quickly. A website Search button is included to quickly locate widgets and the ‘Info’ menu is a useful resource on all aspects of the new widget packs.

Different widget categories cater for different design needs. The ‘Elements’ widget pack, for example, contains twelve widgets to create tables, lists, scroll to top buttons, text wrapped images, social media buttons and more. More advanced EverWeb users may be interested in widget packs such as the ‘Responsive’ pack which gives you the tools needed to build a responsive design website within EverWeb. The new ‘Responsive’ widgets supersede the ‘Flex’ system found in the EverWebCodeBox and are much easier to set up and use than before. Information detailing how to create a Responsive style website are included as well as some caveats and limitations of this approach.

The new widgets have also taken advantage of today’s web design trends with a new ‘Hero’ widgets category, Podcast widgets, Image Sliders, widgets for mobile and more. The widget packs also take advantage of EverWeb’s Full Width feature and the updates to the EverWeb widget API. All widgets in the ‘EverWeb Widgets’ website are fully described and include a demo so you can see how each widget works in real world situations. Widgets can only be purchased in packs and not individually. The number of widgets per pack will also vary depending on the widget category.

The new third party ‘EverWeb Widgets’ offer a great resource for any EverWeb user who has specific website needs, or requirements, that go beyond what is in the product itself. There are bound to be more widgets available in the future. You can stay up to date with any future widget pack releases from Roddy via the EverWeb Discussion Forum or directly from his website.

Summary
‘EverWeb Widgets’ : Third Party Widgets for EverWeb
EverWeb Version Required: Version 2.0 or higher
Available From: www.everwebwidgets.com
Experience Level: From Beginner to Expert depending on the widgets you want to use
Availability: Now, http://www.everwebwidgets.com

08 Jun 2017

Image Masking in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

Masking has many different meanings, but is commonly used when describing something that is disguised or concealed. When used in EverWeb, masking is used to hide, or obscure, part of an image.

Masking is useful as you can display just the part of the image you want, without having to crop, or edit, the image itself. Masking keeps the original image intact so it can be used again in your Project. Having one image that you can ‘repurpose’ keeps your Project file size down as you don’t have to have multiple images of roughly the same image in your Project.

Masking and Unmasking Images
EverWeb’s Masking feature is accessed either from the Toolbar or from the Format-> Mask menu. If you have an image selected that has already been masked, the Toolbar button will be called ‘Unmask’. Additionally, the Format menu makes the ‘Unmask’ option available. If you prefer, you can use the Shift+Cmd+M keyboard shortcut to quickly unmask a selected masked object (Note that there is no equivalent shortcut key for Mask.)

Where and When Masking Can Be Applied
Masking is only available for images. You can’t mask other objects such as shapes, text, buttons etc. You can use masking in the Blog Editor Preview window if the image has been drag and dropped into the the Blog Post Preview Window. You can’t use masking if you have have drag and dropped images into the Blog Post Editor Window.

Applying the Masking
To mask an image, drag and drop the image you want on to the Editor Window if you have not done so already, either from its original source, or from the Assets List. All images in your Project should be optimized as best as possible before bringing them in to EverWeb. The image file size should be such that it doesn’t adversely slow page loading times and the file name itself should describe the image itself as this is better for your SEO.

Once the image is on the page, size and position it as desired. You can apply Shape Options to the image e.g. stroke and picture frame borders as these effects will generally be maintained when masking the image. However, it’s always advisable ti check the image once you have masked it to see if you get the effect you wanted. To apply the mask, select the image and click on the ‘Mask’ button in the Toolbar or using the Format-> Mask menu option.

The Editor Window will now have a grey semi-transparant ‘mask’ over it except for a square ‘window’ area in the center that you can see through on to part of the image underneath. This ‘unmasked’ area has a dashed line around it.

Moving and Resizing the Selected Image
When you apply the mask, the underlying image still retains its grab handles. This means that you can still manipulate the image as usual e.g. you can resize and reposition the image, apply Shape Options etc. To move the underlying image, click and hold the mouse button down whilst dragging the image to where you want it. Make sure that you don’t click inside the unmasked area itself or outside of the image’s grab handles.

Moving the Unmasked Area
To move the unmasked area over the top of the masked image, click and hold the centre of the unmasked area and drag and drop it to the desired location. When you have dropped the unmasked area in to place you will see its grab handles again so you can resize the area if you want.

Resizing The Unmasked Area
If you want to resize the unmasked area but don’t see any grab handles around it, click once inside the unmasked area. The grab handles will appear. Resize the unmasked area to reveal as much, or as little, of the image as you want.

Finishing The Masking
When you have finished positioning and sizing the mask, click on an area outside the image. The semi-transparent grey mask will disappear. The only part of the image you’ll see is the area you masked, the rest of the image will not be visible.

Masking The Same Image More Than Once
You may want to mask different parts of the same image. Once you have brought the image in to EverWeb, it is available in the Assets List so to reuse the image a second time, just drag and drop it from the Assets List on to your page. You do not need to drag and drop it again from the original source location.

Removing The Masking
Whilst there’s no visible indicator to show if an image has already been masked, you can easily find out by selecting the image and looking at the Mask button in the Toolbar. If it shows ‘Unmask’ then the selected image is currently masked. To remove the mask simply click on the ‘Unmask’ button. The whole image becomes visible again.

What Happens If The Mask Is Wrong?
If you have not masked the image how you wanted it, just reapply the mask. Additionally, it’s best not to use ‘Undo’ or ‘Redo’ commands as it may lead to unexpected results.

Masking is a handy feature, saving time, effort and Project file space! It’s worthwhile becoming familiar with how it works.

As always, if you have a question about this blog, feel free to comment in the Comments Section below!

11 May 2017

Easily Move & Resize Objects in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

If you use EverWeb version 2.1 or higher, you may not have discovered a couple of new, really useful features for selecting, moving and resizing objects in the Editor Window. These new features save you time and effort, as manipulating objects will not affect other objects on the page you’re working on. So you can work more quickly, more efficiently and with fewer mistakes.

Here’s a walkthrough of these super new features!

  1. Moving objects that are partially,or completely, covered by other objects
  2. When designing web pages, you may find that you have objects such as shapes or images that overlap, or cover, most of another object. That’s probably because your design requires this, or that doing so solves a particular page design issue. Whatever the reason, there may be times where you want to change your design which requires you to move an object out from underneath a pile of others. Like playing ‘Jack Straws’ you want to take one object out without disturbing the rest.

    Before EverWeb version 2.1, the tricky part would be keeping the object you wanted to move selected. Once you selected the object, it would deselect when clicked on to move it. The only way round this was to select and move the objects on top of it out of the way first then put them back later. That takes time and is frustrating and can lead to your page design becoming unnecessarily disrupted.

    With EverWeb 2.1 or higher, things are a lot better. First select the object that you want to move. The best way to do this is to click on the overlapping area of an object that covers the one you want selected. When you do this the object on top is selected. Now right (secondary) click to bring up the menu of options. At the bottom of the list is ‘Pick Layer’. When you mouse over this menu option you will see all of the objects at the location that you clicked on. Choose the object that you want to select i.e. the one that is under the overlapping object.

    You should see the object beneath the overlapping object is now selected. Next hold down the Command+Option Keys and drag the selected object out from under the rest. That’s all there is to it!

  3. Moving objects up or down the page without disrupting the page layout
  4. The second keyboard short cut enables you to move objects down (or up) your page without the whole page layout needing to be reorganised e.g. you may want to insert an Image Slider or YouTube Video widget in to the middle of your page. To create the space for the widget, you will need to move some of the page content down en masse. You could select all of the objects then move them but this often leads to some objects being left behind. To solve this problem just use the shortcut instead.

    First select an object that’s at the place where you want to open up some space. The object should be one that you want moved down the page. When selecting the object, hold down the Cmd+Shift keys at the same time. With these keys held down, drag the object down the page. As you do this, all objects underneath it will also be dragged down the page in synch. Release the mouse and keyboard keys to finish.

    Note that it’s the selected object and those below it that get moved down. If you have other objects on the same (horizontal) level as the selected object, they will not move down.

    This is also a great option if you have too much space and need to drag page contents up the page en masse and in synch!

  5. Resizing an object without disrupting the page layout
  6. There may be times when you want to resize an object and want all of the objects below it to move down, or up, the page as you resize it. For example, you have a full width rectangle containing text. You want to add more text but need to size the rectangle so it is large enough to contain the extra text. In this instance select the rectangle, press the Cmd+Shift keys (i.e. the same keys as in the last example) and resize the rectangle using one of its grab handles. You’ll notice that all content below the rectangle moves down in synch.

Moving and resizing objects around your page becomes just became incredibly easy and effective using these simple keyboard shortcuts!