Web pages can be laid out with interesting arrangements and respond to different sized screens using a variety of techniques. The HTML can be formed into a grid structure, and the CSS can use position, z-index, and float properties, as well as media queries, to accomplish many different responsive layouts.
By default, elements on a web page stack vertically according to their
normal flow in the document. In order to achieve more interesting
layouts, we can use the CSS position property to specify a
different positioning technique for the element, along with
the top/bottom and left/right properties to specify
the element's distances from the edges of their context.
The values of the position property are: static, relative, fixed, and absolute.
Go back to the Unit 5 review if you need more study of the position property.
When the position of elements is adjusting with the position and
related CSS properties, you may introduce a layered effect.
By default, HTML tags that are coded later in the document become elements
on top of the earlier tags. Positioned elements will also appear
on top of non-positioned elements.
The CSS z-index property allows you to re-stack positioned elements.
There is no unit on z-index values, as they represent order not measurement.
In general, an element with z-index:10; will be stacked on top
of elements without z-index or with any z-index less than 10. If you are experiencing
any strange stacking behavior, you may need to study more detail about what can trigger a new
stacking
context.
You should be able to apply the z-index property to positioned elements to re-order their stack.
Designing and appealing and usable web page can be a challenge with so many different-sized devices. The first step in doing so is to identify the range of pixel-widths you are willing to support.
Some common screen resolutions include:
| 3840x2160 | 4k or "Ultra HD" |
| 1920x1080 | 1080p or "Full HD" |
| 1366x768 | Popular for Widescreen Monitors 15- to 19- inches |
| 1024x768 | Small Monitor or 10-inch Tablet (XGA Standard) |
| 720x1280 | Popular 5-inch Smart Phone (720p in Portrait Orientation) |
| 480x800 | Small Smart Phone |
For an existing web site, new designs should consider an analysis of current traffic. That analysis should illustrate what sizes are most common for current visitors through a majority of use, and it may also imply that some sizes are not being served well as a minority of use.
The most obvious issue with mobile devices is the small size of the screen. It can be hard to read a traditional multi-column desktop site, so mobile-friendly design is typically a vertical stack of the most important elements.
Another layout change may be the creation of a more compact menu, perhaps hidden behind an icon and activated by JavaScript to respond to touch events.
It is especially important to consider the readability of a web page on small screens. The fonts may need to be changed, re-sized, or adjustments.
Buttons, links, and any other clickable elements must be large enough for touch events and spaced apart for less risk of mis-click.
Other adjustments may also be appropriate, depending on the content and the purpose of the page.
Analyze a web page for its mobile-friendliness, including using Google's Mobile-Friendly tool to ensure users can experience minimum navigation requirements.
Media queries allow different CSS to be applied to a document based on the medium used to access th page. In terms of responsive designs, media queries that use max-width or min-width requirements will be useful.
One way to apply media queries is by nesting CSS in them directly within a CSS file:
@media (max-width: 1000px){
.grid-column{
width: 100%;
float: none;
}
}
The code above might appear within the CSS file for a grid system, and it specifies that any screens using less than 1000px for width should show all grid columns as full-width, and stacked vertically (presumably, no longer floated horizontally).
Another way to apply media queries is through the media attribute
on the HTML link tag. By separating your responsive
styles into an entirely separate CSS file, you can keep your code more organized.
<link rel="stylesheet" href="responsive.css" media="(min-width:1200px)">
The code above will only load the responsive.css file when the screen is at least 1200px wide. This can help improve performance on mobile devices by not bothering to load extra desktop styles until needed.
You should be able to selectively apply CSS using media queries to detect pixel-width.
Float-based grids help arrange layouts horizontally. It starts with a row, of a specified size. Size 12 is common, since that can be used for a variety of layouts. In each row, columns are used in a variety of sizes, as long as all the columns in a row add up to the size of the whole row.
For example, the code below represents the 3-column layout of an entire page. The row is size 12. The three columns are sized 1+8+3=12. This might be a good layout for a page that needs a small social media sharing dock on the left, a navigation sidebar on the right, and a main content area in the middle.
<body class="gridrow-12">
<aside class="gridcol-1"></aside>
<article class="gridcol-8"></article>
<nav class="gridcol-3"></nav>
</body>
If your semantic elements are not providing an adequate grid structure,
you can wrap your content in div tags:
<div class="gridrow-12">
<div class="gridcol-1"></div>
<div class="gridcol-8"></div>
<div class="gridcol-3"></div>
</div>
Grids can be created in CSS by giving the grid-row a fixed size or a 100% width. Then, the grid-columns can also have fixed or percent-based widths. To respond to mobile sizes, the grid can simply set all of its columns to be 100% width and stack vertically.
Grids may experience trouble with the "float collapse" problem,
where the container element (the row) collapses when all of its
children (the columns) are floated. This can be solved by using the
CSS declaration overflow: hidden; inside the row class selector.
You should be able to use a grid system by applying the CSS classes to your HTML.