Responsive Code: Web Platforms
Quick Tip!
While working on web design, keep responsiveness in mind throughout the process and remember to test frequently.
Helpful Staff for this Topic
Have you ever used a website on your phone’s browser, and noticed how difficult it was to navigate (as compared to on a laptop)? Situations like this highlight the importance of responsive websites.
Responsive web design is a set of practices that ensure a website can adjust to various screens and render correctly on all of them. For example, decreasing image and font sizes for smaller screens, or, regulating paragraph width for larger screens.
Listed below are some Digital Corps recommended tools and elements for responsive web design, as well as, practices to be cautious of.
The Digital Corps’ Recommendations
Containers
A container is used to encapsulate other elements often by surrounding them with a <div> element.
<main class="container">
<article></article>
<aside></aside>
</main>Containers can be used to group elements semantically (eg. footers, headers, etc.) or cosmetically (eg. adding a border, padding, etc.) Note that, if the container is used purely for styling, it should be a plain <div> tag.
The CSS below is an example of how containers can be used to build responsive layouts. The max-width is set to make sure the container’s width does not exceed a certain size (800px), and the side margins are used to center it horizontally. This pattern makes the page both flexible and proportional, with all the content centered for bigger monitors.
.container {
width:95%;
max-width:800px;
margin-left:auto;
margin-right:auto;
}Media Queries
In CSS, you can use Media Queries to assign different style sheets to different screen sizes. By defining different media queries, a website can automatically adjust its layout depending on the window size.
//With CSS
.heading {
margin-right: 20px;
}
@media screen and (max-width: 1000px){
.heading {
margin-right: 10px;
}
}
//With the Scss (Sass), media queries can be used inside a selector
.heading {
margin-right: 20px;
@media screen and (max-width: 1000px) {
margin-right: 10px;
}
}As shown in the example above, the right margin value changes depending on the width of your window—20px for screens wider than 1000px, and 10px for screens 1000px wide or less.
Here is another example, with Sass, where media queries can be used to change the display of some menu items from horizontal to vertical:
.menu {
flex-direction: row;
@media screen and (max-width: 500px) {
flex-direction: column;
}
} Determining Breakpoints
It is important to remember that setting breakpoints depends on both the device’s screen size and the content. Each section of a website will have different size requirements in order to look its best, so a responsive website needs multiple media queries occurring at a variety of breakpoints.
To help determine the breakpoint measurements, you can use the toggle device toolbar to simulate different screen sizes. Using this feature to resize your website can help find any issues (breakpoints) and determine which CSS properties need to change.
Variable Values
If you define a CSS variable, you can use it repeatedly throughout your style sheet. This also makes it easier to go back and change values without needing to go through the entire file.
With Sass, the most commonly used styling language at the Digital Corps, declaring a variable is simple. In the example below, the variable headerCollapsedBreakpoint is defined and used in a media query to indicate when a header menu would switch to a hamburger menu.
$headerCollapsedBreakpoint: 768px;
@media (min-width: $headerCollapsedBreakpoint) {
//Here you could adjust
// the width of the logo,
// the visibility of a subnav,
// the visibility of the hamburger menu button,
// etc.
}You can use variables inside media queries to change and update their values throughout a stylesheet.
Things to Be Careful of When Using
Modals
Modals are dialog boxes that pop up on your window and typically require you to complete an action before allowing you to continue with the page you were previously on.
Many responsive web designs avoid modals. They may display correctly on computer screens, but on mobile and smaller screens, parts of the modal window become inaccessible. As a result, the user would not be able to close or use the modal, preventing them from accessing the web page they need.
Absolute and Fixed Positioning
When an element is absolute or fixed positioned, it is removed from the layout flow and will remain in the same position regardless of the window size.
Additionally, if one element on your page changes and affects positioned elements (overlaps, etc.), you would need to go back and fix the location of these elements.
Therefore, positioning is considered very rigid, and it makes it difficult to write layouts that are responsive and accessible across various devices. It can be useful in some cases, but generally, it is best to avoid it.
Fixed Dimensions
Fixed values are similar to absolute positioning because they will stay the same regardless of window size. Elements with fixed dimensions are likely to look good on your screen, but not on other devices or window sizes.
Making an element the same size on a phone browser as it would be on a computer monitor will not make for a good user experience, so be mindful of more responsive methods for sizing elements.
Responsive Images
SVGs for Icons
When adding something as small as an icon or logo to your website, it is best to use an SVG. Not only do they require less storage, and render faster than other file formats—such as png—SVGs are also responsive to any screen size and resolution.
As a member of the Digital Corps, it is very helpful to become familiar with SVGs. There are many helpful tutorials with more in-depth explanations and steps that you can follow to create your own SVG. If you have any questions, you can also ask members of the Design Team.
Image Dimensions
If you need to use a photo or graphic rather than a vector icon SVG, pay close attention to the dimensions of that image, and how it responds to different screen sizes.
At the Corps, it is advised to use max-height, min-height, max-width, and min-width for dimensions, in combination with Media Queries, to make sure that the image can scale up and down depending on the screen.
Experiment With Your Screen
Always test your work consistently throughout development. Adjust your browser’s width and height, make sure nothing breaks, and make sure that all the elements are responsive to different window sizes.
There are also browser tools, such as the Chrome Mobile View tool and the toggle device toolbar, to help you determine breakpoints and test how your website would behave on different devices.
Nevertheless, it is still important to test your website on multiple devices during the UX testing phase.
Know Your Limits
There are many other helpful features of CSS and related libraries that have not been mentioned in this article, and the Corps encourages you to explore them! You can begin with this responsive layouts tutorial, where you can either create a free account or ask Riley for the Corps account credentials.
However, attempting something advanced that you are not familiar with, can lead to problems (if done without the necessary precautions).
If there is something that you would like to test, feel free to reach out to a staff member first. It may seem that doing your own research is sufficient – and that certainly is helpful—but discussing it with a Digital Corps staff member further ensures that you avoid any potential web design problems before they arise.
As illustrated in the article, CSS offers a variety of properties that allow websites to be responsive. However, if not used carefully, some may hinder the website’s responsiveness. Therefore, the best practice is to make studied decisions and consistently test the site on different devices.
