you're reading...
adaptation, business decisions, competition, design, evolution, graphic arts, marketing, productivity, technology, typography, web sites

Adventures in Site Building: Dreamweaver versus Muse

This slideshow requires JavaScript.

As mentioned in my last post, I received an unexpected holiday gift: a new client in need of a web site and social media branding. Now that I had a check in hand and a little money in the bank, I decided I could justify migrating to Creative Cloud, Adobe’s subscription-based service. Through Creative Cloud, Adobe grants access to every application they make for $30/month (during the first year to registered users of later CS versions). That’s a lot of software. In addition to digital downloads of all their applications, this service also includes use of Business Catalyst, Adobe’s web hosting solution. You can host up to five sites on this robust platform under your Creative Cloud membership. You just have to get your domain registered elsewhere. Business Catalyst can handle everything else, including testing, forms and email.

Weaving Dreams in One-Size-Fits-Most

For design of my new client’s web site, I decided to use Dreamweaver CS6. I’ve authored a number of sites with previous Dreamweaver versions (including my own). One of the new features in CS6 is the ability to work in “Fluid Grid Layouts,” a clever way to create one web site that conforms to a variety of platforms and aspect ratios, including smartphones and tablets, all in the latest HTML5 standard. The ability to create one version of a site that looks good and works well on all devices was appealing: author once, publish anywhere.

The learning curve was not too bad. Adobe furnishes tutorial videos to show you how to use their new tools. Within a few days after I got the go ahead on the design direction from my client, I had the site built and functioning. The ability to easily write cascading style sheets that define how various areas (“divs”) respond to changing widths is key. I’ve provided some screen shots of the “liquid layout” set up and the site I built with browser window widths determining how the page layout responds. (See the slideshow at the top of this article).

Musing Muse

Once upon a time I was the InDesign Queen. An early adopter, I trained lots of people in that product. For creating design work for print and presentations, InDesign is simply one of the best tools ever created. In the last several years, my career path has been more about video and motion graphics, with a smattering of web design, so I’ve used it less as the feature set has broadened to accommodate digital publishing. But my affection for it has not diminished.

Having tried Muse while it was in beta, I saw its potential, but only half-heartedly explored it. I had no project in mind, and was not really inclined to pay for another application. Now that I had access to the full version at no added expense, the time was right to dive in. I had a new project, my new direction, an entity called “Light of Gray.” LightOfGray.com would be the digital hub for my elder care consulting business, and since I would be my own client, I could be a little daring. So I began to play with Muse.

Wow. The things one can do with Muse are just jaw-dropping. Supported with functionality endowed by the Adobe Business Catalyst server, the ability to publish beautiful, functional pages in a graphical manner is just stunning. There is no coding (which in a few instances, I found a little daunting). But there are master pages, just like in InDesign. There are widgets for creating all kinds of standard web interface elements that would take much more effort in Dreamweaver. Everything is drag and drop. Select and style. Transparency and effects. And, dare I say this, FONTS?! Yes, Fonts!

Adobe has incorporated a font browser utilizing TypeKit, a resource where you can specify purchased or open source (free!) fonts that allow you to style your text with a rich library of typefaces that will actually DISPLAY in your pages. You can of course use Web Safe fonts (Verdana, Arial, Times), the stuff every computer has. Should you decide to use System fonts, Muse will generate GRAPHICS from those fonts to preserve the look of your artwork. The downside to this is loss of searchability, as well as download time overhead, so it’s not recommended.

But the selection of open source Typekit fonts is pretty amazing, giving you the ability to use them and have them display across browsers and platforms. Muse writes the code for you. You access them and add them to your web site’s font list through an interface that’s reminiscent of the Glyphs panel in InDesign. It is pretty sweet. And you can even define Paragragh and Character Styles to streamline your type-styling. This is particularly useful when reusing your content on pages formatted for other devices.

To build alternate versions for phones and tablets, there’s no magic button that converts one site type to another. The best it can do is get you started with the same page structure or “plan” using basic page dimensions. I started with a desktop version and then spun off the smartphone version, adding the tablet version last. (I don’t yet own a tablet, so it’s less of a priority for me).

When it comes to devices, you have to consider that the interactivity is different; there’s no “hovering” on phones or tablets. Buttons need to be obvious and click-able. Less text is preferable. It’s a different mind set. And forget about Flash. It doesn’t work on Apple devices, which dominate the electronic publishing landscape.

Flash in the Can

I never got into Flash. It was complicated; yet ANOTHER scripting language. In the early days of Flash, the browser plug-in was not ubiquitous. Before broadband, the content could take a long time to download, discouraging visitors from waiting around for the promised content. I did everything I could to side-step using it. Fortunately, my clients trusted my judgment and were happy with what I built in HTML. And all these years later, the wisdom of my choices proved prescient.

Adobe has been determined to corner the market on every publishing technology. Many years ago, they invented Postscript, the magic formula that allowed you to turn computer-displayed and vector-based information into dots that could be imaged with ink on paper. They later morphed that magic into the PDF format, which allowed us to more easily share graphically-rich information in a compact, single-file format. But then, they wanted to be the Flash Masters too. So after gobbling up GoLive (my web authoring tool of choice at the turn of the last century), Adobe then consumed Macromedia, the folks who invented Flash (as well as Dreamweaver, Freehand [an illustration program that competed with Adobe Illustrator], and Director, a complex interactive design tool with a “Lingo” of its own). They made Flash a big part of their web authoring strategy. Then Apple came along with iPhone and iPad, which they would not allow to be sullied with Flash’s bloated and potentially dangerous encoding. Consumers voted for this strategy with their dollars and sent Adobe scrambling.

To accommodate the desire to view dynamic media on devices without Flash, a new standard was created: HTML5. Based on the same Hyper Text Markup Language we’ve been using to design for web browsers since the beginning of the World Wide Web, this standard works across devices, allowing the encoding of video, motion graphics and interactivity without Flash. Java script now does the heavy lifting. So how do designers use Java script without having to go to school to learn another programming language? Enter Adobe Edge.

The Animated Web

Several years ago, Adobe introduced a product called Live Motion, which enabled designers to create motion graphics for the web using a graphical tool. You could export to Flash animations with it. The application was not widely embraced. I think the timeline was a problem for designers who were accustomed to creating static graphics. It was hard for some to grasp this additional dimension.

This time around, Adobe is trying to enable designers with a new tool called Adobe Edge, which allows timeline-based animation design that uses Javascript. There are tutorials built in to the interface, and a few online video tutorials to help get you started. For folks who’ve never used timelines, this could be a rough ride. Having a solid background in After Effects, I got around in it, but it’s still a learning curve. And I can’t say I really require the kind of capabilities this application offers. Once I get more comfortable in the other apps and find a project to apply it to, I may delve more deeply. For now, Edge is installed on my computer, waiting to be implemented.

Elements created in Edge it can be used in both Dreamweaver and Muse. From what I understand, you can round-trip files between Dreamweaver and Edge, bringing a page from one into the other. The beauty part with Muse is the ability to drag and drop an Edge project file onto a Muse design page and have Muse work out the export coding for you. It does look cool in the Muse tutorial video, but I haven’t tried it myself yet.

Which is better?

This depends on a lot of factors. If you’re a visual person who can’t cope with code, Muse is your tool. Be prepared to subscribe to Creative Cloud as long as your web sites are live, because you WILL need Business Catalyst to get stuff to work. However, you can also export Muse pages to HTML and work with those pages in Dreamweaver if you choose.

Dreamweaver does offer some distinct advantages. Designing in Fluid Grid Layout mode is a huge time-saver. Once your site is built, you edit one set of pages. You can tweak the coding if you’re so inclined. You can host anywhere you want, freeing you of Adobe’s hegemony, at least from the server perspective. And if you need to see what’s going on under the hood as far as coding goes, Dreamweaver is your only choice.

For ease of use, consistency of look, and design jollies, anyone who considers themselves a “designer” really ought to give Muse a try. It’s the most fun I’ve had building a web site. And everything works. The forms are enabled through Business Catalyst, and device sensing opens the correct version of the site on the appropriate device (I’ve had tablet users test this for me). And using Muse with Business Catalyst, you also get reports on your site’s effectiveness, somewhat like Google Analytics. Click the “Manage” button and your browser opens to connect you with your site stats: visitors, where they are geographically, how they’re being referred, which pages are being viewed, etc.

So far, I’m very impressed with Muse. Just as when InDesign was being developed, Adobe had started by asking their competitor’s users what they wanted, and then they delivered. Adobe is doing it again with Muse. But this time, the competition is their own product. So I guess the idea is, when you compete against yourself, everyone wins.

About traceysl

Author of the #1 bestselling book "Dementia Sucks", (Post Hill Press). Having cared for my father, who had vascular dementia and died in 2004, and my mother, who died on April 14, 2015 after a long fight with Alzheimer's disease, I have refocused professionally to helping others through my experience. My company, Grand Family Planning LLC, provides Coaching and Support Services. I am a professional speaker, offering programs for businesses seeking solutions to recruit and retain employees who care for loved ones. In this way, I share my knowledge and give meaning to the tragic turn of my parents' journey through the misery of dementia.


8 thoughts on “Adventures in Site Building: Dreamweaver versus Muse

  1. Nice article. Thanks. To me, Muse is Apple iWeb on steroids. It’s great for small clients who want some functionality but don’t have a big budget. As a designer, I prefer to work that way… GUI and avoid code. But that is not happening in this day and age. What I never understood is this… like working in Quark and InDesign, I never had to understand postscript to design…. so why do I have to understand HTML, CSS and JS Query to design an online environment… and now Edge? It really shouldn’t be that way. After all, if weighted properly, it should be about the structure design and does that serve the client’s business plan and make them more successful and beyond that it is how easily can a visitor get around the site… and beyond that, how well branded and what is the user experience…. it should not be about the code. I am running across countless clients who have web sites, all designed and produced by “web designers” who understand little to nothing regarding marketing and the end result is a bad looking very functional website that serves little purpose in regards to driving business.
    Again, thanks.

    Posted by Wes Burgiss | May 7, 2013, 12:10 pm
    • Thank you, Wes. The problem with web design, in my humble opinion, is that the designer is required to go places never imagined in the halcyon days of print. When you designed a printed piece, once ink hit paper and the contracted item was fabricated, the job was done. Today, web design requires you to create “experiences” more akin to application design. One must account for server support, users’ platforms, devices, interests, aesthetics, social media linkages and an unending learning curve. A web site is technically NEVER done. That’s why I’ve been moving away from web design. There isn’t enough time or money to justify the pursuit. Thanks for visiting and commenting. 😉

      Posted by traceysl | May 7, 2013, 1:21 pm
      • I agree with the above comments. Design has been replaced by function. Fair enough, visitors want to get something out of their experience, not just look at pretty pictures, but functionality should always be part of the design process. Most heavily used websites now are a challenge to navigate. Links and information are anywhere and everywhere, which takes several seconds to get orientated, which can lead to frustration. Website creation has become too multi-disciplinary.

        Posted by ERER | August 11, 2013, 4:29 pm
      • It’s like anything else. Technology will always be pushed to its limits if there’s a financial incentive to do so. Web design should be attractive and functional. The best sites are welcoming and easy to use. Building them is a challenge. Thanks for visiting.

        Posted by traceysl | August 12, 2013, 6:46 am
  2. I’m creating a website containing database and other stuff like registration form but I’m stuck. I can’t find any option like that in MUSE. Can I directly create the database and the registration form in MUSE or better still can I link my SQL database to my Muse website? And can I also create HTML CSS registration form and link it to my Muse website? I want pictures to be uploaded to my website just as e-commerce website
    Can MUSE be used to create an E-COMMERCE website? Please I need a quick help. It’s for the purpose of my project work.

    Thank you…

    Posted by Sam | June 11, 2016, 4:49 am
    • Oh dear. These questions are way out of my depth. I wrote this several years ago and I’ve since moved away from web development. I wish you luck with your project, but people looking for “quick” and cheap solutions are what drove me out of the business. Sorry about that.

      Posted by traceysl | June 11, 2016, 7:39 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 62 other followers

Graphic Detail Incorporated

Graphic Detail Inc. Logo

Graphic Detail Tweets

%d bloggers like this: