Responsive design - Revision history

Arjensuijker: improved summary

2023-10-10T07:27:37Z

improved summary

← Older revision		Revision as of 07:27, 10 October 2023
Line 2:		Line 2:
	'''A simple approach that lets you build a single site that adapts to different device widths		'''A simple approach that lets you build a single site that adapts to different device widths
	'''		'''
	=~~RWD~~: 3 basic techniques =		=Responsive Webdesign: 3 basic techniques =

	'''~~percentage-based/flexible grids~~:''' ~~you skip fixed-width layouts~~.		'''Flexible layout:''' Don't use pixels for sizes or positioning.

	Since ~~smartphone~~ screens come in a wide variety of widths, it makes no sense to create a page at a fixed width; instead, you want the page to grow or shrink to fit the particular device		Since screens come in a wide variety of widths, it makes no sense to create a page at a fixed width; instead, you want the page to grow or shrink to fit the particular device



	~~'''media queries:'''~~

	~~CSS technology that lets you send different styles to a browser based on current conditions in the browser.~~

			'''Media queries:''' Set specific CSS rules for specific screen sizes

			You can only get so far with creating a flexible layout. If screen sizes become too different, the whole layout may need to change. For example: on a PC screen a multiple column layout can work very well, but this simply won't fit on a smartphone screen. Therefore, you could switch to a one column layout on certain screen sizes.

	'''flexible media:'''		'''flexible media:'''

Andre at 12:36, 5 November 2019

2019-11-05T12:36:44Z

← Older revision		Revision as of 12:36, 5 November 2019
Line 75:		Line 75:

	= Media queries =		= Media queries =

			'''Example https://codepen.io/PublicationStation/pen/rNNdNeX'''

	RWD tries to give your site’s visitors the most readable and attractive presentation possible. This usually means customizing the design to look its best at different browser widths.		RWD tries to give your site’s visitors the most readable and attractive presentation possible. This usually means customizing the design to look its best at different browser widths.

Andre at 11:28, 5 November 2019

2019-11-05T11:28:23Z

Show changes

Andre: /* Flexible grids: Flexbox */

2019-11-05T07:48:51Z

Flexible grids: Flexbox

← Older revision		Revision as of 07:48, 5 November 2019
Line 75:		Line 75:

	= Flexible grids: Flexbox =		= Flexible grids: Flexbox =

			https://www.hexadesigns.in/blog/wp-content/uploads/2018/12/flexbox-vs-grid.png


	==Flexbox Intro==		==Flexbox Intro==
Line 128:		Line 131:

	----		----


	= Flexible grids: Grid =		= Flexible grids: Grid =

Andre at 07:47, 5 November 2019

2019-11-05T07:47:22Z

@@ Line 72: / Line 72: @@
 ----
 = Flexible grids: Grid =
@@ Line 150: / Line 207: @@
 * Individual columns
 * <code>width</code>: percentage-based
 ----

Andre: Undo revision 7282 by Andre (talk)

2019-11-05T07:45:04Z

Undo revision 7282 by Andre (talk)

← Older revision		Revision as of 07:45, 5 November 2019
Line 78:		Line 78:
	Like tables, grid layout enables an author to align elements into columns and rows. However grids is far more flexible than tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.		Like tables, grid layout enables an author to align elements into columns and rows. However grids is far more flexible than tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

	~~'''See example:~~ https://codepen.io/PublicationStation/pen/~~OJJjMyg'''~~		https://codepen.io/PublicationStation/pen/VwwzvbO

	==Grid Basic==		==Grid Basic==
Line 135:		Line 135:
	</code>		</code>

			'''See example: https://codepen.io/PublicationStation/pen/OJJjMyg'''

	==Grid Links==		==Grid Links==

Andre at 07:42, 5 November 2019

2019-11-05T07:42:08Z

← Older revision		Revision as of 07:42, 5 November 2019
Line 78:		Line 78:
	Like tables, grid layout enables an author to align elements into columns and rows. However grids is far more flexible than tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.		Like tables, grid layout enables an author to align elements into columns and rows. However grids is far more flexible than tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

			'''See example: https://codepen.io/PublicationStation/pen/OJJjMyg'''

	==Grid Basic==		==Grid Basic==
Line 134:		Line 135:
	</code>		</code>

	~~'''See example: https://codepen.io/PublicationStation/pen/OJJjMyg'''~~

	==Grid Links==		==Grid Links==

Andre at 07:32, 5 November 2019

2019-11-05T07:32:23Z

← Older revision		Revision as of 07:32, 5 November 2019
Line 48:		Line 48:


	===Approaches:Desktop or Mobile first or Desktop & Mobile in parallel ==		==Approaches:Desktop or Mobile first or Desktop & Mobile in parallel ==

	'''Desktop first'''		'''Desktop first'''

Andre at 07:32, 5 November 2019

2019-11-05T07:32:02Z

← Older revision		Revision as of 07:32, 5 November 2019
Line 48:		Line 48:


	===~~=Two main approaches~~:Desktop or Mobile first~~?==~~==		===Approaches:Desktop or Mobile first or Desktop & Mobile in parallel ==

	'''Desktop first'''		'''Desktop first'''
Line 66:		Line 66:

	From it, make adjustments inside media queries for tablets and desktops, by adding columns larger headings, padding & border, showing more content.		From it, make adjustments inside media queries for tablets and desktops, by adding columns larger headings, padding & border, showing more content.

			'''Desktop & Mobile in parallel'''

			You design the website, taking care to see at every step, what the HTML elements and CSS rules do it in both large and small screen

	----		----

Andre at 15:00, 28 October 2019

2019-10-28T15:00:07Z

← Older revision		Revision as of 15:00, 28 October 2019
Line 201:		Line 201:
	----		----

	== Media queries ==		= Media queries =

	RWD tries to give your site’s visitors the most readable and attractive presentation possible. This usually means customizing the design to look its best at different browser widths.		RWD tries to give your site’s visitors the most readable and attractive presentation possible. This usually means customizing the design to look its best at different browser widths.
Line 207:		Line 207:
	Many designers think of three target screens related to the three most common web browsing devices: smartphones, tablets, and desktop computers.		Many designers think of three target screens related to the three most common web browsing devices: smartphones, tablets, and desktop computers.

	=== Strategies for Using Media Queries ===		== Strategies for Using Media Queries ==

	Media queries, which let you assign styles to a page based on the destination browser’s width and height.		Media queries, which let you assign styles to a page based on the destination browser’s width and height.
Line 215:		Line 215:
	Strategies:		Strategies:

	====Adjust columns:====		===Adjust columns:===
	Multiple side-by-side columns look great on a big monitor (and even on a tablet in landscape mode), but not so much on a phone. '''Bringing the page down to 2 or 3 columns'''		Multiple side-by-side columns look great on a big monitor (and even on a tablet in landscape mode), but not so much on a phone. '''Bringing the page down to 2 or 3 columns'''

	====Liquid design:====		===Liquid design:===
	'''widths of your content divs to <code>auto</code> or <code>100%</code>'''. This setting converts your page from a fixed-width design to a liquid, or flexible, design, that constantly adjusts itself to the size and orientation of the screen. However you can still use fixed-width for a desktop browser, such as setting the width of div to 900px, but a phone is unlikely to have that width, which means great part of the div will be off-screen.<br />		'''widths of your content divs to <code>auto</code> or <code>100%</code>'''. This setting converts your page from a fixed-width design to a liquid, or flexible, design, that constantly adjusts itself to the size and orientation of the screen. However you can still use fixed-width for a desktop browser, such as setting the width of div to 900px, but a phone is unlikely to have that width, which means great part of the div will be off-screen.<br />

	====Tighten up white space:====		===Tighten up white space:===

	in large screen ample space between content is desirable, but on small screens results into elements being rendered too far apart, like islands of content. Reduce <code>padding</code> and <code>margin</code>.		in large screen ample space between content is desirable, but on small screens results into elements being rendered too far apart, like islands of content. Reduce <code>padding</code> and <code>margin</code>.

	====Less contrasting font sizes:====		===Less contrasting font sizes:===
	differences between large size of headings and small body text, must be more moderate		differences between large size of headings and small body text, must be more moderate

	====Changing navigation menus:====		===Changing navigation menus:===
	long menus will break or disappear in small screens. CSS doesn't provide a good solution for this. The effective solution is to use JavaScript to dynamically change the navigation menu into an HTML drop-down menu (A Google search on "responsive menu js library" will yield douzens of possible options).		long menus will break or disappear in small screens. CSS doesn't provide a good solution for this. The effective solution is to use JavaScript to dynamically change the navigation menu into an HTML drop-down menu (A Google search on "responsive menu js library" will yield douzens of possible options).

	====Hide content for mobile:====		===Hide content for mobile:===
	Too much information on a phone can be overwhelming. You can use CSS to hide content that you think is '''superfluous''' for mobile users by setting the CSS <code>display</code> property to <code>none</code>.		Too much information on a phone can be overwhelming. You can use CSS to hide content that you think is '''superfluous''' for mobile users by setting the CSS <code>display</code> property to <code>none</code>.

	====Use background images:====		===Use background images:===
	A large image on a phone will be hard to display fully and take a long time to display. To avoid this problem create 2 versions of the same image a large and smaller (for mobile). In the CSS, if you place the '''image as background''' of a div, you can change that images, in 2 style sheet one for desktop another for mobile.		A large image on a phone will be hard to display fully and take a long time to display. To avoid this problem create 2 versions of the same image a large and smaller (for mobile). In the CSS, if you place the '''image as background''' of a div, you can change that images, in 2 style sheet one for desktop another for mobile.