RWD2 Assignment

Breakpoints

Breakpoints are used to make fluid layouts for different viewport sizes. They are media queries that input different dimensions that you want for the webpage. Many popular devices do not share the same dimensions. So to choose breakpoints we should consider the content and layout of the page, not neccessarily the dimensions of a certain device. In the example below I show this by changing the color of the background.

For example:

body {background-color: lightblue;
}
@media screen and (min-width: 480px) {
body {
background-color: lightpink;
}
p { width: 700px; }
}

Progressive enhancements

Progressive enhancement basically means that you should have HTML that is functional and meaningful to start of with as a good foundation, then adding CSS and javascript. We should do this for the best possible accessibility. Even for people that use assistive devices and technology. The example shows a standard HTML-button and one styled with css.

For example:


HTML-button:

<button type="button">Click me!</button>

Css-button:
.example-btn {
background-color: lightblue;
border: none;
border-radius: 5px;
color: white;
padding: 15px 32px;
text-align: center; }