General Info
Steps and things to remember when making an application responsive
- Use a !DOCTYPE of just html. The long URL to the W3C is no longer required.
!DOCTYPE html - Use this meta tag to force IE to use the most up to date rendering mode.
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" - Use this meta tag to set the scale of the viewport.
meta name="viewport" content="width=device-width, initial-scale=1.0" - Link to the stylesheets common and responsive.
link rel="stylesheet" type="text/css" href="styles/common.css"link rel="stylesheet" type="text/css" href="styles/responsive.css" - When a mobile menu is needed, link to jquery-162.min.js and add the script that changes
the nav tag into a select list. See more information in Navigation & Menus.
script src="scripts/jquery-1.6.2.min.js" - Choose a column layout based on the page's needs. In many cases, the No Column layout might be appropriate.
- When using Explore All Column Layouts, each row must be cleared with a div class of clear-both. Although,
this is not semantically correct, it works for now.
div class="clear-both" - When working with images, anything smaller than 250px in width can be inserted as is. Images used within columns, such as the Home Page should be assigned a class="gallery". Working with larger images may take some experimentation and additional code.
- Use classes of box, pad, info, inner, and shadow to create space and effects as needed. The Column Layout pages show examples of how these may be used. Often they are combined with one another for the best visual appeal.
- Read about and see examples of how to implement Tables and Forms before coding them.
- The same Explore All Column Layouts that can be applied to the content area can also be applied to the blue footer area. This can be useful for adding additional menus, links, or information to the bottom region of a page. In this project, all pages have the same Footer through a footerInclude file. But if needed, each page could have its own unique code in that region.
- IE8 and below do not behave well with many responsive templates. IE9 mostly behaves or at least degrades with class. Chrome, FF, and Safari browsers all play nicely.
