Courses/Jouw Site op Kleine Schermpjes - Revision history

Arjensuijker: /* Responsive Webdesign */

2015-01-07T18:15:00Z

Responsive Webdesign

← Older revision		Revision as of 18:15, 7 January 2015
Line 1:		Line 1:
	= Responsive ~~Webdesign~~ =		= Responsive Web Design =


Line 19:		Line 19:
	'''3 Use relative positioning on your content blocks for smaller screens'''		'''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:		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>		<nowiki>

Arjensuijker at 18:12, 7 January 2015

2015-01-07T18:12:51Z

← Older revision		Revision as of 18:12, 7 January 2015
Line 10:		Line 10:
	'''2 Use CSS media queries to hide unnecessary content'''		'''2 Use CSS media queries to hide unnecessary content'''

	~~There's less space~~ on smaller screens, so you'll want to hide things like footers and decorative elements.		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) {		<nowiki>@media screen and (max-width: 560px) {
	#footer {		#footer {
Line 17:		Line 17:
	}		}
	</nowiki>		</nowiki>
	'''3 Use ~~CSS media queries to arrange~~ your content ~~into relatively positioned~~ blocks'''		'''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 ~~however~~, this ~~gets~~ more difficult. On medium sized screens this can be solved by making the blocks narrower. But if the screen ~~is really small~~, you'll have to stack all blocks vertically:		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:

	<nowiki>		<nowiki>
Line 27:		Line 27:
	float:none;		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>		</nowiki>

Arjensuijker at 17:38, 7 January 2015

2015-01-07T17:38:02Z

← Older revision		Revision as of 17:38, 7 January 2015
Line 5:		Line 5:


	'''1 Set the initial ~~scaling~~:'''		'''1 Set the initial scale:'''
	<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>		<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>

	'''2 Use CSS media queries to hide unnecessary content'''		'''2 Use CSS media queries to hide unnecessary content'''
	There's less space on smaller screens, so you'll want to hide things like footers and decorative elements.
			There's less space on smaller screens, so you'll want to hide things like footers and decorative elements.
	<nowiki>@media screen and (max-width: 560px) {		<nowiki>@media screen and (max-width: 560px) {
	#footer {		#footer {

Arjensuijker at 17:09, 7 January 2015

2015-01-07T17:09:18Z

← Older revision		Revision as of 17:09, 7 January 2015
Line 1:		Line 1:
	=== ~~Responsive Webdesign~~ ===		= Responsive Webdesign =


			=== Steps for graceful degradation: ===

	~~==== Steps for Graceful Degradation: ====~~

	'''1 Set the initial scaling:'''		'''1 Set the initial scaling:'''
	<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>		<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>
	'''2 Use CSS media queries to ~~reposition or~~ hide content'''		'''2 Use CSS media queries to hide unnecessary content'''
			There's less space on smaller screens, so you'll want to hide things like footers and decorative elements.
	<nowiki>@media screen and (max-width: 560px) {		<nowiki>@media screen and (max-width: 560px) {
	#content {		#footer {
	width: ~~auto~~;		display:none;
	float: none;		}
			}
			</nowiki>
			'''3 Use CSS media queries to arrange your content into relatively positioned blocks'''

			On bigger screens, you can easily have multiple blocks of content next to each other. If the screen is smaller however, this gets more difficult. On medium sized screens this can be solved by making the blocks narrower. But if the screen is really small, you'll have to stack all blocks vertically:

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

Arjensuijker at 16:44, 7 January 2015

2015-01-07T16:44:54Z

← Older revision		Revision as of 16:44, 7 January 2015
Line 1:		Line 1:
	=== Responsive Webdesign ===		=== Responsive Webdesign ===

	~~- Progressive Enhancement or~~ Graceful Degradation?		==== Steps for Graceful Degradation: ====

	~~Steps for Graceful Degradation:~~		'''1 Set the initial scaling:'''
			<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>
	# Set the initial scaling ~~to 1~~:		'''2 Use CSS media queries to reposition or hide content'''
	<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>		<nowiki>@media screen and (max-width: 560px) {
	# Use CSS media queries to reposition or hide ~~advanced~~ content
	<nowiki>@media screen and (max-width: 560px) {
	#content {		#content {
	width: auto;		width: auto;

Arjensuijker at 16:42, 7 January 2015

2015-01-07T16:42:05Z

← Older revision		Revision as of 16:42, 7 January 2015
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 Webdesign ===

	~~Volg deze workshop en leer hoe je jouw website geschikt maakt voor élk apparaat!~~		- Progressive Enhancement or Graceful Degradation?

			Steps for Graceful Degradation:

			# Set the initial scaling to 1:
			<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki>
			# Use CSS media queries to reposition or hide advanced content
			<nowiki>@media screen and (max-width: 560px) {
			#content {
			width: auto;
			float: none;
			}
			}
			</nowiki>

Arjensuijker: 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..."

2014-12-19T09:49:37Z

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..."

New page

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?

Volg deze workshop en leer hoe je jouw website geschikt maakt voor élk apparaat!