Designing for Desktop, Mobile and Tablet
Working through this tutorial on W3Schools I was able to build up knowledge on how to create responsive web layouts for different size devices.
Firstly, when setting up CSS for responsive design, the <meta> tag will send instructions to the browser about how to display and scale the page. The width=device-width sets the width of the page to the same of the device it is loaded on. initial-scale=1.0 dictates the zoom level the page will be at when first loaded by the user.
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
/* MINIFISED */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
In this desktop version of the site, the code is very simple. It uses the grid view of a 12 column span across the page to map where the elements will be. Each column is given a width percentage as seen i the code above. This layout will not resize accordingly if the size of the screen is made smaller.
@media only screen and (min-width: 600px) and (max-device-width: 1024px) {
/* For tablets: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
...
The code used for tablets has an added media query for the page to resize if the minimum width of the screen is 600px and the maximum is 1024px. This is also called adding a breakpoint into code. There isn’t a limit to how many breakpoints there can be in a piece of code but in this project I have included 2, one for tablet and one for mobile. When the page is viewed on a tablet that matches these dimensions, the layout is changed slightly so the information bar is now near the bottom of the screen as opposed to on the far right.
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
The second breakpoint I have added in my code is for use on mobile devices. This site will now be able to be viewed on all three platforms and will resize accordingly.
Bibliography
W3schools.com. (2017). Responsive Web Design Introduction. [online] Available at: https://www.w3schools.com/css/css_rwd_intro.asp [Accessed 3 Oct. 2017].