Muse - Life after WebPlus A possible solution

Introduction 
This guide isn’t intended as a full-blown tutorial on how to use Adobe Muse. It’s intended to highlight some of the similarities and differences between WebPlus and Muse. The idea is to dispel many of the notions and theories that, somehow, creating a website in a responsive development application restricts your design freedoms. As will be seen, Muse can produce websites with the same eases and virtually all the features that WebPlus users have become familiar with.

To illustrate the point, I’ve used a very simple (albeit old fashioned) site design that could just have easily been created in WebPlus. Many of the tools and features in Muse will already be familiar to WebPlus users - the only real difference is the layout and style of the user interface - no big deal, right? Neither is this guide intended to spark a debate about the use of subscription-based web development tools. The fact is, if you create websites for other people (presumably for money) then you have to go beyond WebPlus or get left behind. Whilst there are a number of other options, such as framework driven environments and other stand-alone applications. there are few that I’ve seen that come anywhere near as close to the design flexibility that WebPlus users have enjoyed. However, Muse does fit the bill. The only thing that’s really missing is the quick shapes. Everything else is there, only tucked away in a different user interface.

Things like Assets are called widgets in Muse and there are hundred of them out there to download - some free, some paid for. For those that like working with templates, the web is littered with muse templates, so no excuse for complaining about shortage of ideas. The most common widgets are built into muse as standard, so you can start creating websites right out of the box.

The big plus point about Muse is its extended capabilities. Responsive design is simply a question of specifying additional breakpoints (screen widths) and then rearranging your content to suit the device page you’re working with - no duplicate content, and no worrying about redirect scripts working or otherwise. If you then feel you want to go to the next level, explore the animation options - many of them contained in pre-made but customisable widgets - just drag, drop and set a few properties and you’re good to go. If you’re concerned about forms and processing, don't be. Muse generates it’s own form script whenever you add a form. It gets uploaded along with your website - all you need is a half decent hosting account that includes PHP.

Whatever alternative to WebPlus you eventually choose, don’t listen to the “doom and gloomers" who tell you that other options (particularly responsive options) can only create flat boring, wide screen sites that all look the same, or that you are forced into a particular type of design (as in framework solutions). This is absolute nonsense. Try a free trial of Muse and see just how simple and flexible the application is. If you liked WebPlus, you’ll soon get into Muse - whether you think it’s worth the money or not is a different question - that’s a commercial decision. Just try the product. If nothing else, it should give you a different perspective on web development applications and blow all those silly stories you’ve heard out of the window. 


Starting a New Site When starting a new site, there are only a few differences between WebPlus and Muse. Both applications present you with a site properties dialog where you set up your site parameters. The basic difference is that WebPlus gives you the option to add site-wide metadata in the dialog, whereas Muse gets straight into the site layout options, leaving you to add metadata at a later stage. This option is, in many ways, a little easier to cope with as you can create a site design without actually having a specific website in mind at the outset (good for making templates).

This is the Muse Site Properties dialog that is presented when you start a new site:

The options are fairly easy to understand. There is a minimum and maximum width for your page designs, as well as a minimum height. From this screen you can also set up an alignment grid. In the example above we’ve chosen 6 columns with a gutter of 20px between columns. We also have the option of creating a fixed width site, or a fluid site. One interesting feature on this screen is the resolution. You can elect to create a standard resolution site, or optimise the site for HiDPI displays such as Retina. If you choose HiDPI, the application will generate 2x images automatically.

The Content tab of this dialog allows you to set other site-wide defaults such as hyperlink styles, browser scrollbars, conversion of PNG’s to optimised JPG’s and the option to add a favicon. The advanced tab allows you to set options for in-browser editing (CMS) and character set designation. For the most part, these additional tabs can be ignored unless you wish to make specific changes.

After completing the site properties dialog, Muse will present you with it’s Site Plan screen where you can set out the structure of your site and it’s pages (illustrated on the following page).

Site Structure

Just like WebPlus, Muse allows you to see a graphic representation of your site structure. This “Plan” page is displayed as soon as you complete the site properties dialog. As can be seen, the top part of the screen shows your actual site pages, whilst the lower part of the screen shows you all the master pages associated with the site.

In the example on the right, there is one master page (named A-Master) and one site page (named Home). Adding pages is simplicity itself. Hover over a page to display a series of “+” signs at the left, right or bottom of a page thumbnail (see insert) . Clicking one of the plus signs creates a new page.

Clicking the left “+” sign adds a new page before the current page, clicking to the right adds a new page after the current page. Clicking the bottom “+” sign creates a sub-page. Notice, that all new pages will default to use the A-Master Page. All pages can be named as they are created. They can also be reorganised by simply dragging the thumbnails.

A typical site structure may look something like the illustration on the right.

Just like site pages, you can also add additional master pages in exactly the same way - as many as you wish. To make life simpler, you may want to create your A-Master first to include common elements, such as menu bar, logo and footer information. By doing this you can duplicate the A-Master to create additional master pages which will contain the same elements, allowing you to then include additional elements on each master such as individually styled backgrounds etc.

In the example below, we’ve created a B-Master and applied it to the Services and Products pages by simply dragging the B-Master over the relevant site pages.

Muse automatically names pages and master pages. However, names can be changed by simply clicking on the names in this screen and editing the names to something more meaningful.

Adding Content to The Master Pages 


Now that the basic site structure is organised, we can now switch to design mode and create our master page layouts. The easiest way to do this is to simply double-click on your master page in the “plan” screen. This will open the design mode and allow you to start adding content. What you will see is a page that looks something like this.

The screen shows our master page with the grid lines that we set up in Page Properties. There are also four horizontal lines that show us the Header and Footer areas of our page. These horizontal lines correspond with the blue sliders at the left of the screen which can be moved up or down to adjust the depth of the Header and Footer areas.

Traditionally, common content such as a site logo or navigation bar, would be placed into the header area so that it appears in the same position on every page associated with this particular master. However, there is another option in Muse that allows your logo and navigation to be included as part of the browser background - outside of the page. To do this, simply drag the topmost horizontal slider to create some padding for your page. This essentially starts your page further away from the top of the browser window.

To illustrate this, I’ve set up a site with a page fill of white and a browser fill of grey so you can better see what happens when the top slider is moved. As the slider is moved downwards, the browser fill is revealed at the top of the page. (see illustration on the next page)

Now, you may be wondering what is the point of this - simple, you can now add content to the padding area in exactly the same way as you can add content to the page. For example, in the illustration (below), we’ve added a simple logo and a menu bar in the browser fill area of the page:

When viewed in a browser, it looks like this:

In many respects, the above example doesn’t really show the advantages of this simple option. But, if your page were to have a background image (as opposed to a solid colour), then it may be advantageous to use this facility. In the example below, we’ve changed the browser fill with an image and reduced the opacity of the page fill. The page now looks more unified and the logo and menu have been effectively overlaid onto the background, rather than forming part of the main page content. Although a similar effect can be achieved in WebPlus, it can be difficult to add interactive content (such as the menu bar) to the background. Also, any text included in the background is still readable by search engines (such as the logo in our example).

Adding Master Page Content Adding Text As with WebPlus, adding text is as simple as drawing out a text box on the page and typing whatever you want to say. In the case of our design, we decided to make our logo as a text box containing text formatted with a web-font. With the text box selected, click on the “Text” format icon on the right of the screen to add normal styling attributes.

In this example, we used a web-font named Font Awesome, at 30 px size and left aligned. We then selected all the text and made it white. We then selected the first letter “O” and made it red.

Adding the Menu The menu is a standard Muse Widget which is dragged onto the page from the widget library.

Just select Widgets Library from the Right toolbar and drag the “Horizontal Menu” item onto the page. The widget will automatically create a menu from your page structure.

You can position the menu anywhere you like on the page. Once it’s positioned, you can style the menu to suit your particular website. This is achieved by selecting the menu on the page and then clicking the “States” item from the toolbar on the right of the screen.

From the “States” fly-out you can set the Normal, Rollover, Down and Active states of the menu buttons. These states apply to the background (buttons) of the menu bar itself by selecting a state and using the Top Toolbar in Muse to set the attributes. There you can set the colour, the stroke, the roundness of one or more corners, add shadow, bevel or glow.

If you don’t want a background for your menu (no buttons), simply set the state colours to transparent to make a text-only menu.

By double clicking a menu item, you can format its text (and its states) by using the Text option on the right toolbar.

Although the standard widget will produce a variety of menu styles to suit most projects, you can also download additional menu widgets from the Internet that produce a wide variety of special effects. It’s all down to you as the designer as to how you want your website navigation to look and feel.

All of the above element were added to the A-Master page so that they would appear on every page associated with that master page. Additionally. the background image was added via the “Browser Fill” option on the top toolbar.

Because these elements were added to the A-Master page, if we now take a look at our site plan, it will be seen that all pages associated with A-Master now have these elements included:

Adding Page Content Page content is added in the same way as content is added to master pages. The only difference is that the content will only appear on the page currently being edited. So. by double-clicking the Home page in our site plan, the page will open for editing.

We’ve already discussed how to add text to a page, but what about all those other things that normally get added? Graphics, images, videos, galleries, HTML and all manner of other items can be added in much the same way as could be done in WebPlus. The only thing that most WebPlus users will probably miss are the drawing tools. This is because Muse is a web development application, not a desktop publishing tool. That said, the WebPlus way of doing things (creating graphic shapes etc. within the interface and converting to image formats) wasn’t the most efficient method of producing web-optimised graphics. In many respects, anyone moving away from WebPlus will probably find that the new disciplines imposed by a pure web development application will be a good thing in terms of more efficient site design and optimisation.

That said, in most modern web environments, the most commonly used shapes will be squares, circles or oblong shapes with one or more rounded corners. These shapes are easily created in Muse and, in all cases, start with a simple rectangle as their starting point. Here are some examples of what can be created directly in Muse:

These shapes are formed by drawing out a rectangle with Muse’s Rectangle Tool and then applying fill, stroke and various degrees of roundness to one or more corners of the shape. The contextual top toolbar in muse gives you these options whenever you draw a rectangle on a page.

Of course, you can also fill shapes with images or apply effects such as bezel or shadows, or combine all three as in the example right (the effects panel pops-up when clicking on the “effects” hyperlink in the context toolbar illustrated on the previous page)

Any other shape that you think deserves a place in your website design will have to be created in a drawing application and then imported into Muse as a graphics file.

This is a lot easier than you think if you have an application that can generate PSD files. Layered PSD’s can be imported directly into Muse. Once imported, they can be resized without any loss of quality and you can even use the layers within the PSD to create rollover effects. This is very similar to the features found in WebPlus when importing rollover graphics from DrawPlus. Once imported, any changes to the original PSD will be reflected in the imported file in Muse. This is great for graphics being developed as a “work in progress”.

Going back to our demonstration site, we will now add a text panel to the left side of our home page. We start by creating a rectangle two columns wide and filling it with blue. We also add a corner radius of 10. This will be the background for our text. Next, we add a text box over the blue rectangle and set the text colour to white.

The above is a perfect example of how to create interactive graphic buttons for your site. Once created, you can set the buttons to have rollover sates, or apply a fade-in/out effect on rollover.

Adding a Slideshow You can add a slideshow from the Widgets Library on the right toolbar. In this case we are going to use a Basic Muse slideshow widget. However, there are many more available for download from third party websites. Start by clicking on the Widgets Library tab to reveal the standard widgets included with Muse. Click on the “Basic” Slideshow and drag it to the page. This will display a standard slideshow containing dummy pictures.

Notice the small white arrow in the blue circle to the top-right of the slideshow. Clicking this will reveal a dialog where you can change the parameters of the slideshow.

The first thing we need to do is to add our own images. to do this click the Add Images folder icon. This will allow you to browse for your image files. You can select as many images as required in a single browse.

In our example, we don't want the caption under the slideshow, neither do we want the counter, so both of these options are unchecked. All other features are left at their default.

After closing the dialog, we will see our slideshow displaying the first image and, in our case, a previous and next icon under the slideshow. These can be selected individually and dragged to the inside edges of our slideshow.

The slideshow can now be resized by dragging the corner handles. Furthermore, we have also applied corner rounding to match the text panel at the left of the slideshow. The page now looks like this:

Notice that the previous and next icons have been dragged into the picture and made larger and coloured red. This is done by simply double-clicking the icons and using the context toolbar to change the attributes. We also changed the background of these buttons from white to transparent.

All standard widgets are placed in pages in exactly the same way. Just drag the widget onto the page, edit its properties and resize to suit.

Current standard social widgets include: • YouTube

• Vimeo

• Twitter

• Facebook

• Google Maps

• Linkedin

• Pinterest

• Google+

Other categories of Widgets include: • Buttons

• Panels

• Compositions

• Menus

• Forms

Although the standard widgets included in Muse can be configured to produce a wide variety of web assets, there are literally hundreds of third party widgets available on the internet. Many contain animation features that can really add life to a webpage. Most websites offering widgets are low-cost subscription services that allow you to download and install as many widgets or templates as you want. They never expire so they are yours to keep forever.

Adding Forms Adding a form to a Muse page involves dragging one of the form widgets from the widgets library and placing it on the page. In the form’s properties dialog you can select the fields you want to show and fill in the email address to where you want the form results delivered. You can include several email addresses, each separated with a semicolon. You can also add custom fields if you want more than the standard fields offered by Muse.

Clicking on each field on the form will display a field-specific dialog where you can add extra parameters such as Required Field etc.

The good news about the form widget in Muse is that it creates it’s own PHP script that gets uploaded to your server along with the website. This does mean that your host must be running PHP for the script to work, but most commercial hosting accounts include PHP as standard. If your host doesn’t support PHP, you can use any online form builder/processor and use the Inset HTML option in Muse to embed the form code into your page.

Once a form is dragged onto the page, you can style the form text, as well as the form fields to better suit your site. Simply select the elements of the form and use the context toolbar to change fonts, fills and stroke colours. All forms contain an invisible field for displaying a success or failure message to the submitter. This field is shown as a light blue outline form field next to the submit button. If you double-click in this field, the success text will be seen, which can then be edited to say whatever you wish. This field can also be moved independently and positioned elsewhere on your form.

Adjusting Page Length Just like WebPlus, your master page governs the initial page length of site pages. This gives you the freedom to set each individual site page to a length appropriate for it’s content. Furthermore, footers created in your master pages are automatically pinned to the bottom of your site pages, regardless of how long you make them. In Muse, it’s exactly the same with the exception that pages are automatically resized to fit the content you add. In the example right, I’ve added a red rectangle to a page - it’s sitting just above the footer area at about 450 px. If I drag the rectangle down the page, as soon as it touches the footer guide, the page will begin to grow longer (illustration below). As can be seen, the bottom of the rectangle has lengthened the page to about 650 px.

Now you may be thinking, “what if I want to place a page element in the footer area?”. Simple. With the element selected on the page, check the Footer check-box in the context toolbar (shown below). This tells Muse that the item can be moved around without affecting page length, allowing you to drag the element into the footer area (although you would probably only wish to do this on a master page).

This feature makes it fast and simple to layout your pages - just create an element (text, image, graphic or widget) anywhere on the page, then drag it down the page to where you want it to appear. If there isn’t enough room on the page, the page will just grow. Another nice thing about this feature is that if you remove elements and readjust the page layout, the page will readjust upwards to get rid of any extra space. This gives you the relative freedom to move stuff around your page without having to worry about resetting the page length every time you make position changes.

Using Layers One of the really handy features in Muse is the layers option. This is a nice tool for those who may want better control over site organisation. It’s also a great tool for creating site variants, such as alternative languages, or creating different colour schemes for client approval. The Layers panel is in the Right toolbar. Clicking on it shows the various layers in your project. It also allows to to create new layers and move page elements from one layer to another. You can also duplicate layers for when you are preparing site variations.

As can be seen in these illustrations, the layers can be expanded to show all the individual elements on the page. There are also options to lock layers, as well as hide or unhide.

In this example, if I were creating a language variant of the site, I could duplicate the Text Elements layer, then hide the original layer. This would enable me to edit the new text layer in another language. Once completed, the site could be output to language specific folders with the appropriate language set to visible and the other language hidden.

Likewise, making colour variants is greatly simplified by duplicating the graphics layer and recolouring the graphic elements on the duplicate whilst retaining the original colour scheme in case clients change their mind.

These features can save a lot of time and disk space, by keeping all the variants within a single Muse file. This is something that I never found in WebPlus, but given it’s graphic origins, I think it’s something that should have been included in all versions.

Working with text Fonts are well supported in Muse, giving a massive choice of web-safe, system and webkit fonts. All fonts are conveniently grouped into their respective categories - there is also a top-tier category for recently used fonts.

Web-safe fonts are the normal eleven usual suspects that can be found in all web development platforms. In WebPlus, these fonts are also available in addition to all the other fonts found on a users system. In Muse, it’s much the same thing. However, unlike WebPlus, there is only one type of text tool (there is no artistic text tool). Instead, Muse makes choices based on your choice of fonts. For example, decorative system fonts can be used in your site pages, and will remain fully editable within Muse. However, upon exporting the site, text will be converted to graphics. With web-safe fonts, Muse will simply specify them with appropriate fallbacks and leave user’s computers to render the fonts. With the webkit fonts, Muse embeds the code required to link to the font family, either on another server, or to fonts located on your own server.

All webkit fonts are provided on demand. You simply click the “Add Web Fonts” link in the list of displayed web fonts and choose the fonts you wish to use.

In some situations, such as when you use a third-party template containing webkit fonts, Muse will automatically connect to the appropriate server and install them to your system when you start working with the template.

Another thing that Muse does have in common with WebPlus is it allows you to create text that can be rotated (in fact any element can be rotated). Obviously, just like in WebPlus, if you do this, the text, regardless of the font in use, will be exported as an image file. Personally, I never found this to be a particularly useful feature as I couldn’t really see the benefit of having rotated text

displaying on a computer screen . It just causes users to tilt their head in order to read the text. But, in this day and age of hand-held devices, I guess there is some merit in having this feature.

Muse also has the ability of placing images or graphics into a text frame. The wrap panel can then be used to format the wrap and apply offsets. Almost all of the other text features in Muse will be familiar to WebPlus users. Things such as bullets glyphs paragraph styles and Character styles are all easily accessed from panels in the Muse Interface.

Working with images and graphics

Unlike WebPlus, Muse is NOT a graphics application as such. Instead it concentrates on its core function of making web pages. That said, there are a number of graphic creation tools built into Muse that deal with the vast majority of website graphic needs. We’ve already discussed the basic rectangle tool and how it can be used to create the more common website shapes that you may need. Additionally, there is a button widget for creating interactive buttons. These can also be customised with fill, stroke, text, states and hyperlinks. (example right)

Shapes can also be created containing solid colours or gradients (see left). Again, stroke, hyperlinks and rollover effects can be applied from the context toolbar in Muse.

In addition to basic shapes, Muse will allow the placement of the more common vector formats such as SVG and PSD. Placement itself is a simple process. Just drag your graphic file onto the Muse page. This will create a cursor-size version of the graphic which can be clicked anywhere on the page to insert it. Once placed and positioned, it can be resized without any loss of quality. The illustration right shows a typical logo graphic produced in SVG format. In cases where the graphic is a PSD, all layers in the original PSD will be preserved in Muse, allowing each layer to be used as a rollover state if required.

With the addition of a good vector-based drawing application, you will have the full toolkit for making graphic-rich websites.

All placed graphic and images can be right-clicked to edit the properties. The dialog that pops-up allows you to add a tooltip as well as alt-text.

When it comes to images, Muse offers some excellent options that even WebPlus would find hard to match, particularly in view of the ease by which images can be manipulated.

For example, creating full width images can be a pain in WebPlus, but in Muse, it’s made very simple.

In the example above, a standard rectangle with a gradient fill has been created on the page. By clicking the resize icon in the context toolbar (highlighted above), the image can be made to stretch across the entire width of the browser window. This can be done with images and slideshows, giving you the flexibility to create full-screen width imagery and slideshows - a design feature that has become very popular in todays world.

In the screen shot right, a slideshow has been added to the page and then made full width using the resize icon. The image on the right is how the page looks in Muse. The image below shows how the page looks in a browser.

As can be seen, the slideshow images extend to the full browser width.

This simplicity is hard to find in many other applications, often requiring the use of panels and various other workarounds. In muse, it becomes a one-click option.

Another interesting feature highlighted in the above example is the use of layers which have been used to ensure that the logo and menu sits nicely on top of the page slideshow. All that happened here is that the master page was set up on a layer named header which was then moved above the page content layer. Also, the header text and the read more button were created directly on the site page using the standard Muse tools - such is the flexibility of designing in Muse.

Images can be placed with the same ease as any other graphic element. Drag and drop your image wherever you want it on the page. You can also add transparent effects by combining images (layering them) to create various screen effects. For example, the screen PNG shown on the right can be overlaid on top of a photo image to create the screen effect shown below. (note: this option does NOT merge the images on export - they are retained as individual images and rendered in browser)

This ability to layer items one on top of the other can be used to produces some very creative effects and all of them work perfectly when viewed in a web browser.

Additionally, images can be rotated to suit your design requirements (see below)

Inserting HTML and Anchors In those situations where you may wish to add your own HTML code, or maybe add code provided by a third-party service, you can use the Muse “insert HTML function. This can be found in the “Objects” menu in Muse (illustrated right).

Once the option is selected, you will be presented with a dialog (below) where you can insert your HTML code. The resulting code will appear on your page as an HTML box correctly sized to display the content.

Creating anchors is just as simple. From the object menu select “Insert Link Anchor”. This will display the anchor dialog shown right. Give the anchor a name and click ok. You will now see an anchor icon on your page that you can move anywhere you want. Once anchors are created, you can select them as targets when creating any Hyperlink on your page.

Stepping Up a Notch What I’ve done thus far is shown that you can create a fairly standard, WebPlus-type site in Muse. Hopefully, I will have demonstrated that your design flexibility is not hindered in any way by Muse. In fact, you can carry on designing websites in much the same way as you did with good ol’ fashioned WebPlus and get exactly the same results. However, if you move to muse because WebPlus no longer fulfils it’s promise, then you’re probably looking to move to the next level in web design. That brings us to the rather thorny subject of adaptive or responsive sites.

Now before everyone starts screaming “Traitor”, or starts shouting that there is no demand for responsive sites, just think of the facts. More and more clients want a responsive site, whether they know it or not. This is because sites are visited by the great unwashed all over the world using a multitude of different devices. So, it’s not for us poor designers to say what the client wants - its what the public wants. Therefore, we owe it to our fee-paying clients to produce something that will encourage more people to visit their websites, regardless of the device owned.

WebPlus let us down badly in this respect. Serif failed to see the onslaught of consumer demand and just carried on as usual with the same old, bog standard. HTML, fixed positioned sites - firmly believing that it was a passing fad that wouldn’t catch on. Now, of course, even Serif has seen the light and have abandoned its web development clients big-time.

Now, although we’ve shown that Muse can do ABSOLUTELY everything that our favourite graphic design/page layout/web editor application can do, we have to step up a gear and take a look at creating those Serif-Elusive, adaptive/responsive websites. Well guess what - you can create both in Muse without having to do much more than rearrange your page content. Here’s how it works.

All you have to do in Muse is create your same-old, same-old website as you would in WebPlus. Once it’s how you like it, the magic can begin. You start by locating the “Breakpoints” bar in Muse. It sits just below the top ruler and looks like this.

You will notice that I’ve set up some breakpoints already at 320, 500, 768, and 1366, These correspond to some average screen sizes currently floating around the market. Obviously, there are more sizes, but what the heck - these are enough sizes to deal with the majority of devices out there. To create breakpoints in Muse, just right-click on the bar and choose add breakpoint. This will display the dialog shown right. Just enter your desired device width and click OK. You can add as many breakpoints as you want - simply repeat the process as often as needed.

All you need to do now is click on the appropriate screen size tab (breakpoint) you want to work with. This will show your site page at the selected width. Your page content will, of course, overspill the edges of the page, so all you have to do is select each page element and resize and reposition it to fit the screen size. For example, the illustration at the right shows a home page resized to fit a 320 px screen size.

Although I’ve moved everything about and resized the elements, if I switch back to my normal screen size tab, everything is as I left it. So, by stepping through each of the screen tabs, it’s possible to rearrange the content to suit each individual device size.

That’s about all there is to it - creating a responsive or adaptive site is just a question of resizing and rearranging things to your liking. You can even delete elements from some devices and replace them with different ones. For example, a horizontal menu can be removed from narrow devices and replaced with a drop-down hamburger menu (as in the example on the previous page). The key is that whatever you do on one device screen will have no effect on the pages you’ve created for other screen sizes.

Just like creating your main site, you should start with your master pages to create them to display the common elements at different device widths. You then move on to the actual site pages. You don’t even have to create new master pages - simply select your existing ones and click on the appropriate breakpoints - Muse does all the heavy lifting for you.

There is a difference between responsive and adaptive sites that you should be aware of. An adaptive site will simply present the most suitable layout for the device viewing the site (the closest match). However, a responsive site will attempt to deal with all those in-between sizes by resizing and scaling page elements to fit the viewing device screen. It does this by kicking in responsive mode when the device is neither one or the other of adjacent breakpoints. Look at the example right.

Here you can see that there is a lilac coloured area between the 1100 and the 1366 breakpoints. This is the area where responsive mode kicks in. If a device with a screen size of 1200 views the page, the elements of the page will resize or rescale to fit a screen width of 1200. This may produce an undesirable layout. Fortunately, you can test what will happen by moving the slider in the muse interface (highlighted above) to see what happens to your content. Of course, if a device of 1100 px wide views the site, the page as designed in the 1100 px tab will display exactly as you laid it out.

You can avoid this detail by simply choosing Fixed width instead of Fluid width when setting up your breakpoints. This will result in a static width site displaying if the device width is somewhere between the two breakpoints (usually the larger of the two widths) This will result in a slightly reduced size page displaying on those in-between devices. This is called adaptive and is probably best for most of us.

So there you have it - responsive or adaptive easily created without any need for separate websites or duplicate content. Furthermore, you can layout your page variants ANY WAY YOU LIKE! It doesn’t have to be flat, boring, or the same as every other site out there. Do your own thing and design your layout how you like.

Once you’ve got the hang of using Muse, you will then be able to explore the great animation features it has to offer. You will be able to create those popular parallax effects, as well has have page elements appear and disappear as the page scrolls. There really is more to this app than first meets the eye and yet it’s as simple to use as your trusty old WebPlus.

Give it a try and enjoy!