Mobile Website
To view this demo on a destop or laptop computer, use a modern browser such as Firefox, Google Chrome or Apple’s Safari.
Decrease the browser window width by dragging the right hand edge or grab handle to the left of your screen.
General Content
Collapsable Window
Each section can have any type of content.
The image shown here has a width set to three quarters of the section width and will expand and contract to adjust to varying device widths.
This section can be open on page load or closed if required.
Contact Form
This is closed on page load by default and is clicked in the header to open.
Columns and Lists
Lists can be displayed in columns as shown in Block A below.
Block B illustrates wrapping text in a second column.
Block A
- List line one
- List line two
Block B
Text inside this column will wrap and roll down the page
Up to five columns can be used but two is a reasonable maximum for easy viewing on the limited screen width of a smart phone.
Contact Info
This final section can be used for content that would normally be in the footer such as © notice, contact info etc. thus saving space and keeping the page height down to a minimum.
JQuery Mobile Website Design
© ezmacwebdesign.com - 2011