A Creative Muse Can Banish Frustration for Website Designers

Sometimes I write off the first release of an Adobe product as not being particularly worthwhile. I did that with version 1 of Lightroom (at version 5, it's indispensible) and I seem to have made the same mistake with version 1 of Muse. It seems that somebody at Adobe is familiar with the old Greek gods and goddesses. The muses are the goddesses of the inspiration for  literature, science and the arts. It never hurts to have a muse on your side when you're trying to accomplish something and Adobe Muse is going to be a hit with website developers.

But Adobe already has Dreamweaver. It's tempting to think about positioning Muse as the lightweight Dreamweaver, but that would be wrong. Muse is a website development tool for people who are visually oriented and who don't want to take the time to learn HTML, CSS, jQuery, and a variety of other standards, languages, and procedures that are essential for anyone who wants to build a modern website. It's also for any developer who wants to get a website off to a fast start.

There are significant differences between Muse and Dreamweaver: Dreamweaver's strengths are in the development of large and complex sites while Muse is the perfect choice for a highly designed site that consists mainly of static pages. Dreamweaver provides a code view that allows users who are familiar with HTML, CSS, and Javascript to write and edit their own code. Muse doesn't. Muse can automatically update structural elements of the site when the user adds a page, but Dreamweaver can't. The differences don't make one program better than the other, but they do illustrate that for any given project, one program is more appropriate than the other.

Muse is only 2 years old, but already it's been completely rewritten. Adobe does that with its applications occasionally to ensure that they are supported by the most modern coding techniques and to update the user interface. What's uncommon is that this rewrite was for an application that's been around for just 2 years.

Muse in Action

In developing this review, I used Muse to create a multi-page site that is optimized for desktop systems, tablets, and phones. The way Muse handles "responsive" website design differs from the way most designers work. It might be a good idea to define what's meant by "responsive" design: Many sites are intended for use on desktop systems where relatively wide screens are the norm. Tablet screens are generally more narrow and phone screens are skinny. What works well on a desktop would be unwieldy or unusable on a phone.

The links that will take you to the test site that I designed for this review (each will open in a new browser tab):

• Full-size layout
• Tablet layout (or open the main page with a tablet)
• Phone layout (or open the main page with a phone)

Viewing a wide-screen website on a narrow-screen device usually results in one of two undesirable effects: The user must either scroll left and right to see all of the content, or the text will be rendered in tiny type that few people can read. Creating a "responsive" website allows the site to determine the width of the device being used and deliver appropriate content.

The traditional method used for responsive website design involves a complex series of divisions in the code, along with what are called media query statements and specialized cascading style sheets for each device type. Although this is the preferred method, it requires a considerable amount of planning by the developer and a deep knowledge of coding techniques. If you're developing a large responsive website in Dreamweaver, this is probably the approach you'll use.

Muse, though, is designed to be used by people who are familiar with products such as InDesign and Photoshop. And it's intended for use with smaller sites. A site with a dozen or two dozen pages wouldn't benefit much from the traditional approach because of the amount of time involved in defining and coding. Muse users can benefit from visually-based design and layout.

A Muse user will simply start by creating a website that's designed for one of the target devices. Some start with the desktop and then pare the site down for smaller devices while others start by placing the essential information in the phone or tablet version and then add information for the larger devices. What's different about the Muse approach is that you'll create 2 or 3 versions of the site, depending on which devices you want to support. This sounds like a lot more work than it is.

Here's a my test website as designed for a desktop system. The pages are wide and all are based on the master page shown at the bottom.

Click any of the smaller images for a full-size view. Press Esc to dismiss the large image.

Here's the phone version. The most obvious differences are the shape of the pages (long and narrow) and the repositioned menu, text, and images.

For a site with a few tens of pages, the process used by Muse is much faster than developing media queries and specialized cascading style sheets. When you add a new layout, you'll be offered the option to copy the site plan (the pages) and the page attributes (colors and such). After you've had Muse create the new layout, you'll need to update the master page or pages (more about those in a bit) and then copy the content to the new layout, size and position each element on the new layout, and delete any components that aren't appropriate for the layout.

To add a tablet layout, just click the Tablet button and choose whether you want to copy the Site Plan and whether you want to copy the Site Attributes.

Because tablet and phone layouts often have no borders, copying the Browser Fill may not be required when developing a smaller design from a larger design.

Master Pages and Regular Pages

Master pages hold content that you want to appear on every page that's based on the master page. This isn't necessarily every page in the site, but it could be. You can define more than one master page if one section of the site needs to be different. Or you can exempt any page from being based on the master page. Most people will probably want to use master pages because they maintain consistency throughout the site.

For example, I designed a master page with banner that contains the TechByter Worldwide microphone and some text. At the bottom of the page, there's a bit of footer text. The menu is also present on the master page. The other pages all start with the master page content, so it needs to be created only once and any changes made to the master page affect all pages on which they're based.

Anyone who has spent hours creating a menu and then painstakingly linking the menu to every page in the site will be astonished by how easy it is to create a menu. You can start with a pre-made widget — just drag the vertical or horizontal menu widget onto the master page. You'll need to spend a little time defining the colors, typefaces, and other design elements and you'll probably want to define the various button states (normal, click, active), but after that, adding pages to the menu is as easy as adding a page. Literally.

Each page in the site diagram will display a plus sign on the left side, the right side, and the bottom of the icon. Clicking a left or right plus sign will add a new page on the same level as the selected page: Left to add a page before, right to add a page after.

Clicking the plus sign below the page will create a sub-page for the selected page.

The next part is magic: Muse adds the new page to the menu (or sub-menu) without any additional effort on your part.

Here's a very short video I created to show how this works.

Select the options for the overall menu, including whether you want an icon to appear with each menu item and whether you want the menu to display only top-level pages or all pages.

Once you've defined the settings that apply to the entire menu, you'll apply color, typeface, and "state" information to the buttons. With "edit together" selected, changes made to one item will affect all like items.

More WOW Features

The TechByter Worldwide website uses some non-standard typefaces. By non-standard, I mean that they're not available by default in Web browsers. That has been one of the greatest frustrations for designers who have moved from print to website work. In print, the number of typefaces available is all but unlimited. On the Web, about a dozen typefaces are "safe" in that they can be assumed to be present on most browsers.

For several years, "type-kits" have made it possible to use other typefaces. The process hasn't been easy because it involves finding a typeface that can be used legally on the Web, creating one type-kit for each variant (normal, bold, italic, and bold italic — and possibly many more (such as light, ultra-light, heavy, black, extended, and so on). Then the designer has to create cascading stylesheet code that makes the typefaces available to the various browsers. That requires code that looks like this for each variant of every website.

@font-face {
     font-family: 'CuprumFFURegular';
     src: url('../WebFonts/CuprumFFU/Cuprum-webfont.eot');
     src: url('../WebFonts/CuprumFFU/Cuprum-webfont.eot?#iefix') format('embedded-opentype'),
     url('../WebFonts/CuprumFFU/Cuprum-webfont.woff') format('woff'),
     url('../WebFonts/CuprumFFU/Cuprum-webfont.ttf') format('truetype'),
     url('../WebFonts/CuprumFFU/Cuprum-webfont.svg#CuprumFFURegular') format('svg');
     font-weight: normal;
     font-style: normal;
}

So the ability to use Web Fonts is a very welcome addition. Select the typeface you want to use from hundreds that are provided, synchronize the typeface with your desktop system, and use the typeface. Easy! When you publish or upload the website, the typefaces and all of the code required to use the typefaces go right along.

The Widgets Library provides access to compositions such as slide shows, contact forms, sliding panels, and various social media functions. In most cases, using these is as easy as selecting one from a list and dragging it onto the page. Some of the more complex widgets, such as the slide shows, will offer options to personalize the appearance and you'll need to select the images that you want to use in the presentation. Muse does the rest, though: Making thumbnails, handing transitions, and more.

The list of widgets in Muse is only a small part of what's available. To find more, visit the Adobe Muse Exchange.

Muse makes highly-designed, responsive websites easy.

It's important to understand one thing about Muse: Although it may be the perfect tool for a site that consists of 30, 40, or 50 pages that are relatively static, it would be a bad choice for a complex site with hundreds of pages. That's what Dreamweaver is for. But if your site is the type of site that Muse was designed for, and particularly if you're a visual designer who's familiar with InDesign or Photoshop, you'll be very happy to have this tool in your kit.
Additional details are available on the Adobe website.

An Onion for Your Browser

The Onion Router (TOR) is many layered, just like an onion, and using it to browse the Web will have several effects: It may allow you to avoid being followed by commercial sites, it will slow your browsing, and it may cause the National Security Agency to develop an interest in what you're doing.

The Tor Project provides free software that enables online anonymity. It is also used in some countries to get around Internet censorship by directing Internet traffic through a series of several thousand network relays that are operated by volunteers around the globe. The intent it to hide a user's location and to obscure the websites they visit.

As with most security and privacy applications, Tor isn't foolproof. Although it's more difficult for monitoring software to trace traffic back to the user, it's not impossible. Still, a formerly top secret NSA document characterizes Tor as "the King of high secure, low latency Internet anonymity" and stated that there are "no contenders for the throne in waiting".

Peeling the Onion

"Onion routing" simply refers to the multiple layers of encryption that the system uses. Tor starts by encrypting data from the sender, and that includes encrypting the destination IP address. Then it encrypts the data again. And again. Unlike standard Internet protocol procedures, Tor doesn't try to find the fastest route between 2 locations. Instead, packets are sent through Tor relays that are selected randomly. This is the primary reason why communications through Tor is somewhat slower than with open connections.

Packet decryption also happens in successive steps with each relay decrypting enough of the information to forward it to the next relay in the series. The layer that passes the packet to the destination computer decrypts the innermost layer of the packet. Because the routing itself is obscured within several layers of encryption, there is no single location within Tor that can be tapped to capture the traffic.

But if the NSA wants to examine your communications, they'll probably find a way to do it. There are reports that the agency targets outdated versions of Firefox browsers, for example. And, of course, if your computer is compromised, nothing you do is safe, secret, or secure. There's also some exposure at the "border".

Tor dates to 2002 and (perhaps you'll see the irony here) it was created under the auspices of the US Naval Research Laboratory. The Electronic Frontier Foundation provided financial support to the Tor Project in 2004 and 2005, but it is now maintained as a 501(c)(3) non-profit research-education organization.

Tor still has some financial support by the US government in the form of the US State Department and the National Science Foundation, which are major contributors. In fact, about 80% of the project's 2012 budget came from the US government and most of the remainder of the $2 million budget came from the Swedish government. A few non-governmental organizations and thousands of individuals also contribute.

Monitoring at the Border

Tor doesn't try to inhibit monitoring of traffic at the network's boundaries, in part because it can't. So data packets are vulnerable when the enter or exit the Tor network. Even so, the technology is considerably more secure than standard virtual private networks (VPNs)

More than 5 years ago, a Swedish security consultant proved that he could capture user names and passwords from Tor users by surveiling Tor exit nodes. The consultant, Dan Egerstad, said that if someone knows where Tor nodes are hosted, the data streams can be compromised. As for finding the Tor servers, Egerstad says that some of the nodes cost thousands of dollars each month just to host because they're using lots of bandwidth. That raises a question about who is operating them. "Who would pay for this and be anonymous?" he asks.

Tor has been targeted by the NSA. It's been targeted by the British equivalent of the NSA, the GCHQ. Tor helps people in countries with repressive regimes gain access to information the government wants to suppress. Tor has been used to spread libelous statements. Tor is used by criminals in the process of selling drugs or stolen credit card information. As with most tools, it can be used with good intent or bad.

The Electronic Frontier Foundation dismisses the illegal uses, saying that criminals are obviously willing to break laws and therefore they already have many options that provide better privacy than Tor does. The EFF highlights Tor's use in supporting freedom of speech and providing protection for whistle blowers.

The Tor Browser

You'll find the Tor Browser at www.torproject.org/projects/torbrowser.html and versions are available for OS X, Microsoft Windows, and Linux. It actually runs on a modified version of the Mozilla Firefox ESR web browser and it comes with the TorButton, a TorLauncher, the NoScript utility, HTTPS Everywhere, and the Tor proxy.

Running the Tor Browser automatically starts Tor processes and routes traffic through the Tor network; and all cookies and browsing history are deleted when you close the browser.

The installation instructions note that you'll need at least 80MB of free disk space in the location you choose to install the application. You have 2 choices about where to install:

1. To make it readily available, install to the computer (the Desktop is the recommended location).
2. To move the Tor Browser to a different computer or limit the traces you leave behind, save it to a USB disk.

I decided that the safer option would be number 2, so I installed to a small (2GB) thumb drive.

Following the installation, you'll have a directory that includes a link to start the Tor Browser as well as several other directories, one of which contains the special version of Firefox.

The first time you open the Tor Browser, you'll be offered 2 options: Connect and Configure.

• In most cases, the right choice will be Connect.
• Choose Configure only if your computer's Internet connection does not allow a connection to a Tor server. This would happen if your connection is censored in some way.
  

The connection process takes a while. In my case, about 90 seconds.

Next you'll see a page that tells you the browser is properly connected to use Tor. From here, you can enter a URL or use the search function.

Click the "Test Tor Network Settings" link and you'll see another confirmation page. This one shows your apparent IP address (the address that will be visible on the public Internet) and a link that offers more information about the current relay you're using.

I clicked that button ...

... and was amused.

1. The Tor network makes it appear that I'm in Romania instead of the United States.
2. This is what was amusing. The exit relay I was connected to was "edwardsnowden1". It's amusing because the SSID for the guest network on my router is "Snowden_2.4G_guest" for the 2.4GHz connection and "Snowden_5.0G_guest" for the 5GHz connection.

OK, so I'm easily amused.

When I loaded the TechByter Worldwide website, it loaded more slowly than normal; but, considering everything that happens in the background, it was surprisingly fast.

You may occasionally encounter an unintended consequence, though.

Here's what happened when I visited www.microsoft.com.

Why? The reason is both easy to understand and obvious: This is the Romanian version of Microsoft's website. After all, that's where I appeared to be at the time. Later, when I had connected through another exit point, this one showing me to be in Netherlands, I was presented with a site that was written in Dutch.

Because Tor installs its own special version of Firefox, your installed version of the browser (as well as any other browsers you use) will be unaffected.

What that means is that you can install the Tor Browser (either on the computer or, as I did, on a USB thumb drive) without concern that it will affect any of your existing programs.

Read more about Tor in an article on the German site, Panorama. The article, NSA targets the privacy-conscious, is in English and makes the following claims:

• Two servers in Germany - in Berlin and Nuremberg - are under surveillance by the NSA.
• Merely searching the web for the privacy-enhancing software tools outlined in the XKeyscore rules causes the NSA to mark and track the IP address of the person doing the search. Not only are German privacy software users tracked, but the source code shows that privacy software users worldwide are tracked by the NSA.
• Among the NSA's targets is the Tor network funded primarily by the US government to aid democracy advocates in authoritarian states.
• The XKeyscore rules reveal that the NSA tracks all connections to a server that hosts part of an anonymous email service at the MIT Computer Science and Artificial Intelligence Laboratory (CSAIL) in Cambridge, Massachusetts. It also records details about visits to a popular Internet journal for Linux operating system users called "the Linux Journal - the Original Magazine of the Linux Community", and calls it an "extremist forum".
  

Short Circuits

And the Winner Will Be --- Tablets

Remember how popular the first "portable" computers were? By portable, I mean the 23 and a half pound Osborne 1 (The year: 1981). Luggable, these things were the size of a catalog case. (Remember when sales people carried those?) The notebook/laptop models became increasingly popular and threatened to overtake desktop systems, but now they're combined with desktops as "traditional" PCs and tablets are poised to outsell them next year.

According to Gartner research, about 308 thousand traditional PCs will be sold this year, followed closely by 256 thousand tablets. But in 2015 tablets will take the lead, 321 thousand to 317 thousand.

The sales of traditional computers have been falling for years as tablets have become more powerful and have had features added that allow them to be substitutes for desktops and notebooks -- particularly note the recently released update to Microsoft's Surface series.

For many people, tablets are sufficient, but don't look for desktop systems to disappear. Those who need huge amounts of RAM will still need desktop or notebook systems, but this problem will probably be solved soon, just as tablet docking stations have eliminated the disk space limitations of tablets. Plug a tablet in to a docking station and it can power one or more huge monitors, access many terabytes of disk space, and make use of a mouse and keyboard. Look for that to happen soon with memory, too.

Gartner says it expects consumer preference to be for tablets with larger screens and because the market for tablets is maturing, prices are likely to become a selling point.

Beware Questionable "DOMAIN SERVICE NOTICE" Messages

"Important Notice , DOMAIN SERVICE NOTICE" was the subject line on a message I received this week. The TechByter Worldwide domain registration is due for an update, so I glanced at the message even though it wasn't from my registrar.

"Complete and return by fax" the message said, listing a phone number in Buffalo, New York. It then showed the registration information -- name, address, phone number -- all of which are readily available to anyone via a WhoIs search.

"As a courtesy to domain name holders," the message began. I'm always wary of something being done "as a courtesy". "We are sending you this notification for your business Domain name search engine registration. This letter is to inform you that it's time to send in your registration and save."

See what they did there? It's a "search engine registration", not a domain name registration. Search engines don't have registration procedures. This is obviously nothing more than an offer to sell me something that's worthless.

"Failure to complete your Domain name search engine registration," the message continued, "may result in cancellation of this offer making it difficult for your customers to locate you on the web."

It went on to explain how "privatization allows the consumer a choice when registering" and that I would be buying "search engine submission." In other words, if I pay them, they'll send my domain name to a bunch of search engines. I could do that myself in a few minutes and without cost.

How much money does the spammer want me to send?

[ ] 1 year 07/7/2014 - 07/7/2015 $75.00
[ ] 2 year 07/7/2014 - 07/7/2016 $119.00
[ ] 5 year 07/7/2014 - 07/7/2019 $199.00
[ ] 10 year -Most Recommended- 07/7/2014 - 07/7/2024 $295.00
[ ] Lifetime (NEW!) Limited time offer - Best value! Lifetime $499.00

Wow! I could buy a lifetime registration for just $500!

At the bottom of the message, there was some smaller text. Large enough, though, that the Federal Trade Commission can't go after the "offer" as fraud:

"By accepting this offer, you agree not to hold DS liable for any part. Note that THIS IS NOT A BILL. This is a solicitation. You are under no obligation to pay the amounts stated unless you accept this offer. The information in this letter contains confidential and/or legally privileged information from the notification processing department of the DS 3501 Jack Northrop Ave. Suite #F9238 Hawthorne, CA 90250 USA, This information is intended only for the use of the individual(s) named above. There is no pre-existing relationship between DS and the domain mentioned above. This notice is not in any part associated with a continuation of services for domain registration. Search engine submission is an optional service that you can use as a part of your website optimization and alone may not increase the traffic to your site. If you do not wish to receive further updates from DS reply with Remove to unsubscribe. If you are not the intended recipient, you are hereby notified that disclosure, copying, distribution or the taking of any action in reliance on the contents for this letter is strictly prohibited."

So neither the FTC nor I can call this "offer" "fraudulent", but I would have to question why a legitimate business would send some messages from domainnotices8585.com, others from freevu.org, and still more from various other addresses. I mean, if you're on the up and up, wouldn't you just use your own business e-mail address to send solicitations?

In a word: Beware.

Free Ebooks about Windows

If you're a bit puzzled by Windows 8.1 or Windows 7 or Office 2013 or any other Microsoft product, the Microsoft Developers Network has some suggestions for you and links to free electronic publications you can download.

Follow the link below and you'll find more than 100 new free ebooks, Microsoft Step-By-Step guides, and resource guides. The writer of the blog, Microsoft Senior Sales Excellence Manager Eric Ligman also includes links to many electronic publications that he's mentioned previously. You'll find almost 300 publications in total. Some are in various ebook formats (epub or mobi) and some are in PDF format.

If you're looking for quick answers, this might be just the place to start and Ligman has a challenge: "Wouldn't it be fun if we could surpass the 1,000,000 download mark within just one week again?" Of course, it would also be a great talking point for the Microsoft sales staff.

Obtain your free ebooks from MSDN.