In this lecture we discuss media queries and animations.
Responsive design is the process of building an application's user interface (UI) to dynamically adjust based on the size of the device being used to access it.
Older websites were not designed with responsive design principles in mind, and this has lead to undesirable user experiences. Take a look at https://www.spacejam.com/archive/spacejam/movie/jam.htm for an example of an unresponsive website.
Nowadays, it is standard practice to ensure that websites are responsive. Some examples of responsive designs can be found here: https://www.awwwards.com/50-examples-of-responsive-web-design.html.
The reason responsive design is important is because increasing numbers of users are consuming the internet via mobile devices or tablets. In 2017, there were an estimated 3.5 billion web users world wide, and around 2 billion of them exclusively use the internet on mobile devices. Nowadays, it is a requirement in any front-end developer position to be capable of designing responsive websites.
When building your application, there are three main devices to develop for: Mobile, tablet, and desktop.
The extraction design process of building an application is when developers start from desktop design, and then "extract" features until the design fits smaller devices.
The extraction design process often results in a desktop application that is rich with features, and a mobile application that feels like an ineffective afterthought. This is because it can be difficult to include all of the features from the desktop view when working with a mobile sized viewport. With extraction design, mobile views can be left feeling either cluttered and clunky, or less usable and effective than the desktop design.
The enhancement design process is when developers begin by deciding the core features and layout for the mobile view, and then "enhance" the application in order to fill out the desktop design.
This will allow you to add features into your app as you scale up with the view port size. This is also known as "mobile first" development. This process more reliably results in a robust mobile view and an equally effective desktop design.
In short, it's easier to scale up than it is to scale down.
In CSS, we can use media queries to help create a "responsive design".
A media query is a set of CSS rules that will apply to devices based on the viewport size of the device being used to access the page.
The syntax for writing a media query looks like the following:
@media (max-width: 500px) {
/* New Styles To Apply Based On Width */
body {
background: tomato;
}
}Media queries are defined in CSS by using the @media statement. In the parentheses, we can specify the dimensions of the view port that our styles will apply to. The value passed into the parentheses can be referred to as a break point. Typically, break points are set with a min-width or max-width value. Inside the curly braces, we style normally.
Min-width is the value used to declare the minimum width of screen size that the styling block will be applied to. This means that the styles will be applied when the view port width is higher than the min-width value.
@media (min-width: 500px) {
/* Styles will only be applied when view port width is 500px and above */
body {
background: orange;
}
}Max-width is the value used to declare the maximum point of screen width that the styling block would apply to. This means that the styles will be applied if the view port width is smaller than the max-width value.
@media (max-width: 500px) {
/* Styles will only be applied when view port width is 500px and lower */
body {
background: orange;
}
}You can use max-width or min-width interchangeably, but it's best to stick with one or the other to make your code more clear.
Animations are used to dynamically animate elements on our web page. When utilized well, animations enrich the user experience and keep users on a site. Check out https://www.theglyph.studio/#home for an example of a site that utilizes animations well. When utilized poorly, animations can be distracting and unpleasant, and can push users away. Take a look at https://www.lingscars.com/ for an example of what poorly utilized animations can look like.
There are a multitude of ways to achieve an animation effect on a webpage, including scripting through javascript or even other languages. For this guide, we'll focus on two CSS techniques for creating animations. For a more comprehensive overview of CSS animations, check out MDN's Documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
To reiterate, keyframes are one method that can be used to create an animation via CSS. Keyframes are declared with @keyframes, followed by a name that can be used to reference the keyframe. The @keyframes CSS "at-rule" controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
@keyframes spin {
}There are a couple ways that we can apply style waypoints using a keyframe. One way is by using from and to. from and to can be used to define a set of style rules that specify the start and end state of an element in CSS.
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}Another way to specify waypoints is by using percentages inside of the animation, which enables greater specificity and control over how the animation will act.
@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(90deg);
}
}After creating a keyframe animation, the keyframe needs to be applied to the desired selector.
.square {
height: 75px;
width: 75px;
background: peachpuff;
/* tells what animation to use */
animation-name: spin;
/* tell how long to run animation */
animation-duration: 2s;
/* specify how many times the animation should run */
animation-iteration-count: infinite;
/* we can change the animations direction */
animation-direction: alternate-reverse;
/* we can smooth our animations */
animation-timing-function: linear;
}One thing to note is that animation begins automatically when elements are loaded once the animation has been applied via CSS. Would you always want your animations to auto-fire? Fortunately, it is possible to write code so that animations only occur when specific events occur, like an onClick.
To accomplish this, we can create a CSS class, like the one pictured below, that is designed to apply the desired animation properties to an element, but hasn't yet been appied to any specific element.
.square-spin {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: linear;
}Next, we can create state on our component and create a method that will toggle the value on state from true to false. Then we can conditionally add the class to the element depending on what our state is.
export default class App extends Component {
constructor(){
super();
this.state = {
spinning: false
};
};
animate = () => {
this.setState({
spinning: !this.state.spinning
})
};
render() {
return (
<div>
<div className={
this.state.spinning ?
'square square-spin'
:
'square'}
onClick={this.animate}></div>
</div>
)
}
};Keep in mind that this is just one way of controlling an animation for an element in React.
For more information on using Keyframes and controlling animations with the animation property, look here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation.
Transitions are another way to animate elements. To use transitions, all we need to do is use the transition property in our CSS styling blocks. CSS Transitions are a module of CSS that lets developers create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes.
In the following example, we apply a transition property to create a simple hover effect, and specify a duration for the animation cycle.
#transition-element {
height: 50px;
width: 50px;
margin: 25px auto;
background: salmon;
/* transition property to change values */
transition: .2s
}
#transition-element:hover {
transform: scale(1.1);
border-radius: 50%;
}For more information on CSS Transitions, check out MDN's Guide: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Additionally, if you're ever struggling with creating a desired effect via CSS, try searching for results from https://css-tricks.com/. It's a fantastic resource for not only CSS, but also HTML, JS, JQuery, and many other front-end technologies.
Finally, remember that there are a multitude of means of achieving animation effects on a webpage, including scripting with javascript, or relying on libraries and frameworks like React-Spring, React-Motion, or GreenSock. In this guide, we simply focused on using transitions and keyframes within CSS to achieve animation effects.