Muse - Life After Webplus

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.

Load more