Mac SEO Blog

One of the most important tools a photographer needs apart from a camera is a great website. Whether you are an amateur or a professional, your website represents you, your work, your passion and your personality. In a crowded market how can your photography stand out more amongst the crowd? Here are some EverWeb tips to help you out…

1. Use The EverWeb for Photographers Video Course

If you are just starting out with EverWeb, have a look at the ‘EverWeb for Photographers Video Course‘. The nine video course introduces you to EverWeb and the key features photographers need to get a website up and running quickly and easily.

2. Remember to include SEO!

This is a key element to remember and should always have a very high priority. Effectively used SEO will help your website be more visible on the Internet as it improves your chances of a higher ranking in search engine results. Make sure to complete your SEO using the ‘SEO For EverWeb Video Course‘.

3. Use Meaningful Image Names and ALT Text Descriptions

When shooting pictures, your camera will name photos sequentially e.g. IMG-0001. That’s not great for your SEO, so be sure to rename your images to something more meaningful before you bring them in to EverWeb. Use hyphens to separate each word as that’s better for search engines. And don’t forget to add in ALT Text for your images as well. ALT Text is a descriptive piece of text used to replace the image if it cannot be displayed, e.g. when you are in a reader only mode in your browser.

4. Use Watermarks and Copyright to Protect Your Work

Many photographers rightly complain that their images are ‘stolen’ from the Internet. The only practical way to stop this is to watermark your images before you bring them in to EverWeb. It’s also good to add a copyright to each of your web pages as another theft deterrent.

5. Show Off Your Personality

Photography is a very personal hobby or profession. Use this to your advantage when building your website. Design your website in such away that it shows your audience who you are, what makes you different from the crowd and what interests you most. Include a photo of yourself on your ‘About’ page, and consider making a blog about your work, experiences, where you’ve exhibited etc. There’s more information on blogging in EverWeb in the ‘How to Blog in EverWeb’ video tutorial.

6. Use Social Media To Spread The Word

One of the best ways to spread the word about your photography is by social media. Choose carefully where you want to target your time and effort when promoting your work and pick one or two social media outlets to begin with. Facebook is usually a great place to start so use EverWeb’s ‘Facebook Like’ to add share and like options to your website. EverWeb also includes widgets for Pinterest and Google+.

There are dozens of other social media outlets you can use such as Tumblr, Twitter, Instagram, 500px and so on. Take a look at the social media platforms that interest  and add links to them in EverWeb so you have a two way interaction between your website and social media. Look out for  tools on these websites that help you integrate your website with theirs. For example, Instagram lets you add badges to your website (see screenshots below), just select the badge you want in Instagram. Copy the code generated to the clipboard and paste it into an EverWeb HTML Snippet Widget. In this example, you don’t see the Instagram badge until you publish your website, so start by inserting the badge on a test web page or in an inconspicuous place on one of your web pages to see how it looks.

Log in to your Instagram account and go to your settings. When you select the badge you want, copy the all of the code in the code box to the clipboard.

In EverWeb add an HTML Snippet widget to your page. In the Widget Settings paste the code from Instagram. The badge will only display when you publish your website.

7. Use EverWeb’s Image Gallery and Image Slider Widgets

EverWeb’s Image Gallery and Image Slider widgets give you many different options to display your images. Use these widgets to create image galleries and slideshows tailored to your audience. Always put similar content together on the same page and have all your photos sized the same, in the same orientation and in the same resolution as it’s more professional. If using a slideshow, try to avoid using the thumbnails feature so that you can maximize your screen real estate for each photo and keep the visitor focused at the same time. And don’t forget to use the EverWeb’s Fonts button to change the font type, size and style of the Image Gallery and Image Slider widgets.

If you need something more specific than the Image Slider and Image Gallery widgets, check out the EverWeb discussion forum and the 3rd Party Products section.

8. Use High Quality Images

Images are going to look their best at Retina display level. They will be shaper and more detailed. Take a look at the ‘Retina Ready Images’ video tutorial for all the details on ‘Making Images Retina Ready‘. High Quality also refers to your own quality of work. Show your best photos and not the average ones!

Image should always edited in a photo editor before you bring them in to EverWeb. Programs such as Photoshop, Pixelmator, Gimp and even Preview are all fit for purpose. Within EverWeb you may find that Masking is a handy option not to forget! Don’t forget to check the size of your image files as well as if they are too large  your page download speed will be severely affected. Use the ‘Assets List’ as a check (see below) and adjust your image file sizes in your photo editor as needed.

9. Sell Your Photos Using EverWeb’s E-Commerce Features

If you are a professional photographer, you may want to offer your photos for sale. In EverWeb the PayPal Widget acclaimed widget has been considerably expanded offering a wealth of options to choose from.

If you use stock photo websites such as Shutterstock or 123RF to sell your photos add a hyperlink to your website to take your visitors to your stock photo page or add a link to your Navigation Menu as shown in our ‘Linking To An External Webpage In EverWeb’s Navigation Menu‘ video,

10. Use The Assets List

The images you use in EverWeb are stored in the Project ’s Assets List. Use the Assets List to search for photos and to check image file properties such as image dimensions, file size and image resolution. If  your page it loading slowly when published check to see if the size of one or more of your images is causing the problem. If this is the case,  reduce the file size by adjusting the images size and resolution in your photo editor.

11. Making Your Photography Website Mobile

The world is an increasingly mobile space, so having a good presence on any mobile device is a must. Testing is really important here to make sure that your photographs download quickly. Slow loading websites are the main reason why people click away to another site!

12. Make Contact Easy!

Making contact with your target audience should be simple quick and easy. Make your contact page reflect this! EverWeb’s Contact Form is ideal as it’s clean and simple to use!

Are you a photographer with a website built using EverWeb? Do you have any tips or tricks to share? Let us know below!

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…