Difference between revisions of "Responsive design"

From Publication Station
(improved summary)
Tag: visualeditor
 
(5 intermediate revisions by one other user not shown)
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:'''  
Line 28: Line 24:




= Setting Up a Web Page for RWD =
 
= Setting Up a Web Page to be responsive =




Line 73: Line 70:
----
----


= Flexible grids: Grid =
= Media queries =
CSS Grid Layout divides a page into major regions.
 
'''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.
 
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 ==
 
Media queries, which let you assign styles to a page based on the destination browser’s width and height.
 
3 target screens: * smart phone * tablet * laptop/desktop computers
 
Strategies:
 
===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'''
 
===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 />
 
===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>.
 
===Less contrasting font sizes:===
differences between large size of headings and small body text, must be more moderate
 
===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 &quot;responsive menu js library&quot; will yield douzens of possible options).
 
===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>.
 
===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.


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.
[https://codepen.io/PublicationStation/pen/Yeddzg Example in CodePen]


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


==Grid Basic==
The Grid, is a two-dimensional layout model to organize items, in rows and columns


To create a grid add the following to the the container:
===Media Query template===


* <code>display: grid;</code>
<pre>/* Extra Small Devices, Phones */
* <code>grid-template-columns: repeat(3, 1fr);</code>how many columns
@media only screen and (min-width : 480px) {
* <code>grid-template-rows: repeat(5, 1fr); </code> how many rows (optional)
        .logo { // liquid design
* <code>grid-gap: 10px;</code> the space between grid cells
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }


==Grid divisions==
}


* <code>grid-auto-rows: minmax(100px, auto);</code> defines the minimum height of the rows
/* Small Devices, Tablets */
* <code>grid-auto-columns: minmax(auto, 200px);</code>defines the maximum width of the columns
@media only screen and (min-width : 768px) {
        .logo { // liquid design
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }
}


But to be more precise we can determine how we want the grip to be divided
/* Medium Devices, Desktops */
* <code>grid-template-columns: repeat(3, 1fr);</code> divided into 3 columns with flex factor of 1
@media only screen and (min-width : 992px) {
* <code>grid-template-rows:repeat(auto);</code> divided into as many rows as necessary
    .logo { // fixed design
    width: 960px;
    height: 120px;
    background-image: url(images/large_logo.png)
    }
}
</pre>


==Element positions in Grid==
=== Mediaquery breakpoints===
Elements can be position in grid, using the division: where/how-many-division; Like for instance:
<source lang="css">
grid-column: 1 / 3;
grid-row: 1 / 4;
</source>


<source lang="css">
Breakpoints used by [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)
.container div:nth-of-type(1){ background:#ddf4504f;
                              grid-column: 1 / 3;
                              grid-row: 1 / 4;
                              }
</source>


==Grid align-items==
<pre>
<code>align-items:</code> Controls where the flex items, with different sizes sit, vertically, in relation to one another.
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) {
 
Possible values:
* stretch (default)
* center
* flex-end
* flex-start


==Reactive Grid==
}
'''What if we want to go from a multi-column grid, to a single column layout on small screens?'''


Rather than specifying the grid-template-columns with a fixed number of columns,
/* Small Devices, Tablets */ @media only screen and (min-width : 768px) {
we can keep it as auto-fill and say we want each column to be a minimum of XYZ.px


So that when the width of the columns in a 2, 3, 4 column layout become smaller than XYZ.px
}
it will move 1 column to a row


<code>
/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
</code>


}
</pre>


CSS media queries can do more than just check the width of a browser. The current media query standard states that you can check for height, orientation (whether a visitor holds a mobile phone in portrait or landscape mode), and even whether a device uses a color or monochrome screen. There are a few other browser characteristics you can check with media queries, but not all browsers support the queries. For more on media queries see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax.


==Grid Links==
=== From default design to media-queries ===
* https://gridbyexample.com/examples/


Don’t need to create three separate sets of styles.


Flexible grids create a liquid layout, in which the page’s overall width resizes to fit different width screens.
You can start with a '''default design'''; that is, '''a design that works without media queries, for either mobile or desktop, choose what approach you prefer'''.
'''Then create media-query styles to override the default styles and reformat the page for the particular screen width.'''


In most cases implementing a flexible grid, can be created by setting the:


* '''parent container box (div)''':
----
** <code>width</code> to <code>100%</code>.
** <code>max-width</code> to a certain amount of pixels, so that the page isn’t absurdly wide on large desktop monitors.
* Individual columns
* <code>width</code>: percentage-based


= 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 206: Line 232:
----
----


= Media queries =
= Flexible grids: Grid =
CSS Grid Layout divides a page into major regions.


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


Many designers think of three target screens related to the three most common web browsing devices: smartphones, tablets, and desktop computers.
https://codepen.io/PublicationStation/pen/VwwzvbO


== Strategies for Using Media Queries ==
==Grid Basic==
The Grid, is a two-dimensional layout model to organize items, in rows and columns


Media queries, which let you assign styles to a page based on the destination browser’s width and height.
To create a grid add the following to the the container:


3 target screens: * smart phone * tablet * laptop/desktop computers
* <code>display: grid;</code>
* <code>grid-template-columns: repeat(3, 1fr);</code>how many columns
* <code>grid-template-rows: repeat(5, 1fr); </code> how many rows (optional)
* <code>grid-gap: 10px;</code> the space between grid cells


Strategies:
==Grid divisions==


===Adjust columns:===
* <code>grid-auto-rows: minmax(100px, auto);</code> defines the minimum height of the rows
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'''
* <code>grid-auto-columns: minmax(auto, 200px);</code>defines the maximum width of the columns


===Liquid design:===
But to be more precise we can determine how we want the grip to be divided
'''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 />
* <code>grid-template-columns: repeat(3, 1fr);</code> divided into 3 columns with flex factor of 1
* <code>grid-template-rows:repeat(auto);</code> divided into as many rows as necessary


===Tighten up white space:===
==Element positions in Grid==
Elements can be position in grid, using the division: where/how-many-division; Like for instance:
<source lang="css">
grid-column: 1 / 3;
grid-row: 1 / 4;
</source>


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>.
<source lang="css">
.container div:nth-of-type(1){ background:#ddf4504f;
                              grid-column: 1 / 3;
                              grid-row: 1 / 4;
                              }
</source>


===Less contrasting font sizes:===
==Grid align-items==
differences between large size of headings and small body text, must be more moderate
<code>align-items:</code> Controls where the flex items, with different sizes sit, vertically, in relation to one another.
 
Possible values:
* stretch (default)
* center
* flex-end
* flex-start


===Changing navigation menus:===
==Reactive Grid==
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 &quot;responsive menu js library&quot; will yield douzens of possible options).
'''What if we want to go from a multi-column grid, to a single column layout on small screens?'''


===Hide content for mobile:===
Rather than specifying the grid-template-columns with a fixed number of columns,
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>.  
we can keep it as auto-fill and say we want each column to be a minimum of XYZ.px


===Use background images:===
So that when the width of the columns in a 2, 3, 4 column layout become smaller than XYZ.px
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.
it will move 1 column to a row


[https://codepen.io/PublicationStation/pen/Yeddzg Example in CodePen]
<code>
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
</code>


<pre>/* Extra Small Devices, Phones */  
'''See example: https://codepen.io/PublicationStation/pen/OJJjMyg'''
@media only screen and (min-width : 480px) {
        .logo { // liquid design
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }


}
==Grid Links==
* https://gridbyexample.com/examples/


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
        .logo { // liquid design
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }
}


/* Medium Devices, Desktops */
Flexible grids create a liquid layout, in which the page’s overall width resizes to fit different width screens.
@media only screen and (min-width : 992px) {
    .logo { // fixed design
    width: 960px;
    height: 120px;
    background-image: url(images/large_logo.png)
    }
}
</pre>


=== Mediaquery breakpoints===
In most cases implementing a flexible grid, can be created by setting the:
 
Breakpoints used by [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)
 
<pre>
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) {
 
}
 
/* Small Devices, Tablets */ @media only screen and (min-width : 768px) {
 
}
 
/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {
 
}
</pre>
 
CSS media queries can do more than just check the width of a browser. The current media query standard states that you can check for height, orientation (whether a visitor holds a mobile phone in portrait or landscape mode), and even whether a device uses a color or monochrome screen. There are a few other browser characteristics you can check with media queries, but not all browsers support the queries. For more on media queries see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax.
 
=== From default design to media-queries ===
 
Don’t need to create three separate sets of styles.
 
You can start with a '''default design'''; that is, '''a design that works without media queries, for either mobile or desktop, choose what approach you prefer'''.
'''Then create media-query styles to override the default styles and reformat the page for the particular screen width.'''


* '''parent container box (div)''':
** <code>width</code> to <code>100%</code>.
** <code>max-width</code> to a certain amount of pixels, so that the page isn’t absurdly wide on large desktop monitors.
* Individual columns
* <code>width</code>: percentage-based


----
----

Latest revision as of 07:27, 10 October 2023

A simple approach that lets you build a single site that adapts to different device widths

Responsive Webdesign: 3 basic techniques

Flexible layout: Don't use pixels for sizes or positioning.

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: 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:

lets your images and videos scale to fit the appropriate screen real estate…big photos for big monitors, smaller photos for small screens


References

Sawyer MacFarland. 2015. "CSS: The Missing Manual". 4th edition link

Interneting is Hard on Responsive Design



Setting Up a Web Page to be responsive

meta tag: no zoom out

Phone browsers: don’t just display the page at 100 percent. Instead, phone browsers zoom out to fit the page on screen.

The exact amount they zoom out varies from phone to phone. Safari on the iPhone, for example, acts like the screen is really 980 pixels wide, so it shrinks the page down to fit within 980 pixels.

This behavior of mobile browsers works well for the majority of sites, but not so well with a responsive web design. Because responsive sites are intended to look good on phones, you don’t want the display to zoom out.

there’s a simple way to override this behavior of mobile browsers.

Simply add the following code to the <head>

<meta name="viewport" content="width=device-width">

HTML meta tags provide extra information about the page’s content and can give browsers extra instructions about how to display the page. In this case, the viewport refers to the browser screen, and the content attribute sets the width of the browser to the width of the phone


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

Desktop first

Design your site with the desktop in mind. Throw in all the columns you want. Polish and finalize the design so it looks great on a large monitor. This becomes your base CSS design.

This becomes the base, the default.

Then you add media queries for tablets and phones, which tweak the base desktop design, by removing columns, making headline text smaller, reducing borders and padding, etc.


Mobile first:

its the inverse of Desktop first. You designing first for mobile browsers.

The basic small-screen styles is the default CSS.

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

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.

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

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

3 target screens: * smart phone * tablet * laptop/desktop computers

Strategies:

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

Liquid design:

widths of your content divs to auto or 100%. 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.

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 padding and margin.

Less contrasting font sizes:

differences between large size of headings and small body text, must be more moderate

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

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 display property to none.

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.

Example in CodePen


Media Query template

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
        .logo { // liquid design 
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
        .logo { // liquid design 
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .logo { // fixed design 
    width: 960px;
    height: 120px;
    background-image: url(images/large_logo.png)
    }
}

Mediaquery breakpoints

Breakpoints used by [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints) 

/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */ @media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {

}

CSS media queries can do more than just check the width of a browser. The current media query standard states that you can check for height, orientation (whether a visitor holds a mobile phone in portrait or landscape mode), and even whether a device uses a color or monochrome screen. There are a few other browser characteristics you can check with media queries, but not all browsers support the queries. For more on media queries see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax.

From default design to media-queries

Don’t need to create three separate sets of styles.

You can start with a default design; that is, a design that works without media queries, for either mobile or desktop, choose what approach you prefer.

Then create media-query styles to override the default styles and reformat the page for the particular screen width.


Flexible grids: Flexbox

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


Flexbox Intro

The flexbox, is a one-dimensional layout model to organize items, in one dimension, either as a row or as a column. (For 2 dimension layout check the property display: grid)

Based on: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox Basics

Follow the example in https://codepen.io/PublicationStation/pen/NWWgovQ

Flexbox works with a set of items in a container, where the container has display: flex

  • container: groups flex items together and define how they’re positioned.
  • flex items: main purpose are to let their container know how many things it needs to position. Flex items can be manipulated individually, but for the most part, it’s up to the container to determine their layout.

We can indicate if we want to organize the items as rows or columns; with flex-direction: column; or flex-direction: row;

Note however that when setting flex-direction: row;

  • all items will appear in 1 row.
  • all items will be resized to fit the screen width.

To have more control over how many items appear in 1 row and the width of each item, we can:

  • let the flex items wrap onto multiple row flex-wrap: wrap;
    • flex-wrap: no-wrap; will force them onto a single row.
  • set a minimum with for each item flex: 300px ;


Flexbox align-items

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-items: Controls where the flex items, with different sizes sit, vertically, in relation to one another.

commons values:

  • stretch
  • center
  • start
  • end

Flexbox other options

flex-basis: specifies the initial main size of a flex item.

order: to changes the order of individual elements


Flexbox tutorials


Flexible grids: Grid

CSS Grid Layout divides a page into major regions.

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.

https://codepen.io/PublicationStation/pen/VwwzvbO

Grid Basic

The Grid, is a two-dimensional layout model to organize items, in rows and columns

To create a grid add the following to the the container:

  • display: grid;
  • grid-template-columns: repeat(3, 1fr);how many columns
  • grid-template-rows: repeat(5, 1fr); how many rows (optional)
  • grid-gap: 10px; the space between grid cells

Grid divisions

  • grid-auto-rows: minmax(100px, auto); defines the minimum height of the rows
  • grid-auto-columns: minmax(auto, 200px);defines the maximum width of the columns

But to be more precise we can determine how we want the grip to be divided

  • grid-template-columns: repeat(3, 1fr); divided into 3 columns with flex factor of 1
  • grid-template-rows:repeat(auto); divided into as many rows as necessary

Element positions in Grid

Elements can be position in grid, using the division: where/how-many-division; Like for instance: 

grid-column: 1 / 3;
grid-row: 1 / 4;

.container div:nth-of-type(1){ background:#ddf4504f; 
                               grid-column: 1 / 3;
                               grid-row: 1 / 4;
                              }

Grid align-items

align-items: Controls where the flex items, with different sizes sit, vertically, in relation to one another.

Possible values:

  • stretch (default)
  • center
  • flex-end
  • flex-start

Reactive Grid

What if we want to go from a multi-column grid, to a single column layout on small screens?

Rather than specifying the grid-template-columns with a fixed number of columns, we can keep it as auto-fill and say we want each column to be a minimum of XYZ.px

So that when the width of the columns in a 2, 3, 4 column layout become smaller than XYZ.px it will move 1 column to a row

grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

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

Grid Links


Flexible grids create a liquid layout, in which the page’s overall width resizes to fit different width screens.

In most cases implementing a flexible grid, can be created by setting the:

  • parent container box (div):
    • width to 100%.
    • max-width to a certain amount of pixels, so that the page isn’t absurdly wide on large desktop monitors.
  • Individual columns
  • width: percentage-based

Fluid images

In addition to placing images as background, as suggested in before Strategies for Using Media Queries, it is also possible to set fluid <img> by placing the image inside a div and making its max-width: 100%. Without any other width or height instructions. The image will resize as its parent div resizes.

Code pen example

See also Interneting is Hard on responsive images

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Responsive_design&oldid=9802’