Testing a DotNetNuke skin
| Images | Font Sizes | Web Developer Tools | Browser Testing | Validating Skins | W3C's Online Tools | Validating HTML via File Upload | Validating CSS via File Upload | Web Developer Tool and Conclusion |  | Font Sizes
If a user increases the text size of your skin does the content remain readable? Does the content overload and overlap into other areas of the skin, or does it remain within its set area, while still remaining readable?
Can you increase / decrease the size of the text within your browser?
For users with visual impairments this is an essential function.
Within Internet Explorer, click on View / Text Size / Largest.
Using Firefox, click on Ctrl and the plus or minus button to increase / decrease the font size.
This is an example of a skin which can display the text at various sizes
If you can not increase / decrease the font sizes within Internet Explorer, follow this tutorial which explains how to set up a percentage based font size structure.
If the text is displayed on top of a background image, does the image expand to take into account the larger text?
With creative use of the background image and background colour functions, you can create flexible designs.
For instance, supposing you have a gradient image which you are placing behind a vertical menu that changes from dark blue at the top through to a solid light blue at the bottom.
This image could be 5px wide and 100px high. You can repeat this image horizontally so that no matter how wide the text becomes, the image will always expand and adapt to the width (using repeat-x), and at the same time you can also specify a background colour for the class which is the light blue colour that the image turns into at the bottom of the image. Therefore when the text increases beyond the bottom of the 100px image, the background colour takes over and displays the light blue background colour.
This is an example of the gradient image trick within the vortex skin from the How to create a DotNetNuke website series of tutorials. Here the gradient image fades through to a white background.
.menugradient {
background-color: #FFFFFF;
background-image: url(gradient_menu_vertical.jpg);
background-position: left top;
background-repeat: repeat-x;
padding-left: 5px;
padding-right: 7px;
padding-top: 0px;
width: 100%;
height: 100px;
border: 1px solid #FF9900;
}
Vortex menu with the text size increased.
Notice how the background color takes over the bottom of the gradient image and how the gradient image is repeated horizontally with the expansion of the text.
Vortex menu with the text at the normal size. |
|
|