Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

The naturally responsive Tab Widget...

Powered by the Automagically Responsive Widget from your Friends at PVII

Tutorials Home | Tab Panel Magic Home | Buy Now ($95) | Upgrade from TPM1 ($60)

 

See Finished Page

Did you know?

Tab Panel Magic (TPM2) is the only tabbed panel widget for Dreamweaver that works flawlessly in mobile devices without modifications. One of the more powerful options in TPM2 is Scrolling Tabs, which allow you to have an unlimited number of tabs displayed on a single row. If there is not enough horizontal room to display them all, the excess tabs are hidden and you can access them by using convenient arrow controls to scroll them into or out of view. Think about it...

On a phone, you can have as many tabs as you need and they will never take up more than a single row of vertical space.

Before you begin the tutorial

Update to the latest version of TPM2

This tutorial requires Tab Panel Magic version 2.3.3 (or higher). If you need to update, please read this page first: Tab Panel Magic 2 Updates

Download the work files

Download the work folder TPM2-Responsive-Tutorial.zip and save it inside a defined Dreamweaver site. Unzip the folder. Inside you will find the following 2 files:

  1. finished-page.htm
  2. tpm2-responsive-tutorial.css

Open the finished-page.htm file. The page will contain a single element: a level 1 heading that reads The Responsive Tab Panel Widget.

Step 1: Create your TPM2 widget

In Design View, place your cursor to the right of the heading text The Responsive Tab Panel Widget.

Open the TPM2 interface.

Use the Add button to create several panels. You can enter custom Trigger Text for each panel or simply leave the default Trigger Text labels.

In the Options section, set Scrolling to Normal Scrolling.

Set Animation to 2-Horizontal Panel Slider.

Set Style Theme to 14-Simply Elegant.

Click OK to build your widget.

Step 2: Link the Tutorial Style Sheet

You'll link the CSS file now—after having created the widget. This way, the link to the page CSS file will come after the link to the TPM2 CSS file. It is important for the CSS files to be in order because browsers read CSS from top to bottom. Your page CSS file contains a few rules that override the default TPM2 rules.

Choose Format > CSS Styles > Attach Style Sheet...

In the File/URL box enter tpm2-responsive-tutorial.css

Leave Add as set to Link and Media can be left blank.

Click OK to complete the link.

You will see the results of linking the CSS file immediately. The heading will be styled against a dark background, the width of your widget will adjust, and your text will appear in a non-default font face.

Believe it or not, you have completed the tutorial and are the proud parent of a responsive Tab Panel widget that will display and behave wonderfully in any mobile device and in conventional browsers at any window size.

Responsive Notes

By default, most popular mobile phones will attempt to shrink your page into their viewports using a ratio based on 980 pixels. Essentially, your page is shrunk to fit. The mobile browser takes a virtual snapshot of your page as it appears at 980 pixels in a conventional browser and then shrinks it to fit inside its little window.

Viewport Meta Tag

If this shrunken page scenario and its tiny text is not acceptable, there is a meta tag you can use that will tell the mobile browser to display the page inside its viewport without shrinking the text. We've included this meta tag in the finished-page file you downloaded:

<meta name="viewport" content="width=device-width" />

The syntax of the included tag is xhtml, matching the page DOCTYPE. If you convert your page to an HTML DOCTYPE using Dreamweaver's File > Convert feature, the syntax will be automatically changed for you.

CSS Media Queries

When designing for a small device you can reclaim valuable screen real estate by reducing default padding values in content areas. Since you are using the viewport meta tag you might also want to reduce font-sizes a little. You can accomplish this by adding Media Queries to your style sheet that target smartphones and normal browsers when the window is about as narrow as a phone. We've included the following 3 queries in your page style sheet:

For smartphones and narrow conventional browser windows

@media only screen and (min-width: 0px) and (max-width: 679px) {
.p7TPM_tabs_14 a, .p7TPM_tabs_14 a:visited {border: none; padding-left: 6px; padding-right: 6px;}
.p7TPM_tabs_14 li {margin-right: 0px;}
.p7TPM14 {border: none; width: auto;}
.p7TPM_content_14 {padding: 15px;}
}

For smartphones in portrait orientation

@media only screen and (max-device-width: 480px) and (orientation : portrait) {
body {font-size: 1em;}
h1 {font-size: .8em; padding: 5px 15px;}
}

For smartphones in landscape orientation

@media only screen and (max-device-width: 480px) and (orientation : landscape) {
body {
font-size: .75em;
h1 {font-size: .8em; padding: 5px 15px;}
}
}

Note: The page displays satisfactorily in tablets without a media query.

Notes

Tab Panel Magic 2 is naturally responsive and automatically adapts to the width of the area or element in which it is inserted. The scrolling tabs feature will work perfectly in all devices when your widget has no assigned width or when it is inside a narrow sidebar!