Mac SEO Blog

The Responsive Row widget is a key resource for anyone building a responsive website in EverWeb. The full width widget is like a ‘bucket’ in that you can drag and drop other widgets, TextBoxes, shapes and images in to it. This is ideal for situations where you want to use widgets that are not full width capable, such as the PayPal widget, or when you want to combine different objects together in one row.

When the Responsive Row widget debuted in EverWeb 2.8, it was easy to see the widget as ubiquitous. However, since its inception, responsive website building in EverWeb itself has evolved as its feature set has expanded as have many of EverWeb’s widgets capabilities. So, is the Responsive Row widget still the Swiss army knife of responsive web design in EverWeb that it used to be? That is a difficult question to answer. Looking back over some of my early responsive website designs has given me some insight in to how things have changed and how it is possible to update already built websites to be more code efficient and easier to manage and maintain. Additionally, this new knowledge is also advantageous when building new websites as you will be able to do this more efficiently, creatively and in less time than before.

Where The Responsive Row Widget May No Longer Be Necessary…

Since EverWeb 2.8 there have been many feature additions and updates to EverWeb that make the reliance on the Responsive Row widget less than when it was introduced. Here are common things that we used to do, but can now do in a better way!

• Navigation Menu Widget

When supporting customers we often find that the Navigation Menu widget has been placed inside of a Responsive Row widget when it does not need to be. If you want full width navigation, just drag and drop the Navigation Menu widget on to your responsive page. It will automatically be a full width object on the page so will automatically scale to the size of the page. Use the Responsive section of the Widget Settings to set responsive specific options for the navigation.

• Background Colors

Initially, EverWeb’s full width widgets did not have the capability of a background fill color (except for the Navigation Menu widget) or image so had to be placed within a Responsive Row widget. That changed in EverWeb 3.0 so now you can add the full width widget of your choice and set its background color or image using the Shape Option tab’s Fill options.

• Combining Objects

When starting out with responsive design, one of the most common things that many users want is to combine text with images. It is easy to use a Responsive Row widget to do this. Just add a Responsive Row widget to the page then add TextBox and images in to it. This is a perfectly valid solution, however, you will need to make sure that your text and images are narrow enough to fit on all devices. The smallest iPhone, for example, is the iPhone SE which has a width of 320 pixels. If you have set margins on your page, then you may find that you only have a usable page width of about 280 pixels. This is fine for an iPhone SE but on a desktop computer you may have a lot of white space on either side of your text and images.

A better alternative may be to use a FlexBox widget instead. You can add the image and text as separate embedded objects. This will enable you to set each object’s minimum and maximum width so that they scale properly on all devices. No more problems with too much white space and scaling issues. Use the Spacing option to add spacing between each embedded object. This option also pads the objects in the widget so you have less need to add margins.

• Margins

Often a Responsive Row widget is used to add top and bottom margins to objects when it is actually not necessary. Here are a couple of examples:

The Navigation Menu widget: This widget has padding and spacing options in its Widget Settings to help frame the navigation properly within the widget. You can also set the background color of the widget too by checking the ‘Use Background Color’ option.

Text Boxes: It is easy to use the enter key to add a top and bottom margin to your full width text, but it is not always necessary. Instead, delete these extra carriage returns and go to the Text Inspector. Use the Insert Margin option to create top and bottom padding as needed.

• Widget Alternatives

Sometimes you may find that you have to experiment a little to get the right solution e.g. when using a combination of text, images and buttons should you be looking at the FlexBox or Text Section widget? you may need to experiment to find out!

When reviewing one of my first responsive websites I found that I had used a Responsive Row widget with four images all of the same size embedded in it. I suddenly thought that I could, in fact, use the Responsive Image Gallery instead. I set the background color of the widget and my added in my images which now scale to any device instead of being stuck at 200px x 200px. The Gallery Padding option added an all round margin and the minimum and maximum width options ensures that the images always size and scale correctly without a lot of white space showing on larger devices!

When You Should Use The Responsive Row Widget

There are, of course, times when the Responsive Row widget is still going to be the ideal choice! For example, when using Fixed Width widgets such as the PayPal, Audio and FaceBook widgets, or when placing social media buttons on your page.

The Responsive Row widget is also a must if you are using EverWeb’s Show on Device feature or when you need to combine objects in to one row in a way that precludes the use of either the FlexBox and Text Section widgets.

There may also be times when the best way to create padding, or a margin, on your page is to use the Responsive Row. You may even find that there are times when using Set Shape as Scroll Position is more beneficial in a Responsive Row widget than in another object.

There are many ways in which you can forego using the Responsive Row widget. Doing so can make your web page easier to manage, more streamlined and less prone to faults and mistakes. However, with web design there is usually more than one answer to overcoming design issues, it’s just knowing where to look, a bit of experimenting and some out of the box thinking!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

We’re please to announce a new update for Sitemap Automator which adds the ability to create and publish XML Sitemap files for EverWeb hosted websites.

Sitemap Automator creates specially formatted files called XML Sitemaps that list all your web pages along with details on how important each page is, how often each page is updated and the last time a page was updated. This file then gets submitted to all major search engines to help them properly find and index your entire website.

Google, Yahoo, Bing and Ask search engines rely on these XML Sitemap files to determine how to prioritize and properly organize all pages on your website.

EverWeb is our all new, drag and drop website builder for OS X. It works very similar to Apple’s discontinued iWeb software. With this update, Sitemap Automator automatically recognizes your EverWeb built websites and publishes them directly to your EverWeb account.

This new update also improves support for OS X Mavericks and updates the user interface. In addition it fixes a few issues with scanning certain websites.

Video Transcript:

In this tutorial, I am going to show you how you can verify your website with Pinterest, using Sitemap Automator.

One thing I want everyone to keep in mind is that sites such as Pinterest are constantly changing their user interfaces, so if you are watching this video and some things you see here are not matching up with what you see in your web browser, don’t worry, the same principles will apply even if things are in different locations.

So the first thing you will need to do is sign up for a Pinterest account. We’re going to skip over that part as that is something you will be able to do on your own.

Once logged in, click on your username in the top right corner, and select settings. Next, scroll down a bit to where it says Website. Make sure your website URL has been entered, and the spelling is correct. Then click on Verify Website.

Step one says to Download the verification file. Click on the download link to download the file. Make sure you only download this file one time. Some users tend to download it multiple times by accident. When doing this, you will end up with multiple files of the same name in the Downloads folder, and the file will get renamed causing this process to not work. So I will just repeat, do not download this verification file more than once.

Next, launch Sitemap Automator. Click on File and select Publish Verification File.

Click on the Select Verification File button to locate your verification file. Highlight the verification file and then click on the Open button. Quickly just double check to make sure that your verification file name matches up the file name on the Pinterest page.

Now we can proceed by clicking on the Publish to FTP button. Next, enter all your FTP login information. Just to make sure our login information is correct, let’s click on the Browse button. No error message appears and I am able to see some files and folders for my server, so I will proceed by closing this window and clicking on the Upload button.

Once the upload is complete, I will return to that Pinterest page and click on the Click here to complete the process button. My verification file has been accepted and I can see here that my site has been vitrified with Pinterest.

We have just released an update to SERank, our powerful search engine ranking tool which allows users to check their website’s rankings in multiple search engines for multiple keywords.

SERank 2.6.2 includes a dozen new local search engines, as well as fixes issues pertaining to the rank Change column. If you were/are receiving a N/A in the change column instead of the usual red number for a decrease, green number for an increase, or grey number for no change, please update your copy of SERank. Make sure to perform the search at least two times in order to get rid of the N/A.

Extra characters being added to the URL has also been corrected.

SERank 2.6.2 is a free update for all registered users. Download the SERank demo and try it out for free.

Sitemap Automator, our easy-to-use XML Sitemap creator has been updated to include a couple of fixes. Sitemap Automator now shows the proper source of broken links, as well as some fixes for various website scanning issues.

Sitemap Automator 2.5.2 is a free update for registered users. You can download the Sitemap Automator demo and try it out for free.

Sitemap Automator 2.5.1 is now available. This free update adds improvements to web page scanning. If you have had any issues creating your XML sitemap file, this update will have probably fixed them.

Sitemap Automator creates speciality formatted XML sitemap files that list all of your web page files. You can then submit these files to all major search engines including Google, Bing, Yahoo and Ask.com to quickly and easily get your website fully listed.

The videos listed below will give you detailed instructions on the proper way of using Sitemap Automator. These videos were made to help make your experience using Sitemap Automator as easy as possible. Watch each video carefully, and in the order in which it is listed.

1.  How to create an XML Sitemap and publish it to your server

2. How to verify your website with Google Webmaster Tools and submit your XML Sitemaps to all major search engines

3. How to tell if you published your XML Sitemap correctly

4. How to verify your website with Bing Webmaster Tools 

 

This video is an update to an older video tutorial. In this video, we will show you how to properly verify your website with Google Webmaster Tools using Sitemap Automator, and then submit your Sitemap to Google and the other major search engines. If you haven’t already, please watch the first part of this tutorial which will show you how to create and publish an XML Sitemap.

Video Transcript:

So now that our Sitemaps have been published to our websites, we must notify the search engines. To do so, we’ll simply press the Notify Search Engines button. When you press this button, you will most likely see this window popup. This window is for instructions on notifying Google about your Sitemap. Notifying Google is slightly different from notifying other search engines. To notify Google, we will be creating an account for what is called Google Webmater Tools. In Google Webmaster Tools, we will be provided with some very useful information about our websites.

So to begin the process, first click on the Create account button. Your web browser will appear at the Google Webmaster Tools website. The first thing you’ll need to do is sign in with you Google account. If you don’t have an account, you can easily create one by clicking on the button for signing up for a new account.

When you are logged in the first thing you will need to do is click on the Add a site button. Then, you will need to paste your site’s URL and press the Continue button. Note that you did not copy your URL, but it was copied for you when you pressed on the Create Account button to be taken to Google Webmaster Tools.

Our next step is to verify our website. The reason we must verify is because Google Webmaster Tools will provide us with certain information about our sites. Information that only the webmaster should have, and not the general public. Because of this, we verify that we are the actual owner of the site.

First, we’ll click on the link to download the HTML verification file.

Then we’ll go back to Sitemap Automator, and select File in the menu bar, followed by Publish Verification File. Then press the Select Verification File button, and locate the verification file that you just downloaded. Highlight it and click Open.

Now we must Publish the verification file. If you publish to iDisk, click the Publish to iDisk button. If you publish to FTP, press the Publish to FTP button. Publish the file just like you did when you published the Sitemap.

When you are done publishing, go back to your web browser to where Google Webmaster Tools is open, and click on the link to confirm that the uploading of the file was successful. If you see a page like this, then you have done it correctly. If you get an error, then you have not done it correctly and you must try it again.

If you have published it correctly, click the Verify button.

You have now successfully verified your site. We have just a couple more steps left at this point. If you see this page, click the Continue button.

Make sure you get to your site’s Dashboard in Google Webmaster Tools. Click on Site Configuration, and then select Sitemaps. Then click on Submit a Sitemap and then type in sitemap.xml just like I am doing.

At this point, you have just submitted your Sitemap to Google.

Now just go back to Sitemap Automator and click on the Notify Search Engines button and your Sitemap will have been submitted to Google, Yahoo, Bing and Ask.

Remember to subscribe and visit our site for the next steps in our Sitemap Automator Instructional series.

The video tutorial below will show you the basics of creating an XML Sitemap using Sitemap Automator. We will also cover the basic points of publishing your Sitemap to your server.

Video Transcript:

To create an XML Sitemap using Sitemap Automator, the first thing you must do is add your site’s URL by clicking the New Sitemap button, and typing in your URL. Pay close attention to make sure there are no mistakes in your URL such as seeing http more than once.

Then click on the Create Sitemap button. Sitemap Automator will now scan through your website and find all of the available internal links on your site. When it is done you will be able to see all of the links that it was able to find.

Your next step is to click the Generate Sitemap button.

Now we must publish this Sitemap to our server. From the drop down menu, select to publish either to your iDisk or to your FTP server, and then press the Publish button.

If you publish to iDisk, your publish window will look like this. Select the option to publish to the root folder if you only have one website on your MobileMe account. If you have more than one, select the option to publish to selected website, and then select the website that you want to publish the Sitemap to, and then press the Publish button.

If you publish to FTP, your publish window will look like this. Enter your FTP login details in each of the fields. The Server field is usually just your website’s URL without the http, or www. If you are unsure of what your username, password, or root directory path may be, you will need to contact your web host to find out. When you are finished filling all the fields out, press the Upload button.

Your Sitemap should now be live on your site.

Remember to subscribe and visit our site for the next steps in our Sitemap Automator Instructional series.

This video will demonstrate how you can check to see if you have correctly published your XML Sitemap using Sitemap Automator.

To check to see if your Sitemap has published correctly, first open your website in your web browser.

If your site shows up as yourdomain.com, then type in sitemap.xml beside the domain, similar to how I am doing it. If the sitemap shows up, then you have published it correctly.

If your site was made in iWeb, it might look something like this. Just replace pagename.html with sitemap.xml.

If your iWeb website’s URL contains the Site Name in the middle here, then you can replace these two items with sitemap.xml

If that doesn’t work, you can also try seeing if your Sitemap is located inside of the site folder by just replacing pagename.html with sitemap.xml like this.

If none of these options worked for you, then you most likely did not publish your Sitemap correctly, and you must try it again.

We are happy to announce that we have just published an update to Sitemap Automator. The new release contains the following updates:

• [NEW] Scanning your website will now be faster in this version
• [FIX] Sometimes the wrong referring URL would appear for a broken link
• [FIX] Fixed certain scanning issues with websites that use 301 or 302 redirects

Try it out and let us know what you think!

Download Sitemap Automator 2.4