Responsive design...Responsive design Designing a web page that looks good on devices of various...
Transcript of Responsive design...Responsive design Designing a web page that looks good on devices of various...
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Responsive design
Designing a web page that looks good on devices of various sizes and is usable on as many devices as possible.
How does it work?
You will use media queries and other layout methods to change what’s on the screen depending on the size of the viewport.
Example: https://zoo.sandiegozoo.org/
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Responsive design + usability
Your site needs to be usable in as many devices as possible. Even on an outdated browser or device, your layout may not look the way you want, but the site should still be usable for whatever task that the user is trying to complete.
You have to think about performance because some users may not have fast internet. You have to make sure your site is accessible to people with disabilities.Having a website that looks nice isn’t enough—it also
needs to be usable.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Viewport
The visible area of a browser window where a webpage can be displayed.
When setting up a webpage to work on different sized screens, you have to tell the browser that your page is responsive. The meta viewport element tells the browser how to scale the webpage and what dimensions to use.
<meta content=”width=device-width, initial-scale=1”
name=”viewport”>
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
CSS Box Model
The idea that every HTML element is represented as a rectangular box on the page. Each element can have Padding, Border and Margin sizes.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
CSS Box Model
Things can get complicated - by default, Padding, Border, and Margin sizes are ADDED to the actual size of the element. To prevent this, we can adjust the box-sizing property.
= Actual 800 pixels + padding + border + margin
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
box-sizing
Determines whether the padding, border and margin of an element are included in its total width and height.
The default value of box-sizing is content-box.
Using the value of border-box will change the behavior of the element, so that padding, border and margin are contained INSIDE the actual width of the element.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Required CSS for responsive
html {
box-sizing: border-box;
}
img {
max-width: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
Sets the box-sizing property for the
webpage
Sets images at maximum 100% width of
the containing element, so they will not
get cropped when the browser is resized
(The * selector selects all elements). If
you change the box-sizing for a particular
element, everything inside that element
will inherit the box-sizing property of that
element.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Display property
Determines how an element will take up space in the page.
display: inline
The element is in line with other text and doesn’t break the flow of text. Examples include span, strong, em. Will not display any vertical
margin or padding styles.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Display property
display: block
Block elements take up a block of area on the page. Examples are a paragraph, H1, div, or structural elements like section or nav. By default, they take up the full width of space that is available. You can style both
the height and the width. Block elements always start on a new line.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Display property
display: inline-block
Inline-block is a combination of the two. The element appears inline
but you can give it a width or height style which will be followed, although it will stay inline.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Units
Absolute length (not ideal for responsive layout)Pixels (px): The smallest controllable point of color on a screen.
Relative length (length can vary depending on viewport)Percent (%): Calculated in relation to the element’s containing element.
Viewport height and width (vh and vw): The number will be 1/100th of the width/height of the viewport.
Viewport minimum and maximum (vmin and vmax): Allow you to size something to whichever is wider or narrower, the width or the height of the viewport. Vmin is 1/100th of the smaller side of the viewport, and vmax is 1/100th of the larger side of the viewport.
Fractional unit (fr): used only in Grid layout, allows you to size something as a fraction of the leftover space in a grid container.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Display property
display: flex
display: grid
These are special because they affect how all the elements inside them are displayed. They’re used to create a flex box or a grid layout.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Media queries
The way we tell the browser to do something different based on the viewport width. A media query is just like it sounds, a query or question about the media that the webpage is being displayed on. The answer determines whether a section of CSS is applied when rendering the page.
<style>
@media (min-width: 600px) {
body { background-color: blue; }
}
</style>
Query: Is the viewport a minimum width of 600 pixels?If true, then the background color is blue.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Flexbox and Grid
Two new ways to do CSS layout. Although they both can be used to layout a web page, they each work best under different circumstances.
Both of these methods allow you to easily change the order of elements on the page, which is a key component of responsive design.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Flexbox
A one-dimensional layout system in CSS. Flexbox allows for you to arrange items inside a container. This makes it ideal for arranging elements along one dimension, either horizontal or vertical. As you can see in this example, the boxes are only aligned in one direction. Even when they’re wrapping onto multiple rows, they are still only aligned on each line.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Grid
A two-dimensional layout system in CSS. Grid lets you arrange items in both rows and columns. Good for laying out a page if you want to have sections of the page in multiple columns.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Accessibility
One of the things you can do easily in both Flexbox and Grid is to change the order of elements on the page. But there are a few issues that you need to worry about.
Screen readers: People who are blind may be accessing your page with a screen reader that reads the text out loud to them. A screen reader won’t take into account any of the CSS you are using for a layout so it will read the content in the order it is in the HTML. That’s why
you should always create your HTML in a logical order
before you apply any CSS.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Accessibility
Keyboard navigation: Even if your source code is in a logical order, moving things to different positions on the page can cause problems for anyone who is using a keyboard to navigate. Many people have difficulty using a mouse because of a disability or because using a mouse requires movements that are painful. It’s important to make sure that these users are able to successfully navigate your webpage using a keyboard because they might not have another option.
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Accessibility
Speech recognition: Another group of people to consider is those who use speech recognition as their primary or only means of using a computer, the way this works is they have special software that recognizes voice commands such as press Tab or press Enter. Although they are not using a physical keyboard, the way they use the computer essentially mirrors keyboard navigation. Tab order is the order in which elements receive focus as the user Tabs through the page.
Example: https://calgarylibrary.ca
RESPONSIVE DESIGN - ART 4567 INTERACTIVE MULTIMEDIA DESIGN
Browser support
Users outside of North America and Europe may be more likely to be using
older devices, older browsers or inexpensive mobile phones that lack support
for Flexbox and Grid. You can plan for this limitation by making sure that
your site works correctly and allows users to read all the content, even if your
layout may not look the way you intended.
1. Make sure to create your HTML in a good order, then the content will
be displayed in that order.
2. Test on a wide range of devices and browsers or use tools to do
virtual tests.
3. Target additional CSS to older devices using browser feature queries.