By Lee Sykes
Here we will provide some of the key elements and tools that you can use to test your skins.
Let’s begin by looking at the elements you can test.
Some users still disable images to speed up the loading of web pages, especially when they are using a slow dial-up connection.
If you turn the display of images off, can you still read and understand your website design?
Supposing you have placed a blue image behind some white text, if that image is removed, can you still read the text? If you haven’t specified a background colour and the image is removed, the background may use the default white colour, therefore you will have white text on a white background.
When you specify a background image for a class, also specify a related background colour, this means that when the image is removed, the white text can still be read because you have specified a blue background.
This is the vortex skin menu
with the images disabled. Notice that if we did not specify a background colour of white, the text would be black on a black background.
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.
background-position: left top;
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.
Remove the CSS
Can the skin still function when the CSS file is removed?
This is a simple test and allows you to quickly view how your skin will display if a browser or device does not support CSS.
Web Developer Tools
There is an essential tool which enables you to check these elements, amongst other items very quickly. If you don’t use the Firefox browser, I strongly recommend that you download it and install it just for this extension.
This web extension, created by Chris Pederick is an essential tool for testing your DotNetNuke skins: http://www.chrispederick.com/work/firefox/webdeveloper/
This extension installs a toolbar into the Firefox browser where you can quickly select elements such as disable images, disable CSS, validate HTML, validate CSS, etc.
The extension is also very useful for studying other DotNetNuke skins, as it also allows you to view the CSS code from a website, just browse the website that you like the design of and select view source code and view CSS and you can instantly view the techniques they have used to create their website design.
Test the skin in various Browsers
It’s also important to test your skin in a variety of browsers to check for compatibility. If you know that the majority of your users will be mac users or windows users, ensure that you have tested your skin against the major browser for those platforms.
Within windows it is possible to setup different versions of Internet Explorer working as completely standalone installations on the same machine.
As a minimum I would recommend testing in:
- Internet Explorer 5, 5.5, 6, 7(currently beta 2)
- And if possible Safari
If you are creating a pure CSS skin the results can vary quite widely, so it’s especially important to test your skin against the various browsers while you are going through the process of creating the skin, rather than as a final check. It is much easier to adapt your design to work in a variety of browsers while you are creating the skin, rather than hacking the skin in a finished state to try and get it to work with a certain browser.
You can download the various browsers from here:
* The other option is to install Virtual PC (free) and install old operating systems running old versions of IE to your virtual environments for testing (remember windows licenses are required).
Online services to demonstrate how your site looks in various browsers:
If you don’t have access to certain browsers, such as Mac based browsers, these services can be useful tools.
iCapture: Is a free service, enter your web address and icapture will take a snapshot of your web page using the Safari Browser. – Good resource for Windows users without access to a Mac. (Update - Safari is now available to windows users)
BrowserCam: You have to pay for this service. BrowserCam's Screen Capture Service lets you submit multiple URL's, choose the browsers and operating systems you want to see, and in about a minute returns screen captures of your webpage loaded in the different browsers and operating systems you selected.
Validating your skins (HTML and CSS)
Validating your code for your HTML and CSS files is an essential tool to double check that you have created well formed code.
This tool is useful for testing your skins while you are creating them and can help you to quickly and easily find a problem. Supposing you have created a pure CSS layout skin and the skin is not displaying correctly, a quick validation check may show errors which you have missed, for instance if you forget to close a tag, eg. <br> instead of <br />.
How to validate using Visual Web Developer Express
If you are using Visual Web Developer Express, you can take advantage of some built in validation functions:
If you have created a coding error within your files, VWD will now place a red underline on the error.
- With your HTML page open, right click your mouse
- Select Formatting and Validation…
- Under the HTML tab, select Validation
- Using the Target drop down list, select Internet Explorer 6.0 (or any other method you require)
- Tick all of the boxes under Options
- Under the CSS tab, select CSS Specific
- Tick all of the boxes under Detect Errors
This is a quick and easy method for ensuring you are creating valid code.
- If you also go to the top menu and select View and Error List
- You can view a list of the errors in your document
How to validate using W3C’s online validation tools
You can also validate your HTML code using: http://validator.w3.org
And your CSS code using: http://jigsaw.w3.org/css-validator/
Using the W3C validation tools, you have the option to validate a page by: entering the URL, uploading your skin file, or entering the code direct into the page.
What you need to be aware of:
Validating HTML via a URL
The validation tools will not read a page that is created by DotNetNuke as valid code. Here you can see a list of the errors that are produced by DotNetNuke.
How do I know if the validation errors are produced by my skin or DotNetNuke?
Once you have used the validation tool a few times, you will recognize which errors are created by DotNetNuke and you will be able to spot any errors created by your skin.
Is there an easier method?
Yes, if you follow the method below then you have a definite answer for the validation of your html.
Validating HTML via File Upload (http://validator.w3.org)
For this example we will validate the DNN-Blue skin that comes as standard with DotNetNuke.
Select the HTML file for the DNN-Blue skin and upload it to the validator.
If you upload the HTML file of the skin, you will find that it displays 13 errors, and most of these errors are related to:
No Character Encoding Found! Falling back to UTF-8
These errors occur because the validator is expecting to read a complete html page, the skin is just a section of our page, so for these testing purposes we will add some code to the skin so that the validator can read the skin as a complete html page.
No DOCTYPE found! Attempting validation with XHTML 1.0 Transitional.
In order to do this, we will view a dotnetnuke page and copy some of the source code and paste it into our document.
All we need to do is add these tags to the top of our skin, which are used in the default version of a dotnetnuke page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
and these tags to the end of the skin:
Validating the skin
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"/>
You can view the edits to the DNN-blue skin in the download section at the end of this tutorial.
If we now upload this skin, the results provide 1 error:
1. Error Line 15 column 28: there is no attribute "RUNAT".
<TD id="ControlPanel" runat="server" class="contentpane" valign="top" align="cen
This is the code for inserting modules into the page. The “runat server” part will not appear within the code when we actually use the skin because DotNetNuke uses that code to place a content pane in the table cell, so we do not need to worry about that error.
If you view the coding best practices article, you will see I recommend that you implement writing code to XHTML standards to get into good practices, in the event that you may wish to create pure CSS layout skins in the future.
If you wish to test your skin to a higher validation standard, all you need to do is change the doc type code that we inserted to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
This version of the DNN Blue skin is also included in the download section at the end of this tutorial.
If we upload this version of the skin, you will see that there are 71 Validation errors. – Quite a big difference.
The main problem that is causing these errors is that the tags in XHTML code needs to be written in lowercase. To fix these problems, you can do this very quickly within Visual Web Developer by going to the Edit menu, and selecting Format Document.
If you upload this version to the validator, you will see that there are now just 5 errors.
The explanation of this error provided by VWD is:
- The first is caused by the “runat” attribute, which we do not need to be concerned about.
- The rest of the errors are caused by the ‘nowrap’ attribute within the tables.
Attribute 'nowrap' is considered outdated. A newer construct is recommended.
This is because the XHTML recommendation is that you completely separate the content from the layout and work with CSS layouts, therefore you would specify these ‘outdated’ features within the actual CSS.
This is nothing to worry about for your table designs, the main feature we are discussing here is to ensure that your code is well formed and error free.
NOTE: Remember, do not include the additional code that we added to validate your skin within your actual skin file. If you install this version to DotNetNuke it will cause errors.
Validating CSS via file upload (http://jigsaw.w3.org/css-validator/)
This is an easy method for validating your CSS. You can simply upload your CSS file for your skin without making any changes to the CSS file.
Using the DNN-Blue skin.css file, we can see that the validator has picked up a few errors:
This code is just for Mozilla based browsers, and allows you to add rounded corners to the border of an element, so this is not an error. You can remove this if you do not wish to display rounded corners.
- Property moz-border-radius- doesn't exist
The next errors state:
You will notice that it provides a link for the cursor item, which provides further information regarding the error.
- Line: 74 Context : .MainMenu_MenuBar
- Invalid number : cursor hand is not a cursor value : hand
It is stating that ‘hand’ is not a value for the cursor property. If we examine the CSS, we can see that it has the values:
These two values have been stated for browser compatibility, you can view further information here.
Following these errors, the next error is related to DXImageTransform
You will find that VWD will also highlight the filter attribute:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
This is because the filter attribute is only offered for Internet Explorer browsers, so again this is not an actual CSS error.
Underneath the list of errors are a list of warnings, which you can decide whether or not to implement at your own discresion, such as specifying background colours etc.
The CSS validator is a useful tool that can pick up errors that you may not notice, I have certainly found it very useful when creating my own CSS files.
These errors raise an interesting topic. If you use CSS that is specifically for a browser, will it affect your skin design if that particular effect does not work in other browsers?
You need to carefully consider your design and make sure that you do not become reliant on certain CSS properties that are only available in certain browsers.
The CSS properties that are used within the DNN-Blue skin help to enhance the design if you are viewing the skin within certain browsers, while also not being reliant upon a certain effect if the browser does not support the CSS property.
Web Developer Tool for Firefox
If you have installed the web developer tool for the firefox browser, you have quick access to these online validation tools. Simply click on the Tools drop down menu within the toolbar and select the validation method you require.
Regularly testing your skin and validating your code while creating your skins, will help to ensure that you quickly create an error free skin.
Testing your skin as you build the skin makes it much easier to find and solve any errors that you have created. If you test the skin as the last process in your skin design, you will find it is a much harder task to find the source of the errors.