Making the Learning Journal page responsive
This week's lab tutorial goes through the steps to make your Learning Journal into a responsive web page. You will be learning about responsive layout, using a CSS3 grid template, and media queries.
By the end of lab tutorial 5 you should have made a single column Learning Journal page and have experimented with CSS styling for the text elements on the page. This week's example Learning Journal is styled as -
- a single column page with a vertical menu for smaller screens - mobile phones and tablets in portrait orientation
- a two-column layout for wider screens - tablets in landscape orientation
- A three-column layout for the widest screens
This week's tutorial may require you to make some adjustments to your HTML and CSS, in order to create the elements needed for the two and three-column layout.
From this tutorial onwards, you will be trying out different styles, and may accept or reject them. You should keep backup copies of your work so that you can rollback and start again. Keep validating your html and css as you go - it's much harder to sort ten problems than one problem.
There are very simple version of media queries and grid layouts that you might want to look at first. The style is in the head section of the pages:
- simple media query. Resize the browser window, and watch the background colour change between orange and blue.
- simple grid layout.. Resize the browser window, and watch the content rearrange, and the main section change from green to yellow.
Use the browser tools to inspect these gaudy pages.
You should also use your browser tools to help you with your development, including allowing a hard-refresh when you make changes to your css.
In order to make your Learning Journal responsive follow these steps -
STEP 1: Sketch wireframes of different width screen layouts
Your starting point is your Learning Journal page index.html which by now should have at least 4 or 5 weekly posts.
Before diving in to style the layout for a web page it's a good idea to sketch it, so that you know how the page content and layout elements will work together. Create simple pen and paper wireframes, like the examples in this PDF. I've made 3 wireframes for different screen widths - single column for a mobile, a 2-column layout for tablet and a 3-column layout for wider screens.
In the single column design has the menu and all other elements are stacked vertically, in the order in which they are structured in the HTML. In the 2 and 3 column versions the main page content areas will be laid out in columns, using a CSS grid.
Go to top of page
STEP 2: Add the viewport meta tag to the <head> of the document.
You can skip Step 2 if you have already added this line to all your HTML web pages. In order to make mobile browsers behave like desktop browsers and display the web page full size add the highlighted code to the <head> of all your web pages -
<head>
<meta charset="utf-8">
<title>Learning Journal - CI435 Introduction to Web Development</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="normalize.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
If you have a smartphone with you look at your web page in a mobile browser before and after you add this line, to see the different way the page is displayed.
Go to top of page
STEP 3: Adjust HTML if necessary
The tutorial shows how to lay out the following elements in the example Learning Journal. If you do not have these elements in your HTML you will either have to adjust the HTML, or customise the grid.
<header class="banner">
<nav class="menu">
<nav>
<table>
<main>
<aside>
<footer>
Check your HTML to make sure that you have the same structure as index.html in the example Learning Journal and adjust it if necessary.
STEP 4: Reorganise sections in style sheet: base styles for all screen widths
Take a look at the stylesheet for the example Learning Journal to see how the CSS rules are laid out -
- First are the Base Styles - these apply to all versions of the web page, whatever the width of the viewport in which it is displayed.
- Next are the Grid Layout rules - these set up the structure of a single, 2- and 3-column grid for the Learning Journal. There are two media queries that apply the grid layout when devices with different width screens access the web page.
- Next are the CSS rules for the small screen, single column page with a vertical menu.
- Next there is a media query targeting wider screens and CSS rules for a horizontal menu.
Go to top of page
STEP 5: Set up the responsive grid
You are going to create the grid layout shown in my wireframes using the grid-area property for each of the HTML elements listed in Step 3.
- In your stylesheet name the content areas on the grid using the
grid-area property -
.banner {grid-area: banner;}
.menu {grid-area: menu;}
nav {grid-area: nav;}
table {grid-area: table;}
main {grid-area: main;}
aside {grid-area: aside;}
footer {grid-area: footer;}
This will not create any layout, but the grid-area names will be used to do so in the next steps.
- Next copy the following CSS for the mobile layout into your stylesheet. This will layout the elements in a single column inside the wrapper element -
#wrapper {
display: grid;
grid-gap: 20px;
grid-template-areas:
"banner"
"menu"
"nav"
"table"
"main"
"aside"
"footer";
}
- Next copy this media query into the stylesheet: it sets up a 2-column layout for tablet width screens -
@media (min-width: 50em) {
#wrapper {
grid-template-columns: 3fr 6fr;
grid-template-areas:
"banner banner"
"menu menu"
"nav table"
"aside main"
"footer footer";
}
}
- Next copy this media query into the stylesheet: it sets up a 3-column layout for the widest screens -
@media (min-width: 60em) {
#wrapper {
grid-template-columns: 3fr 5fr 3fr;
grid-template-areas:
"banner banner banner"
"menu menu menu"
"nav table aside"
"nav main aside"
"footer footer footer";
}
}
The HTML and CSS for this layout are available as a template that you can download and use.
I took the example of how to create this layout from MDN 'A responsive layout with 1 to 3 fluid columns using grid-template-areas'.
See how the grid is applied to my example responsive Learning Journal - test how it works in different viewport widths.
Go to top of page
STEP 6: Style small screen layout - mobile first approach
The example Learning Journal has been styled using a 'mobile first' approach. The following CSS rules have been used to style a a vertical menu -
.menu ul
{
margin: 0;
padding: 0;
list-style: none;
}
.menu li
{
display: block; /*display in a vertical column*/
margin: 0;
}
.menu a
{
display: block;
padding: .7em 1.25em .7em 1.25em;
color: #fff;
text-decoration: none;
border-bottom: 1px solid gray;
}
.menu a:link { color: #fff; }
.menu a:visited { color: #DFDFDF; }
.menu a:focus { color: #C00; }
.menu a:hover { color: #DFDFDF; }
.menu a:active { color: #C00; }
Go to top of page
STEP 7: Media queries - styles for different screen widths
Use browser tools or or right-click and select View Source to see the css in the head of the html. As you can see, the default rule is that the screen is aqua (mobile-first). If the screen is wider than 650 px, background is orange. All rules for the wider screen are contained in the @media brackets. There could be mulitple rules in these brackets, to apply to wider screens only. What happens to elements where there is no rule in the @media brackets? Experiment to find out.
/*this is the basic rule - mobile first*/
body{
background-color: aqua;
}
/*These further rules are only applied when the screen is wider.
The wide rules are held within another set of brackets*/
@media screen and (min-width: 650px) {
body {
background-color: orange;
color:white}
}
Using the examples supplied, add a media query to your stylesheet.
The following media query styles a horizontal menu for wider screen devices using the display:inline property -
@media (min-width: 50em)
{
.banner { padding: 0 0 0 3em; }
/* Menu navigation - inline layout for wider screens */
.menu { padding: 1em 0 1em 3em; }
.menu li
{
display: inline;
margin: 0 1em 0 0;
}
.menu a
{
display: inline;
padding: 0;
border-bottom: 0;
}
}
Go to top of page
STEP 8: Hiding elements - display:none
I have hidden the timetable on small width mobiles (portrait orientation), using the following media query and CSS -
@media (max-width: 35em) {
table {
display:none;
}
}
STEP 9: Make images flexible
In order that the size of images will adapt to the width of the viewport they should be made flexible -
- Delete all
width and height attributes from the <img> elements in the HTML document.
- Add this rule to the style sheet -
img { max-width: 100%; }
The image will have a max-width of 100% of its parent element - i.e. the element it is nested within. When the web page is resized in the viewport the image will reduce in size according to the width of its parent. It is not necessary to include the height property as when the image width changes, the height will also change proportionally, keeping the same aspect ratio (i.e. ratio of height to width).
Images used in responsive web pages should be the largest/highest resolution they will be displayed in the desktop version of the page - but no larger. Don't use larger than necessary, high resolution images; edit them in an image editor (e.g. Photoshop) to be the required size.
STEP 10: Testing responsive web pages
From this point on, when you view your web page, you should test it on a desktop computer browser and on a smartphone mobile browser. If you have access to a tablet test on this device as well.
If you have not had time to complete the tutorial please carry on and finish it in your own time. If you have any questions email Jennie Harding.
Go to top of page