19 Nov 2013

EverWeb and Custom Fonts Part 2: Use Any Font On Your EverWeb Site

17 Comments EverWeb, Tips and Tricks

As discussed in our previous post about fonts in EverWeb, the easiest way to use custom fonts in EverWeb is to use Google Fonts. However, if there is a font that is not available on Google Fonts that you just have to use, it is actually fairly easy to use any Font in EverWeb.

On the Mac, most Fonts will have the file extension .tff or .otf. Your system Fonts can be found in;

/Library/Fonts/

(Note: this is your system’s Fonts folder, not your user Fonts folder which is where you’ll find any Fonts you have installed manually)

Here you will find a list of Font files ending in .ttf (truetype font) or .otf (opentype font).

Remember, before using any fonts on your website make sure you have checked the font’s licensing to make sure you are actually allowed to use it online. Fonts can have some complex licensing and you may need to purchase a license before you use it on your website.

So once you have your .ttf or .otf Font file, drop it onto EverWeb’s Assets list. It will be listed under the External Files section as shown;

EverWeb External Files

Fonts in EverWeb

Now create your text object and open the Fonts panel. Select your custom Font (remember, you must have your font installed on your computer for this to work).

Pay special attention to the Font name in the Font Panel because the code we will be entering in the last step requires that the Font name be entered exactly as shown in the Font Panel.

EverWeb Font Panel

Select your Custom Font from the Font Panel

Now for the last and final step we actually have to make sure that EverWeb publishes your website with the Font file. So select your web site name in the upper left hand corner to show your Publishing Settings. Go to the Head Code field and enter the following code. Pay special attention to the modifications you must make.

<style>

@font-face {

font-family: "FONTNAME";

src:  url("FONTFILE");

}

</style>

Remember when we previously said to pay close attention to the font name in EverWeb’s font panel? The reason is that in the above code FONTNAME must be exactly like the Font name in the Font Panel. In our example we installed Tribeca so that is what we would replace FONTNAME with.

For the FONTFILE we must replace that with a reference to our actual Font file. That is easy to do in EverWeb. go to your Assets list and right click on the Font file under External Files. Select ‘Copy Relative Path’ which will copy a file reference to your computer.

Copy Relative File Path

Copy Relative File Path for your Font file

Paste it over the FONTFILE section in the code. In our example, the final code will look like this;

<style>

@font-face {

font-family: "Tribeca";

src:  url("{!-ASSETSPATH-!}External%20Files/Tribeca.ttf");

}

</style>

And that’s all there is to it to get your fonts working with MOST web browsers. Of course one browser is going to give us trouble and you’ve guess it, Internet Explorer needs a different format for the Font file. We’ll discuss Internet Explorer in the next tutorial and how to use different stylings with these fonts.

13 Nov 2013

EverWeb and Custom Fonts Part 1: Google Fonts in EverWeb

3 Comments EverWeb, Tips and Tricks

Back in the old days of the web it was very difficult to add your own custom fonts to your web site. You had to use a set of “web-safe” fonts. That is, fonts that are installed by default on all operating systems that a visitor may be using when they visit your web site.

A font could only be used if it was actually installed on your visitor’s computer. Otherwise the browser would substitute the closest matching font and your web site could look completely different to all visitors.

One way around this, and the way iWeb handled this, was to convert non web-safe fonts to images. This had a number of issues. It would cause your web site to load slower, search engines couldn’t read the image text so they couldn’t properly rank your web site, resizing the text within the browser wouldn’t work correctly and assistive readers wouldn’t be able to properly display your web site.

Google has come up with a great, and completely free, solution called Google Fonts. Basically offerings hundreds of fonts for free that work on any browser and on any device. Now you have hundreds of fonts to choose from instead of just a handful.

Using Google Fonts is super easy in EverWeb. It basically takes care of all the hard work for you, all you have to do is download the font from Google Fonts and install it on your computer.

To download the font from Google Fonts simply press the “Add to Collection” button. You can add as many fonts as you like. Then press the Down Arrow button near the top of the page as shown below;

Download Google Fonts for use in EverWeb

Download Google Fonts for use in EverWeb

Once your font is downloaded double click it to open it up in Font Book. Font Book is your font manager on your computer. You’ll see a button that says ‘Install Font’ that you need to press to install your font on your computer.

Install the Font on Your Computer

Now your font is installed and you can use it in EverWeb just as you would with any font. In EverWeb, open the Fonts panel by pressing ‘Fonts’ in the bottom toolbar.

Select your Font in EverWeb's Font Panel

Select your Font in EverWeb's Font Panel

When you publish, EverWeb takes care of making sure your Google Font is properly installed on your site. You don’t have to do anything further.

Even though Google Fonts offers many fonts to choose from, you actually aren’t even limited to them. You can add any font you want to your EverWeb web sites. I’ll discuss how to do that in my next post!

04 Nov 2013

Can EverWeb Replace Your iWeb? Complete Review…

27 Comments EverWeb, Software

If you haven’t yet used EverWeb (formerly EasyWeb), touted as the iWeb Replacement, it may be time to give it a try.

With Apple no longer updating iWeb it is only a matter of time before iWeb completely stops working on future versions of OS X. In addition, you won’t be able to expect any updates. I had the opportunity to beta test EverWeb over the last few months and I wanted to answer the question on everyone’s mind, is it time to replace iWeb with EverWeb?

Pros

User Interface

First and foremost EverWeb brings a very similar user interface that users are used to with iWeb. You’ll feel right at home in EverWeb.

iWeb User Interface

iWeb User Interface

 

EverWeb User Interface

EverWeb User Interface

 

Unlike other web development tools, EverWeb works very similar to iWeb, letting you place images, text and shapes anywhere on your web page. There are no restrictions to how you can design your website. You have the familiar Inspector to make your web pages, Media Library to access all your images, built in shapes and Widgets.

Navigation Menus with Drop Down Menus

EverWeb comes equipped with a much requested feature that iWeb users have needed for years. Drop down menus let you  provide better navigation to your visitors and easier organization of your website. EverWeb’s navigation bars are highly customizable, letting you add mouse over effects, background colors and more.

EverWeb Navigation  Menu

EverWeb Navigation Menu

Mobile Websites

EverWeb makes it extremely easy to create Mobile websites for users on iPhones or other Mobile devices. All the built in templates come with a Mobile version and there is even a video tutorial explaining how to create a mobile version of your site.

 

Mobile Websites in EverWeb

Mobile Websites in EverWeb

 

New Widgets

EverWeb includes many of the familiar widgets you are used to including Google Maps, RSS Feeds, YouTube videos and Image Galleries. It also includes new widgets for Social Media Integration with Facebook, Twitter and Google+, Contact Forms, Image Sliders and even HTML5 Audio and Video.

All of the widgets work great on Mobile sites as well.

One not so obvious but major enhancement in EverWeb over iWeb is the way the HTML Widget works. In iWeb it was embedded as an external page. In EverWeb the HTML Snippet actually embeds the HTML code directly on the website. This allows for much more advanced HTML codes being added to your website.

Some of EverWeb's Built in Widgets

Some of EverWeb's Built in Widgets

Built in Search Engine Optimization

iWeb had virtually no built in search engine optimization features. You had to use external tools such as iWeb SEO Tool to get your iWeb site properly optimized for Google and other search engines so your visitors could actually find your website.

EverWeb includes all of iWeb SEO Tool’s features built in so you can get your website optimized right from within the software.

EverWeb’s code is also much more efficient than iWebs was when it came to search engine optimization. There is no longer a requirement for third party tools to get your site properly optimized.

From within EverWeb you can change your title tags, meta tags and page file names. You can also include custom Head and Footer code.

Actually Talk With The Developers!

Have you ever wished Apple would respond to one of your feature requests for iWeb? Or they would give you some insight on how to use a certain feature?

Customer support is often a much overlooked feature of any software product. With EverWeb you can actually speak directly to the developers on the company’s forums.

It’s great to actually be able to submit feedback and not get left in the dark on when a feature may be added or a bug fixed.

Not only that, we can look forward to more than 1 update every year or two that we got with iWeb!

The Cons

Of course with EverWeb just a baby at version 1, there are some things that still need to be worked on.

Blogging

Although EverWeb has stated that a blog feature is the next big feature to be added, EverWeb currently lacks an easy to use blogging system.

Of course you can just create a separate page for each blog post you want to add and use Disqus for comments, it’s a little tedious.

Image Galleries

EverWeb does include a built in Image Gallery that lets you easily add a block of images to your website. The Image Gallery works great on Mobile Devices and uses a cool Lightbox affect for popup images.

It also includes an Image Slider that most new websites are using on their website.

However, EverWeb’s Image Gallery lacks the ability to include image captions and automatically split up large image galleries onto multiple pages.

Like the blog feature, you can add this yourself but it is a little tedious. It would be great if EverWeb’s Image Gallery were to be improved to include some of iWeb’s features.

Image Editing/Effects

iWeb included a great feature to make small adjustments to your images right from within the application. Unfortunately you cannot do this within EverWeb. You would have to use an application like Preview and then bring your image into EverWeb.

Pricing & Availability

EverWeb comes in two versions. A standalone version that lets you publish to your existing web hosting service and a one-click publishing version that includes web hosting.

 

Most iWeb users will be more than happy with the $99/year one click publishing solution. It gives 2GB of file space which is usually more than enough for most iWeb sites. You get your own custom email addresses and al updates are free.

The standalone version costs $80 USD and comes with free updates and support for a year.

Final Say

There are a lot of nice little features in EverWeb that I didn’t have time to go over in this post. I will do some more tips and tricks in future posts.

In the mean time I think it is definitely worth a try. If you do need a blog just yet you should hold off on the change but otherwise I would say EverWeb is the closest thing you will find to iWeb and in many cases it is MUCH better.

Download The Free EverWeb Trial Now

I for one am very happy that a company came to the rescue of iWeb users with an app that they are familiar and comfortable with while adding new, modern features.

 

 

14 May 2013

Check Out EverWeb, The All New Drag and Drop Website Builder

1 Comment Tips and Tricks

Worried iWeb is going away? Want something more powerful but just as easy to use? Check out RAGE Software’s new EverWeb website builder.

Currently in beta testing, EverWeb boasts some exciting new features, a beautiful new interface and some update website themes.

Check out the “What is EverWeb” video below for a sneak peak and join the Facebook group to follow development.

16 Jan 2013

iWeb Replacement Is Called EverWeb

13 Comments iWeb 101

The iWeb replacement app that has been buzzing in the iWeb community the last month or so will be called EverWeb. This is according to an email sent out by the developers of the iWeb replacement.

The email also let us know that EverWeb will be shown at MacWorld 2013, so if you will be in the bay area at the end of January, you can get a firsthand look at EverWeb.

The email also gave the Facebook page for EverWeb, where users can interact with one another and ask any questions they may have about EverWeb.

I was able to speak with the developers and here is my insider knowledge on EverWeb:

1) It is very similar to iWeb in the sense that it is pure drag and drop style website building.

2) iWeb lacked search engine optimization features. EverWeb will have these features built in.

3) There will be more widgets to work with.

4) There will be better, more modern templates.

5) You can create multiple sites easily.

All of this is really exciting news! I can’t wait until we get to try EverWeb out. In the meantime, head on over to the EverWeb Facebook page to learn more.