The Muse workflow
Muse features five distinct views or sections. These are:
- Plan
- Design
- Preview
- Publish
- Manage
These views are a representative of the steps a designer will take when designing and building a website (without Muse). We'll take a look at each of these in turn, but let's start with a quick recap on how to create your site in Muse.
Create a site
In the first chapter we looked at the Muse interface and saw how to create a new site in Muse. Choose File | New. This process is very similar to creating a new document in InDesign. It creates a .muse file which is similar to an .indd (InDesign) file as it holds information about our web pages and the master pages.
We can set up the width of our page, and based on our knowledge of common screen resolutions (1024x768), the default width of 960 pixels is suitable.
By entering a page width value we are creating a fixed width (sometimes called static width) layout. This means that the layout will not change in width even if the browser window is made narrower or wider. The alternative to fixed width is a fluid width layout. This means that the content stretches to fit the width of the browser window. At the time of writing we can only choose a fixed page width option. By default, the container holding the content is centered on the page.
Typical values for a fixed width page lie between 960 and 1010 pixels, leaving some space for the browser chrome, the borders of a Web browser, and scroll bars. When designing a web page, the browser chrome must be added to determine the width of the page. The most widely used width for a fixed-width web page is 960 pixels. That size allows the page to fit within a browser on a monitor whose screen resolution is 1024 by 768 pixels.
Graphic designers have been using grids for layout for a far longer time than the Web has been around. The 960-based grid is used by web designers as a way to quickly prototype a layout in any number of columns: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 columns and so on.
In the following screenshot you can see, on the left, Nick Finck's website and on the right, the same site with the grid overlay superimposed on it. The grid helps designers align objects on the page neatly.
Note
To read more about the 960 pixel based grid visit http://960.gs/.
Plan your site
Once you click on OK in the New Site dialog box, Muse opens the Plan view. When working with a page layout program such InDesign, you can set up how many pages you want. You can also set up master pages, which hold design elements or content that will appear consistently across many pages. We can do exactly the same thing in Muse. Every Muse site starts with a single thumbnail representing the home page on the top-half of the Plan view and a thumbnail representing a master page on the bottom-half of the Plan view. In the following screenshot you can see that we have added pages for About, Services, and Contact. Under the Services page there are three subpages called Graphic Design, Web Design, and Illustration.
The Plan view lets us easily add and organize pages by dragging-and-dropping thumbnails. A sitemap describes the way in which the pages connect to each other and it gives us a nice overview of our site. Additionally, the layout in Plan mode determines the automatic layout of menus.
Design your site
After all your research, exploration, and planning, we've now reached the really fun part of the process: designing! With "traditional" website design, we'd write out HTML code, which holds the structure of our page. We would then style it using Cascading Style Sheets (CSS).
To use the analogy of a house, we could think of HTML as being the floor, the walls, the roof, and the windows, while CSS could be the carpets, the wallpaper, and the paint on the ceilings.
However, rather than writing the code and stylesheets ourselves, this is where Muse steps in and shields us from the dark underbelly of coding.
To get to the Design view, simply double-click on any of the thumbnails in the preview. Your page will open and you'll see the toolbar, panels, and the document window. We can add text, images, and lots of very cool functionality by dragging-and-dropping them onto the page.
If you've used Adobe's Dreamweaver software, you'll know that even though it attempts to be designer-friendly with a visual approach to web design, you cannot drag-and-drop your design elements precisely onto the document in the same way you can in Muse. This has been a source of frustration for people who are used to Photoshop, Illustrator, or InDesign.
The ease with which you can place images and format text makes this program a joy to use. Muse is well integrated with Photoshop and Fireworks, making it simple to copy and paste graphics from those programs into your web page. Slideshows and lightboxes can all be added effortlessly; design elements which just a few years ago would have required extensive programming skills to implement.
The following screenshot shows a vertical menu system created by dragging out from the widgets panel. The options for the panel allow us to customize it to our heart's content, changing text and background colors, sizes, and positions.
As part of the design process, we need to check regularly to see how our website will look in the browser. We can do a check from within Muse by clicking on the Preview link at the top of the screen.
Preview uses WebKit as its rendering engine. This is the same engine that powers the Apple Safari browser, the Google Chrome browser, and most mobile phone browsers, so it gives us a fairly accurate representation of how our design will look in most browsers.
To preview a page in Muse:
- Open the page that you want to preview in Design view.
- Click on the Preview link on the upper-left corner of the Muse interface.
While this gives us a handy "in-program" preview, it's very important to test your pages in the real thing, that is, in as many browsers as possible. This can be a laborious process but it is worthwhile to ensure there are no surprises when your page loads up.
Note
Get the browsers
In order to test in the browser, you need to make sure you have the latest versions installed on your computer so you can test your website. You can do so by using the following links:
- Firefox: http://www.getfirefox.com
- Opera: http://www.opera.com
- Safari: http://www.apple.com/safari/download/
- Google Chrome: http://www.google.com/chrome/
- Internet Explorer (IE) v7: http://www.microsoft.com/download/en/details.aspx?id=2
- Internet Explorer (IE) v8: http://www.microsoft.com/download/en/details.aspx?id=43
- Internet Explorer (IE) v9: http://www.beautyoftheweb.com/
To preview a page in a browser, use the following steps:
- Open the page that you want to preview in the Design view.
- Choose File | Preview Page in Browser.
We'll start to build a new site in earnest in the next chapter, but for now, let's move on to the next step in the Muse Workflow.
Publish your site
So when all the hard work is done, it's time to put your wonderful design work online for the whole world to see, but wait! There is a substep we need to consider before hitting the Publish button.
It could well be argued that reviewing and testing is something that should happen right from the start of the design and development process. As we've already seen, Muse offers a Preview view, which gives us a pretty good indication of how the site will look in the browser, but there are a number of questions you can ask yourself as you work through your web project:
- Who is my target audience for this site?
- Am I giving them what they want?
- Is the page layout consistent? We'll see in a later chapter how Muse's master pages can help us with consistency.
- Is there a sense of balance and order? Is it easy to get around the site?
- Are all links working?
- Does the website function and display properly in all of the main (and older) browsers?
- Has the website been spell-checked? Incorrect spelling and bad grammar have proved to be major turn-offs for visitors on e-commerce sites. Don't lose visitors because of bad spellings.
- If your site includes multimedia, does it work properly?
- Are your contact details easy to find?
These questions are just some of the issues you need to consider on your web design journey.
Use individuals and groups to test your site. As the designer, you are too close to the site and everything from the design to the functionality will seem obvious to you. But is it obvious to a new visitor? It's amazing what a fresh pair of eyes can pick out. Get as much feedback as possible.
When you're happy with your design and have tweaked it and tested it to a finely-tuned machine, you're ready to unleash it and share it with the world. To do that, you need to publish the site to a host.
Publishing a website means making it available to your visitors. This requires that you upload the website and all its assets to a server. Once you upload to a server, all your pages should be retested, just in case a file did not upload properly.
There are two options available when publishing with Muse. You can have your site hosted by Adobe using Business Catalyst or you can export the HTML files and use any host of your choice.
Business Catalyst is Adobe's hosted application for building and managing online businesses. It is tightly integrated with Muse and could be considered the easiest option for getting your website online. Prices for basic hostings with Business Catalyst start at $5.99 per month. You can find a full pricing list at http://www.adobe.com/products/muse/buying-guide.html. It should be noted that in the future Muse may include Content Management System (CMS) features that will not be available by exporting HTML and will require the use of Business Catalyst.
You can also publish your Muse-built website temporarily to Adobe Business Catalyst at no charge for a 30-day trial period. This allows you to send a live URL to your client for review. All sites in trial mode on Business Catalyst will include the Business Catalyst domain, for example, http://mysite.businesscatalyst.com. If you decide at a later stage to take the site "live" by paying for the monthly hosting, you can transfer it to your own domain and remove the .businesscatalyst.com subdomain.
The alternative to Business Catalyst is to export your files and use an FTP program to upload the site files to a host. It's very easy to output your site as HTML from Muse, but this method requires using extra software such as FileZilla to transfer your files to the host's server. You would also need to arrange hosting and buy a domain name.
If you decide to go along the route of arranging your own hosting, there are some concepts you'll need to familiarize yourself with. Your site will only become available for others to view online when you acquire server space, get a domain name, and upload the site.
In order for visitors to find your site, you need to get a domain name. Your domain name is a bit like your postal address. It may be possible to find your house without the postal address but it's much, much easier to find it with the address to hand. Visitors access websites by an IP address or a domain name.
An IP address (Internet Protocol address) is a unique number, which identifies every computer or device connected to the Internet. A domain name is the text version of an IP address and is much easier for us humans to remember.
The Domain Name System (DNS) is an Internet service, which translates domain names into their corresponding IP addresses.
The Uniform Resource Locator (URL) is also a web address and it tells the browser on which server your web page is located. It does this using a communications protocol, such as Hypertext Transfer Protocol (HTTP) plus the domain name. For example, a typical web address would be something like http://www.nytimes.com.
Domain names are unique. That's why there is only one amazon.com, one microsoft.com, and one facebook.com. Domain names must be registered. Most hosting service providers will provide a domain registration service so it's easy to get a domain name registered. The hard part is to find a domain you want that hasn't already been registered. Domain names are cheap too. You should expect to pay between $5 and $30 for a domain name for one year.
An Internet Service Provider (ISP) hosts your website. Their business is to offer a connection to a host where you can keep your web pages and all the files that are part of your site.
Many ISPs provide web space for free or for a fee. Some people find that free web space is useful while learning the ropes and it's somewhere to upload your files while testing. However, many providers that provide free space put advertisements and pop-up windows on your site, which are intensely annoying and look very unprofessional. One of the advantages of using Muse is that you have access to Business Catalyst for publishing for free for 30 days.
If you want to look professional and get good service, it is worth paying for a domain name and some decent hosting. It's also worth doing some research to see which providers other developers recommend and which ISPs they would steer clear of.
Once you've arranged your hosting and domain name, it's time to upload those web files you've worked so hard designing. Some ISPs provide an uploading or file management system to get your files up onto their server. The most efficient way to get your files onto the host's server is to use File Transfer Protocol or FTP. Using FTP software such as FileZilla (http://filezilla-project.org/) or Smart FTP (http://www.smartftp.com/) you can quickly set up a link between your computer, where you create your web pages, and the host or remote computer, where visitors can see your site. Both of these applications are free to download.