SmashingConf Toronto Videos

SmashingConf Toronto Videos

SmashingConf Toronto Videos

The Smashing Editorial

This year, many of your favorite speakers were featured at our conference in Toronto, however, things were quite different this time. The speakers had been asked to present without slides. Yep, and it was brilliant!

In this pairing of videos from SmashingConf Toronto, discover sketching with Eva-Lotta Lamm and SVG Animation with Sarah Drasner, but if you fancy watching all of them then head on over to our SmashingConf Vimeo channel anytime.

How I Think When I Think Visually: Eva-Lotta Lamm

Sketching is something which lends itself perfectly to the no-slides format. In this talk, Eva-Lotta demonstrates her process for visual thinking. A method which helps her order her thoughts, create sketchnotes, and visualize processes such as user journeys.

SVG And Vue Together From Start To Finish: Sarah Drasner

In this talk, Sarah starts with only an Illustrator document and by the end, makes it move! In this talk, which has an included GitHub repository to help you follow along, Sarah uses animation and Vue.js to create the final piece.

Enjoyed watching these talks? There are many more videos from SmashingConf Toronto on Vimeo. We’re also getting ready for the upcoming SmashingConf in New York — see you there? 😉

Smashing Editorial(ra, il)

Getting Started With Gutenberg By Creating Your Own Block

Getting Started With Gutenberg By Creating Your Own Block

Getting Started With Gutenberg By Creating Your Own Block

Muhammad Muhsin

WordPress is the most popular Content Management System (CMS) by far —powering more than 30% of the web. It has undergone a huge metamorphosis during its 15 years of existence. Its latest addition is Gutenberg which is to be released in version 5.0.

Named after Johannes Gutenberg (the inventor of the printing press), Gutenberg is going to fundamentally change WordPress, further helping reach its goal to democratize publishing.

WordPress usually releases its major features as a plugin to test the waters before baking them into the core. Gutenberg is no exception. In this article, we will learn how to go about building your first Gutenberg block. We will be building a Testimonials Slider Block while dwelling on the basics of Gutenberg.

Here is an outline for this article:

  1. Installing The Gutenberg Plugin
  2. Installing The Testimonials Slider Block
  3. Getting Started With The Configuration
  4. Registering A Block
  5. Introducing Gutenberg Specific Syntax
  6. The attributes Object
  7. The edit And save Functions
  8. Continuing Development
  9. Starting A New Gutenberg Block
  10. Conclusion

This article assumes the following:

  • Some knowledge of WordPress such as how content is saved and basic plugin development;
  • Basic understanding of React and ES6;
  • Knowledge of both npm and webpack.

Recommended reading: The Complete Anatomy Of The Gutenberg WordPress Editor

Installing The Gutenberg Plugin

If you are a WordPress user, just go ahead and install the Gutenberg plugin from the plugin repository. This is what one should use in a production site.

However, if you’re developing a Gutenberg block, I recommend that you clone the development version of Gutenberg which is hosted at GitHub. For help with setting up a local environment, please read the contribution guide.

You get the latest development version of Gutenberg this way but the primary reason to do this is to be able to use the development version of React.js that comes bundled with Gutenberg. The development version has more verbose error reporting which helps greatly with debugging.

Now when you go and create a page or a post, you will be able to edit using the Gutenberg Editor.

Gutenberg Editor Demo
Gutenberg Editor Demo (Large preview)

Since this article is about creating a Gutenberg Block, we will not go into the introduction to the Editor, For a complete understanding of what is Gutenberg and how to use it, please refer to Manish Dudharejia’s article on Smashing Magazine.

Installing The Testimonials Slider Block

The plugin in question — the one we are going to go through is already published to the WordPress repository.

Please install the Testimonials Slider Block plugin to your local WordPress instance so that you have a feel for how the plugin works.

You can also fork or clone the project from GitHub.

After activating the plugin, you can go to your Gutenberg Editor and add a Testimonials Slider to your content:

Testimonials Slider Block
Selecting the Testimonials Slider Block (Large preview)

Adding content to the Testimonials Slider Block
Adding content to the Testimonials Slider Block (Large preview)

Testimonials Slider Block in the frontend
Testimonials Slider Block in the frontend (Large preview)

Now I will go through how I built the plugin and how you too can build a similar one. To keep the article concise, I will not share the entire code in here. However, after reading this you should be able to create your own Gutenberg block.

Getting Started With The Configuration

A Gutenberg block is generally created as part of a plugin. Our plugin is not going to be any different.

Navigate to the plugins directory in your local WordPress instance. Move to the testimonials-slider-block. Notice the following files and folders:

  1. gutenberg-testimonials-slider.php is the main file which has details of the plugin, such as name, description, author details and license. These details will be used in the plugin description in the Plugins menu in the dashboard. You will see that this file calls the init.php file.
  2. The init.php file enqueues the different JavaScript and CSS files. This includes both the external libraries like Bootstrap and Font Awesome and our build files.
  3. The .babelrc file instructs webpack what kind of JavaScript files we are writing.
  4. The package.json file contains all the npm modules that are used in the plugin. You will use the npm install command to install all those packages.
  5. webpack.config.js file contains the configuration for webpack to build our JavaScript and CSS. if you did not know, webpack is a package bundler mainly used for bundling our JavaScript modules and putting them into one file that is then enqueued by WordPress.

That was a lot of configuration files. Now we can go about actually building our Gutenberg block.

Registering A Block

Within the src folder you will see the index.js file. This is the fle that webpack looks for, to bundle the JavaScript. You can see that this file imports the slider.js file within the block folder.

The block folder has the following styles:

  • slider.js: contains the actual code for the block
  • editor.scss: the styles file describing the block within the Gutenberg Editor
  • style.scss: contains styles pertaining to how the block is displayed in the frontend.

Please open the slider.js file in your editor.

This file first imports both the editor and style scss files. Then it imports internationalization component, registerBlockType and the MediaUpload and PlainText components. The last two components will be used to upload the author image and to take in the different text inputs to save in the database.

Next you will see how a block is registered.

It takes in a name as the first parameter. The name must be prefixed with a namespace specific to your plugin in order to avoid any conflicts with another block with the same name.

The second parameter is an array with the following properties and functions:

  • Title
    The name of the block which will appear when you add a new block in the Gutenberg Editor.
  • Icon
    The block’s icon which will be picked up from dashicons. You can also specify your own SVG icons if you want to.
  • Category
    Under which category of blocks will the block appear. Some of the categories are: common, formatting, layout widgets and embed.
  • Keywords
    An array of strings that describe the block, similar to tags.
  • Attributes
    A JavaScript object which contains a description of the data that is saved by the block.
  • Edit
    The function that provides an interface for the block within the Gutenberg Editor.
  • Save
    The function that describes how the block will be rendered in the frontend.

To learn more, please refer to this documentation.

Introducing Gutenberg Specific Syntax

Gutenberg is built with React and the blocks that we build for Gutenberg use a similar syntax.

It certainly helps to know a bit of React to build custom Gutenberg blocks though you don’t have to be an expert.

The following things are useful to know before starting the block development:

  • The HTML class is replaced with className like in React.
  • The edit and save methods return JSX, which stands for JavaScript XML. If you are wondering, JSX is syntax exactly like HTML, except you can use HTML tags and other components like PlainText and RichText within it.
  • The setAttributes method works similar to React’s setState. What it does is, when you call setAttributes the data in the block is updated and the block within the editor is refreshed.
  • The block uses props in the edit and save functions, just like React. The props object contains the attributes object, the setAttributes function and a ton of other data.

The attributes Object

The attributes object that was mentioned previously define the data within the Gutenberg block. The WordPress Gutenberg Handbook says:

Attribute sources are used to define the strategy by which block attribute values are extracted from saved post content. They provide a mechanism to map from the saved markup to a JavaScript representation of a block.

Each source accepts an optional selector as the first argument. If a selector is specified, the source behavior will be run against the corresponding element(s) contained within the block. Otherwise, it will be run against the block’s root node.

For more details on how to use attributes, please refer to this guide.

The following is the attributes object that is used in the Testimonials Slider Block:

attributes: {
   id: {
     source: "attribute",
     selector: ".carousel.slide",
     attribute: "id"
   testimonials: {
     source: "query",
     default: [],
     selector: "blockquote.testimonial",
     query: {
       image: {
         source: "attribute",
         selector: "img",
         attribute: "src"
       index: {
         source: "text",
         selector: "span.testimonial-index"
       content: {
         source: "text",
         selector: "span.testimonial-text"
       author: {
         source: "text",
         selector: "span.testimonial-author span"
       link: {
         source: "text",
         selector: ".testimonial-author-link"

The source tells Gutenberg where to look for data within the markup.

Use attribute to extract the value of an attribute from markup, such as the src from img element. The selector and attribute tell what element to look for and what exact attribute to pick the data from respectively. Notice that the selector string picks up an HTML element from the save function.

Use text to extract the inner text from markup and html to extract the inner HTML from markup.

Use query to extract an array of values from markup. Entries of the array are determined by the selector argument, where each matched element within the block will have an entry structured corresponding to the query argument, an object of attribute and text sources.

You can access the attributes in the edit and save functions through props.attributes.

When you use console.log(props.attributes.testimonials) in the edit function, you get the following result:

  (2) [{...}, {...}]
      content: "This is a testimonial"
      image: "http://localhost/react-gutenberg/wp-content/uploads/2018/08/0.jpg"
      index: 0
      link: ""
    ▶__proto__: Object
    author: "Matt"
    content: "This is another testimonial"
    image: "http://localhost/react-gutenberg/wp-content/uploads/2018/08/767fc115a1b989744c755db47feb60.jpeg"
    index: 1
    link: ""
   ▶__proto__: Object
   length: 2
  ▶__proto__: Array (0)

Therefore, in the above code, id is a text that uniquely describes each testimonial block whereas testimonials is an array of objects where each object has the properties as shown in the above screenshot.

The edit And save Functions

As mentioned above, these two functions describe how the block is rendered in the editor as well as in the frontend respectively.

Please read the full description here.

The edit Function

If you look at the edit function, you will notice the following:

  1. I first get the props.attributes.testimonials array to a const variable. Notice the ES6 Object Destructuring to set the const value.
  2. Then generate an id for the block which will be used to make each block unique when you add more than one Testimonials Slider Block to your content.
  3. Then the testimonialsList is generated, which is got from sorting then mapping the testimonials array that we got in step 1.
  4. Then, the return function gives out JSX, which we discussed earlier. The testimonialsList, which we constructed in step 3 is rendered. The + button is also rendered, pressing which will create a new testimonial inside the block.

If you dig into testimonialsList, you will see that it contains the PlainText and MediaUpload components. These provide the interface for entering the different texts and uploading the author image respectively.

The PlainText component looks like this:

  const newObject = Object.assign({}, testimonial, {
    content: content
    testimonials: [
        item => item.index != testimonial.index
<p>The attributes I have used for the <code>PlainText</code> component are:</p>
<li><code>className</code><br />The CSS class of the component in order to style it.</li>
<li><code>style</code><br />To give a minimum height so that the content does not look like a one-line text. Specifying the height using the class selector did not work.</li>
<li><code>placeholder</code><br />The text that will be displayed when no content is added.</li>
<li><code>value</code><br />The value of the component from the object within the testimonials array.</li>
<li><code>autoFocus</code><br />To tell the browser to focus on this component (input field) as soon as the user adds a new testimonial by clicking the + button.</li>
<li><code>onChange</code><br />What looks like the most complex attribute in this list. This function first gets a copy of the current testimonial and assigns the changed content to newObject. Then it spreads the array of objects, filters out the current object using index and then replaces the newObject within the array. This is set using the the props.setAttributes function to the testimonials array.</li>
<h4>The <code>save</code> Function</h4>
<p>This function does the following:</p>
<li>I first get the <code>props.attributes.testimonials</code> array and <code></code> string to const variables. Again, notice the ES6 Object Destructuring being used to set the values for the two const variables id and testimonials.</li>
<li>Then I create the <code>carouselIndicators</code> variable, which is essentially JSX constructed from the testimonials array.</li>
<li>Then the <code>testimonialsList</code> is created from the testimonials array. The snippet below is from the mapped function callback return.
<pre class="break-out"><code class="language-css">{testimonial.content && (
  <p className="testimonial-text-container">
    <i className="fa fa-quote-left pull-left" aria-hidden="true" />
    <span className="testimonial-text">{testimonial.content}</span>
    <i class="fa fa-quote-right pull-right" aria-hidden="true" />
<p>Notice the conditional rendering. The markup will not be rendered for content if the content is not set.</li>
<li>Next, if the testimonials array has objects within it, the HTML is rendered. This is what will be serialized and saved to the database, and this is what will be shown in the frontend (not verbatim).</li>
<h3 id="continuing-development">Continuing Development</h3>
<p>I’m sure you want to tinker around this plugin and see what happens. You can continue developing the plugin:</p>
<li>Open up the terminal</li>
<li>Navigate to the plugin’s root directory</li>
<li><code>npm install</code></li>
<li><code>npm start</code></li>
<p>This will install all the packages, build the files and watch for changes. Every time you make a change to the files, webpack will rebuild the JS and CSS files.</p>
<p><strong>Please note:</strong> Markup changes to the blocks will mess up the block in the Gutenberg Editor if you had added it before. Don’t be alarmed — you simply have to remove the block and add it again.</p>
<p>If you are done with developing you can <code>npm run build</code> to minify the files to make it ready for production!</p>
<p>Hopefully, you are now convinced Gutenberg block development is more approachable than it sounds.</p>
<p>I have the following plans in mind for this plugin:</p>
<li>Allow users to select color of text, background and accent.</li>
<li>Allow users to select the size of slider and font.</li>
<li>Avoid depending on libraries like Bootstrap and Font Awesome.</li>
<p>I encourage you <a href="">to make a pull request</a> with your improvements and extra features.</p>
<h3 id="starting-a-new-gutenberg-block">Starting A New Gutenberg Block</h3>
<p>There are many ways to develop a Gutenberg block. One of the recommended ways is to use <code><a href="">create-guten-block</a></code> created by <a href="">Ahmad Awais</a>. In fact, this project was built based on <code><a href="">guten-testimonial-block</a></code> which was bootstrapped from <code>create-guten-block</code>.</p>
<p>You can also check out <a href="">Zac Gordon’s repository</a> where he shows how to use the different Gutenberg components in your new block.</p>
<h3 id="conclusion">Conclusion</h3>
<p>We covered the following in today’s article:</p>
<li>Installing and using Gutenberg and Testimonials Slider Block plugins</li>
<li>Configuration for a typical Gutenberg block plugin</li>
<li>Registering a Gutenberg block</li>
<li>How to use the attributes object</li>
<li>The <code>edit</code> and <code>save</code> functions and how to use them.</li>
<p>I hope this article was useful for you. I can’t wait to see what you will build with and for Gutenberg!</p>
<div class="signature">
  <img src="" alt="Smashing Editorial" /><span>(dm, ra, yk, il)</span>

			</div><!-- .entry-content -->

	<footer class="entry-footer">
		<span class="cat-links">Posted in <a href="" rel="category tag">General</a></span>	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

<article id="post-50" class="post-50 post type-post status-publish format-standard hentry category-general">

	<header class="entry-header">
		<h1 class="entry-title"><a href="" rel="bookmark">Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides</a></h1>
				<div class="entry-meta">
			<span class="posted-on"><a href="" rel="bookmark"><time class="entry-date published updated" datetime="2018-10-10T06:30:16+00:00">October 10, 2018</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="">Jessie Carroll</a></span></span>		</div><!-- .entry-meta -->
			</header><!-- .entry-header -->

	<div class="entry-content">
<p>              <meta charset="utf-8"><link rel="canonical" href=""><title>Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides</title></p>
<h1>Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides</h1>
<address>Nick Babich</address>
<p>                  <time datetime="2018-10-09T14:00:09+02:00" class="op-published">2018-10-09T14:00:09+02:00</time><time datetime="2018-10-09T16:43:59+00:00" class="op-modified">2018-10-09T16:43:59+00:00</time></header>
<p>(This is a sponsored post.) For a long time, UI animation was an afterthought for designers. Even today, many designers think of animation as something that brings delight but does not necessarily improve usability. If you share this point of view, then this article is for you. I will discuss how animation can improve the user experience of landing pages, and I’ll provide the best examples of animation created using the Slides framework.</p>
<p>The <a href="">Slides framework</a> is an easy-to-use tool for creating websites. It allows anyone to create a sleek landing page in a few minutes. All you need to do is choose an appropriate design from the list of predefined slides.</p>
<figure><a href=""><img data-src="" width="800" height="" alt="" /></a><figcaption>A collection of predefined designs in Slides.</figcaption></figure>
<h3>Four Ways Animation Supports Usability Of Landing Pages</h3>
<p>Landing page design is more than just about visual presentation; it’s about interaction. Details of interaction design make a fundamental difference on modern websites. And animated effects can reinforce interactions. To improve the usability of a landing page, an animation must be a functional element, not just decoration. It should serve a clear functional purpose. Below are a few common ways that animation can improve usability.</p>
<h4>1. Create A Narrative</h4>
<p>Every designer is a storyteller. When we create a website, we are telling a story to our visitors. And it’s possible to tell a much more engaging story by using animation.</p>
<p>Animation can help bring content to life. One good example of such animation can be found on <a href="">Ikonet</a>. The animation there keeps users engaged as they scroll the page and learn about the company.</p>
<figure><a href=""><img data-src="" width="600" height="" alt="" /></a></figure>
<p>Animation can also be used to call the visitor’s attention to something they should notice and act upon. For example, if you have an important text section or a call to action, sliding them in (instead of having them just appear) can help visitors understand where they should focus. Take a look at the <a href="">Preston Zeller</a> example below. The way elements appear on the pages drives the user’s focus to those areas. The great thing about this animation is that it draws attention to important information without being disruptive.</p>
<figure><a href=""><img data-src="" width="600" height="" alt="" /></a><figcaption>When visitors scroll on Preston Zeller, elements gradually appear on the page. As a result, attention is drawn to vital information.</figcaption></figure>
<h4>2. Provide Feedback</h4>
<p>Human-computer interaction is based on two fundamentals: user input and system feedback. All interactive objects should react to user input with appropriate visual or audio feedback.</p>
<p>Below you can see the Custom Checkbox effect created using the Slides framework. The subtle bouncing animation the user sees when they change the state of the toggle reinforces the feeling of interactivity.</p>
<figure><a href=""><img src="" width="540" height="" alt="" /></a></figure>
<p>With Slides, you can create nice hover animations and encourage users to interact with objects. Take a look at <a href="">Berry Visual</a>. When you hover the mouse on “Send Message” or on the hamburger menu in the top-right corner, a nice animated effect occurs. It creates a sense that these elements are interactive.</p>
<figure><a href=""><img data-src="" width="600" height="" alt="" /></a></figure>
<p><a href="">Buf Antwerp</a> is another excellent example of how on-hover animated feedback can improve the user experience. When visitors hover over a tile, a semi-transparent overlay appears, and text provides additional information about the item.</p>
<figure><a href=""><img data-src="" width="600" height="" alt="" /></a></figure>
<h4>3. Create Relationships</h4>
<p>A great place to add animation to a landing page is at moments of change. All too often, moments of change are abrupt &mdahs; for example, when users click on a link, a new screen suddenly appears. Because sudden changes are hard for users to process, such changes usually result in a loss of context — the brain has to scan the new page to understand how the new context is connected to the previous one.</p>
<p>Consider this example of an abrupt change:</p>
<figure><a href=""><img data-src="" width="500" height="" alt="" /></a><figcaption>This abrupt change feels unnatural and leads to unnecessary brain work (the brain has to scan entire layout to understand what has just happened). (Image: Adrian Zumbrunnen via <a href="">Smashing Magazine</a>)</figcaption></figure>
<p>Compare that to the following example, in which a smooth animated transition guides the user to the different parts of the screen:</p>
<figure><a href=""><img data-src="" width="500" height="" alt="" /></a><figcaption>A simple animated transition maintains context, making it easy to understand what has changed about a screen. (Image: Adrian Zumbrunnen via <a href="">Smashing Magazine</a>)</figcaption></figure>
<p>It’s clear that in the second example, animation prevents abrupt change — it fills the gap and connects two stages. As a result, visitors understand that the two stages belong together. This principle applies equally when you have a parent-to-child relationship between two objects:</p>
<figure><a href=""><img data-src="" width="600" height="" alt="" /></a><figcaption>Animated transition between preview and details. (Image: <a href="">Tympanus</a>)</figcaption></figure>
<p>It also applies when you create a transition between stages. The smooth transitions between slides in the example below create a sense of sequence, rather than separate unrelated parts of the page.</p>
<figure><a href=""><img data-src="" width="800" height="" alt="" /></a><figcaption>Using animation, it’s possible to define object relationships and hierarchies when introducing new elements.</figcaption></figure>
<h4>4. Making Boring Tasks Fun</h4>
<p>It might be difficult to imagine how to introduce playful elements into everyday experiences. But by adding a bit of surprise where it’s most unexpected, we can turn a familiar interaction into something unexpected and, thus, memorable.</p>
<p>When you visit <a href="">Tympanus’ 3D Room Exhibition</a>, it looks like any other gallery website that you’ve visited before. But your impression of the website changes immediately once you interact with a page. As you move the cursor, the page moves, and this effect creates a sense of 3D space. This feeling is reinforced when you go from one page to another; it looks like you’re traveling from one room to another within a 3D space.</p>
<figure><img srcset=",q_auto/w_400/ 400w,
	,q_auto/w_800/ 800w,
	,q_auto/w_1200/ 1200w,
	,q_auto/w_1600/ 1600w,
	,q_auto/w_2000/ 2000w" src=",q_auto/w_400/" sizes="100vw" alt="" /><figcaption class="op-vertical-bottom"><a href="">Large preview</a><br />
<p>Now let’s talk about something much more familiar than 3D effects: web forms. Who loves filling out forms? Probably nobody. Still, filling out forms is one of the most common tasks on the web. And it is possible to turn this dull activity into a fun exercise. Take a look <a href="">Darin Senneff’s Yeti character</a>, which is used in a form. When the user starts typing their password, the mascot covers its eyes. Such an animated effect brings a lot of delight when you see it for the first time.</p>
<figure><a href=""><img data-src="" width="809" height="" alt="" /></a><figcaption>The Yeti character responds to user input.</figcaption></figure>
<p>Last but not least, it’s possible to make the scrolling experience not just more visually interesting, but also helpful for readers. Below is <a href="">Storytelling Map</a>, an interactive journey in which a path along a map is animated according to the content being scrolled through on the page. The idea ties the text, visuals and locations together; visitors read the information and see it in the context of the map).</p>
<figure><a href=""><img data-src="" width="800" height="" alt="" /></a><figcaption><a href="">Large preview</a></figcaption></figure>
<h3>Six Best Practices For Landing Page Animation</h3>
<p>Identifying the places where animation has utility is only half the story. Designers also need to implement animation properly. In this section, we’ll find out how to animate like a pro.</p>
<h4>1. Don’t Animate Several Elements At Once</h4>
<p>When a few objects are animated simultaneously, it becomes distracting for users. Because the human brain and eye are hardwired to pay attention to moving objects, the user’s focus will jump from one element to another, and the brain will need extra time to figure out what just happened (especially if the movement happens very quickly). Thus, it’s important to schedule animations properly.</p>
<p>It’s vital to understand the concept of <a href="">transition choreography</a>: the coordinated sequence of motions that maintain the visitor’s focus as the interface changes. Minimize the number of elements that move independently; only a few things should happen at the same time (typically, no more than two or three). Thus, if you want to move more than three objects, group some objects together and transform them as a single unit, rather than animating them independently.</p>
<figure><a href=""><img data-src="" width="720" height="" alt="" /></a><figcaption>Don’t animate everything at the same time. It will make the objects compete for attention and divide focus. (Image: <a href="">Google</a>)</figcaption></figure>
<p>Slides offers an excellent benefit to web designers: It prevents them from overusing motion in design. Each animated effect available in Slides has been carefully designed to deliver content in the best possible way.</p>
<h4>2. Animation Shouldn&#8217;t Conflict With Landing Page’s Personality</h4>
<p>Each time you add animation to a design, you introduce personality. This personality will largely depend on the animated effect you choose to use.</p>
<p>When people interact with a product, they have certain expectations. Imagine designing a landing page for a banking service, and you decide to use a bouncing animation to introduce a form that collects the user’s personal information. Many users will hesitate to provide their details because the form conflicts with their expectations.</p>
<figure><a href=""><img data-src="" width="396" height="" alt="" /></a><figcaption>An example of bouncing animation. Avoid bouncing animation in forms that collect bank account details. Users might hesitate to provide their data. (Image: <a href="">Joel Besada</a>)</figcaption></figure>
<p>The <a href="">Slides framework</a> allows you to choose from 10 animated styles, such as Stack, Zen, Film, Cards and Zoom. Experiment with different effects, and choose what’s best for your case.</p>
<figure><img srcset=",q_auto/w_400/ 400w,
	,q_auto/w_800/ 800w,
	,q_auto/w_1200/ 1200w,
	,q_auto/w_1600/ 1600w,
	,q_auto/w_2000/ 2000w" src=",q_auto/w_400/" sizes="100vw" alt="" /><figcaption class="op-vertical-bottom"><a href="">Large preview</a><br />
<h4>3. Watch The Time</h4>
<p>When it comes to designing animation, timing is everything. The timing of your animation can mean the difference between a good interaction and a bad one. When working on animation, you’ll usually spend a third of your time finding the right animated effects and the other two thirds finding the right timing to make the animation feel smooth.</p>
<p>Generally, keep the animation short. Animation should never get in the way of the user completing a task, because even the most beautifully executed animation would be really annoying if it slows down users. The optimal speed for a UI animation is between <a href="">200 and 500 milliseconds</a>. An animation that lasts less than 1 second is considered as instant, whereas an animation longer than 5 seconds can convey a feeling of delay.</p>
<p>When it comes to creating an animated effect, one parameter has a direct impact on how the animation is perceived: <a href="">easing</a>, or timing function in CSS terms. Easing helps designers make movement more natural.</p>
<p>The Slides framework enables web designers to customize easing. You’ll find easing along with other effects in the section “Effect Settings”.</p>
<figure><img srcset=",q_auto/w_400/ 400w,
	,q_auto/w_800/ 800w,
	,q_auto/w_1200/ 1200w,
	,q_auto/w_1600/ 1600w,
	,q_auto/w_2000/ 2000w" src=",q_auto/w_400/" sizes="100vw" alt="" /><figcaption class="op-vertical-bottom"><a href="">Large preview</a><br />
<h4>4. Think About Accessibility</h4>
<p>Animation is a double-edged sword. It can improve usability for one group of users, while causing problems for another group. Apple’s release of iOS 7 was a recent example of the latter. iOS 7 was full of animated effects, and shortly after its release, iPhone users reported that the animated transitions were making them feel <a href="">dizzy</a>.</p>
<p>Your responsibility as a designer is to think about how people with visual disorders will interact with your design. Check the <a href="">WCAG’s guidelines on animation</a>, and be sure that your design aligns with them. Track whether a user wants to minimize the amount of animation or motion. A special CSS media feature, &#8220;<a href="">prefers-reduced-motion</a>&#8220;, detects whether the user has requested that the system minimize the amount of animation or motion used. When it is set to &#8220;reduce&#8221;, then it’s better to minimize the amount of movement and animation (for example, by removing all non-essential movement).</p>
<p>Also, conduct usability testing to check that users will all abilities, including people with visual disorders, won’t have any problem interacting with your design.</p>
<h4>5. Prototype And Test Your Design Decisions</h4>
<p>Animation is fun to play with. It’s easy to go overboard and end up with a design that overwhelms users with too much motion. Unfortunately, there is no silver bullet for great animation; it’s hard to set clear criteria of what is “just enough”. Be ready to spend time on prototyping, testing and optimizing animated effects.</p>
<p>Here are a few tips worth taking into account during testing:</p>
<li><strong>Test on different hardware.</strong><br />Many hardware factors can drastically affect animation performance: screen size, screen density, GPU performance, to name just a few. As a result, a user on a high-definition screen might have a completely different experience than a user on an older screen. Consider such factors when designing animation to prevent performance bottlenecks. Don’t blame slow hardware; optimize your animation to work great on all sort of devices.</li>
<li><strong>Test on mobile.</strong><br />Most websites are built and tested on a desktop; the mobile experience and animation performance is often treated as an afterthought. Lack of testing on mobile could cause a lot of problems for mobile users, because some animated techniques work great on desktop but not as well on mobile. To avoid a negative experience, confirm that your design works fine on both desktop and mobile. Test on mobile early and often.</li>
<li><strong>Watch animation at a slow speed.</strong><br />It might be hard to notice problems when an animation (especially a complex one) runs at full speed. When you slow the animation down (say, at one tenth the speed), such issues become evident. You can also record slow-motion video of your animations and show them to other people to get other perspectives.</li>
<p>With the Slides framework, you can create a high-fidelity interactive prototype in minutes. You can use a WYSIWYG editor to create animated effects, publish the design, and see how it works on both desktop and mobile devices.</p>
<h4>6. Animation Shouldn’t Be An Afterthought</h4>
<p>There’s a reason why so many designers think of animation as an unnecessary feature that overloads the user interface and makes it more complicated. In most cases, that’s true when designers introduce animation at the end of the design process, as lipstick for the design — in other words, animation for the sake of animation. Random motion without any purpose won’t benefit visitors much, and it can easily distract and annoy.</p>
<p>To make meaningful animation, take time at the beginning of the project to think about areas where animation would naturally fit. Only in this way will animation be natural to the user flow.</p>
<p>Good functional animation makes a landing page not just more appealing, but also more usable. When done correctly, animation can turn a landing page from a sequence of sections into a carefully choreographed, memorable experience. The <a href="">Slides framework</a> helps web designers use animation to communicate clearly.</p>
<div class="signature">
  <img src="" alt="Smashing Editorial" /><span>(ms, ra, al, yk, il)</span>

			</div><!-- .entry-content -->

	<footer class="entry-footer">
		<span class="cat-links">Posted in <a href="" rel="category tag">General</a></span>	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

		</main><!-- #main -->
	</div><!-- #primary -->

<div id="secondary" class="widget-area" role="complementary">
	<aside id="categories-2" class="widget widget_categories"><h1 class="widget-title">Categories</h1>		<ul>
	<li class="cat-item cat-item-7"><a href="" >Browser</a>
	<li class="cat-item cat-item-11"><a href="" >Design</a>
	<li class="cat-item cat-item-2 current-cat"><a href="" >General</a>
	<li class="cat-item cat-item-8"><a href="" >Graphics</a>
	<li class="cat-item cat-item-10"><a href="" >Languages</a>
	<li class="cat-item cat-item-3"><a href="" >Layout</a>
	<li class="cat-item cat-item-9"><a href="" >Markup</a>
	<li class="cat-item cat-item-6"><a href="" >Technologies</a>
	<li class="cat-item cat-item-5"><a href="" >Tools</a>
	<li class="cat-item cat-item-4"><a href="" >Typography</a>
</aside><aside id="recent-posts-widget-with-thumbnails-2" class="widget recent-posts-widget-with-thumbnails"><div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="rpwwt-widget">
	<h1 class="widget-title">Recent Posts</h1>	<ul>
			<li><a href=""><span class="rpwwt-post-title">Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides</span></a></li>
			<li><a href=""><span class="rpwwt-post-title">Getting Started With Gutenberg By Creating Your Own Block</span></a></li>
			<li><a href=""><span class="rpwwt-post-title">SmashingConf Toronto Videos</span></a></li>
			<li><a href=""><img width="75" height="75" src="" class="attachment-75x75 size-75x75" alt="" /><span class="rpwwt-post-title">Web design</span></a></li>
</div><!-- .rpwwt-widget -->
</aside><aside id="widget_tptn_pop-2" class="widget tptn_posts_list_widget"><h1 class="widget-title">Popular Posts</h1><div class="tptn_posts  tptn_posts_widget tptn_posts_widget2"><ul><li><a href=""     class="tptn_link"><img src="" alt="Web design" title="Web design" width="300" height="300" class="tptn_thumb tptn_firstcorrect" /></a></li><li><a href=""     class="tptn_link"><img src="" alt="Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides" title="Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides" width="300" height="300" class="tptn_thumb tptn_firstcorrect" /></a></li></ul><div class="tptn_clear"></div></div></aside><aside id="do-etfw-2" class="widget widget-do-etfw">					<h1 class="widget-title">Follow us on Twitter</h1>		
		<a class="twitter-timeline" data-width="300" data-height="400" data-tweet-limit="5" data-theme="light" data-link-color="#3b94d9" data-border-color="#f5f5f5" href="">Tweets by @webdesign</a>
</aside></div><!-- #secondary -->

	</div><!-- #content -->

	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info">
			<a href="">Proudly powered by WordPress</a>
			<span class="sep"> | </span>
			Theme: <a href="">Heidi</a>		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}},"cached":"1"};
/* ]]> */
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript'>
Main.boot( [] );
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>