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..
- iPhone 4 - 960 x 640 pixels
- iPad 2 - 1024 x 768 pixels
- 13" Macbook - 1280 x 800 pixels
- 27" Mac - 2560 x 1440 pixels
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:
- The meta viewport tag
- Flexible images and media
- Flexible grids
- Media queries
- Apple has a menu which is user friendly
- Dribbble has removed several items on the mobile. They have removed the menu and made a hamburger menu
- Github changes there layout on the mobile. They go from two-column design to a single-column design
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.
The viewport meta tag allows the website to be size properly and to pick up any qualifying media queries
The combination of
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.
Image that are not responsive
Image that are responsive
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
Flexible grids combine the use of relative values and a media query-based grid system.
Defines a flex container inline og block
Defines the direction flex intem are placed in the flex container
Try to flex the itmes onto one line
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | rightRead more about flexbox here
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
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.
grid-template-columnsRead more about CSS grids here
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.
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 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:
- Content first
The user is only looking for content, so dont give them clutter or destract them
- Make it easy to navigate
it is a good idea to make a hamburger menu, because they are fast, and they know how to use them.
- KISS (keep it simple, stupid)
Never burden your users with to many elements of ads, pop-ups or other content they don not want to see. The screen is to small already. Do not make it smallere