Mac SEO Blog

The previous blog posts in this series have explained in detail how to prepare and build a responsive website in EverWeb, adding a blog to your responsive website and how to convert an existing fixed width website in to a responsive one.

When developing a responsive website, one crucial element you must bear in mind at all times is the testing of your page design. One of the most difficult development tasks is making sure that the responsive page you have created looks great on any device, from mobile to wide desktop and everything else in between.

Fortunately, EverWeb takes most of the hard work out of this process as the responsive page layout scales appropriately for all browser widths. From a design perspective you will still need to check that the page has the correct margins at any browser width, that objects on the page are always spaced appropriately, both horizontally and vertically and that images and other media display consistently at all times.

Fine Tuning Your Responsive Page Design

EverWeb includes some useful tools to help fine tune your page design:

Margins: You can set the left and right margins of a full width object in the Metrics Inspector. In EverWeb version 2.9 you can also set the maximum width of a full width object so that it does not appear too strung out on desktop or wide desktop devices. For a Responsive Row widget, look for the ‘Content Maximum Width’ setting is in its Widget Settings.

Padding Options: Many of EverWeb’s widgets include padding options that help space objects so that they display better in relation to other objects on any browser. Remember that Padding options usually add vertical and horizontal spacing to the selected object.

Hidden Objects: EverWeb 2.9 recently introduced a new feature where you can hide objects so that they only display when you want them to. The ‘Show on Device’ option is available in the Metrics Inspector. Use the View menu to Show or Hide Hidden Objects on the page and secondary click in the Editor Window to quickly select any hidden object on the page using the ‘Hidden Objects’ menu option.

Breakpoints: You can override EverWeb’s own default page breakpoints and define your own instead. The Breakpoints options can be found below Show on Device in the Metrics Inspector.

Editor Window: You can always quickly see how your page will look at any browser width by reducing the width of the right hand side of the EverWeb app itself. As you do this, the Editor Window will automatically adjust giving you an idea of how the page scales. You can also use the Window-> Presentation Mode (or Cmd+period key) menu option toggle to hide the EverWeb User Interface if you want. remember when using Presentation Mode that you are still viewing the page in the Editor Window so the page can still be edited.

Previewing Your Website

Although you can quickly see how your page will look using the above mentioned options in EverWeb, it is usually better to Preview your site before publishing so that the page can be tested in different browsers. Some browsers include responsive options so you can test how your page will look on various device types or browser widths.

Apple’s Safari browser, for example, offers a Responsive Design Mode so you can see how your page will look on an iPhone SE, iPhone 8 and 8 Plus, iPad and Mac computer. To use Safari’s Responsive mode go to the Safari-> Preferences menu. Click on the Advanced tab and check the box ‘Show Develop menu in menu bar’. The ‘Developer’ menu will appear in Safari’s navigation menu bar. To use the responsive mode, select Develop-> Enter Responsive Design Mode. You can view the device you want to view the page on in either portrait or landscape mode. Just click on the iPhone or iPad icon  at the top of the widow to toggle the view.

Apple also offers the Simulator app as part of its Xcode app. You can download Xcode if you have signed up to access Apples Developer Program but bear in mind that the download is about 4.5GB. The Xcode app is free of charge to set up. Once you have downloaded Xcode you can install Simulator on your hard disk. Simulator does exactly that, it simulates Apple hardware environments such as Apple Watch, iPhone, iPad, MacBook Pro etc. For the purposes of testing your website, Simulator is probably overkill unless you are an app developer. Using Responsive options provided natively by web browser software is usually the preferable route as it is quicker and easier than using Simulator.

Publishing Your Website

Once you have finished testing the pages of your website, hit the Publish button! When finished remember to to test that all the pages work correctly, that all menus, buttons and other links function properly and that other features such as contact forms, shopping carts are also working as they should.

If you have any questions or comments about this series, please let us know in the Comments Section, we’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

We are delighted to announce the availability of EverWeb version 2.9 which adds a host  of great new features for designing responsive websites. Highlights include, show/hide objects according to device type, breakpoints, maximum width options for the Responsive Row widget and for full width objects and rulers along the top and left margins of the EverWeb UI. For a complete list of what’s new, improved and fixed, as well as how to upgrade to the new version, please see below!

EverWeb 2.9 Versions….

EverWeb version 2.9 is available in two versions:

• OS X/macOS 10.10 and higher (64-Bit): Yosemite, El Capitan,  Sierra, High Sierra, Mojave
• OS X 10.7 – 10.9 (32-Bit):  Lion, Mountain Lion, Mavericks

If you are running OS X 10.6, EverWeb version 2.5.2 is available for you.

When updating to EverWeb version 2.9, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.9 Includes…

[NEW] Set a maximum width for full width objects from the Metrics Inspector

[NEW] Show or hide objects on your website for mobile devices, tablets, and desktop computers

[NEW] Option to Show/Hide Hidden Objects in the Window menu

[NEW] Secondary click now includes a Hidden Objects menu option to allow you to  select hidden objects at any time.

[NEW] EverWeb allows you to set Breakpoints per device type: mobile, tablet and desktop

[NEW] Option to Show/Hide Breakpoints in the Window menu

[NEW] Link to files, such as PDFs, and open links in New Windows for all widgets that provide linking options

[NEW] Responsive Rows have an option to limit the width of the content within them

[NEW] Show/Hide Rulers option in the Windows menu lets you see rulers on the left hand side and on top of the Editor Window

[NEW] Specify a custom CSS class for any object for advanced scripting options

[NEW] The PayPal widget’s ‘Product Description’ field can now have ordered or unordered lists

[NEW] The Text Section widget buttons now have an ‘Open In New Window’ link option

[NEW] The Text Section widget can have numbered or bulleted lists

[IMPROVED] FlexBox and Text Section widgets have been optimized

[FIX] Responsive Image Gallery captions and fade options now works properly in slide show mode

[FIX] Dragging widgets and images within Responsive Rows properly highlights, and removes the highlight indicator, so knows when an object will be embedded in the Responsive Row Widget

[FIX] Fixed a crash that could occur when downloading new templates

[FIX] Fixed a crash that could occur when switching pages

[FIX] Fixed issues with auto updating EverWeb

How To Update To EverWeb version 2.9

You can easily update to EverWeb version 2.9 by

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

EverWeb version 2.9 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need, either the OS X 10.6 version, or OS X 10.7 and later, version.

More Information About EverWeb version 2.9

For more information about the new version of EverWeb, please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The EverWeb User Manual in EverWeb’s Help-> User Manual menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb version 2.9 Video Walkthrough

Find out more about the new release of EverWeb in our What’s New in EverWeb version 2.9 video.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

In the previous blog post, we touched upon preparing a fixed width blog in an EverWeb website project for conversion into a responsive blog and what to expect in the process. This post takes the process a step further with an in-depth look at how to quickly and easily convert your whole website from fixed width to responsive.

Adapting Your Website’s Design

When thinking about moving a website from a fixed width design to a responsive one, perhaps the most important thing to consider is the effect on your website’s overall design. Using a fixed width page layouts makes the distinction between mobile and desktop environments clear as you design a  page for each device type. You may even have designed pages specifically for tablets as well. In responsive design, these page designs merge to become one single, scaleable design. You may find that you may need to modify your existing design website to accommodate the new responsive paradigm.

The process of reinventing your website as a responsive one will also, perhaps, involve more testing than with a fixed width website.If you change a responsive page design it may have an effect on all device types, not just the device type the change is targeted at.

Preparing to Convert Your Website

Before you begin work converting your website it is worthwhile taking preparatory steps:

1. Backup your project file before you start. You should have a backup schedule in place for your computer already, and you should also be using EverWeb’s own project file backup feature as well.
2. Test that you can restore your backup. It is always a good idea to see if your backups are working correctly by restoring from one backup as a test.
3. Even with a backup project file in place it is always best to work from a copy of your project file and set up a test directory to publish to.
4. It may be useful to familiarize yourself with EverWeb’s Responsive design features. This will help you to more quickly convert your website as you will know which features and widget to use as you convert objects on the page to the new page layout.

Converting Your Website

Converting a fixed width website into a responsive one is done simply by changing the Page Layout field in the Page Settings tab of the Inspector Window from ‘Centered Layout’ to ‘Responsive’ for each page in the project file.

When converting pages, EverWeb will warn you that the change cannot be undone. The reason for this is that the page structures and design methodologies of the page layout styles are fundamentally different from each other. This is why it is best to work from a copy of your project file rather than using the original.

To create a duplicate project file, go to the Projects Window and click on the up/down arrows to the right of the project file name in the ‘Recent Projects’ list. Select ‘Duplicate’ from the menu. A duplicate will be created with the same name as the original project file but with ‘Copy’ added at the end. Open the duplicate project and rename it by double clicking on its name in the Web Page List, or by using the File-> Rename Website menu command.

Page Conversion

When you change the page layout from fixed width to responsive, it may appear that objects are scattered about the page. As a responsive page has no header, any header objects from the fixed width page layout will be placed in the main body of the page instead. You may also find that Footer objects have also been displaced in to the main body area.

Often the main task once a page has been converted is locating and reorganizing objects back to their respective places on the page. The following tips should help make this process faster and more streamlined…

1. Headers. Responsive design does not use headers as they are just regarded as full width objects. If you have a header on your fixed width page, move these objects back to the top of the responsive page and make them full width as necessary. Use a Responsive Row widget if you want to keep the objects fixed width.
2. Footers. Responsive web design does include footers so you may need to drag and drop any displaced footer objects back in to the footer area.  Remember to hold down the Cmd key when moving objects from the main body area in to the footer. You may also need to use a Responsive Row if you have footer objects that you want to keep as fixed width.
3. Make objects Full Width. Some of the objects on your fixed width page may have been full width. In the converted responsive page, locate such  objects e.g. the Navigation Menu widget, and make them full width again by checking the Full Width box in the Metrics Inspector. Drag and drop the full width object to its correct location on the page. TextBoxes, images and many of EverWeb’s widgets can also be made full width in a responsive page. If you prefer to keep some objects fixed width, place them within a Responsive Row widget so that they work properly .
4. Group similar objects together. Objects such as social media icons are often grouped together. You can collect such objects together in a Responsive Row widget. Start by adding a Responsive Row widget to your page and drag it to where you want it on the page. Next, secondary click on one of the social media icons and select ‘Embed In’ and choose the Responsive Row widget you have just placed onto the page. Repeat this process for the remaining social media objects. Use the Responsive Row Widget Settings to for spacing and alignment of the objects within it.
5. Remove any unwanted, unnecessary or redundant objects from the page. Using a responsive page may make some of the objects you have used on the fixed width page redundant. Typically these will be background color shapes and separator lines. When using the Navigation Menu widget, you can use the Widget Settings to add a background color instead of using a shape object. If you have used Picture Frames for images, these  will appear separate to the images and should be deleted as they are currently not supported in responsive pages.
6. Use Margins for Full Width objects. You can easily set a left and right margin for a full width object by using the Margin fields in the Metrics Inspector for any full width object. This is easier and more consistent than using padding options within widgets or the Insert Margin option for TextBoxes.
7. Responsive ready widgets. EverWeb 2.8 introduced new widgets that provide great design flexibility when designing pages for your website. The Text Section, Responsive Image Gallery and FlexBox widgets may give you design ideas and solutions when converting pages, for example, you may find it better to place the text from a TextBox in to a FlexBox widget. Many of EverWeb’s existing widgets have also been updated in version 2.8 so that they can be used at full width without needing to be placed in a Responsive Row widget.
8. Fixed width objects. There may be objects in your page that you want to keep as fixed width, or only work as fixed width objects (e.g. the PayPal widget). In these cases, embed such objects in to a Responsive Row widget.
9. Turn off mobile redirect on your page. In the Page Settings tab of the page, set Mobile Page to none so that no redirect takes place. This is optional as there may be instances where you do want to redirect when the page is viewed on a mobile device.
10. Testing. As mentioned earlier, this is paramount when using one design for all device types. Any change you make to the page design needs to be tested on all device types. We will cover testing in detail in the next blog post.
11. Look out for EverWeb updates! EverWeb 2.9 will add more responsive features to EverWeb. You will be able to select which device an object can appear upon, set a maximum width for full width objects and the Responsive Row widget as as well as being able to set your own breakpoints for mobile, tablet, and desktop devices.

In the next blog post, we will look at how to quickly and easily test out your new responsive page design before going live!

If you have any questions or comments, please let us know in the Comments section below. We’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are familiar with adding a fixed width blog to your EverWeb created website, then you will know that adding a responsive blog to a responsive website will be just as easy. All you need to do is add a page to your website and use the Blank Responsive Theme Template. Choose the ‘blog’ page style and click ‘Select’ to finish. If you are using one of EverWeb’s Responsive Theme Templates, you may find that it also includes a blog page style.

Responsive Blog Design

The responsive blog main and archive pages look almost identical to those found in the fixed width blog Theme Template. Notice, however, that there is no header in the responsive blog main page. This also the same for regular responsive pages as it is in keeping with Responsive Web Design philosophy which dictates that headers are not necessary  as responsive design always uses the full width of the page at all times.

The blog main widget is, therefore, right at the top of the page. Whilst it may appear to be not a full width object, it actually is. Click on the widget to select it then go to the Metrics Inspector. Here you will notice that the ‘Full Width’ checkbox has been ticked and the left and right margins have been set at 30 pixels. When you add other full width objects to the page, for example, the navigation menu widget, you can move the widget below it just by drag and dropping it.

Finally, you will also notice that the ‘Made with Love with EverWeb’ logo in the footer area is contained within a Responsive Row as it is a fixed width object.

The blog posts page is also laid out in exactly the same manner. The only visible addition  are the new Maximum Image Width and Height options for images in the blog posts page Widget Settings so that you can fine tune them for the blog posts.

EverWeb’s under the hood improvements in version 2.8 also means that if you use the Disqus or Facebook Comment Engine for visitor comments, both are also responsive ready.

Remember that when designing your blog posts page that the Blog Post Preview Window is where you add objects that will appear on all blog posts. The Preview Window is like a ‘live’ Master Page and the rules for using it are exactly the same as for regular responsive pages.

Before Converting Your Blog…

Many EverWeb users are converting their fixed width websites in to responsive websites. If you are planning to do this read the following tips first:

1. Backup your project file. This is something that you should be doing anyway on a regular basis. You should have Backup and AutoSave set on in the EverWeb-> Preferences menu in addition to your usual computer backups.
2. Make a copy of the project file that you are going to convert. Whilst it is possible to duplicate regular pages in your project file, you cannot duplicate a blog, so duplicating the project file gives you the chance to try a conversation safely as you always have the original project file if you want to go back to the original file instead.
3. Changing your Page Layout from Fixed Width to Responsive, or vice versa, is a fundamental design change. You cannot undo this action once you have done it. EverWeb will warn you when you change the Page Layout type of this fact. This is also why it is recommended to follow the above steps before you start converting your site and its blog.
4. Alternatively why not test out converting one of EverWeb’s Fixed Width Theme Template blog pages before your own? Some of EverWeb’s Fixed Width Theme Templates include a ‘blog’ page style e.g. the ‘Antarctic’ and ‘Briefcase’ themes. Experimenting on converting such pages may help when it comes to converting your own website’s blog.

Converting Your Blog

To convert your blog you will need to change the page layout for all the parts of the blog: the blog main page, blog posts page and blog archive page. For each page, change the Page Layout in the Page Settings tab to ‘Responsive’. EverWeb will warn you that this step cannot be undone and do you want to continue. Click on ‘Yes’ to continue.

What Happens to the Blog?

You will probably find that when you convert your blog (or any other fixed width page) that objects may appear displaced over the page. Objects that are on top of other objects in fixed width layouts will now appear beside each other instead. Depending on the complexity of your blog design it can be a little daunting when you first see how the way the page is now arranged.

Take some time to become familiar with where objects are on the page. You can then group objects together to reconstruct your page in to a responsive design. The more complex the page design, the more time it will take to reconstruct the page, however, usually it should be a reasonably quick task to do. Due to the fundamental page design differences between fixed width and responsive page design there is no way to automatically convert pages from one layout style to the other.

It is recommended that you have ‘Show Layout’ set on in the EverWeb’s Window menu so you can see where the objects are . You may also find that objects in the footer have moved in to the body area.  Also don’t forget that there is no header section either so the elements of your fixed width header will need to be reconstructed in to a responsive design layout as well.

What Next?

The next blog post will look at strategies to convert fixed width pages in to responsive pages so that you can do so quickly and easily. The hints, tips and strategies for converting pages from one page layout to another are the same for all the components of a fixed width blog so we will cover the whole topic in one post.

If you have any questions, comments or suggestions, please do let us know in the  Comments Section below. Thanks!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s Responsive Page Layout has many ways in which you can work quickly, easily and effectively to achieve the page design you want. Responsive website design means that you can immediately create a web page for desktop, tablet and mobile devices using just one page design. The challenge, however, is to make sure that what you create looks great on whatever device you are viewing the page upon.

Fortunately EverWeb makes this challenge easier for you as its Responsive Page Layout, widgets and other features introduced in version 2.8 are designed specifically to do as much of the work for you whilst still giving you design freedom. There is, of course, some learning required along the way and knowing about the background to responsive design in EverWeb will help in your responsive website design if you are used to creating only fixed width web pages. Here are some tips to help get you started on building a great page design suitable for all device types:

1. Use EverWeb’s application boundary: By dragging the right hand vertical edge of the EverWeb application left and right, the page layout will adjust in the Editor Window so you can see how the page will look on all device types before previewing or publishing;
2. Widgets: EverWeb 2.8 updated many of its existing widgets so that they can be used as full width objects on a responsive page. The Navigation Menu widget was also updated with Responsive features that can be applied to both fixed width and responsive page layouts. The PayPal widget, which is a fixed width widget, was updated too introducing product image and product description features making the widget even more indispensible for both fixed width and responsive pages.
3. New Responsive Widgets: EverWeb 2.8 introduced the Responsive Row, Text Section, FlexBox and Responsive Image Gallery widgets. These new widgets are extremely flexible in what they actieve so exploring what is possible with each is highly recommended. You can also find out more about their capabilities on this blog and on our YouTube channel.
4. Compatibility: Nearly all of EverWeb’s fixed width features can be used in a responsive website. There are a couple of exceptions such as Scroll Position and Picture Frames and Line frames. These features may gain compatibility wth responsive design at a later date.
5. Blogging: Many websites include a blog and it is easy to create a responsive blog in EverWeb. Just add a page to your website and select the ‘blog’ page style from the Blank Responsive Theme Template. Many of EverWeb’s other Responsive Theme Templates also include a blog page style. If you have an existing fixed width blog, this can be converted to a Responsive blog by changing the ‘Page Layout’ in the Page Settings tab. If you choose this option you will need to reorganise the blog afterwards. Also be aware that changing the page layout cannot be undone, so it is recommended that you backup your Project file first and then duplicate the blog so that you have a copy to try the new page layout on.
6. Margins: Use the Margin option in the Size section of the Metrics Inspector to add left and right margins to full width objects. Other margin options are also available such as the Insert Margin option in the Text Inspector for use with TextBoxes and the Padding option in the Navigation Menu widget. You can also use the Responsive Row widget to add top and bottom margins to sections of your page using its Top and Bottom Padding options. As there are a few different ways to add margins to a Responsive page layout, you may want to experiment to see which works best for your page.
7. Adding a Background: Many responsive websites use alternating background color bands to separate sections of the page. This makes it easier for the user to find and focus on content. To add a background color band, add a Responsive Row Widget to the page then use the Color Fill option in the Metrics Inspector to add the background color (or image if you prefer) of your choice. Add your content in to the Responsive Row widget to create the section of the page that you want.
8. Pick Layer and Embed In: These two options are really useful in responsive design in EverWeb. When you secondary click in the Editor Window you will see these two options listed in the submenu that appears. When you have two or more objects stacked on top of each other (e.g. a FlexBox widget on top of a Responsive Row Widget) use Pick Layer to select the layer that you want. Use the Embed In option when you have a full width object that you want to embed in to a Responsive Row widget.
9. Testing: As part of any website development process, you should always test your website as much as possible before going live. This is especially true for responsive page designs as such pages scale to the device they are being displayed upon. You may find for example that objects on desktop device look fine but are too close to one another on a mobile device. Conversely, your mobile device may display the page perfectly, but on a desktop there is too much white space between objects. In these instances you will need to work with the objects on the page to find an appropriate solution. This may mean using padding options in a Responsive Row widget or a Flexbox widget instead of a Text Section widget and so on…
10. Keep Up to Date: As of this blog, EverWeb version 2.8.8 is the current public release. If you have not updated to this release, you can do so using the EverWeb-> Check for Updates… menu option, or download a new version directly from the EverWeb website. We have lots of great new Responsive features coming soon in the forthcoming EverWeb version 2.9 release, which will make responsive web design even easier and better!

In the next instalment we will look at testing your responsive website and how this can be done in the most effective way.

If you have any questions about this post, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

In the blog post ‘EverWeb Responsive Design Primer‘, we explored the background to Responsive Website Design and how it is implemented in EverWeb.

In this post, we will create a new responsive website in EverWeb. If you have already created a fixed width website using a Centered or Left-Aligned Page Layout and want to convert it to a Responsive website design, it is best to start a new project file and recreate the existing site from scratch. The Responsive Page Layout uses a different approach to web design than a fixed width design so changing the page layout of an exiting fixed width page to a Responsive page layout is not recommended. If you do want to do this, however, EverWeb will warn you beforehand that changing the page layout cannot be undone.

We will cover converting a fixed width site to a Responsive website in detail in a future post.

Creating a New Responsive Website Project

The great thing about building a responsive website in EverWeb is that almost all the features of EverWeb you used in developing fixed width websites still apply, so as usual create a new website project using the ‘Create a new website’ button on EverWeb’s Projects Window.

New Choices with Theme Template Chooser

When you create a new website project, the first thing you do is create a new page using the Theme Template Chooser. The Chooser has been enhanced in EverWeb 2.8 so you can filter Theme Templates based on whether you want to see ‘All’ of them or  ‘Fixed Width’, ‘New’ or ‘Responsive’ Theme Templates. It is worth exploring some of the over 20 new Responsive Theme Templates to give you a good idea as to how to structure your website’s responsive pages.

In addition to filtering, the Theme Template Chooser adds a Responsive blank page to the ‘Blank’ Theme Template a new ‘Blank Responsive’ Theme that includes a blank ‘Home’, ‘Video’, ‘Image Gallery’ and ‘blog’ pages. For the moment, select the ‘Home’ page style of the ‘Blank Responsive’ Theme Template.

New Page, New Ways…

Now that you have added the first page to the new project, it is worth looking at how the page differs from the Fixed Width ‘Centered’ and ‘Left Aligned’ Page Layouts. In the Page Layout section of Page Settings tab in the Inspector Window, you will see that the Page Layout is set to ‘Responsive’. The ‘Content Width’ and ‘Header Height’ fields are greyed out. As mentioned in the previous post, as responsive web design uses Full Width objects a ‘Content Width’ value is not needed.

In the same vein, ‘Header Height’ is also unnecessary as a ‘header’ is just like any other Full Width object on the page. Although there is no header, there is a Footer to provide an ‘end’ section to the page. Scroll down the page to the Footer. You will see that it contains a ‘Responsive Row’ within which is the ‘Made with Love with EverWeb’ image file.

Responsive Row & Other Full Width Objects

The ‘Responsive Row’ is, in fact, a Responsive Row widget. Click in an area of empty space in the Responsive Row widget then go to the Widget Settings button.  Here you can change the ‘Responsive Row Name’ from the default ‘Responsive Row’ to something more relevant such as ‘Page Footer’. The Responsive Row naming shown in the Editor Window is useful when you have many Responsive Row widgets on the page.

The Responsive Row widget is special as it acts a a ‘super container’ that can hold non-full width objects. If you have objects that you do not want to be full width e.g. TextBoxes, shapes or in this example, the ‘Made with Love with EverWeb’ image file, add a Responsive Row widget to the page, then with the widget still selected use the Toolbar to add a TextBox, or Shape, or drag and drop an image file from an external source or the Assets List on the Responsive Row widget. You can even drag and drop other widgets on to the Responsive Row widget. This is useful when you need to use non-full width widgets such as the PayPal, Live Photo and Facebook widgets. Use the Widget Settings to adjust the spacing and justification of the objects within the Responsive Row widget.

For more information on the Responsive Row widget, click on the Help ‘?’ in the top right hand corner of the Responsive Row Widget Settings or check out our Responsive Row Widget YouTube video. The video will take you though how to fully use the widget.

The Responsive Row widget is a good example a full width object in responsive design. Most objects that you add to your Responsive Page Layout are designed to be full width. Many of EverWeb’s existing widgets have been updated in version 2.8 to be full width capable. When a widget is not full width capable, EverWeb will advise that you can add such an object by placing it in a Responsive Row widget.

Whilst the Responsive Row widget is incredibly useful, the new FlexBox, Responsive Image Gallery Widget and Text Sections widgets have great features and scope. And remember that most widgets do not need to be enclosed inside a Responsive Row widget, unless you have a specific need to do so.

Adding Objects to The Page

Start building the page by adding a Navigation Menu widget. First, click in the main body area of the page so that the Responsive Row widget in the Footer is no longer selected. Next, drag and drop the Navigation Menu widget on to the Editor Window. When the widget is added, it is placed right at the top of the page as a full width object. Style the widget in the same manner as you have always done in EverWeb.

Next drag and drop an Image Slider widget on to the page. When added, the widget sits as a full width object immediately beneath the Navigation Menu widget. Add some images in to the Slider, again in the same way as you always use the Image Slider.

Now add a TextBox to the page using the Toolbar. Again it is added as a full width object, directly under the last added object – the Image Slider widget. Edit and style the text as you want in the same way usual. Remember that if you do not want the TextBox to be full width, add a Responsive Row widget first then add the TextBox whilst the Responsive Row widget is still selected.

Embedding Objects

In this example, I have already added a TextBox, but not to worry. I can add a Responsive Row widget to the page which will be added immediately below the TextBox. Click back inside the TextBox to select it, then secondary click. In the menu that appears, scroll down to ‘Pick Layer’. You will notice that your TextBox has a checkmark against it as it is already selected. Further down the menu is the option ‘Embed In’. This option is used to to embed objects, such as the the TextBox, in to a Responsive Row widget. You will see the two Responsive Rows on the page listed: ‘Responsive Row 1’ and ‘Page Footer’. Click on ‘Responsive Row 1’. The TextBox is now added to the Responsive Row widget. Go to the Metrics Inspector and uncheck the ‘Full Width’ checkbox and then use the TextBox’s selection handles to change its width so that it no longer full width.

You have now created the basic of your first responsive page by adding and manipulating full and non-full width objects. There are many ways you can manipulate objects on the page and we will look at this in the next instalment!

If you have a question, please let us know in the Comments Section below. Thanks!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

ECWID is an an e-commerce platform that helps you easily create an online store so you can sell products and services anywhere online or in-person. ECWID can be integrated in to your website, Facebook and other social media, and Marketplaces such as eBay.

Adding ECWID In To Your Website

Integrating ECWID in to your website in EverWeb only takes a few steps…

1. First sign in to your ECWID account or create a new account if you don’t have one already, at ECWID’s website.
2. Once you have created your account or have signed in, you will be taken to your ECWID Control Panel.
3. The Control Panel will guide you though the steps you need to complete the setup. If you are just starting a new account, select ‘Create account’ and complete the details required.
4. Next select ‘Create Your Own Online Store’ where you will go through the steps required to create your own online presence.
5. You will be asked the question ‘Do you have a Website or Facebook Page?’ Select the ‘Yes, I have a website’ option.
6. On the next screen select ‘Other Platform’.
7. You are now on the ‘Add ECWID store to your site’ screen. 
8. Highlight the code in the center of the screen and copy it to the clipboard.
9. Now switch to EverWeb and go to your Storefront page.
10. Add an HTML Snippet widget to the Storefront page and paste in the code that you copied from the clipboard into the HTML Code box. Click ‘Apply’ to finish.
11. Now go back to the ECWID website and select ‘Proceed to next step’.
12. Now you will need to add in the URL of your Storefront page in to the field on the ‘Set. Store URL’ page. If you have already published your website with the Storefront page, navigate to this page in your browser. Copy the URL address from the search bar in to the field.
13. If you have not yet published your website you can come back to this step later once you have published. Alternatively, use the folder structure of your website from the Web Page List to construct the Storefront URL name.
14. After adding the URL to the field in the ‘Set store URL’ page, click on the button ‘Proceed to next step’.
15. You will be taken back to the Control Panel page as you have finished the setup.
16. You should now go to the ‘Add Products’ section of the Control Panel and add one or more products to your ECWID store. If you have not added any products in your own store, ECWID will display a demo product list when you publish your website instead!
17. Once you have added your product(s), complete your ECWID Control Panel setup so that your storefront is ready to go if you have not done so already.
18. The last step is to go back to EverWeb and publish your website. When you view your Storefront page, you will see your products listed for sale!

Video Walkthrough

You can also follow the steps in this blog post in our YouTube video Using ECWID with EverWeb.

If you have any questions about this blog please let us know in the Comments Section. We are always happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

Responsive Website Design (RWD) is the headline feature of the new EverWeb version 2.8 that many of our users have been eagerly waiting for. Whilst some will be familiar with RWD, its concepts and methodology, there will be many who will be dipping their toes in for the first time. RWD offers a different approach to web design that can create a wealth of possibilities for your website. However, RWD can also be difficult to conceptualise and implement across all devices so can become a frustrating experience.

This post is designed to give you a background to Responsive Web Design: What is it, what it is not, when to use it in your website design and when not to as well as the advantages and disadvantages of using RWD. Knowing more upfront about how RWD works will help you more easily develop great responsive websites in EverWeb!

What is Responsive Website Design?

Wikipedia quotes Responsive Web Design as

“an approach to web design which makes web pages render well on a variety of devices and window or screen sizes”

In essence, Responsive Web Design allows you to create one page design that can be used on any device browser from mobile through to large desktop. Responsive design means that the pages you create will automatically adjust to the size of the browser it is being viewed upon. This is a wonderfully simple concept, but does require a different way of approaching website page design. When comparing it to the ‘traditional’ way of making websites where you have to create a desktop page and a corresponding mobile version, there are some advantages and disadvantages to be aware of…

Advantages of Responsive Web Design

• Your website design is automatically scaleable on any device.
• Google and other search engines likes responsive websites and ranks RWD websites higher in search engine ranking results
• Promotes website design unity across devices
• Requires only one website that caters for all devices
• May reduce development and maintenance time, cost and effort

Disadvantages of Responsive Web Design

• Conceptually difficult and difficult to learn.
• Constrained design approach. Typically not a good tool when creating free form websites
• Can be costly in development and maintenance.
• Page loading times can be slower than for ‘traditionally’ designed websites.

Expectations of Responsive Website Design

Responsive Website Design can make developing fully scaleable websites quick and easy if you have the right experience and knowledge. However, there are times when building a responsive website may not be the right choice and using a ‘traditional’ website design is actually better, particularly when a ‘free format’ design approach is required.

It is recommended that you try a small test website project before developing a new RWD website project or redeveloping an existing ‘traditional’ website. In this way you will learn more about how RWD works in general and how it is works in EverWeb.

If you want to redevelop an existing ‘traditional’ style website bear in mind that it will need to accommodate responsive design methods. Invariably, some design compromise will be needed which may also have advantages and disadvantages. Do not expect your existing design to look, and/or function, in exactly the same way when redeveloped as a responsive website.

RWD Development Time, Cost and Effort

It is worth investing some time and effort in experimenting to see what is, and is not possible, with RWD in EverWeb. There is a learning curve, which can be quite steep for some as RWD often requires a different approach and way of thinking than you may be used to.

Understanding the basics of EverWeb itself gives you a good start as responsive design capabilities have been integrated seamlessly in to the product. Our post blogs and YouTube videos will also help guide you on all of EverWeb’s responsive design features and how to use them using real world examples.

Responsive Design in EverWeb

Responsive design is structured so that objects always use the full width of the page. Full width objects are like containers that hold their own content. These ‘containers’ are stacked from the top of the page downwards, one under the other. As the page is resized in a browser, the objects within the container automatically scale and reorganise themselves within the container as its horizontal and vertical dimensions change to properly fit within the browser window.

Some objects, such as the Responsive Row widget, can only be a full width object. Some objects such as TextBoxes, shapes, images and some widgets can be either be a full width or non-full width object. Some objects, such as the Facebook Like and Live Photo widgets, can only be non-full width objects.

Next…

In the next post related to responsive website design in EverWeb, we start to build a responsive website in EverWeb.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s just celebrated its 5th anniversary with the introduction of the NEW EverWeb version 2.8!  From its beginnings back in 2013, as the spiritual successor to Apple’s iWeb Mac website building product, EverWeb has grown amazingly over the last five years. Much of what we do is driven by the EverWeb community to whom we give a big ‘Thank You’ for the continued support, comments and suggestions that helps focus us on creating a bigger and better EverWeb year after year.

Over the last twelve months we’ve added an extensive range of new features to EverWeb such as a stock image library of over half a million royalty free images, a new responsive capable Navigation Menu widget, Scroll Position that lets you create page anchors you can hyperlink to and super fast publishing. We also added twenty new theme templates plus lots of feature additions to EverWeb’s in built widgets.

Introducing Responsive Design with EverWeb 2.8

Responsive Web Design is the headline feature of EverWeb 2.8. Adding responsive capabilities to EverWeb has been our most popular feature request and we’ve worked hard to integrate it into EverWeb without changing how EverWeb works. It has been a great challenge but the results, we believe, make EverWeb possibly the easiest way to create a fully customizable responsive website just with drag and drop.

EverWeb’s responsive design capabilities allow you to create scalable web pages using the new Responsive Page Layout. Responsive design means that you do not have to create separate website pages for desktop/tablets and mobile devices. EverWeb 2.8 lets you choose which way you want to build your website: the ‘traditional’ way or the ‘responsive’ way. Each has advantages and disadvantages which we will look at in more detail in future blogs.

From a web design process, if you are already familiar with EverWeb and are interested in building responsive websites, take a look at the EverWeb Video Training Library which explains the basics of responsive design in EverWeb to get you up and running quickly. Furthermore, our EverWeb YouTube channel also has lots of videos about building responsive websites, so sign up so that you don’t miss out on what’s new. There is also plenty of information on Responsive web design in EverWeb in our updated EverWeb User Manual. You can access the manual and the new chapter specifically on Responsive Web Design in EverWeb from the Help-> EverWeb User Manual menu option.

… and Many More Great Features!

In addition to Responsive Web Design, EverWeb 2.8 includes lots of other great new and updated features, for example, if you use third party widgets, our new Widget Organizer is a great way to categorise them just how you want.

EverWeb’s Responsive design feature has also had a great spin off for many of our existing in-built widgets. For example, the PayPal Widget adds  product image and text description features as well as weight options. Other widgets have had full width capability added to them such as the Contact Form Advanced, Video and Audio widgets. The Navigation Menu widget adds the ability to add and hyperlink a logo and a Stick to Top of Page feature to pin the responsive menu to the top of the page. Last but not least, the Metrics Inspector also had a new feature add with a new Margin option so you can add left and right margins to full width objects.

New Theme Templates have also been added for both fixed width and the new responsive page layouts. The Theme Template Chooser itself also sports a new filter menu so you can now view All Theme Templates or only Fixed Width, Responsive or ‘New’ Theme Templates.

We’re delighted to bring over 50+ new and updated features to EverWeb and a whole new world of creativity with our all new Responsive website design features.

We are always keen to have your feedback on EverWeb and what you would like to see added, improved or changed in the the product. Please let us know in the Coments section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

We’re thrilled to announce the immediate availability of EverWeb version 2.8 featuring all new, fully integrated, Responsive Website Design. EverWeb’s new responsive website building features are designed so that you can build either a responsive or traditional style website using the same User Interface, the same widgets and the same features as you have always done.

And that’s not all, as EverWeb comes with 50+ new and enhanced features in version 2.8 including Widget Organisation, Draft mode for Blog Posts, responsive blogs, improved Theme Template Chooser and much, much more. A detailed list of EverWeb version 2.8’s new and improved features as well as maintenance and stability enhancements can be found below.

EverWeb version 2.8 is available in two versions:

• OS X 10.7 – 10.8 (32-Bit):  Lion, Mountain Lion
• OS X/macOS 10.9 and higher (64-Bit): Mavericks, Yosemite, El Capitan,  Sierra, High Sierra, Mojave

If you are running OS X 10.6, EverWeb version 2.5.2 is available for you.

When updating to EverWeb version 2.8, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.8 Includes…

[NEW] All NEW Responsive Website Design built directly in to EverWeb

[NEW] Responsive Page Layout option in Page Settings enables responsive website design in EverWeb

[NEW] Responsive Row widget for Responsive Web Design in EverWeb

[NEW] Text Section widget for combining images, text and buttons in one highly customizable widget

[NEW] Responsive Image Gallery Widget

[NEW] FlexBox Responsive Widget

[NEW] Many widgets have been optimized for use in Full Width and Responsive page layouts

[NEW] Blogging environment optimized for Responsive Website Design

[NEW] Left and right margin settings for Full Width and Responsive objects in the Metrics Inspector

[NEW] ‘Embed In’ option to embed objects directly into the Responsive Row Widget when object is secondary clicked upon

[NEW] Responsive Blank Theme Template

[NEW] New Responsive Theme Templates have been added

[NEW] New Full Width Theme Templates have been added

[NEW] Theme Templates can be filtered to display either Fixed Width, Responsive, New or All Theme Templates

[NEW] Completely revised and redesigned EverWeb User Manual including a new Responsive Design chapter

[NEW] Widget Organization

[NEW] Updated icon design for the Navigation Menu widget

[NEW] Navigation Menu Widget now includes background color for the standard navigation menu

[NEW] ‘Stick to Top’ option in the Responsive Options section of the Navigation Menu widget pins the widget to the top of the pages when in Responsive Hamburger menu mode

[NEW] You can add a logo directly in to your navigation in the Navigation Menu widget when using Responsive Options

[NEW] Added a link to the Logo image in Responsive Options of the Navigation Menu widget

[NEW] Blog posts can be set as ‘Draft’ so they only publish when you want them to

[NEW] Blog Posts images now have Post Cover Image Options for Full Width and Responsive blogs to set maximum image height and width

[NEW] Use Website Publish Date as Blog Post Date

[NEW] Scale to Fill option added to Image Gallery widget

[NEW] PayPal Widget includes new Image and Description fields

[NEW] Weight options added to the PayPal widget. You can specify kilos or lbs.

[NEW] More descriptive error messages for FTP protocol errors

[NEW] The Insert-> Choose menu option now works in Blog Posts

[NEW] Compatibility with macOS Mojave (10.14)

[NEW] Site Publishing Settings includes an option to automatically include Google Fonts Links from Google’s Servers

[NEW] Paste at mouse location

[IMPROVED] Images should load faster and be sharper, including when used in Image Gallery and Slider widgets

[IMPROVED] Better error messages for publishing issues.

[FIX] Tracking ID in the PayPal widget has been changed to Unique ID

[FIX] Links in the regular Image Gallery widget now work correctly

[FIX] In some instances EverWeb would slow down when layout guides were selected in EverWeb-> Preferences

[FIX] When Auto Save is enabled in EverWeb-> Preferences-> Backup, the File-> Revert to Save menu option is no longer available.

[FIX] Apple Xcode Simulator now works correctly when selected from the File-> Preview menu

How To Update To EverWeb version 2.8

You can easily update to EverWeb version 2.8 by

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

EverWeb version 2.8 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need, either the OS X 10.6 version, or OS X 10.7 and later, version.

More Information About EverWeb version 2.8

If you need more information about the new version of EverWeb, please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb version 2.8 Video Walkthrough

Find out more about the new release of EverWeb in our What’s new in EverWeb version 2.8 video.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw