Responsive Website Demo!

This page demonstrates several responsive design features that are possible using html5....

Utilizes a horizontal navigation menu that toggles on small screens.

Includes an html5 Flex Box demonstration to show the SEO benefits.

Includes a "Fluid" table demo.

This demo page will grow as we add more and more components.

SEO Order 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SEO Order 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SEO Order 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fluid Table with Overflow X - Demo:

Overflow allows table to extend beyond the right margin. On small screens this will not result in the need for a scroll bar affecting the entire webpage. Yet it will require the visitor to swipe to see the entire table.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Fluid Table - Demo:

Without overflow, the table will shrink to fit within the right margin. However, on small screens this may result in the need for a scroll bar affecting the entire webpage. Although this is a fluid table, it is not fully responsive. That would require the table be converted into two columns, one for the headings and one for the data, with each row being what would appear to its own entirely different table.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Flex Box Demo:

Note: Each column's background appears as if the same length, regardless of the amount of text. The columns may be displayed in a different order than they appear in the code. This allows for best SEO.

The code order of each column background is Red, Green, then Blue, while the appearance is blue, red, green.

Logo Image & Site Name in Header