Responsive Web Design: You will want your Web page to look good on all Browsers and devices including tablets and phones. This is where Responsive Web Design comes in. Before adding more content to our base page, let’s design the overall layout to be Responsive.
Do Not: Use the Table tag to force your page’s elements to fit into an overall page layout; a Table will not wrap or stack to fit onto a small screen.
Instead:
- Create areas on the page using the Div tag. “Divs” that appear next to each other on a full-size computer screen can stack vertically when the screen is scaled down on a phone
- Use a responsive grid layout; this divides the page into rows and columns using divs rather than tables. There are some excellent frameworks, such as Bootstrap, available that make this easy with many advanced features to make your site responsive as well as beautiful. We will be looking at examples of this in one of our future meetings.
- For your first Web page start with using divs and we will work our way towards the responsive grids.
Do Not: Use fixed-width pages or fixed-width elements
Instead:
- Use percentages to define width: examples: width:100%; or max-width:300px; or max-width:100%;
- Set the Viewport to scale to the device: the viewport is the area of the page visible on the user’s device screen. Adding the following “meta” tag inside the <head> of the page tells the Browser to scale to the device rather than just shrinking everything to a tiny font size to show the full page view :
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
- In the CSS define separate styles for large and small screens when appropriate; these are called “media queries” in the CSS. Not needed for every element but can just what your page needs sometimes to address problem areas with the display across devices.
See W3C Tutorial for more on responsive Web Design
Fox Valley Girls Coding Club 