Courses/Jouw Site op Kleine Schermpjes

Responsive Web Design

Steps for graceful degradation:

1 Set the initial scale:

  <meta name="viewport" content="width=device-width; initial-scale=1.0">

2 Use CSS media queries to hide unnecessary content

Space is precious on smaller screens, so you'll want to hide things like footers and decorative elements.

  @media screen and (max-width: 560px) {
	#footer {
		display:none;
	}
}

3 Use relative positioning on your content blocks for smaller screens

On bigger screens, you can easily have multiple blocks of content next to each other. If the screen is smaller, this becomes more difficult. On medium sized screens this can be solved by making the blocks narrower. But if the screen gets even smaller, you'll have to stack all blocks vertically and make them fill the entire width of the screen:

  
@media screen and (max-width: 400px) {
	#block {
		width:100%;
		float:none;
	}
}

4 Resize fonts and other elements for smaller screens

To save even more space, the size of individual elements can also be decreased.

  @media screen and (max-width: 560px) {
	p {
		font-size:9px;
	}
}

5 Restyle specific elements to make them more mobile-friendly

Some traditional elements on a web page take too much space or don't work well on smaller screens. For example, if a large menu fills almost the entire screen it may be better to only make it visible if the user taps the menu button.

  
@media screen and (max-width: 400px) {
	#menu_container #menu {display:none;}
	#menu_container:hover #menu {display:block;}
}