Skip to the page content.
Buy Now | Next Example
Previous Page Next Page

What is Mercury? mercury is a Planet. It's also a very cool new Single-Page CSS Template

Mercury is a single-page Web site, a design approach that works very well for sites that would comprise three to six traditional pages of closely related content. A brochure site for an artist, entertainer, movie, author, or a typical restaurant would work very well. Landing pages for short-term promotions, offers and contests would too. On the other hand, a large site like Amazon.com would not be a good candidate.

A picture is worth a thousand words. Mercury comes with a pre-configured CSS class to create cool highlight boxes like this for images or callout text.

Build Mercury sites instantly with an interface that installs inside Dreamweaver

Mercury works for both desktop and mobile device browsers. If that's not cool enough, it also looks very pretty too. But more about that later. Mercury is a CSS page building tool. That means you can create Mercury documents automatically with a neat PVII interface that is accessible from inside Dreamweaver.

With Mercury you're always in control

Once you create your document, there is a modify interface that allows you to add page panels, remove page panels, or to change their order. The modify interface also allows you to tinker with animation speed and to set the previous and next arrows to loop or not to loop.

Mercury main features or what makes Mercury more than your average single-page site

When you create a Mercury page, you get a single-page web site template that is not just attractively designed, but one that is also eminently usable and accessible. We looked at hundreds of single-page horizontal scrolling web sites and learned how to make one that avoids the most common functional problems. There is simply nothing you can find that matches the efficiency and excellence of Mercury.

Beautiful Usable and Accessible with an interface that installs inside Dreamweaver

Mercury is designed using modern CSS methods that enable effects like rounded corners, shadows (inner and outer), and gradients to be created without having to use images. We also use font embedding technology to display custom fonts for headings and menus. In fact, the Mercury logo is pure text so if you like it you can customize it by simply replacing our text with your text—without ever leaving Dreamweaver. When you crack open the included user guide (and we really hope you do), you'll learn how to use modern CSS to your advantage in an efficient and browser-friendly way.

It's all in the details -we take the time to do it right so you don't have to worry about it

  • Choose fixed width layouts or layouts that automatically adjust to the size of your visitor's browser window.
  • Mercury is fully navigable whether using a mouse, keyboard, pointing device, touch device, or a screen reader.
  • If you use your tab key to navigate and reach a link in the next page section, the system will automatically detect this and scroll that section fully into view.
  • Accessing a new page section will smoothly glide your window to the top, ensuring that no content is ever overlooked.
  • The previous and next arrows automatically display the title of the next or previous page when you hover over them.
  • The previous and next arrows can be set to loop or to stop at the first and last page sections.
  • Mobile devices are automatically detected and server special style rules to address device-specific issues.

 

CSS 3 support for the advanced CSS techniques used in mercury

Mercury is designed based on the concept of progressive enhancement. We start with well-formed code that displays all content in all devices. Then we add features that capitalize on the capabilities of modern browsers to provide visual enhancements such as rounded corners, embedded fonts, gradients, shadows, table-like column display, and RGBA colors with transparency. The chart below illustrates which browsers support these features.

  Firefox Opera Safari iPhone iPad Chrome IE6 IE7 IE8 IE9
CSS Round Corners Y Y Y Y Y Y N N N Y
CSS Embed Fonts Y Y Y Y Y Y Y Y Y Y
CSS Gradients Y Y Y Y Y Y * * * *
CSS Shadows Y Y Y Y Y Y N N N Y
Dynamic Image Sizing Y Y Y Y Y Y Y Y Y Y
RGBA Colors Y Y Y Y Y Y N N N Y

*IE supports linear gradients via the proprietary DX Filter module