Transitioning from iWeb

Whether you’re getting looking for a replacement to move on from MobileMe, or just looking to move up, Sandvox 2 is a great replacement for iWeb.

The Sandvox community has a long history of welcoming people moving up from iWeb-created sites to a tool that is more powerful, more flexible, and optimized for search engines.

In this detailed guide, we've outlined what you need to know to make a successful transition. If you're used to using iWeb, this guide will help you understand the differences in terms, and in the way that the applications work.

iweb_sandvox.png

The Big Picture

70%

iWeb sites are built one page at a time, with each element of each new page frequently needing to be hand-tuned to look just right. Great for small sites with only a few pages to maintain, particularly if each page is one of the pre-canned page types where design elements are intended to be radically different from page to page.

70%

Sandvox, by contrast, tends to take a “set it and forget it” approach to site design and maintenance, working with the site as a conceptual whole. Many elements can be automatically inherited from page to page as new pages are added. E.g., the site title and banner (if present) are automatically carried over to each page of the site for consistency in feel and presentation. Sidebar objects present in parent collections are automatically displayed in their child pages, though this, too, is adjustable. This approach lets Sandvox scale a site to hundreds of pages (or more), asking you to add just the content that differs from page to page.

So while you might first be confused by some of the differences between the two programs and the way that they build websites, we think you'll quickly come to appreciate the power of Sandvox's approach, especially as you grow your website to more than just a few pages.

Differences in Terminology and the User Interface

While the major editing components of Sandvox and iWeb are very similar, there are some differences in terminology that are important to keep in mind. The major components of Sandvox are:

The Site Navigator, sometimes also called the Site Outline, is the hierarchical list of pages in your site found on the far left of the Sandvox document window. iWeb typically calls this the Sidebar. We use the term sidebar completely differently; in Sandvox, the sidebar refers to an actual area of the published site. It is the narrow column to the left or right, depending on design, of the main text and is often used to hold smaller, secondary content such as badges, Like buttons, images, and so forth.

The Web Editor, known as the Canvas in iWeb, is where you compose your site. Backed by an editable version of Safari’s WebKit, the Web Editor is where you edit the content of your site as well as see it take shape exactly as it will appear in Safari and other browsers. Like iWeb, and unlike other products, there is no preview mode separate from the live editor. Unlike iWeb, however, Sandvox is showing you fully constructed HTML for each page. You can even look at the HTML for an entire page using the "Develop → Web View → HTML Source" menu item.

Below the Web Editor is the Page Details Area that provides an expanded area for examining and changing the URL of a page, its window title, and its meta description.

In addition to the Page Details Area, the Inspector works very similarly to the iWeb inspector, presenting various properties about the site in general, the selected page, or a selected object on the page, depending on context.

Like iWeb, Sandvox automatically constructs a menu across the top of the site to guide the visitor from page to page. iWeb calls this the Navigation Menu; Sandvox calls it the Site Menu. You use the Page Inspector to adjust whether a page in your site is included in the site menu and whether it should have a title different from its (possibly quite a bit longer) standard page title.


Similarly, the overall look and feel of each page in iWeb is governed by its Theme. Sandvox uses the term Design and the chosen design applies to every page on the site.


iWeb includes a handful of Widgets, such as RSS Feeds and HTML Snippets. Sandvox calls these Objects and they are available from the Objects toolbar item or the "Insert" menu in the main menu bar.


Sandvox is also document-based, rather than all sites being shown within a single window. When you create a new Sandvox document, Sandvox asks you to pick a starting Design (you can always change it later) and automatically creates the top-level index page for your site. iWeb typically calls this the Welcome page; Sandvox calls it the Home Page.

One thing to note, publishing setup is done through the Host Setup Assistant, rather than through the Inspector or a different view of the Web Editor as it is in iWeb.


Lastly, Sandvox, as mentioned above, typically lends itself a more highly structured site, as typically seen in the hierarchical Site Navigator. Related to this are three important terms that are used throughout the Sandvox documentation: Collections, parents or parent pages, and children or child pages. Unlike iWeb which really only provides nesting of pages of movies and photos within a My Albums page, Sandvox has the ability to treat any page as the index of a collection that contains any other page type. When a single page becomes an index page, we say it has become a collection and is the parent page of whatever child pages it contains. Much of the expressive power of Sandvox comes from working with collections and even collections of collections.


These terms will become more and more familiar as you work with Sandvox.

Making the Transition

How do I convert my iWeb site to a Sandvox site?

Because of the proprietary themes and page layout structure used by iWeb, there is no way currently to import an iWeb site directly into a Sandvox document. In short, the bulk of a site will need to be rebuilt. (Fortunately, we have an Extract Content of Website... feature to help you get started; see below.) Hopefully once the general look and feel is set up (design is chosen, site title entered, banner adjusted, etc.), adding pages and bringing content over is not too much of a pain.

How can Sandvox help me get started?

Sandvox features an item in the File menu, called Extract Content of Website..., to extract the contents of an existing website into a new document. After you enter the URL of your website, Sandvox will begin crawling through your website, examine the main content of each page that it finds and create corresponding pages in your new site document.

Note that this extraction process will create only an approximation of your original website. Sandvox analyzes each page and tries to pull out the main sections that it thinks are relevant. This won't be a perfect match! There may be content that got missed that you need to bring in manually. You may find some duplicated content, pulled from multiple pages, that you will want to delete and replace with a single object in the sidebar of a parent page so that it can be modified in the future without needing to make the same change across multiple pages.

Sandvox's Extract Content of Website... feature is currently optimized for the "flat" structure of most iWeb sites. If you are extracting a site built with another tool, you may need to do quite a bit of adjustment to the site hierarchy — the arrangement of pages and collections — to make the site closer to what you want.

What about other pieces that the site extractor was not able to grab?

You should be able to copy/paste graphics and text from your iWeb site directly into your Sandvox document, either from iWeb directly or, using your favorite web browser, from your published site. iWeb widgets, such as Google Maps and YouTube, will likely need to be re-created in your new site using a corresponding Sandvox object.

One thing to keep in mind is that because the design used in Sandvox will be necessarily different from the design in iWeb, copying text directly may bring with it unwanted formatting or font changes. When pasting, you can use "Edit → Paste and Match Style" to bring text in using the default style of the Sandvox design. You can also use "Format → Clear Style" after the fact to remove unwanted styling.

How do I extract my old iWeb site if it is no longer published on the web?

You will need to publish your iWeb site to a local folder. Select the top item in your list of pages, and Choose "Local Folder" for where to publish. Chose a folder such as your desktop. After this is complete, use the Choose… button in the extractor to choose either the index.html file, or the main page (usually Welcome.html) of your exported iWeb site.

image:iweb_local_folder.png

Can I make my Sandvox site look exactly like my old iWeb site?

Because of the proprietary nature of Apple’s themes, this is unlikely. Sandvox is not able to reuse the graphics and underlying layout of iWeb’s themes. There are plenty of great designs available for Sandvox. You might consider this transition as an opportunity to freshen up.

Does Sandvox do exactly everything iWeb does?

No, and iWeb does not do everything that Sandvox can do. However, the main components are quite similar and there are generally workarounds for specific issues. iWeb has a few widgets that Sandvox does not yet have, such as Google AdSense. If your site depends on one of these widgets, you may need to use a Raw HTML object instead. Sandvox is under continuous development and new features are being added regularly.

What happened to my old iWeb site?

This depends on where your iWeb site is being hosted. If your iWeb site was hosted on MobileMe, it is essentially gone from the Internet. (However, you probably still have your iWeb site on your computer, so you can export the site to your local hard drive, and then build your Sandvox site starting from that point.)

How should I tell people where the new site is?

Whatever way you can. And you want to do it as soon as possible so that visitors and search engines become aware of your new site location before the old site goes away.

What are some cool things that Sandvox can do that I wasn’t getting with iWeb?

Chief among these are Sandvox’s SEO (Search Engine Optimization) features and Google Analytics integration. There are also plenty of other objects to play with, such as Twitter and Facebook Buttons, Flickr photos, and Contact Forms.

How do you manage multiple sites?

Each Sandvox site is its own document with its own settings. Documents are saved with the extension .sandvox.

What about password protection?

Password protection is something that must be implemented at the web server level. MobileMe had this built-in through its iDisk services. Sandvox tries to work with any hosting provider and cannot assume a particular password protection scheme like iWeb could with MobileMe. (Note that password protection of web pages is one service that will be lost to iWeb users now that MobileMe is no longer a publishing option.)

We recommend contacting your hosting provider: depending on your level of comfort it is sometimes possible to set up password protection of your site, or part of your site, through a web interface provided by your hosting provider.

MobileMe

Can I host my iWeb site on some other host besides MobileMe?

Yes, iWeb supports FTP and SFTP and should be able to publish to most other services, just as Sandvox can do. Keep in mind, however, that several important features in iWeb were quite closely dependent on MobileMe. In Apple’s own transition guide, it states: "When publishing an iWeb site to a web hosting service other than MobileMe, the following features are not available: blog and photo comments, website password, blog search, and hit counter.” The long-term fate of iWeb is also unclear.

I was using a Personal Domain with MobileMe, how do I change it?

You will need to work with whomever you choose as your new hosting provider, as well as your DNS provider (usually the domain registrar) to turn off your MobileMe Personal Domain and repoint www.yourdomain from MobileMe to your new hosting provider.

Page Layout

Why can’t I drag objects to any arbitrary position on the page?

iWeb allowed this, but at the expense of clean HTML when published. HTML just isn't designed to allow arbitrary placement of objects, while still wrapping text around them. (iWeb converts many placed objects to non-searchable graphics, rather than indexable HTML.) We believe Sandvox provides a good compromise of options, while producing clean HTML.

How can I change the background color/image of the site?

Complete background images are not yet supported in Sandvox. Originally Sandvox sites were quite tied to the design chosen for them. Many designs now provide multiple color variations. We do understand that people want even more flexibility and are looking at that.

How do I change fill, stroke, shadow, reflection, and opacity on graphic objects?

Like many such customizations, this is hard to get right with all designs. Though iWeb supports this, it never had a good way to consistently apply such changes to multiple objects across the site. We're working on solving this problem too, to get it right.

How do I change content size, header height, footer height, etc.?

Presently, these sorts of items are controlled by the chosen design. We're working towards opening this up but it requires coordination across many dozens of designs. Stay tuned.

Why can’t I add more than six pages to the Site Menu?

After the first six top-level pages are added, Sandvox stops automatically adding new pages to the Site Menu. (Once your site grows to a particular size you typically do not want to keep adding new pages to the Site Menu.) You can always add pages to the Site Menu or adjust what pages appear in the Site Menu using the Page inspector.

Text Editing

How do I format text?

Unlike iWeb, most text editing commands are found as menu items in the Format menu of the main menu bar. Note that pressing the Return key creates a paragraph break, while Shift-Return enters a line break. HTML makes a far bigger distinction between these two than a typical word processor: Sandvox tries to maintain best practices here.

How do I set Text and Link attributes?

Much of these are set by the chosen design and were picked by the designer to work well in most any situation. Presently, the only way to edit many of these attributes is to edit the design itself, or to use Site Code Injection to inject custom CSS overrides into the stylesheet. See Quickly modifying existing designs. We intended to bring more text styling options to the Inspector, much like iWeb has, in future versions.

Downloads

How do I make a document available for download?

From the toolbar, select "New → Choose…" and pick the document you’d like to make available for download in the Open panel that appears. Click the Insert button, and a new page representing that document will be inserted into the Site Navigator.

With the downloadable document added to your site, you then typically provide a link to it somewhere on your site. You can do this by selecting the text you would like to link — e.g. "Download Annual Report" — and then use the Link Inspector to set the link to "Page in this Site", and dragging the target from the Inspector to the downloadable item in the Site Navigator to link those two up.

Photos and Photo Albums

How does setting up a photo album differ in Sandvox?

Here the terminology between iWeb and Sandvox differs somewhat. In iWeb, a Photo Page contains a grid of thumbnails of photos (up to 99) that have been added to that page; whereas in Sandvox a photo page is simply that, a page containing a single photo. In Sandvox, a collection of photo pages is typically called a Photo Album. A Photo Album comes prepopulated with a Photo Grid index that provides the thumbnail grid (and Gallery support) for that collection.

In iWeb, multiple “Photo Page” galleries are typically kept within the same My Albums page. Sandvox places no such restrictions. A Photo Album can contain other Photo Albums and each grid will be represented by a single thumbnail within the grid of the index above it. This, again, is the concept that collections can contain other collections and that the index of the collection, at each level, “summarizes” or indexes the pages within that collection.

Taking this to its logical conclusion, a Photo Album doesn't even need to contain photo pages only. It could also represent other pages that happen to have a thumbnail associated with them, that can stand-in for the indexable photo. You can set a thumbnail for any page using the Appearance tab of the Page Inspector. Seen in this light, you could organize arbitrary pages — with thumbnails — into a hierarchy of grids that a site visitor might use to drill down for more information.

Why aren't there navigation buttons near the bottom?

This has not been a feature of our designs up until now. Navigation is generally kept near the top of each page. We may revisit this decision when evaluating new designs.

How do I set up a photocast?

This is automatically set up for you when you add a Photo Album to your site. This is done at the collection level. You can change this behavior by altering the RSS feed for the collection using the Collection tab of the Page Inspector.

How do I set up a slideshow?

Select the Grid Index in the collection page of a Photo Album and use the Object Inspector to turn on Gallery. There are several options for fine tuning the slideshow presentation using the Object Inspector (with the Photo Grid object selected). You can test the Gallery by clicking on a photo within the Photo Grid to start the slideshow.

How do I adjust images? What about photo editing controls? Crop, resize, rotate, and overlap?

These are forthcoming in a future release of Sandvox. You can always use the photo editing features of an external application, such as iPhoto, to tweak an image before bringing it in to Sandvox.

How do I edit photo captions?

Captions are currently set from the page title of the underlying photo page for that photo. This is typically set from the photo title or file name of the photo when the photo page is created. To edit a caption in the photo grid, edit the page title of the individual photo.

Blogging

How does setting up a blog work compared to iWeb?

Blogs work very similarly to Photo Albums. They are collections of pages; each page is an entry in the blog. The collection page itself contains a Titles & Summaries index that presents the blog contents. To create a new blog, simply select "New → Blog" from the toolbar. The first entry is added for you to begin editing.

How do I add a blog entry?

Select "New → Empty/Text" from the toolbar while a part of the blog is selected.

How do I customize the appearance of a blog?

With the blog’s index selected, use the Object Inspector to adjust the Titles & Summaries options. Additional options for the collection as a whole are available in the Collection tab of the Page Inspector.

How do I set up an RSS feed?

This is automatically set up for you when you add a new Blog collection. You can adjust parameters using the Collection tab of the Page Inspector. An RSS Badge on the blog index page is a handy way to let visitors know that your blog has an RSS feed.

How do I change the date of a particular blog entry?

You can change the time and date stamp on a particular page (blog entry) using the Page Inspector (Date & Time at the bottom). If you have the blog collection (index) page selected, you can use the Collection tab to change sorting to be by either date created or modified.

What about blog searching?

Because this requires a server component, Sandvox does not currently ship with this out-of-the-box. We are looking into supporting this in a future release. (Note that iWeb required publishing to MobileMe for this feature. It won't work for iWeb sites published to hosts other than MobileMe.)

How do comments work?

Comments are provided by and integrated into Sandvox by third parties. Sandvox currently supports comment systems from Disqus, Intense Debate, and Facebook. "File → Choose Comments Provider…" for more information.

Objects and Widgets

What is an iWeb Widget in Sandvox terminology?

Sandvox calls these Objects. They come from Sandvox plug-ins supplied either by Karelia or by third parties.

Where is the Email Me button?

Sandvox provides two options for this. One is to set an Email link on whatever text or graphic you choose. The other is to use a Contact Form object. We recommend the latter as your email address is kept hidden and special measures are taken to deter spammers.

Is there a Hit Counter?

Yes. We call it a Page Counter and it is available from the Objects toolbar item.

Is there a Google AdSense widget?

Not at present. It is being worked on, and will be announced when ready, either from Karelia or a third party. In the meantime, it should be possible to use a Raw HTML object to include the Google AdSense code on your site.

Can I add a Google Map to my site?

Yes, Sandvox now includes a Map object. You can add it from the Objects toolbar item.

How do you add an HTML widget?

Sandvox includes a Raw HTML object (as well as a Raw HTML page) that is insertable from the Objects toolbar item. Upon insertion, an editing window opens, allowing you to paste or type in your custom code. Click "Update Preview" to see the code take life in the Web Editor. If you suspect a problem, you can also validate the HTML right within the raw editor.

Keep in mind that many objects, including raw HTML snippets, often load resources over the Internet for the bulk of their functionality. If nothing is happening in the Web Editor, you many need to turn on ‘Load data from the Internet’ in Sandvox’s Preferences to get things going.

Publishing

If I continue to use iWeb but with FTP instead of MobileMe, what do I give up?

According to Apple’s own transition guide: "When publishing an iWeb site to a web hosting service other than MobileMe, the following features are not available: blog and photo comments, website password, blog search, and hit counter."

What these all have in common is they require some server-side functionality beyond what basic FTP hosting provides. With Sandvox we can't be sure what everybody's host supports, making it much harder to implement such functionality. For some things, like comments and hit counters, we are able to work around that limitation by using a service hosted by Karelia, or another company, such as a third party comments provider.

Does Sandvox support FTP?

Absolutely! Sandvox also supports FTPS and SFTP which we recommend for secure uploading. Most hosting providers support either FTP or SFTP.

How can we improve this page? Let us know.