Mac SEO Blog

Every new version of EverWeb brings new and improved features and EverWeb version 1.9 is no exception with it’s enhanced HTML5 publishing engine, Presentation Mode and new Hyperlinking options. Included with these marquee features, are a host of minor enhancements and feature adds based user feedback. Here’s a run down of the some of the small, but great, features of EverWeb 1.9…

Duplicate…

Although we covered this before in the blog ‘Getting the Best from Duplicating Projects in EverWeb 1.9‘ , it’s worth mentioning again! Many EverWeb users wanted an easy way to make a copy of an existing Project file and EverWeb 1.9 adds this feature to the Project Window. To duplicate a Project file, just click on the up/down arrows to the right of the Project file name and select ‘Duplicate…’ from the menu. The duplicate is created with the same name as the original Project file but with ‘Copy’ added at the end.

Send Project File to Support…

There are some occasions where you need to send a Project file to the EverWeb Support Team. Prior to EverWeb 1.9 this was a manual process, but now it’s an integrated feature of EverWeb’s Project Window. If the Support Team asks you to send in a Project file, click on the up/down arrows to the right of the Project file name in the Project Window and select ‘Send Project File to Support…’. You’ll be asked to confirm that you need to send the file to Support. Clicking ‘Yes’ will upload it to a server and provide a link to be sent to the Support Team. Remember to only use this feature when asked to do so by the Support Team!

Pick Layer

This is a really useful little feature that can be easily missed! If you have objects that overlap or are on top of each other, such as a Navigation Menu widget on top of a coloured rectangle background shape, you have to move the top object to be able to access the object underneath. Then you would have to put the top object back in it’s original place afterwards. It’s time consuming and often requires accuracy. The new ‘Pick Layer’ option solves exactly this type of problem. Just secondary (right) click on the top object. At the bottom of the menu highlight ‘Pick Layer ->’. You will see all of the object layers available at that location from the top object down to the bottom object. Pick the ‘layer’  you want to work with it and it is then selected. That’s all there is to it – quick, simple and no fuss!

Pause on Hover

The Image Slider Widget gains a new ‘Pause on hover’ feature so that when a visitor mouses over the current slide in a slideshow, the slideshow pauses until the mouse is moved off the image. Just check the ‘Pause on Hover’ box in the Image Slider’s Widget Settings to activate this option.

Master Page and the ‘+’ Button

In the Inspector Window, the label ‘Master Template’ has been renamed to ‘Master Page’ for improved clarity.

In addition to the change of label, a ‘+’ button has been added directly to the right of the Master Page drop down selection box. The ‘+’ button allows you to add a new Master Page and customize it’s settings directly from the Inspector tab. This addition should make for more efficient work flow in the Editor Window.

New Theme Templates

There are seven new Theme Templates to enjoy in this release of EverWeb. Each new theme has six to eight different page styles included.

• Engagement
• Lavender
• Real Estate 2
• Simcoe
• Smart Watch
• Starry Night
• University

New Video Tutorials

A new video tutorial has been added for Favicon in the Site Publishing Settings screen.The video tutorial for the Image Slider has been updated as well as the Widget was significantly upgraded in EverWeb version 1.8. For more information on the Image Slider, you can also check out the blog ‘Update Your Website with EverWeb’s Updated Image Slider’.

Have you found small feature that’s been missed from our list? Let us know below!

October’s main highlight saw the release of the new EverWeb version 1.9. The latest version of EverWeb adds many under the hood features including an Enhanced HTML5 Publishing Engine for smaller, faster websites on both desktop and mobile. This and more to enjoy in this month’s Highlights edition…

EverWeb Latest News for October

EverWeb version 1.9 was released in late October with an Enhanced HTML5 Publishing Engine for faster, smaller websites. There are also some great UI enhancements such as a new Popup Window feature, Open In New Window feature, Presentation Mode and more! Check out the Blog ‘EverWeb 1.9 Released: Enhanced HTML5 Engine‘ for all the details!

Our Latest EverWeb Blog Posts

October’s Blogs focus on EverWeb version 1.9’s new Presentation Mode feature Duplicating a Project Features. There’s also in-depth blogs on how to get the best out of masking images in EverWeb, how to make a mobile website in three simple steps and much more! And feel free to comment or ask questions on any of the Blogs we feature!

EverWeb Highlights: September 2015

Building Mobile Websites in Just 3 Easy Steps

Creating Master Pages for EverWeb’s Theme Templates

Make Your Mark with Masking in EverWeb

EverWeb 1.9 Released: Enhanced HTML5 Publishing Engine

New User Interface Customisations in EverWeb 1.9

Getting the Best from Duplicating Projects in EverWeb version 1.9

Our Latest EverWeb Video Tutorials

EverWeb’s YouTube channel has four new videos to enjoy this month showcasing the new features of EverWeb version 1.9.

What’s New In EverWeb 1.9 – MacWebsite Builder

Cookie Consent Button Your EverWeb Website

Addon Domains for EverWeb+Hosting Accounts

Linking to a Popup Window In EverWeb

Keeping Up to Date With EverWeb

Keep up to date with EverWeb on the Internet! For the latest news, features, tutorials, blogs, comments and more just click on your choice below..

Facebook

Google+

Flipboard

YouTube

Or leave a comment below if you have any questions or want to know more…

When you launch EverWeb you are greeted by the Projects Window, the management centre for your EverWeb website Projects. From this window you can create new website projects, launch an existing website Project for editing and delete website Projects that are no longer needed. All of your the Projects you have already created are listed in the ‘Recent Projects’ list on the right of the window. You can sort the list using either ‘Sort By Name’ or ‘Sort By Last Modified’ date. These options are found  by clicking on the up/down arrows to the right of the words ‘Recent Projects’. On the bottom left side of the Projects Window, clicking on ‘Learn to how to use EverWeb’ takes you to a library of 47 tutorial videos to get you up and running fast if you are new to EverWeb.

Creating a Duplicate Project File

EverWeb version 1.9 introduces two new features to the Projects Window: ‘Send Project File to Support…’ and ‘Duplicate…’. Each feature is accessed by clicking on the up/down arrows the right of the Project file name (see screenshot above).

In this Blog we are going to take an in depth look at the ‘Duplicate…’ menu option. It’s a feature that’s ben requested by many EverWeb users so its great to see it in 1.9! There are many reasons why you will make a duplicate e.g. you may want a test version of a live Project file so you can safely try new features or functionality without experimenting on your live Project file. It’s also great for testing out new beta test features of EverWeb to see how your website Project can benefit from upcoming new versions of the product. Duplicating a Project file may also save you time and effort as you can create new websites quickly from ‘template’ Project files that you have set up already.

The ‘Duplicate’ function should not be used in place of backing up your Project file. Any Project file that you publish, or intend to publish, to the Web should be backed up using EverWeb’s backup feature from the EverWeb-> Preferences menu, or as part of your computer regular back up strategy.

When you click on ‘Duplicate’ EverWeb makes a copy of the Project file you selected and adds the word ‘copy’ to the end of the Project file name. As the duplicate is a new it appears at the top of the ‘Recent Projects’ list (if you are using the default Project sort order).  To change the duplicate Projects name, double click on the Project to open it. Next, double click on the Project Name in the Web Page List and enter the new name as desired. Press ‘Enter’ to finish.

When editing the Project file’s name, the Project’s Site Publishing Settings are also displayed at the same time. It’s a good opportunity to look at the  Publishing Settings to see if the publishing location is correct for the duplicate Project file. If you publish the duplicate Project to the same location as the original Project file location, EverWeb will warn you and ask you to confirm your action or cancel before publishing commences.

If you plan to re-purpose the duplicate Project file for another use, remember also to check out the Head/Footer section of the Publishing Settings for code that may cause problems, and also confirm that if using a Favicon it is the right one for your ‘new’ Project file.

Checking External Links and Widget Settings

When duplicating a Project file, check any external links that you are in your web pages and correct them, or remove them, if necessary  This may be important when using Social Media buttons that direct visitors to specific pages such as in Facebook, LinkedIn, Google+ etc. Check any hyperlinks in case you have any links to External URL’s that need to be modified or removed.

If your mobile web pages are contained in a separate EverWeb Project file you may need to review the Mobile Settings in the Page Settings tab of the Inspector Window to make sure that any external links are still valid. The same applies to any to any 404 Error Pages or 301 Redirects that you may have applied to your web pages.

Widgets are another source of links that should be checked and changed, even such things as addresses in the Google Maps should be checked to save you potential embarrassment!

Don’t forget to test out any links that you have changed in your Project file using Preview before going live.

Check Your Code

If you have any code inserted into your Project it’s worth checking it to make sure it applies to your duplicate Project. The HTML Snippets Widget, the Header/Footer code area in the Page Settings of the Inspector Window and the Head/Footer area in the Publishing Settings should all be reviewed in case the code it needs modification or removal. Whilst on the subject of code, if you have added any analytics to your website Project such as Google Analytics, you may need to create new Analytics for your ‘new’ Project file including a new verification code.

Check Anything that Uses an Email Address

Remember to check anywhere that an email address is used such as the PayPal Widget, Hyperlinks to an email message and the Contact Forms as email addresses may need review and amendment. You may also want to review any auto-reply messages that are sent when visitors such as the ‘Email Sent Success Message’ in the Contact Form Widget.

Assets Housekeeping

After duplicating a Project file you will probably edit it so that it is fit for it’s new purpose. Once you have made the changes you want it  remove any Assets that are no longer needed in the Project file. To do this, click on the Assets tab in the Inspector Window. Click on the up/down arrows to the right of the word ‘Assets’ which is just below the search box. From the menu that appears select ‘Find Unused Assets’ to locate any assets that are no longer needed and that can be deleted. Deleting unused assets will reduce the size of your Project file which is beneficial when you are editing and publishing your website.

EverWeb’s new Duplicate feature is a great time, cost and effort saver. Make sure that any re-purposed Project files are thoroughly checked so no legacy issues remain from the original Project file that are not intended to be there! Finally, as always don’t forget to test out your website using Preview before publishing.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 1.9 comes with new options to customize the User Interface (UI) to suit your needs when creating and editing your web pages. Before looking at the new version 1.9 features, it’s worth reviewing the UI features that can be found in previous EverWeb versions…

If screen real estate is at a premium, you can hide the Inspector Window on the right hand side of EverWeb’s UI. Use the menu command Window->Hide Inspector, or the keyboard shortcut Alt+Cmd+I (see screenshot below). Hiding the Inspector Window is especially useful when working with a small screen size laptop. The option only works whilst the Project is open. If you close the Project, or quit EverWeb, the Inspector Window will be visible by default the next time you open the Project.

The EverWeb UI with the Inspector Window hidden using shortcut key Cmd+Alt+I

If you want to hide the layout and object border lines so you can more easily see how your design is going to look, use the Window-> Hide Layout menu option or the Shift+Cmd+L keyboard shortcut. In addition to the layout and object border lines being hidden, all other markers such as Master Page object symbols (the black page symbol), the locked object Padlock symbol and grouped objects borders are also hidden. There is one exception to this which is the Hyperlinks Indicator. To turn off this indicator use the EverWeb-> Preferences-> General menu option.

As with ‘Hide Inspector’ if you close your Project or quit EverWeb, the settings will need to be reapplied next time you open the Project.

The new EverWeb version 1.9 introduces some new UI customisation features that can be used in conjunction to those described above. The first new UI customisation option is Presentation Mode which hides the Web Page List on the left of the screen, the Inspector Window on the right of the screen and the Toolbar at the bottom. Your current Layout and Hyperlink settings are unaffected.

Presentation Mode is ideal when you want to quickly review the look of your web page layout without using Preview. It’s also perfect when you have limited screen real estate available (see screenshot below). To activate Presentation Mode, select Window-> Presentation Mode from the menu, or use the Cmd+. (period) keyboard shortcut. When in Presentation Mode you can still edit the web page, use EverWeb’s menus and perform secondary clicks on objects as you would usually do. If you have turned off the layout boundary lines, you will notice that in Presentation Mode they become visible when you drag and drop an object around the Editor Window.

Presentation Mode in EverWeb 1.9 with the new University Theme ‘Home’ Template.

When Presentation Mode is selected, you have the ability to add back the Inspector Window and/or Toolbar to create a truly customised look to your work environment. To do so use the Window-> Show Inspector menu option (Cmd+Alt+I) and/or the Window-> Show Toolbar (Cmd+Alt+T) menu option.

EverWeb 1.9 with the Web Page List and the Inspector Windows hidden so that only the Toolbar is displayed.

If you only want the EverWeb UI to show Web Page List, and not the Toolbar or Inspector Window, first make sure Presentation Mode is off (use Cmd+. toggle to do this). Next unselect the Toolbar and the Inspector Window by the using the Cmd+Alt+T and Cmd+Alt+I commands respectively or by using their equivalent Window menu commands.

EverWeb 1.9 showing only the Web Page List

Presentation Mode is only valid per session. If you close the project or EverWeb, the setting will need to be applied again next time you open the project.

EverWeb version 1.9 also includes the often requested option to hide the Toolbar using the Window->Hide Toolbar menu option (or Cmd+Alt+T toggle). All Toolbar options are still available through the menus, with Preview being added to the File Menu in the EverWeb 1.9 release. The Hide Toolbar option is applied globally. Once applied, it remains in place and for ALL of your Projects even when you close and reopen them, or if you quit and relaunch EverWeb itself.

EverWeb version 1.9 with the Toolbar hidden using the shortcut key Cmd+Alt+T

EverWeb version 1.9’s new UI customisation options now let you display your workspace as you want it, quick and easy!

Summary of EverWeb’s UI Modes

• Hide Web Page List, Inspector Window & Toolbar = Presentation Mode (Cmd+.)
• Hide Inspector Window Only = Window-> Hide Inspector (Cmd+Alt+I)
• Hide Toolbar Only = Window-> Hide Toolbar (Cmd+Alt+T)
• Hide Web Page List Only = Presentation Mode + Window-> Show Inspector + Window-> Show Toolbar

Other Useful EverWeb UI Options

• Hide Layout = Window-> Hide Layout (Shift+Cmd+L)
• Hide Hyperlink Indicators = EverWeb-> Preferences-> General

The speed of your website is extremely important. It not just improves your visitor’s experience, but it also helps ensure higher search engine rankings.

Super Faster Websites With EverWeb 1.9

Over the last few months we worked on a new feature of EverWeb that combines all common assets uses on Master Pages into one directory. This means that your media files and styling information are only exported once resulting in;

1. Faster website publishing and uploading
2. Smaller websites
3. Faster loading websites due to browser caching. This means that for every subsequent visit to your website, they will load faster for your visitors. Also, each page visited by your customers will load faster

Plus we added a few more tricks to get your websites loading much faster;

1. Better support for retina displays using new HTML5 tags. This means modern browsers such as the latest versions of Safari, Chrome (for desktop and iOS) and Firefox, as well as many other browsers, will load your websites much faster and use less bandwidth.
2. Faster mobile redirects using optimized code that gets executed as the first instructions to your browsers so mobile pages gets redirected much faster than before. Plus we follow every one of Google’s recommendations for properly optimized mobile pages, without any additional work on your part!

EverWeb 1.9 also has these highlighted new features which we will discuss in more details in future blog posts. We also made a video tutorial outlining the new features for you.

We went even further with EverWeb 1.9 with some highly requested features and enhancements;

1. A new popup window option under the hyperlink tab so you can link to a page that pops up over the current page
2. A new presentation mode (Window menu->Presentation mode) to maximize the space given to the design canvas. This feature hides the web page list, toolbar and Inspector so smaller screens can see their entire website design
3. The ‘open in new window’ option under the hyperlinks tab now works for the link to ‘one of my pages’ and ‘to a file’ option. Now you can open PDF documents for example in a new window without any additional code or widgets

Easily Update To EverWeb 1.9

We’ve got a lot more packed into EverWeb 1.9. You can easily update by;

1. Launching EverWeb and going to the EverWeb menu at the top of your screen and selected ‘Check for Update’
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.

Do You Like EverWeb 1.9?

Tell us what you think, head over to our growing discussion forum and lets talk about the new features in EverWeb 1.9!

Helping Each Other

Oh and one more thing, we’re really obsessed with offering the best support! One big issue we found is that sometimes we need your website project files which can be BIG. So we built in a way to quickly share your project file with us. Simply click the little arrows in the projects window and select the ‘Send to RAGE Software Support’. Your project file will be automatically sent to us, no more using dropbox or other file transfer service.

EverWeb’s Mask tool is an easy way to hide part of an image without having to crop the image itself. Masking is great when you want to keep an image in tact. It’s also useful as you can reuse one image in a number of different ways so saving you time and effort. Here are some ideas on how you can get the most out of image masking…

First create a web page and style it as you wish. In the example below, we are using an online financial news service covering the Stock Market. The web page created has a newspaper style format. The web page illustrates that it’s been a good week on the Stock Market emphasising this by using the image of a bull to show a ‘bullish’ market.

Place the image you want to use on to the Editor Window by dragging and dropping it from it’s original source. Place and resize the image according to your own requirements.

The example web page shows the original image in the top right. Masks of the original image appear with different effects behind  behind the headline and in the second half of the page.

In our example, the complete image is shown in the top right of the page underneath the headline. We can now reuse the image in our news article. To do this, either select the image in the Editor Window and copy and paste it as many times as desired or drag and drop the image on to page as many times as you want from the Assets List.

These two methods use the same image file in the Assets List. Do not repeatedly drag and drop the image on to the Editor Window from it’s original source as all you will be doing is duplicating the file in the Assets List. It will also lead to slower page download speeds as well as you have to download multiple images and not just one image.

In our example, we want to isolate the bull in the picture and use just part of the image picture later on in the page. To do this, first select the image that you have copied. Next we will apply a mask.

Click on the ‘Mask’ button in the Toolbar at the bottom of the Editor Window. Alternatively, use Format-> Mask from the menu, or for speed, the shortcut key Shift+Cmd+M.

The Editor Window will now become somewhat opaque. This is the mask itself that covers the whole Editor Window. The square window at the centre of the image is the ‘unmasked’ area and is bordered with a dashed line. Notice that the image under the mask still has grab handles around it. This means that you can reposition the image  underneath the unmasked square. Click, hold and drag the image to where you want it, just make sure that when you start this operation that you do not click inside the unmasked square itself.

To move the unmasked square over the top of the masked image, click and hold the centre of the square and drag and drop it to the desired location. When you do this operation the unmasked square will then show grab handles around it.

If the unmasked square does not have grab handles around it, click once in the square. You will now be able to resize the unmasked square to show more or less of the underlying image. Click and drag the grab handle(s) to resize the square as you would do with any other object.

When finished, click in an area outside of the whole image. The masking will disappear and you will only see the part of the image that you defined in the mask. It’s important to remember to click outside of the whole image boundary for this to work correctly.

To remove the mask, select the masked image. The Mask button in the Toolbar will now be named as ‘Unmask’. Select this and the whole image will become visible again.

Masked objects are like any other objects and so can be moved, deleted, copied etc. You can add effects to the masked image using the Shape Options and Metrics Inspector options. In our example we have applied some Picture Frames,  changed the masked image shape style from a rectangle to an arrowhead and used the Full Width option to create the banner effect behind the headline.

Images can also be resized even when masked using the grab handles that appear when you select the image. As you do this, the mask will also change in size. This is useful if you find that your original masking was not ‘spot on’ and you need to do some slight readjustments without having to redo the complete mask.

In all other instances, if the masking is incorrect it’s best to unmask then apply the mask again. Additionally, avoid using ‘Undo’ and ‘Redo’ commands (e.g. if you resize the mask area then decide to undo the action) as this can have unexpected results. Finally, to mask successfully, do not move the masking square outside the boundaries of the original image as this may cause unexpected results.

The completed web page above includes four masked pictures and the original picture which should also save time on page download speeds. Masking is a excellent tool to use images in versatile ways whilst also adding design flair to your web pages.

Gone are the days when the word ‘template’ immediately conjured up pictures of really bad looking PowerPoint presentations! Today templates are design savvy. EverWeb has over 40 stylish theme templates in a wide variety of subjects for you to choose from.

All EverWeb themes include ‘Home’, ‘Contact’, ‘Photos’, ‘Videos’, ‘Blank’ and ‘Mobile’ template pages. Some themes also include a ‘Coming Soon’ and/or ‘Shop’ template.

As EverWeb organises template pages by theme, it’s quick and easy to develop a professional looking website in next to no time. All themes include EverWeb’s built in widgets, such as the Navigation Menu, Contact Form, Google map etc.

Template themes are a good way to learn about designing websites in EverWeb as well the exploring the product’s own feature set. For example, the ‘Aurora’ theme includes the ‘Full Width’ feature introduced in EverWeb version 1.8. Theme templates also help you test out your own ideas without the hassle of building test pages first from scratch.

Using EverWeb’s Template Themes

To use a theme template, just select the ‘Add Page’ button. Click on the theme of your choice from the list on the left, then click on the template you want to the right. Click the ‘Select’ button to add the template to the Web Page List (see below).

The EverWeb theme template selection dialog box

A theme template is only downloaded to your computer when you select it for use for the first time. When you select your theme template page, EverWeb automatically downloads the theme and then adds the page you selected to the Web Page List. Theme templates not yet downloaded to your computer are indicated by a down arrow within a circle icon to the right of the theme name. Pressing on the icon initiates a ‘manual’ download of the selected theme template.

Creating a Master Page to Use With Your Theme Template

If you have already added theme template pages, such as ‘Home’, ‘Photos’, ‘Contact’ etc., to your EverWeb Project, you can customize each as you would any other web page that you would create yourself. Some objects on your theme template pages use EverWeb’s built in Widgets. To access a widget’s customization features, click on the ‘Widget Settings’ cog in the Inspector Window.

If you find that you are making the same customisations for every page type e.g. changing the background color, using a Master Page instead would be better as it will save time and effort now and for any future customisations that may be needed. Here’s how you can quickly add a theme based Master Page to your template page…

In our example, we will be using the ‘Teacher’ template to build a website for our fictional teachers ‘Tim and Tim’, who provide tuition services for those with learning difficulties at their school.

1. If you have not done so already, create a website project. When you create a new Project you will be asked to add a page immediately. Scroll down the theme template list on the left and select the ‘Teacher’ theme.

2. Next, scroll down the right hand side of the dialog box which shows you the templates available for the chosen theme. Click on the  ‘Blank’ template page, then press the ‘Select’ button.

3. If the ‘Teacher’ theme template has not been downloaded already, EverWeb will do this automatically. The ‘Blank’ page incorporating the ‘Teacher’ theme will be added to your Web Page List.

4. To create our themed Master Page, click on the ‘Blank’ page name in the Web Page List and drag and drop it into the blue section above. This area is where Master pages are listed.

The blank ‘Teacher’ theme template added as a Master Page by dragging and dropping the ‘Blank’ page from the Web Page List into the blue area.

5. You will now see that a Master page called ‘Blank’ has been created. Double click on the name of the Master page, rename it and press enter to complete the renaming. Now customize the page as you wish. In our example, we have changed the background color, the text itself to ‘Tim & Tim Teaching’, the font size and style, added a YouTube social media button (or video learning) and moved the buttons to the left hand side, making them fixed position so that as the visitor scrolls up and down the page, the buttons stay in place. The Navigation Menu widget was also customized and centered with the rectangular shape resized. All these changes only took a few minutes to complete. You can see the results below…

6. You can now use this template on any new pages you create. To add a ‘Home’ page to our website project, first click in the grey area of the Web Page List. To add the ‘Teacher Home’ page theme template click on the ‘Add Page’ button and select the Teacher ‘Home’ page template style.

7. Once the ‘Home’ page has been added (shown below), go to the Inspector Window. In the ‘Page Settings’ tab, attach the Master Page that you created earlier using the drop down box beside ‘Master Page’. You will know that the Master Page has been attached as the ‘Home’ page background changes and some objects now have Master Page object symbols in their top right hand corner as shown by the black page symbol.

The default Teacher theme Home Page template.

8. Notice that you now have some objects on the page twice. One of the duplicates includes the Master Page object symbol in the top right hand corner. As you cannot delete this from the normal page, select the other duplicate and delete that one instead. Repeat the process until all duplicates are removed. Remember that some objects may lie completely on top of their Master Page counterparts, and also remember objects that may be in the footer of the page. Once you are finished, you have a restyled ‘Home’ page customized, but still based on the original Teacher theme (see screenshot below).

The completed Home page…

9. Repeat the process above until you have all of the pages you want. You can delete the ‘Blank’ page from the Web Page List as it was only needed to make the Master page.

Don’t forget to fill in the Page Settings tab so that you get the best SEO possible. Check out our previous Blog ‘How To Use EverWeb’s SEO Features‘ for more information. If you want to know more about Master Pages, take a look at our Blog ‘All You Need to Know About EverWeb Master Pages‘.

Finally, to see the results of your work, use Preview before you finally publish your website!

Mobile technology gives us immediate access to information at our finger tips, wherever we are, whenever we want. For website developers, though, this translates into the creating websites that cater for both mobile and desktop environments – and anything in-between. Using EverWeb you can easily do this in just three easy steps…

1. Create Your Desktop and Mobile Pages

When starting a mobile website project, first determine how many web pages you will need to build for use on mobile devices. If there will only be a few ‘mobile’ pages, you can include them in the EverWeb Project file that contains your website’s desktop pages. If you envisage having a large number of mobile pages you may find it easier to use two separate Project files, one for desktop pages and one for mobile pages, to make management of the website and its content easier. Project files containing a large number of pages can become unwieldy to use so breaking it up in to smaller pieces may be advantageous to your workflow.

If you are using two Project files, remember that you can have both of them open at the same time making content management between  desktop and mobile pages relatively easy.

In this example, we are going to use EverWeb’s built in ‘Restaurant’ theme templates to create desktop and mobile pages. The restaurant website only has a few pages, so the desktop and mobile pages will be built in one Project file.

To begin with, create a new website Project file if you have not done so already. The first page to add will be the restaurant’s desktop ‘Home’ page. To do this, click on the ‘Add Page’ button in theToolbar. Select the ‘Home’ page style of the ‘Restaurant’ theme.

Once you have created the desktop ‘Home’ page, next create the mobile page counterpart. Again, use the ‘Add Page’ button, this time selecting the ‘Mobile’ page style ‘Restaurant’ theme.

With the mobile and desktop ‘Home’ template pages added, let’s take a moment to compare the two page styles. The desktop page is horizontal in layout with a page Content Width of 800, whilst the mobile page Content Width is 480. Therefore, each page style matches the environment it is intended for. The desktop layout is used for desktop computers, laptops and tablets, the mobile layout for mobile phones.

The desktop style page has a horizontal layout and allows for more content than its mobile counterpart.

The mobile page format is a one column vertical layout with plenty of space on each side for scrolling up and down the page .

The desktop page has much more content than its mobile counterpart. The mobile page has been stripped down to just the essentials. Non essential text and graphics seen on the desktop site have been removed. This helps the mobile page load faster and avoids cluttering up the smaller screen display. The mobile page also space on each side of the page specifically to accommodate easier scrolling up and down the page.

Furthermore, the ‘message’ of the desktop page, ’Eat to Bite’, is located where the visitor’s eye is usually drawn to – the upper left hand corner of the screen. The ‘message’ of the mobile home page is also clear – ‘Eat to Bite’, but this time is front and centre, taking advantage of the mobile form factor. The photos highly visible as well to try to tempt you to make a reservation.

The ‘Make A Reservation’ button itself is prominent on the mobile page, with the button text large and the font easy to read. The three graphic elements below the Contact Form have potential to be used as large buttons linking to other pages as they are easy to use in a touch centric environment. The Contact Form itself only a few fields to fill on the mobile page and so will take less time for any visitor to complete. The use of the Contact Form saves visitors from clicking to another page. This is advantageous when your visitor is in a poor reception area.

The Image Gallery is used to show some of the restaurant dishes in preference to text descriptions that could be used on the desktop page. When using photos be careful about their file sizes as large photo files will slow page download speeds

One more thing to note about the mobile page is that it has no navigation menu, whereas the desktop page does. Navigation menus on mobile devices can frustrate users as they can be difficult to use. For mobile devices, go for large hyperlinked buttons, graphics or images that are easier to ‘click’ on with your finger.

The above mobile page strategies outlined above will help keep your visitor on one page. The design helps encourage the visitor to scroll up and down the page, rather than having to load other pages, so keeping your visitor focused!

2 Linking Desktop and Mobile Pages…

In our restaurant example, we want to link the desktop ‘Home’ page with the mobile ‘Home’ page so that when published you automatically see the desktop page on a desktop device and the mobile page on a mobile device. To set up the linking first select the mobile page. In the Page Settings Tab of the Inspector Window, scroll down to the ‘Mobile Settings’ section. On the left of the section, click on the arrow to expand the section contents. Make sure ‘This page is for mobile devices’ is checked. If it is not, check the box.

The mobile settings the Inspector Window checked to show that the page is for use on mobile devices.

Next select the desktop ‘Home’ page. Again go to the ‘Mobile Settings’ in the Page Settings Tab. This time set ‘Mobile Page’ to ‘One of My Pages’. In the box beneath it, set the ‘Page’ to the name you have given to your mobile ‘Home’ page. See the screenshot below.

The mobile settings for the desktop page. Here the settings shows that the page is linked to another page in this example, the mobile home page.

The ‘One of My Pages’ drop down box can alternatively be used to select an external page using a URL link, or to ‘None’. If you are using two Project files, one for desktop and one for mobile, for your website, use the URL link to connect the mobile page to the desktop page.

3. Publish!

Repeat the linking steps for any other pages that require it. When complete, publish your website. Use different devices to see how your pages look on mobile and desktop devices and how EverWeb switches automatically page type as needed!

Bonus Tips…

1. When you build mobile pages remember to include Search Engine Optimisation which is increasingly important in the mobile arena.

2. Remember to make a ‘404 Error Page’ for your mobile website. It’s not only desktop pages that need it!

September is usually the month where many people return to work after the holidays. Schools also restart and you’ll see EverWeb’s presence there too! Check out the section ‘EverWeb in Education’ below or our FaceBook page…

Also in the news, MacWorld has chosen EverWeb as the ‘Top Choice for Everyone’ in it’s Website builder review. This, and more, to enjoy in this month’s Highlights post below…

In the News

EverWeb garnered great reviews from MacWorld this month, gaining the accolade “Top Choice for Everyone”. Checkout the review at

http://www.macworld.com/article/2984967/software-web/web-design-review-roundup-our-favorite-mac-apps-for-building-a-website.html

or take a look over on our FaceBook page.

EverWeb in Education

Still on EverWeb’s Facebook page, you can see how EverWeb is being used by educational institutes.

“EverWeb is being taught in middle schools, high schools, and universities all over the globe! This includes educational institutions such as Butler, and Carson-Newman Universities, as well as Lyceum of Finance and Law in Kiev who sent in this very nice ‘Thank You’ photo.” which you can see at…

https://www.facebook.com/everwebapp

And don’t forget that if you are interested in teaching EverWeb in your school, please get in touch with us and we will let you know how to obtain a free license for educational institutions.

Product News

EverWeb 1.9 beta testing continued in September. Thanks for your feedback on the beta test version, which as always, is invaluable in helping us make the best product we can!

RAGE Support and Admin Site Updated

At the end of the month, RAGE Software’s www.billing.ragesw.com site was updated with a new look and feel that should make account and domain hosting administration easier and simpler than ever. The Discussion Forums have also been updated with the same look and feel.

Blogs You May Have Missed

You can catch up with our Blog’s that contain useful information, how to’s and advanced tutorials at www.ragesw.com/blog

EverWeb highlights:  August 2015

All You Need to Know About EverWeb Master Pages

EverWeb’s Navigation Menu Widget Part I: Adding a Menu

EverWeb’s Navigation Menu Widget Part II: Styling Options

EverWeb Tutorials

Checkout our YouTube channel for many great video tutorials that explain how to get the best our of EverWeb’s new and existing features. There are also tutorials in the Resources section of the EverWeb website to explore.

EverWeb on Flipboard and Google+

Our Flipboard magazine has been updated to include all the latest news and blogs on EverWeb… and don’t forget we are also on Google+ so remember to add RAGE Software to your Google+ Circles to keep up to date.

More to Explore…

There’s a lot of information on EverWeb on the Internet. To keep up with the latest news, features, tutorials, blogs and developments find us on

Facebook

Google+

Flipboard

YouTube

Or leave a comment below if you have any questions or want to know more…

Part I of ‘EverWeb’s Navigation Widget’ Blog looked at planning and creating a navigation menu using EverWeb’s built in Navigation Menu widget. In this concluding Blog entry, we turn our attention to styling the navigation menu.

When you first place the Navigation Menu widget on the web page it is initially displayed with its own default styling that overrides any ‘Default Styles’ you may have set up for hyperlinking. In our astronomy example, the navigation menu initially looks like this…

The Navigation Menu Widget when first placed on the Editor Window, showing the default blue text and hypertext underline.

The text is blue and underlined indicating that it is hyperlinked. The default text style is Helvetica Regular 12 point.

Styling With Fonts

There are many different ways to style a Navigation Menu. To change multiple style elements at the same time, the best place to start is by using the Fonts Panel. In addition to your OS X system fonts, the Font Panel will allow you to use any Google Fonts that you have installed

The Fonts Panel (shown below) allows you to change font type (e.g. Arial, Times Roman, Courier etc.), font style (e.g.bold, italic, underline), font size and font color. The Fonts Panel is accessed from the Toolbar at the bottom of the EverWeb User Interface, the Format -> Fonts -> Show Fonts menu, or by the keyboard shortcut Cmd-T.

The Fonts Panel

Choose a font type for your navigation menu that is easy to read. Sans Serif fonts such as Helvetica are generally considered easier on the eye than Serif fonts such as Times Roman. The font size should be large enough to be easily read across a range of device sizes. Your font size should in general be 16 point or higher.

To change the styling elements of your navigation menu select the box outline. Although the navigation menu looks like a Text Box it is in fact a CSS code generated widget. Therefore, the hyperlinked text it contains is not directly selectable and changes in styling will affect the whole navigation menu.

When making changes to the navigation menu you may find that your menu options flow onto two lines. If this happens just use the grab handles to resize and reposition the menu.

Styling the Hyperlinks

The default navigation menu underlines the text indicating that each menu item is a hyperlink. To remove the underline use the Hyperlinks tab in the Inspector Window. With the Navigation Widget selected click on the underlined ‘U’ symbols as required. The navigation menu automatically updates as you make changes. You can also change the text color of the navigation menu for ‘Normal’, ‘Rollover, and ‘Visited’ mouse states.

Text Color and Alignment

The text color of your navigation menu can be also be changed using the Text Inspector. Use the color box in the ‘Color & Alignment’ section to change of font color. In addition you can also change the text alignment of the menu itemsto left justified, centered or right justified.

All other Text Inspector options are not available for use with the navigation menu, including ‘Background Fill’, which is changed using the ‘Shape Options’ below.

Styling the Background

The ‘Fill’ option of the ‘Shape Options’ tab can be used to set the background color of the text of the navigation menu. As the fill colors the text background, gaps between the menu options will remain. To reduce or remove the ‘gap’ between menu items, use the ‘Spacing’ and ‘Minimum Width’ options in the Widget Settings Tab as described below.

The ‘Fill’ options let you choose between a solid color, gradient fill, advanced gradient fill and image fill. A solid fill is recommended over the gradient fill options and the image fill option should not be used at all for a navigation menu. In addition, you can change the fill state for ‘Normal’, ‘Mouse Over’ and ‘Mouse Down’ with the Shape Options. Again use these options with caution and remember that your navigation menu should provide a great user experience in look and ease of use.

The Widget Settings Tab

The Widget Settings Tab lists all of the options specific to the navigation menu. After the Fonts Panel, this is probably the place you will use the most to customize your navigation menu. The ‘Alignment’ drop down menu lets you left, centre or right align the menu itself within the width of the navigation menu’s selection box (as opposed to the hyperlinks whose alignment properties are altered using the Text Inspector.)

The ‘Padding’ option adds space around the menu whilst the ‘Spacing’ option sets the amount of space between each menu item. Setting this option to zero will make the menu background look continuous.

If you want to have the background color of the menu items of equal width, use ‘Minimum Width’ to achieve the effect. Increase the value until the the spacing between all menu items is equal.

Changing Drop Down Menu Colors

The Widget Settings also include options to change the background and mouse over colors of the drop down menus if you have used these in your navigation menu. There is also an option to include a separator line between each drop down menu option and color it as you require.

Finally, you can use the bold (Cmd+B), italic (Cmd+i) and underline (Cmd+U)Keyboard shortcuts to change the font style of the menu. However, underline is not recommended as this is usually used to indicate that the text is hyperlinked. Keyboard commands can be used individually or in any combination.

Additional Options

there are additional options that are worth looking at  when using the Navigation Menu Widget. The first is the Full Width option (from the Arrange-> Full Width menu or in the Metrics Tab). If you use this feature, the navigation menu will dynamically resize horizontally across the page as you resize your web browser window.

Also in the Metrics Tab is the option ‘Fixed position’ which can be used to lock the menu in place along the x-axis. For more information about these two options, have a look at the blog ‘How to Make Fixed Headers in EverWeb’

The finished Navigation Menu with a shape added behind the menu in blue. The drop down menu is coloured blue with a red mouse over color.

Styling the navigation menu is something that can be achieved in many different ways in EverWeb. The best way to get the most out of the styling options is to try them out and use Preview to see if the results are what you require before publishing your website.