Archive for Web Design

05 Aug 2016

From Desktop to Mobile and Back in EverWeb

No 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!

02 May 2016

Creating Dynamic Pages with EverWeb’s ‘Fixed Position’ Feature

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

EverWeb comes with a couple of features that help you easily create dynamic web pages. ‘Fixed Position’ is a great example of a feature that can be used to give your website a fresh, robust appearance. The feature let’s you fix an object in place along the horizontal axis enabling you to produce some cool effects for your web pages. Add in EverWeb’s ‘Always On Top’ and ‘Full Width’ features and you get even more possibilities. Here are three examples of how you can use and combine some of these features to good effect…

Vertical Buttons
Many websites have buttons vertically set in place, especially for Social Media purposes, so that as you scroll down the page the buttons stay in place and visible at all times. It’s easy to create this type of effect in EverWeb. In our example we go one step further by creating a pager with placeholder buttons and pictures fixed in place to create a fixed pane on the left and a scrolling pane on the right of the page…

  1. To start, you’ll probably want to add the buttons to a Master Page so that they can be used throughout your website.
  2. If you haven’t done so already drag and drop the buttons you want on the page e.g. down the left hand side.
  3. Use the Arrange-> Align Objects and Arrange-> Distribute Objects menus to help properly space and align the buttons.
  4. When placing the buttons remember to keep the left hand gutter of the page clear of any other objects so your buttons don’t bump in to anything as you scroll up and down the page.
  5. When placing a button check the ‘Fixed Position’ box in the Metrics Inspector tab to keep it in place as the page scrolls.
  6. When you come to preview the page, if you find any of the buttons obscured, this may be due to another object on the page ‘floating’ above the button and hiding it. This can happen when you have a Master Page attached to a regular page. Master Page objects lie beneath regular page objects which float above them sometimes causing objects, in this case the buttons, to be obscured. Use the ‘Always On Top’ feature to manually float any obscured buttons to the top of the page. This feature is on the Arrange menu and the Metrics Inspector.

The effect is shown below…

vertical Scrolling start

The vertical scroll pane is on the right with the buttons and pictures fixed in the left hand column

Vertical Scrolling end position

Vertical scrolling in action with the right pane scrolling up and the left pane remaining fixed in place

Creating a Split Horizontally Scrolling Page
Fixed Position can be used to set up a horizontally scrolling page where the left hand side remains fixed and content slides behind it when you scroll to the right. This type of effect may be something that is effective for mobile environments. To make such a page…

  1. Set the page Content Width to a wider than normal value in the Page Inspector, e.g. 2000 instead of 1000 to create a two page width effect.
    Once you have increased the Content Width value, you may have to reposition objects that were already on the page back in their original position, especially objects that are in the header and footer areas as they may have become displaced. In our example, the social media buttons were displaced, so they been moved to the left and set with a Fixed Position within the original Content Width of 1000, so creating the illusion of a two page effect.
  2. If you are creating this effect for a mobile device, you may want to also adjust the Content Height so the page stays ‘fixed’ stopping a visitor from trying yo scroll up and down as you want them to scroll left to right.
  3. To create the effect, add a rectangle that is the length of the page and color it to contrast with the page background.
  4. The rectangle shape has been set to ‘Fixed Position’ before the pictures and buttons are added on top of it. All of these objects should also be set up as Fixed Position. It’s also recommend that ‘Always On Top’ is set for all of these objects to guarantee that they always float above everything else placed on the page.
    When you create the page you may find Bring Forward, Bring to Front, Send Backwards and Send to Back useful in floating objects on the page to the ‘depth’ that you want them.
  5. In addition, EverWeb also has a great little feature called ‘Pick Layer’ If an object is obscured by another, hover the mouse over the object and perform a secondary click (double tap). On the sub menu you’ll see the Arrange menu options that were just mentioned. At the bottom of the menu is the ‘Pick Layer’ option. When you hover over this option you will see a list of all the layers that exist along the z-axis at that location. Select the layer you want.

When creating your double page effect it’s best to work in columns so that you separate one screen width from the next. You may want to test this on your desktop or mobile device to see how the effect works in practice. You can see how the effect looks in the two screenshots below.

Horizontal Scrolling Start

Horizontal Scrolling at the start position. On the Left is the dark rectangle which the contents to right will slide underneath.

Horizontal Scrolling End Position

The contents of the page slide under the section on the left which is fixed in place using Fixed Position

Creating A Picture Scroller
Our third example is one where you create a scrolling picture view. In this example, as you scroll down the page, the text on the left hand side of the page remains in place, but the picture that is embedded in the text changes as you scroll up and down the page.
To create the effect…

  1. Select the pictures you want to use. Make sure they are the same size as each other.
  2. Next arrange the pictures in a column with no gap between the pictures.
  3. Fix Position the picture column. Once you have done this, it may be an idea to group the pictures together using the Arrange -> Group menu so they remain as a ‘unit’.
  4. Now create a rectangle shape in the same color as the page background. Shape the rectangle so it’s the same width as the picture column.
  5. Place the rectangle at the bottom of the first picture and extend it downwards to hide the rest of the picture in the column that may be visible.
    Once the rectangle is in place fix it’s position and set ‘Always On Top’ on.
  6. To complete the effect, duplicate the rectangle shape. Duplicating is better than creating a new shape as you retain all of the original shape’s attributes. Place the shape above the top of the first picture. so the bottom edge of the rectangle meets the top edge of the first picture. The top of the rectangle should be extended to the top of the page.
  7. The effect is now complete as can be seen in the screenshots below. You can test out the effect whilst in the Editor Window. When scrolling down the page, make sure that the picture column does not reappear over the top of the page.
Picture scrolling effect

The picture scrolling effect at the start position

Picture Scrolling End Position

When the page is scrolled some text moves in the center of the page and the picture scrolls to the next one in sequence

When creating effects such as those above, always remember if you are creating for mobile or desktop devices as the results may look good on one type of device and not on another. It’s also worth remembering to Preview your web pages to check that you don’t have any scrollable objects bumping in to fixed objects or that you don’t have hidden objects suddenly becoming visible. There are many more possibilities with Fixed Position and the related Always On Top and Full Width features in EverWeb!

30 Jan 2016

EverWeb’s Heading Tags Widget Explained!

2 Comments EverWeb, Tips and Tricks, Web Design, Widgets

EverWeb’s Heading Tags Widget was introduced in version 1.7. The Widget helps coders easily insert HTML Heading Tags into a web page. That sentence probably makes sense to those of you who have coding experience, but to non-coders out there it may not make much sense. It’s worthwhile exploring the widget in detail as it may help improve your SEO (Search Engine Optimisation), so bear with me…

What is a Heading Tag?
Before I get to answer that question, let’s put Heading Tags in context. When you develop your web pages in EverWeb, you just drag and drop the objects you want to use on to the page and customize them as you need to. When finished, you ‘Publish’ your website and your web pages are converted in to HTML (HyperText Markup Language) code and uploaded to the server that hosts your website.

The HTML code that’s generated is structured as HTML is a language and has rules and guidelines to follow just as any other language form has. The Heading Tag is an HTML ‘language’ element that can be used to explicitly add structure to the code generated by EverWeb. If you take this article as an example, it has a title at the top (‘EverWeb;s Heading Tags Explained’) and headings to break the content in to smaller more manageable parts (e.g. ‘What is a Heading Tag”). The headings could also have sub headings, or even sub-sub headings. If we want, we can explicitly make the titles and headings on our page in to specific HTML Headings using the Heading Tags Widget.

Six levels of Heading are allowed, ranging from the most important (called ‘H1’) to the least important (called ‘H6’). Following our above example we would use an H1 ‘tag’ for the title of our article ‘The Heading Tags Widget’ as it’s the most important heading on the page. The next level of heading, the section titles for the article (e.g. ‘What is a Heading Tag’) would be an H2 tag. Any subheadings would use an H3 Heading Tag and so on down to H6.

Why Use Heading Tags At All?
There are two good reasons for using Heading Tags: the first is that HTML tags can be useful for SEO as search engines can target the headings in the page using the tags you insert. Without the Heading Tags, search engines will just treat your headings as regular text. The second reason for using Heading Tags is to help structure your web page. This is especially useful for those who code in HTML, but less so for EverWeb users as it generates the code for you automatically at publish time.

How to Use the Heading Tags Widget
Probably the best way to use the Heading Tags Widget is to look at an existing page you’ve created and take the most important piece of text on the page and convert it into a Heading Tag. This will probably be the main heading or title on the page itself. To convert this text to a Heading Tag do the following:

  1. First drag and drop the Heading Tags Widget on to your page.
  2. Enter the text you want to use. In this case cut and paste the text e.g. the page title or most important heading on the page, in to the ‘Heading Text’ box.
  3. Next select the level of Heading Text. As this is the most important heading on the page, use H1.
  4. Align the text as you wish using the ‘Text Alignment’ drop down box.
  5. If you want the heading to use an HTML bold styling attribute tick the ‘Use Header Bold Styling’ box.
  6. Use the Fonts Panel to style the Heading Tags Widget text so that it recreates the look of your original page title, or heading, text.
  7. Once you finished creating the Heading Tags Widget, delete the original text title and replace it with the Widget.

Tips on Using the Heading Tags Widget

  1. Use Heading Tags sparingly. If you overuse them, search engines will notice and demote rather than promote your page!
  2. Have one H1 Heading Tag only on the page and some H2 level tags for your main headings. Use H3 tags for any subheadings. You really do not need much more tags than these.
  3. You can have more than one Level of tag on the page e.g. there is more than one heading in this article so I could use multiple H2 tags, one for each heading.
  4. Only use Heading Tags on pages that are important. You won’t need to use Heading Tags on pages such as Contact and About pages. Focus on the pages that are most important to put in front of your visitors.
  5. Don’t compromise your content for the sake of SEO. As with SEO it’s important to balance your visitor’s experience of your website against trying to improve your SEO page ranking result. And that’s especially true when using Heading Tags.

Heading Tags can be a useful addition to your SEO arsenal. If you want to know more on SEO itself, check out our previous post All You Need to Know About SEO in EverWeb.

15 Jan 2016

All You Need to Know About SEO in EverWeb

No Comments Tips and Tricks, Web Design

If you’ve used iWeb you’ll probably know that it didn’t have any in built SEO (Search Engine Optimisation) capabilities. If you use EverWeb you may think the same, but EverWeb does have SEO! It’s baked right in to the core of the product. There are different ways you can easily take advantage of EverWeb’s SEO capabilities and we’ll look at how you can apply SEO to your web pages in a moment, but first a reminder about SEO itself…

The Importance of SEO
SEO is important to include in your website because…

  1. It improves your website’s visibility to Internet search engines.
  2. When used properly it’s the best way to get the highest search engine ranking result for your website.
  3. Using effective SEO ‘Keywords’ makes it easier for search engine ’spiders’ to find your website’s pages

What to be aware of about SEO
SEO gets a lot of press and hype. But in reality…

  1. It doesn’t guarantee anything but can help improve your website’s visibility when properly used.
  2. It should be used only on the web pages you want to bring attention to. Using SEO on generic pages such as on ‘About’ and ‘Contact Us’ pages may be just wasting your time.
  3. Prioritize SEO on your Mobile pages. This is important as search engines, especially Google, increasingly give mobile search preference over desktop.
  4. There’s no magic involved in SEO, you just need to know how it works to get the best search result listing possible.

Choosing Your Keywords
When planning SEO for your website you’ll need a Keyword strategy…

  1. Research your Keywords. Choose words that help your website stand out from the rest. Think of words that are specific and targeted rather than general and generic. What makes your company, product, brand etc. different and unique? Use words that reflect this approach on each page you use SEO on e.g if you are selling books you could use the Keyword ‘metafiction’ (romantic irony) to be more specific, focused and specialist rather than using the generic word ‘books’.
  2. Use only a few, well chosen Keywords. Too many Keywords (known as ‘Keyword Stuffing’) will likely reduce the impact of your SEO. Google tends to penalise those who Keyword ‘stuff’ so avoid the practice all together. Finally, don’t forget that too many Keywords may have a negative impact on your visitor’s experience of your website. Always remember to balance SEO with your visitor’s experience.
  3. Use Keyword Planning tools to help research and select your Keywords e.g. Google Keyword Planner. See https://adwords.google.com/KeywordPlanner for more information. Keyword Planners help give you ideas about which Keywords to use and those not to use!

Add Keywords in EverWeb
Once you’ve researched the Keywords you want to use, add them in to the following fields in the Page Settings Tab in EverWeb…

  1. File Name: The file name of your web page can act as a Keyword.
  2. Navigation Menu Display Name: As this field links to other pages, it’s good to use for SEO as search engines look for links.
  3. Web Page Title: This field displays the text at the top of the browser window about the page. Add some Keywords in this field but don’t sacrifice your visitor’s experience for the sake of SEO.
  4. Web Page Description: This field is not used for SEO but is still a good place for including some Keywords. As always, don’t sacrifice the visitor experience for SEO.

Add SEO to Your Images
SEO can, and should, be applied to any image files your website uses. Give your image files a descriptive name as search engines look at file names as well as Keyword text. If possible, rename your image files before bringing them in to EverWeb. It’s more SEO efficient. If you’ve already imported your images in to EverWeb, rename them in the Assets Tab. It’s not as SEO efficient but it’s better than not doing it at all. To rename an image file double click on its name and type in a new descriptive name.

Keywords can also be used in the ‘Alt Text’ field in the Shape Options as this may be of some benefit in SEO. ‘Alt Text’ is used to describe an image when it cannot be displayed. Keep the ‘Alt Text’ description short, and if you can mention what the page is about in the description.

Keywords are easy to add to your web page with EverWeb when you know where to place them. The difficult, time consuming part is in researching the most effective Keywords that will give your web pages the best listing in search engine results.