Archive for Web Design

24 Nov 2016

NEW! iWeb to EverWeb 2.0 Website Conversion Service Launched!

No Comments EverWeb, Software, Web Design

If you’ve developed an iWeb website you may be thinking of converting it to EverWeb, especially now that EverWeb version 2.0 has an all new blogging environment! So now is a great time to switch over, but even though there’s an easy Import facility built in to EverWeb 2.0, you may not want to spend the time and effort redeveloping your website.

RAGE Software, the makers of EverWeb, has the ideal solution for you! The company’s just announced the launch of a new service where they will do all of the work for you! The service will convert your iWeb website to EverWeb using updated features such as Master Pages, SEO features, mobile page optimizations, advanced contact forms, popup window and much more. So you get an updated website with modern day features included!

The EverWeb website has more about the iWeb to EverWeb Conversion service and includes a Contact Form to complete to get a quote for the conversion work.

14 Nov 2016

EverWeb version 2.0 Launched with Blogging!

No Comments EverWeb, Software, Web Design, Widgets

ew20-default-posts-screen

EverWeb version 2.0 has just been released to the public and includes the highly anticipated blogging feature!

Great News For iWeb Users
For Apple iWeb users, EverWeb version 2.0 is the release many have been waiting for. It’s headline feature of a fully integrated, feature rich blogging experience comes with a look and feel that’s immediately familiar and intuitive to iWeb users. You can import your blogs from iWeb in to EverWeb at the touch of a button. Your blog entry headings, creation dates and main body text (including font styling) are transferred over easily. For those using WordPress blogging, EverWeb version 2.0 can import them in the same manner.

Key EverWeb version 2.0 Blogging Features
Whilst EverWeb’s new blogging feature retains an iWeb look and feel, there are still many new and improved features. EverWeb version 2.0 includes a blog post editing window to add and format your text, add images, hyperlink text, create lists, paragraph headings, quote levels and more! The Editor window is great for adding features specific to each blog post. You have all the tools bloggers expect with the convenience of a Toolbar to access commonly used features.

As well as the Editor Window, there’s also the Preview window. This window is where you can add features that you want to apply to all of your blog posts, e.g. social media buttons. Drag and drop the object that you want on to the Preview Window and it will then appear on all blog posts. In many ways it’s like using a Master Page.

There are a lot more features to discover, many of which can be found in the blog’s Widget Settings. For now though, here’s a summary of EverWeb 2.0’s main blogging features:

  • Automatic lists
  • Image wrapping
  • Justified text
  • Comments using Disqus or Facebook Comments
  • Importing iWeb & WordPress blog posts
  • Embedded media including video
  • Automatic Google Fonts
  • Automatic RSS feed creation and more!

Other EverWeb version 2.0 Features
Whilst blogging is the massive new feature of EverWeb 2.0, there are also some other great additions to the product!

  • The Toolbar has been relocated from the bottom of the UI to the top. This is good news as it’s better for your workflow. Once you’ve used it for a day you’ll never want it back at the bottom!
  • The new Contact Form Advanced widget that will help you create super advanced contact forms you can fully customize. The new Widget includes ten form ‘Controls’ so you can add questions to your contact form using drop down menus, radio button or checkboxes. You can include default values in Text Controls to help visitors via pre-filled text. All Contact Form Advanced options are easy to use as you would expect. The regular Contact Form remains in place for simple forms.
  • Character Spacing has been added to the Spacing section of the Text Inspector so you can now stretch out text horizontally. Great when you need to tweak the the look of your text!
  • A new RSS Subscribe button has been added on the Insert-> Button menu so your visitors can subscribe to your EverWeb or external blog.
  • The EverWeb User Manual has been updated and improved and includes info on blogging in EverWeb. As a small new feature, you can now access the Manual directly form the Projects Window as well as from the EverWeb Help menu.

For more on the new EverWeb version 2.0 and a new look EverWeb website, go to the EverWeb website to see it’s new blogging feature in action!

For information about updating your version of EverWeb to the new version 2.0, check out the official EverWeb version 2.0 announcement.

If you’re looking for EverWeb tutorials about the new version, there are preview videos on YouTube to enjoy.

If you have a question about the new version of EverWeb, let us know in the Comments section below. We’ll have lots more on EverWeb 2.0’s new features in the near future for you!

06 Oct 2016

iWeb and macOS Sierra Compatibility

No Comments iWeb 101, Software, Tips and Tricks, Web Design

iweb-dead

As you may already know, Apple has recently released the new MacOS Sierra Operating System (10.12) to the general public. If you’re thinking of upgrading and also have iWeb installed on your computer read on…

Is my hardware capable of Supporting macOS Sierra?

macOS Sierra can only be installed on the following Macs with a minimum of 2GB memory and 8GB storage space free…

  • iMac (Late 2009 or newer)
  • MacBook (Late 2009 or newer)
  • MacBook Pro (Mid 2010 or newer)
  • MacBook Air (Late 2010 or newer)
  • Mac mini (Mid 2010 or newer)
  • Mac Pro (Mid 2010 or newer)

If your Mac is older than those listed you won’t get offered an update to the new OS if you run the App Store.
As well as the above hardware compliance you’ll need to have one of these Mac operating systems installed…

  • OS X El Capitan v10.11
  • OS X Yosemite v10.10
  • OS X Mavericks v10.9
  • OS X Mountain Lion v10.8
  • OS X Lion v10.7

Is iWeb compatible if I upgrade to macOS Sierra?
So far it’s early days for the new OS, but reports coming in from various sources, including our own testing, point to some issues with iWeb such as

  1. The blog post list is too small so can’t be used at all as you can’t see any blog posts!
  2. Intermittent and inconsistent crashing when publishing websites leading to Force Quit scenarios
  3. Images sometimes fail to publish at all
  4. Sometimes code appears on published pages
  5. Lack of support for retina images within iWeb and no Retina display support for published websites.

Conclusions
You can probably still use iWeb on macOS Sierra as long as you don’t mind putting up with some, or all, of the problems listed above. Apple’s new APFS file system, introduced in macOS Sierra, is built for the future as it underpins and unites macOS, iOS, watchOS and tvOS. However, for legacy applications such as iWeb, it may prove to be the cause of crashes and other compatibility issues.

There’s also the ongoing issues caused by iWeb not being updated, or maintained, for over five years now. Technology moves on so our recommendation is to look out for the upcoming EverWeb 2.0 release. The new version is in beta test at the moment and is expected to include blogging as it’s headline feature. iWeb users will feel right at home with EverWeb’s easy to use iWeb like interface that brings today’s technology with it. We’ll update you on this exciting new release as more details emerge and a launch date is announced!

05 Aug 2016

From Desktop to Mobile and Back in EverWeb

4 Comments Software, Tips and Tricks, Tutorials, Web Design

When you create a website in EverWeb you should always create pages for desktop/tablet devices and equivalent pages for mobile devices. It’s important to have a mobile presence as our phones are now the primary way in which we access the Internet.

Once you’ve developed your website, you’ll want to make it so that your website visitor will be automatically directed to the correct page style on whichever device they’re using at the time: your mobile website pages when using a mobile phone and the desktop website when using a desktop or tablet device.

Redirecting From Desktop To Mobile Websites

In EverWeb it’s easy to set up this automatic redirection within your Project file.

  1. You first need to tell EverWeb which pages in your Project are specifically for use on a mobile device. To do this, select your mobile page and go to the Page Inspector. Scroll down to the ‘Mobile Settings’ section. If the section is closed, click on the arrow symbol to the left of ‘Mobile Settings’ to expand it.
  2. Check that the drop down box for ‘Mobile Pages’ is set to ‘None’, then tick the box ‘This page is for mobile devices’. That’s all you need to do to set up your mobile page. Repeat this step for all of your ‘mobile’ type pages.
  3. Next, link the corresponding desktop page to the mobile page. For example, you may a ‘Contact’ page for desktop and one for mobile. You need to link the pages together so that when a visitor goes to the Contact page they get the right experience for the device they are using.
  4. in our scenario, to link the desktop page to the mobile page, you would go to the desktop version of the ‘Contact’ page. Scroll down to the Mobile settings section. This time, under ‘Mobile Page’ click on the drop down and choose one of the following options:
    • Select ‘One of My Pages’ if the mobile ‘Contact’ page is in the same Project file as the desktop page. When you select this option, select the page you want in the ‘Page’ dropdown that appears. In our case it is called ‘Mobile Contact Page’.
    • Select ‘External URL’ if the page you are linking to is in a separate Project file. If you are using this option remember to enter the full URL of the ‘Contact’ page you are linking to in the ‘URL’ box.
    • Remember that you should only select ‘None’ for a mobile page, not on a desktop page.

    Your desktop and mobile pages are now linked. Once you have completed this for all pages that have desktop and mobile counterparts, publish your website and test the redirection on different types of device. It’s good practice to test as you can see that the redirection works and that you have linked to the right corresponding page.

    Redirecting Back From Mobile To Desktop Websites

    There may be times where your visitor actually wants to use the desktop website in preference to the mobile website, when they are using a mobile device. It may be that there’s more detailed information available on the desktop website.
    If you have set up your redirection as outlined above, you will always go to the mobile website if on a mobile device. To stop this automatic redirection and force the use of the desktop website on a mobile device take the following steps…

    1. Add a piece of text or a button to your mobile website pages to act as a link to your desktop website e.g. a button labelled as ‘Go to Desktop Website’. You may just want to this only on the ‘Home’ page or on all of your mobile pages. The choice is yours.
    2. Once you have added the linking piece of text or button to your page(s), select it and go to the Hyperlinks Inspector. Enable the Hyperlink and then set the ‘Link To:’ drop down as ‘An External Page’.
    3. In the ‘URL’ box enter the full URL of the desktop web page you want to link to. It’s easier and more accurate if you cut and paste the desktop page’s URL from the browser’s search box in to the URL section in the Hyperlinks Inspector.
    4. Once you have the URL added, go to the end of the URL address and add in ‘?fullsite=true’ e.g. http://mywebsite.com/home-pagre.html?fullsite=true
    5. Once you have completed the Hyperlink, publish your website.
    6. On a mobile phone go to the mobile page with the redirection text or button. Click on the link to test that it redirects you to the desktop website.

    Your website is now complete and will direct your visitors to the mobile website automatically as needed with the option to override if needed!

    If you have a question about this blog article, let us know below! Thanks!

07 Jul 2016

Using Font Awesome with EverWeb

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

You can easily add professional, up to date, icons such as Facebook, Google+, Pinterest and linkedIn to you EverWeb website with the minimum of effort. All you need to start with is Font Awesome, a free collection of over 630 scaleable icons that will probably have an icon for everyone.

About Font Awesome
Font Awesome can be used by everyone, from those new to website building right through to experienced coders. The set of icons is extensive, including product brands such as those mentioned above, accessibility icons, web application icons, file type icons and more. Font Awesome icons are updated regularly. If you use an icon and it’s updated in Font Awesome, your website icon will automatically update without you having to do anything! And, if there’s an icon you want that’s not in Font Awesome yet you can request that it be included.

Font Awesome icons are vector based and so scaleable for your needs. You won’t have to worry about how your icons will look on different displays anymore. It’s already Retina ready!

Setting Up Font Awesome To Use in EverWeb
To use Font Awesome icons in EverWeb, there are a couple of steps you need to take to set up it up for use. The first step is to place some code in the Header section of your EverWeb website Project. The code used points to the source of the icon set so it can be accessed and displayed correctly on your web pages. To get the code…

  1. Go to the Font Awesome website http:www.fontawesome.io
  2. Click on the link to get your own embed code
  3. In your EverWeb website project, go to the Site Publishing Settings.
  4. In the ‘Head/Footer Code’ section, paste the embed code in to the ‘Head Code’ section.

You’re now ready to start using Font Awesome fonts in your website!

What You Can Do With Font Awesome
Font Awesome offers a very flexible way to use icons your website. You can display icons in different sizes, stack them on top of each other (e.g. you can place the Facebook icon in a square), have animated icons etc.

There are a couple of ways you can use Font Awesome icons in EverWeb. In the example below we are going to add a Facebook icon to a website:

Using the HTML Snippet Widget

  1. Drag and drop the HTML Snippet Widget on to your page.
  2. Insert the HTML code you want to use and the Font Awesome icon name as desired. The Font Awesome website has many examples on their Examples Page http://fontawesome.io/examples/
  3. e.g. to add a Facebook icon in a square, enter the following code in to the HTML Snippet Widget. ‘2x’ denotes a doubling of the size of the square.






    fa-facebook on fa-square-o

  4. When you have pasted in the code, click ‘Apply’. If the HTML snippet appears not to have updated, try resizing the selection box a little to force a refresh.

Font Awesome is used with HTML code so if you’re new to HTML or interested in learning, the examples on their website will give you a good start. Here’s how you add a hyperlink to a Facebook page using the HTML Snippet Widget

In the example above replace ‘yourpagename’ with the Facebook page name you want.

football forever 1

In this example, EverWeb’s own HTML Snippet Widget is used to add code to produce the hyperlinked Facebook icon.

Using Widgets From The EverWeb CodeBox
The second method of inserting Font Awesome icons uses Widgets from the EverWebCodeBox. These widgets are produced by third party provider Roddy McKay. Find out more at www.everwebcodebox.com where there are plenty of widgets to purchase that take advantage of Font Awesome. The Touch Share Tab Widget illustrated below is just one example:

Using the Touch Share Tab Widget
The Touch Share Tab Widget takes the trouble out of coding buttons with links, background colors and so on which you have to do if use the HTML Snippet Widget.

  1. First you will need to purchase the widget pack you want to use – in this example the Touch Widgets pack.
  2. once installed, drag the Touch Share Tab Widget from the Widgets Tab on to your web page.
  3. In the Widget Settings, enter the name of the Font Awesome icon in the ‘Icon’ field. For Facebook, it’s just ‘Facebook’ There’s a full list of icons and their names on the Font Awesome website.
  4. For the background color of the Facebook icon use the value Hex # 3B5999 which is the deep blue color used by Facebook. There are plenty of Hex #’s on the Internet for the background colors of most brand icons.
  5. Change the shape of the background from square through to round using the ‘Corner Radius’ option.
  6. Shadow and border colors options are also available to produce the effect you want.
  7. Add the URL Link to your Facebook page and you’re done! Remember to test that the button and link work correctly!
  8. Touch Share Widget

    This example uses the Touch Share Tab Widget from the EverWebCodeBox. There are plenty of customisation options in the Widget so there is no need to code.

    Troubleshooting Font Awesome
    If your Font Awesome icons don’t appear on some or all of your website pages, you may need to replace your embed code with the following…

    The above code explicitly refers to the latest version of Font Awesome (version 4.6.3). When Font Awesome is updated, you’ll need to update this HTML reference to point to the new version.

    Also be aware that if you or your visitors use AdBlock Plus you may find some brand icons are not visible. In this case please refer to the http://fontawesome.io/icons/ page for more information.

    Finally, if you make changes to your Font Aware icons in EverWeb and they don’t appear to update in the Editor Window, just resize the selection box a bit to refresh it!

    Font Awesome and the EverWebCodeBox are great tools to extend your EverWeb websites. Have fun with them!