Responsive 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

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/

https://zoo.sandiegozoo.org/


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.


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”>


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.


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


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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

https://calgarylibrary.ca


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.

Documents

Responsive 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