Project:VisualEditor testing/Test

Hello, and welcome to the VisualEditor demonstration page. Do not expect edits here to stay for long; this page is like the sandbox.

'''Feedback here will likely be ignored. Please use VisualEditor/Feedback instead. Read VisualEditor/Welcome for the answers to many of your questions.'''

Note: The "VisualEditor" button only works with the Vector or MonoBook skins; see notes.

There are also test pages for templates, for references, and for formulæ.

= Heading 1a - Testing =

This is some text. This text has a bold and an italic word in it.

Heading 1b
= Heading 2a - Testing =

Heading 3abc
= Heading 1b =

Heading 2bc
= Heading 3c = List item:
 * Foo

List item with formatted content:
 * Fooo

List item with a paragraph in it:
 * Baaaaar Baz

List item with multiple paragraphs in it:
 * First


 * Second


 * Third

List item with an internal link:
 * Baz

List item with an internal renamed, formatted link:
 * hhjhjk
 * kjlkjl


 * A Link Named Quux

List item with an external named link:
 * xkcd

List item with an external auto-numbered link:
 * 

Sequential list items and an empty list item with a paragraph following: Foo Bar Baz!
 * Last list item
 * No really, this is the last one
 * No, I really mean it this time.

Numbered list item:
 * 1) Foo

Sequential numbered list items:
 * 1) Foo
 * 2) Bar
 * 3) Baz

Nested ordered and numbered list items:
 * 1) Foo
 * 2) * FooFoo
 * 3) * FooBar
 * 4) Bar
 * 5) BarFoo
 * 6) BarBar
 * 7) BarBarFoo
 * 8) BarBarBar
 * 9) Baz
 * 10) BazFooFoo
 * 11) BazFooBar
 * 12) BazFooBaz
 * 13) BazBar
 * 14) BazBarFoo
 * 15) * BazBarBar
 * 16) * BazBarBaz
 * BazBarBazFoo
 * 1) * BazBarBazBar
 * 2) * BazBarBazBaz

=='''Web Page Testing Process == 1: The basics - links, formatting, and images '''

Look carefully at your page. Check your links (if any) to ensure they are applied to the correct text, and that they lead you to the correct location. Look at your formatting and make sure it's being used in the right places. Finally, check to make sure you've embedded the right images and that they're also in the right places.

'''2: Test in multiple browsers. '''

As of September 2013, the most popular web browsers by usage are:

Google Chrome (54% of users)

FireFox (28% of users)

Internet Explorer (12% of users) This constitutes 94% of all internet browser usage. As long as you make sure your web page is displaying properly in these three browsers, then you can confidently assume they will also display properly in Safari and Opera (which constitute the other 6%). You can test in Safari and Opera if you want, but it's not completely necessary. '''3: Test in multiple resolutions. '''

In an advanced development environment such as our own, we're accustomed to working with high display resolutions (1080p and above). However, we need to take into account that some website visitors are using lower resolutions than we are. Use the Resolution Test Chrome extension to test for different resolutions. Web page content and design elements should not be overlapping each other at anything less than 640 pixels wide. When creating your web page, make columns using elements with a class of span#, where # indicates a number out of twelve. When working with multiple adjacent columns, make sure these numbers add up to 12. For example: A and a will create two columns that line up next to each other and fill up the whole page. Then, put those colums in another element with a class of row-fluid. Bootstrap uses these classes to dynamically re-arrange the content and stack columns on top of each other for small resolutions. '''4: Test any inputs and forms. '''

If the page has any forms or other elements that accept user input, be sure to test them and see if they are properly taking the data and doing what needs to be done with it. 5: Upload the page to the site (but don't make it visible yet to anyone other than internal users!) Make sure that it works properly on the live site, and send the link to your teammates for feedback. Take into account people's suggestions and advice.