Difference between revisions of "Courses/Jouw Site op Kleine Schermpjes"

From Publication Station
(Created page with "Het aantal mobiele apparaten groeit enorm. Dit betekent dat steeds meer mensen websites bezoeken vanaf een mobiel apparaat. Niet alle websites werken goed op mobiele apparaten...")
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
Het aantal mobiele apparaten groeit enorm. Dit betekent dat steeds meer mensen websites bezoeken vanaf een mobiel apparaat. Niet alle websites werken goed op mobiele apparaten, wat erg frustrerend kan zijn voor bezoekers. Wil je zeker weten dat jouw website wel goed werkt op mobiele apparaten?
= Responsive Web Design =


Volg deze workshop en leer hoe je jouw website geschikt maakt voor élk apparaat!
 
=== Steps for graceful degradation: ===
 
 
'''1 Set the initial scale:'''
  <nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>
 
'''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.
  <nowiki>@media screen and (max-width: 560px) {
#footer {
display:none;
}
}
</nowiki>
'''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:
 
  <nowiki>
@media screen and (max-width: 400px) {
#block {
width:100%;
float:none;
}
}
</nowiki>
 
'''4 Resize fonts and other elements for smaller screens'''
 
To save even more space, the size of individual elements can also be decreased.
  <nowiki>@media screen and (max-width: 560px) {
p {
font-size:9px;
}
}
</nowiki>
 
'''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.
 
  <nowiki>
@media screen and (max-width: 400px) {
#menu_container #menu {display:none;}
#menu_container:hover #menu {display:block;}
}
</nowiki>

Latest revision as of 18:15, 7 January 2015

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;}
}
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Jouw_Site_op_Kleine_Schermpjes&oldid=240’