A responsive website lets you build one website that works on all devices, for all users, no matter what browser, phone, computer etc…  they use to visit your website. Basically, there will never be a horizontal scrollbar.

The advantage of a responsive website is that they work for all users without having to redesign your website for each device.

The disadvantage is that they are a little more complicated to create and take some time to test on all the different devices that visitors use to visit your website.

Many different website builders exist to create websites, both responsive and regular websites. The main problem is understanding how to properly build your responsive website so that it just works.

One Trick to Building Proper Responsive Websites

The main trick to designing a responsive website is;

Keep it simple!

This means you don’t want to be adding too many complex design ideas to your website.

Think of your website as a vertical stack of sections such us;

HEADER

MAIN IMAGE WITH SMALL DESCRIPTION

BRIEF DESCRIPTION OF WEBSITE

CUSTOMER TESTIMONIALS

FOOTER

So, each part of your website lines up vertically, stack on each other instead of a column based design you might see in older based websites.

What is a Responsive Website Video Tutorial

How to Build a Responsive Website

Normally, building a responsive website would be planning out how you want the website to appear on mobile, tablets and desktop computers. This is done by setting markers, known as breakpoints at the common width of a mobile device, table and desktop computer.

This process can of course get tedious.

A much easier way to do this is to follow the above format of designing a responsive website, sections stacked on each other.

When a section contains too much horizontal content, the content is wrapped to the next line,  increasing the length of the browser page.

With EverWeb’s Responsive Web Design layout, this is all taken care of for you.

Creating & Understanding Responsive Website Design

With EverWeb, we can add a new Responsive page. There are many templates to choose from (or you can start from a completely blank page).

Click the ‘Add Page’ button in the toolbar and choose your template. We will choose the Home page for the Client template.

Add A Responsive Web Page to Your Website using the Add Page button in EverWeb’s toolbar.

Once added to your website you will see that each part of your website is broken up into sections which are stacked horizontally, as described above in this tutorial.

If we wanted to, we could re-arrange each section by dragging them up or down on our website. But before we do that. let’s see what happens when we resize our window.

Desktop Layout for a Responsive Webpage

As we resize our window, the objects within each row are wrapped to the next section so that they fit within our window without scrolling horizontally.

That is, essentially, a responsive website. It responds by re-arranging its design to the width of the web browser.

This is a very simply example, and with EverWeb’s new responsive widgets, you can set even more advanced customizations, such as making an image or text expand to the browser window width.

For now, let’s make sure that the basic concept of designing a responsive website is covered.

Smaller Width Responsive Page

So how is this responsive behavior achieved so easily?

EverWeb’s Responsive Row Widget

The new Responsive Row widget, which can be found under the Widgets tab, lets you group elements that are wrapped to the next line as the browser width gets smaller.

From the screenshot below you can see the Responsive Row widget that we can drag onto your web page, just like any other widgets.

Once we drop the Responsive Row widget on our website it looks like this and allows us to now drag and drop any element into it, such as images, text, or any other widget.

And as we learned above, EverWeb will automatically adjust the content so that they fit nicely within our web browser, no matter what the width is. There will be no horizontal scrolling on any device.

Our settings under the Widget settings let us give;

1. Give the Responsive Row a name so that we can easily identify it. This is useful when you want to embed existing objects on your page in a Responsive Row. You can right click on any other element and select ‘Embed in <Responsive Row Name>’
2. The alignment lets us align each object vertically and horizontally. Generally the default settings of Middle and Center will be the desired behavior.
3. Padding lets us add some spacing at the top and bottom of the Responsive Row to space out our stacked sections as we like
4. Inset Margin defines a spacing around each object within the Responsive Row so that they can be spaced out nicely

Some Advanced Responsive Row Tips

The Responsive Row has some other very nice features.

• As mentioned, we can embed any existing object in a Responsive Row by right clicking on it and selecting ‘Embed In’ and then selecting the Responsive Row

• All of the Fill Shape options under Inspector->Shape Options->Fill work with the Responsive Row and work properly on responsive websites. That means you can make nice gradients that load quickly or even use the image fill options to add responsive hero images
• You can use the full width margin settings under Inspector->Metrics tab to adjust the left and right margins if you don’t want the Responsive Row to take up the entire width of the browser

More Advanced Responsive Website Tricks

The official step by step video tutorial for the Responsive Row Widget can be seen below. It walks you through using the Responsive Row on a Responsive EverWeb Website.

In addition, the Video, Audio, Youtube and Vimeo widgets let you add responsive Videos and Images to your website that will adjust their aspect ratio properly for your responsive website.

If you are looking for even more flexibility and design control, the new FlexBox widget will provide you with even more options for creating awesome responsive websites in EverWeb. We’ll cover that in the next tutorial.

I hope you have enjoyed this tutorial. If you have any questions, please post them below.

My favourite new feature that was introduced in version 1.8 of EverWeb is the ability to make your site have full width design. In my opinion, this is taking the current sites that EverWeb users are producing and bringing them from a 90’s look and feel, right up to the standards of a modern website in 2015.

The old look of a website with a browser background that is a solid color or tileable pattern has seemed to become outdated. EverWeb now makes it very easy for people to begin taking their websites to the next level with a full width design.

If you are not sure what I am referring to when I mention full width design, a good example is the PayPal website. Here is a screenshot below.

Notice the image that spans the entire width of the browser. As well, the background for the pricing chart also spans the entire width of the browser. This is now possible to do in EverWeb.

Here is another example of what can be done, also from the PayPal website:

Notice the blue background that spans the width of the browser. This will continue to be the case even if the user widens the browser.

If you are interested in learning exactly how to accomplish this in EverWeb, check out the video tutorial that the EverWeb guys have posted.

Have you had a chance to create a full width design in EverWeb? Post your URL below and share!

Unlike iWeb, EverWeb has built in support for many SEO features. For those still using iWeb, most of the features found in iWeb SEO Tool are actually built into EverWeb. This makes optimizing your EverWeb sites much easier.

This article will go over the basic meta tags that can easily be added in EverWeb.

When your website is opened in EverWeb go to the Inspector and select the Page Settings (first tab). From here you will see fields for your web page file name, title tag, and meta description. I’ll explain each of these below.

Meta Tags in EverWeb

File names
Your web page file name is what will appear in the path bar at the top of your browser. For example, it will be show up as;

The file name in this case is filename.html

For file names you should include 1-3 keywords, separate by -‘s. So for example if your website sells computer widgets you may want to use;

computer-widgets.html

All your files names should be unique and related to the content on the page. Your default page (the first page listed in EverWeb’s web page list) will always be named index.html no matter what is entered in here.

Title Tags
The title tag is what appears at the very top of your web browser and in search engine result pages when someone searches for your website.

It is important for title tags to contain your most important keywords yet be short and enticing so searchers would want to click it if it appeared in their search results.

A good title tags contains 2-5 characters and is no more than 140 characters long. For example;

Computer Widgets – Florida’s Top Widget Maker

A good idea is to have your city name if you are a local company.

Web Page Description
Your web page description is hidden from your visitors when they visit your page but it is what appears underneath your title tag in search engines.

A good description relates to your web page and contains some of your important keywords. It also entices people to click your link when it appears in search engines.

Descriptions should be kept relatively short and only contain about 2-3 sentences.

Web Page Keywords
Web page keywords used to be used a long time ago by search engines to rank your web site. These days they aren’t used much and can actually hurt your rankings. For example, Bing will use them detect keyword spam if you use too many unrelated keywords in there. It is best NOT to use the meta keywords tag. It has been left out of EverWeb for that reason.

In our next post we’ll dive deeper into search engine optimization tips for your EverWeb website.

In order to add Google Analytics to your iWeb website you needed an external tool such as iWeb SEO Tool.

With EverWeb, it’s so much simpler!

In fact, you can add pretty much any third party code directly within the application. In this tutorial, I’ll show you how to add Google Analytics specifically.

Google Analytics is a free service offered by Google that tracks visitors to your website. It can tell you where they came from, their location, what pages they visited on your site and so much more. It is a very powerful visitor analytics tool.

Your first step is to login to your Google account or create one if you don’t have one already. If you use any Google service you can use that account for your analytics.

Select the “Sign Up” button under “Start Using Google Analytics”. If asked, you should go with the Universal Analytics option (which should be selected by default). Enter the required details and press the “Get Tracking ID” button at the bottom of the page.

Now you’ll see a new screen that has your Analytics tracking code that must be entered on your website.

You are going to have to copy the text in the field labeled “This is your tracking code. Copy and paste it into the code of every page you want to track.” This is what you will be adding to your website.

Next, open your website up in EverWeb. Select your website name in the upper left corner of the window as indicated in the image below. Then in the Head Code field paste your Google Analytics code.

Once you have done that publish your site. Your Google analytics will start tracking within 24 hours.

It’s finally here! EverWeb, the iWeb replacement app that has been in testing for a while now is finally available.

If you love iWeb, you’ll love EverWeb. It’s like iWeb on steroids. It features;

• Built in search engine optimization features
• Drop down menus
• HTML5 Video
• Drop down navigation menus
• Slick image sliders
• Cool mouse transitions
• And much more…

We’ll write up a full review soon but for now, get your free trial copy to check it out.

If you recall from a post I made about one month ago, there were rumours circulating about a possible iWeb replacement on the way.

The rumours have been confirmed, and the iWeb replacement will be called EverWeb.

EverWeb will be demoed at this years MacWorld/iWorld show in San Francisco.

Users can ‘Like’ the EverWeb Facebook page, and interact with the app’s developers, and other highly excited future users.

According to All About iWeb an iWeb replacement is on its way.

This is extremely exciting news! We have all been waiting for an iWeb replacement since Apple has had no plans to update the current version and there is nothing that really comes close to what iWeb offered. It could even be iWeb itself, but we won’t know until more information is released.

You can sign up to be notified when the iWeb replacement is released.

Let’s hope this is actually what we have been waiting for! Leave your comments below if you are excited as I am.

RAGE Software just emailed their latest video tutorial which is based off of their popular short URL video. This new video shows iWeb users how to get rid of the redirect in iWeb (you know how typing in your domain redirects it to a longer URL). If you are interested in getting rid of your redirect, take a look at this tutorial to learn how. Let me know what you think. The application shown in the video is iWeb SEO Tool.

RAGE Software recently published a tutorial on making a mobile version of your website. The tutorial is a great resource as many users have been looking for step-by-step instructions on setting up a mobile version of your site. The tutorial shows you how to setup the page in iWeb so that it is mobile ready, and then gives you some basic tips on creating the mobile site. But most important of all, the tutorial will show you how to set it up so that when a user visits your site on an iPhone or Android, the browser will recognize the device and automatically forward the user to the mobile version of the site. Watch the tutorial below and try for yourself.

I hope by now, you have found a new place to host your iWeb website. With just 30 days left of MobileMe, it is important to make the switch as soon as possible.

If you’ve read this blog before, you will notice that I recommend using RAGE Web Hosting as your replacement web host. Over the last few months, RAGE has put together some great articles and video tutorials that give MobileMe users more insight into the changeover from MobileMe. Most importantly, RAGE has been doing a great job illustrating why iWeb users need to switch to a new host, and how to do it so that it is an easy and seamless transfer. Below are a few of these resources that I have found to be most important and crucial for any iWeb user who is still using MobileMe.

Edit: One more thing I’d like to add is that for those of you familiar with iWeb SEO Tool, the program is no longer available for free, so RAGE will provide users signed up to their hosting for at least one year with a free serial number. Take advantage of this offer while it is available.

Leaving MobileMe but still retaining some of its features

Transferring a domain from GoDaddy to RAGE

RAGE Web Hosting FAQ

RAGE’s hosting sign up wizard

Also, keep in mind that you can visit their website, and wait about 60 seconds for a popup to appear that will allow you to live chat with a RAGE agent. You can ask them any question you want and they’ll be able to answer you. I hope everyone takes this switch seriously, as it will be a real shame to see what happens come June 30 and many website’s go down without people even realizing.

If you have any questions about switching from MobileMe to a hosting company, feel free to ask in the comments section.