CSS

Responsive Web Design

When the world wide web was made, did the user only go on the browser on a computer. The computer had a standard screen size but today there are different screen sizes. You can go on a browser on your phone, tablet/iPad or our computer which also have different screen sizes.
The websites mostly consisted of text - and not to much - but later was there images.
Today can you almost do anything on the web. On a website are there, text, images, animations and so one, but it shoiuls not only work on the computer. It should work everywhere, on every device, on the web.
The szies of the screens are..

RWD - What is it?

Responsive Web Design makes sure that the desgin works on every device and every screen size, no matter how large or small, mobile or desktop.
Responsive means to react quickly to any change, which is what our website should do.
The webdesign is all about flexible layouts. The components are:

Websites

The meta viewport tag

The viewport is the visible area of a website, which varies with the device and size of the browser window.
The tag gives the browser instructions on how to controle the page's dimensions and scalling. Therefore you must inset the viewport tag. It should be places in the head tag on all pages.

<meta name="viewport" content="width=device-width;intial-scale=1.0">
Example 2.7.1

The viewport meta tag allows the website to be size properly and to pick up any qualifying media queries
The combination of width=device-width and intial-scale=1 provide the intial size and zoom commenonly required

Flexible images and media

When you design and develop website, you often include a number of images. But these images have a fixed size, therefore they will not scale when the screen are smallere. That look unprofessional, and we dont want that.
Therefore we use max-width:100% on our pages.

img{ 
max-width:100%
}
Example 2.7.2

Image that are not responsive


Example 2.7.3

Image that are responsive

Example 2.7.4

Flexible grids

Responsive sites do not just change there laypit between breakpoints, they are built on flexible grids.
By using a flexible grid, you only neeed to add in a breakpoint and change the design at the point where the content starts to look bad.
If the line length become unreadably long as the screen size increases or a button is to small to push on the phone.
You can here use the CSS flexbox module which is

display:flex

Flexible grids combine the use of relative values and a media query-based grid system.


.gallery{ 
display:flex;
flex-direction:column;
}
Example 2.7.5

flex-direction

Defines a flex container inline og block

flex-direction: row | row-reverse | column | column-reverse;
Example 2.7.6

flex-wrap

Defines the direction flex intem are placed in the flex container

flex-wrap: nowrap | wrap | wrap-reverse;
Example 2.7.7

justify-content

Try to flex the itmes onto one line

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
Example 2.7.8

Defines the alignment along the main axis

Read more about flexbox here

CSS grids

CSS grids is a layout of horizontal and vertical lines which create a pattern what we can line up our design elements.
Grids will often have columns, rows and gaps between each row and column.
If you want to make a grids design you can write

display:grid

This make the grids layout, but if we want any grids to the design must we add columns and the sizes on them. Let's add three 200-pixel columns.

.container { 
display: grid;
}
Example 2.7.9

grid-template-columns

.container { 
display: grid;
grid-template-columns: 200px 200px 200px;
}
Example 2.7.10
Read more about CSS grids here

Media queries

Now that we have the meta viewport, flexible images and grids. We can talk about media queries.
Media queries provide the ability to spefify different styles for individual browser and device circumstances. There are a couple of ways to do that.
You can use the @media rule inside your style sheet.

@media screen and (min-width : 736px){ 
...
}
Example 2.7.10
Visuel example of 2.7.10

The media queries tests to see if the current page is being displayed as a screen media, and the viewport is a least 736px width.
A good way to ensure happy users is to use different sizes of media queries, so the design can fit all devices.
The queries is often placed on the bottom of the CSS document, below the general style instructions.
It is important to remember, that the other rules in the stylesheet still apply, unless we overule them.

Mobile first

Mobile-first design is a design philosophy, that has focus on mobile devices. Designing and prototyping are focusing on mobile. Therefore you will not design for a desktop at first, but instead the mobile and then make the design bigger and bigger, så it fits bigger screens.
Many like to design this way, because of the nu,ber of smartphone users worldwide, but it is important to thing about, what the users are going to use the website for. are they using it to book a holiday are they more likly to use the computer, but are they reading something are they more likely to use the phone. but it is importent to understand the users behavior, before designing.
When design for mobile-first remember:

Responsive navigation

See the Pen Mini nav by Dominoeffekten (@dominoeffekten) on CodePen.

Example 2.7.11