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).
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.
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.