Back to Top

Leaning into SEO as Google shifts from search engine to portal

How to prepare your company for Google’s new customer journey for search.

Please visit Search Engine Land for the full article.

Reblogged 50 seconds ago from feeds.searchengineland.com

Building A Component Library Using Figma

Building A Component Library Using Figma

Building A Component Library Using Figma

Emiliano Cicero

2019-06-17T14:00:16+02:00
2019-06-19T07:35:56+00:00

I’ve been working on the creation and maintenance of the main library of our design system, Lexicon. We used the Sketch app for the first year and then we moved to Figma where the library management was different in certain aspects, making the change quite challenging for us.

To be honest, as with any library construction, it requires time, effort, and planning, but it is worth the effort because it will help with providing detailed components for your team. It will also help increase the overall design consistency and will make the maintenance easier in the long run. I hope the tips that I’ll provide in this article will make the process smoother for you as well.

This article will outline the steps needed for building a component library with Figma, by using styles and a master component. (A master component will allow you to apply multiple changes all at once.) I’ll also cover in detail the components’ organization and will give you a possible solution if you have a large number of icons in the library.

Note: To make it easier to use, update and maintain, we found that it is best to use a separate Figma file for the library and then publish it as a team ‘library’ instead of publishing the components individually.

Getting Started

This guide was created from a designer’s perspective, and if you have at least some basic knowledge of Figma (or Sketch), it should help you get started with creating, organizing and maintaining a component library for your design team.

If you are new to Figma, check the following tutorials before proceeding with the article:

Requirements

Before starting, there are some requirements that we have to cover to define the styles for the library.

Typography Scale

The first step to do is to define the typography scale; it helps to focus on how the text size and line height grow in your system, allowing you to define the visual hierarchy of your texts.

Typography scales are useful to improve the hierarchy of the elements, as managing the sizes and weights of the fonts can really guide the user through the content. (Large preview)

The type of scale depends on what you’re designing. It’s common to use a bigger ratio for website designs and a smaller ratio when designing digital products.

The reason for this is behind the design’s goal — a website is usually designed to communicate and convert so it gives you one or two direct actions. It’s easier in that context to have 36px for a main title, 24px for a secondary title, and 16px for a description text.

Related resource: “8-Point Grid: Typography On The Web” by Elliot Dahl.

On the other hand, digital products or services are designed to provide a solution to a specific problem, usually with multiple actions and possible flows. It means more information, more content and more components, all in the same space.

For this case, I personally find it rare to use more than 24px for texts. It’s more common to use small sizes for components — usually from 12 to 18 pixels depending on the text’s importance.

If you’re designing a digital product, it is useful to talk to the developers first. It’s easier to maintain a typography scale based on EM/REM more than actual pixels. The creation of a rule to convert pixels into EM/REM multiples is always recommended.

Related resource: “Defining A Modular Type Scale For Web UI” by Kelly Dern.

Color Scheme

Second, we need to define the color scheme. I think it’s best if you to divide this task into two parts.

  1. First, you need to define the main colors of the system. I recommend keeping it simple and using a maximum of four or five colors (including validation colors) because the more colors you include here, the more stuff you’ll have to maintain in the future.
  2. Next, generate more color values using the Sass functions such as “Lighten” and “Darken” — this works really well for user interfaces. The main benefit of this technique is to use the same hue for the different variants and obtain a mathematical rule that can be automated in the code. You can’t do it directly with Figma, but any Sass color generator will work just fine — for example, SassMe by Jim Nielsen. I like to increase the functions by 1% to have more color selection.

2 different sets of colors with different tones

Once you have your main colors (in our case, blue and grey), you can generate gradients using lighten and darken functions. (Large preview)

Tip: In order to be able to apply future changes without having to rename the variables, avoid using the color as part of the color name. E.g., instead of $blue, use $primary.

Recommended reading: What Do You Name Color Variables?” by Chris Coyier

Figma Styles

Once we have the typography scale and the color scheme set, we can use them to define the Library styles.

This is the first actual step into the library creation. This feature lets you use a single set of properties in multiple elements.

2 shapes showing a color palette and a text to represent the possible styles

Styles are the way to control all the basic details in your library. (Large preview)

Concrete Example

Let’s say you define your brand color as a style, it’s a soft-blue and you originally apply it to 500 different elements. If it is later decided that you need to change it to a darker blue with more contrast, thanks to the styles you can update all the 500 styled elements at once, so you won’t have to do it manually, element by element.

We can define styles for the following:

If you have variations of the same style, to make it easier to find them later, you can name the single styles and arrange them inside the panel as groups. To do so, just use this formula:

Group Name/Style Name

I’ve included a suggestion of how to name texts and colors styles below.

Text Styles

Properties that you can define within a text style:

  • Font size
  • Font weight
  • Line-height
  • Letter spacing

Tip: Figma drastically reduces the number of styles that we need to define in the library, as alignments and colors are independent of the style. You can combine a text style with a color style in the same text element.

4 shapes with text inside used as examples of different text styles

You can apply all the typography scale we’ve seen before as text styles. (Large preview)

Text Styles Naming

I recommend using a naming rule such as “Size/Weight”
(eg: 16/Regular, 16/SemiBold, 16/Bold).

Figma only allows one level of indentation, if you need to include the font you can always add a prefix before the size:
FontFamily Size/Weight or FF Size/Weight
*(eg: SourceSansPro 16/Regular or SSP 16/Regular).*

Color Styles

The color style uses its hex value (#FFF) and the opacity as properties.

Tip: Figma allows you to set a color style for the fill and a different one for the border within the same element, making them independent of each other.

4 shapes with colors inside, used as examples of different color styles

You can apply color styles to fills, borders, backgrounds, and texts. (Large preview)

Color Styles Naming

For a better organization I recommend using this rule “Color/Variant”. We named our color styles using “Primary/Default” for the starter color, “Primary/L1”, “Primary/L2” for lighten variants, and “Primary/D1”, “Primary/D2” for darken variants.

Effects

When designing an interface you might also need to create elements that use some effects such as drop shadows (the drag&drop could be an example of a pattern that uses drop shadows effects). To have control over these graphic details, you can include effect styles such as shadows or layer blurs to the library, and also divide them by groups if necessary.

2 shapes similar to paper, one above the other one to show the shadow effect

Define shadows and blurs to manage special interaction effects such as drag-n-drop. (Large preview)
Grids

To provide something very useful for your team, include the grid styles. You can define the 8px grid, 12 columns grid, flexible grids so your team won’t need to recreate them.

12 columns to represent the grid styles

There’s no need to memorize the grid sizes anymore. (Large preview)

Tip: Taking advantage of this feature, you can provide all the different breakpoints as ‘grid styles’.

Master Component

Figma lets you generate multiple instances of the same component and update them through a single master component. It’s easier than you might think, you can start with some small elements and then use them to evolve your library.

a single group of three shapes that shows how you can get seven different results by hiding some of the shapes

One master component to rule them all! (Large preview)

To explain this workflow better, I will use one of the basic components all the libraries have: the buttons.

Buttons!

Every system has different types of buttons to represent the importance of the actions. You can start having both primary and secondary buttons with only texts and one size, but the reality is that you’ll probably end up having to maintain something like this:

  • 2 color types (Primary | Secondary)
  • 2 sizes of buttons (Regular | Small)
  • 4 content types (Text Only | Icon Only | Text + Icon right | Icon Left + Text)
  • 5 states (Default | Hover | Active | Disabled | Focus)

This would give us up to 88 different components to maintain only with the set of buttons mentioned above!

a screenshot with a total of 88 different button components

Thanks to how Figma is built, you can easily manage a lot of button instances all at once. (Large preview)

Let’s Start Step By Step

The first step is to include all the variations together in the same place. For the buttons we’re going to use:

  • A single shape for the background of the button so that we can then place the color styles for the fill and the border;
  • The single text that will have both text and color styles;
  • Three icon components (positioned to the right, center and left) filled in with the color style (you will be able to easily swap the icons).

a group of divided elements: a rectangle shape, a button text and 3 icons

A shape, a text, and an icon walk into a Figma bar… (Large preview)

The second step is to create the master component (use the shortcut Cmd + Alt + K on Mac, or Ctrl + Alt + K on Windows) with all of the variations as instances. I suggest using a different and neutral style for the elements inside the master component and use the real styles on the sub-components, this trick will help the team use only sub-components.

You can see the visual difference between a master component and a sub-component in the next step:

A group of elements centered in the same space, one over the other one

The more elements, the more instances you can control. (Large preview)

In the third step you need to duplicate the master component to generate an instance, now you can use that instance to create a sub-component, and from now on every change you make to the master component will also change the sub-component you’ve created.

You can now start applying the different styles we’ve seen before to the elements inside the sub-component and, of course, you can hide the elements you don’t need in that sub-component.

An example showing how 8 different buttons can be generated from 1 single component

Thanks to the color styles you can generate different components using the same shape. In this example, primary and secondary styles are generated from the same master component. (Large preview)

Text Alignment

As I’ve shown you in the styles, the alignments are independent of the style. So if you want to change the text alignment, just select it by hitting Cmd/Ctrl and changing it. Left, center or right: it will all work and you can define different sub-components as I did with the buttons.

Tip: To help you work faster without having to find the exact element layer, if you delete an element inside the instance, it will hide the element instead of actually deleting it.

Component Organization

If you’re coming from Sketch, you could be having trouble with the organization of the components in Figma as there are a few key differences between these two tools. This is a brief guide to help you organize the components well so that the instance menu doesn’t negatively affect your team’s effectiveness.

showing the instance menu open with more unordered sub-menus

As you can see here, our library had so many sub-menus that as a result the navigation was going off the screen on MacBooks, that was a big problem for our library. We were able to find a workaround for this issue. (Large preview)

showing the improvements on the instance menu open with ordered sub-menus

This was the result after improving the library order following the rules for pages and frames, now it’s way more usable and organized for our teams. (Large preview)

We’ve all been there, the solution is easier than you think!

Here’s what I have learned about how to organize the components.

Figma Naming

While in Sketch all the organization depends only on the single component name, in Figma it depends on the Page name, the Frame name, and the single Component name — exactly in that order.

In order to provide a well-organized library, you need to think of it as a visual organization. As long as you respect the order, you can customize the naming to fit your needs.

Here’s how I’ve divided it:

  • File Name = Library Name (e.g. Lexicon);
  • Page Name = Component Group (e.g. Cards);
  • Frame Name = Component Type (e.g. Image Card, User Card, Folder Card, etc);
  • Component Name = Component State (e.g. Default, Hover, Active, Selected, etc).

Showing the main page named ‘Cards’, the frame named ‘Image Card’ and the layer named ‘Card Hover’

This structure is the equivalent to the Sketch naming of ‘Cards/Image Card/Card Hover’. (Large preview)

Adding Indentation Levels

When creating the Lexicon library, I found that I actually needed more than three levels of indentation for some of the components, such as the buttons that we saw before.

For these cases, you can extend the naming using the same method as Sketch for nested symbols (using the slashes in the component name, e.g. “Component/Sub-Component”), under the condition that you do it only after the third level of indentation, respecting the structural order of the first three levels as explained in the previous point.

This is how I organized our buttons:

  • Page name = Component Group (e.g. Buttons);
  • Frame name = Component Size (e.g. Regular or Small);
  • Component name = Style/Type/State (e.g. Primary/Text/Hover).

Showing the main page named 'Buttons', the frame named 'Buttons Regular' and the layer named 'Primary/Text/Button Hover' as example of the possible structures.

This structure is the equivalent to the Sketch naming of ‘*Buttons/Buttons Regular/Primary/Text/Button Hover*’. (Large preview)

Tip: You can include the component name (or a prefix of the name) in the last level, this will help your team to better identify the layers when they import the components from the library.

Icons Organization

Organizing the icons in Figma can be challenging when including a large number of icons.

As opposed to Sketch which uses a scroll functionality, Figma uses the sub-menus to divide the components. The problem is that if you have a large number of icons grouped in sub-menus, at some point they might go off screen (my experience with Figma on a MacBook Pro).

Showing the instance menu for the icons with a single scrollable sub-menu.

An example of how the components are organized inside a single scrollable sub-menu. (Large preview)

Showing the instance menu for the icons with more than 10 sub-menus and cover all the screen.

As you can see, using a Macbook Pro the result was the menus going outside the screen. (Large preview)

Here are two possible solutions:

  • Solution 1
    Create a page named “Icons” and then a frame for each letter of the alphabet, then place each icon in the frame based on the icon’s name. For example, if you have an icon named “Plus”, then it will go in the “P” frame.
  • Solution 2
    Create a page named “Icons” and then divide by frames based on the icon categories. For example, if you have icons that represent a boat, a car, and a motorcycle, you can place them inside a frame named “vehicles”.

The instance menu is open, showing the alphabetical order of the icons in Figma.

I, personally, applied solution 1. As you can see in this example, we had a huge number of icons so this was the better fit. (Large preview)

Conclusion

Now that you know what’s exactly behind a team’s library construction in Figma, you can start building one yourself! Figma has a free subscription plan that will help you to get started and experiment with this methodology in a single file (however, if you want to share a team library, you will need to subscribe to the “Professional” option).

Try it, create and organize some advanced components, and then present the library to your team members so you could amaze them — or possibly convince them to add Figma to their toolset.

Finally, let me mention that here in Liferay, we love open-source projects and so we’re sharing a copy of our Lexicon library along with some other resources. You can use the Lexicon library components and the other resources for free, and your feedback is always welcome (including as Figma comments, if you prefer).

The Lexicon logo, it’s similar to a hexagon and a fingerprint together.

Lexicon is the design language of Liferay, used to provide a Design System and a Figma Library for the different product teams. (Large preview)

If you have questions or need help with your first component library in Figma, ask me in the comments below, or drop me a line on Twitter.

Further Resources

Smashing Editorial
(mb, yk, il)
Reblogged 52 seconds ago from www.smashingmagazine.com

Unleash The Power Of Path Animations With SVGator

Unleash The Power Of Path Animations With SVGator

Unleash The Power Of Path Animations With SVGator

Mikołaj Dobrucki

2019-06-18T13:30:59+02:00
2019-06-19T07:35:56+00:00

(This is a sponsored article.) Last year, a comprehensive introduction to the basic use of SVGator was published here on Smashing Magazine. If you’d like to learn about the fundamentals of SVGator, setting up your first projects, and creating your first animations, we strongly recommended you read it before continuing with this article.

Today, we’ll take a second look to explore some of the new features that have been added to it over the last few months, including the brand new Path Animator.

Note: Path Animator is a premium feature of SVGator and it’s not available to trial users. During a seven-day trial, you can see how Path Animator works in the sample project you’ll find in the app, but you won’t be able to apply it to your own SVGs unless you’re opted-in for a paid plan. SVGator is a subscription-based service. Currently, you can choose between a monthly plan ($18USD/month) and a yearly plan ($144USD total, $12USD/month). For longer projects, we recommend you consider the yearly option.

Path Animator is just the first of the premium features that SVGator plans to release in the upcoming months. All the new features will be available to all paid users, no matter when they subscribed.

The Charm Of Path Animations

SVG path animations are by no means a new thing. In the last few years, this way of enriching vector graphics has been heavily used all across the web:

Animation by Codrops (Original demo) (Large preview)

Path animations gained popularity mostly because of their relative simplicity: even though they might look impressive and complex at first glance, the underlying rule is in fact very simple.

How Do Path Animations Work?

You might think that SVG path animations require some extremely complicated drawing and transform functions. But it’s much simpler than it looks. To achieve effects similar to the example above, you don’t need to generate, draw, or animate the actual paths — you just animate their strokes. This brilliant concept allows you to create seemingly complex animations by animating a single SVG attribute: stroke-dashoffset.

Animating this one little property is responsible for the entire effect. Once you have a dashed line, you can play with the position of dashes and gaps. Combine it with the right settings and it will give you the desired effect of a self-drawing SVG path.

If this still sounds rather mysterious or you’d just like to learn about how path animations are made in more detail, you will find some useful resources on this topic at the end of the article.

No matter how simple path animations are compared with what they look like, don’t think coding them is always straightforward. As your files get more complicated, so does animating them. And this is where SVGator comes to the rescue.

Furthermore, sometimes you might prefer not to touch raw SVG files. Or maybe you’re not really fond of writing code altogether. Then SVGator has got you covered. With the new Path Animator, you can create even the most complex SVG path animations without touching a line of code. You can also combine coding with using SVGator.

To better understand the possibilities that Path Animator gives us, we will cover three separate examples presenting different use cases of path animations.

Example #1: Animated Text

In the first example, we will animate text, creating the impression of self-writing letters.

Final result of the first example
Final result of the first example (Large preview)

Often used for lettering, this cute effect can also be applied to other elements, such as drawings and illustrations. There’s a catch, though: the animated element must be styled with strokes rather than fills. Which means, for our text, that we can’t use any existing font.

Outlining fonts, no matter how thin, always results in closed shapes rather than open paths. There are no regular fonts based on lines and strokes.

Outlined fonts are not suitable for self-drawing effects with Path Animator

Outlined fonts are not suitable for self-drawing effects with Path Animator. (Large preview)

Path animations require strokes - these paths would work great with Path Animator

Path animations require strokes. These paths would work great with Path Animator. (Large preview)

Therefore, if we want to animate text using path animations we need to draw it ourselves (or find some ready-made vector letters suitable for this purpose). When drawing your letters, feel free to use some existing font or typography as a reference — don’t violate any copyright, though! Just keep in mind it’s not possible to use fonts out of the box.

Preparing The File

Rather than starting with an existing typeface, we’ll begin with a simple hand-drawn sketch:

A rough sketch for the animation

A rough sketch for the animation (pardon my calligraphy skills!) (Large preview)

Now it’s time to redraw the sketch in a design tool. I used Figma, but you can use any app that supports SVG exports, such as Sketch, Adobe XD, or Adobe Illustrator.

Usually, I start with the Pen tool and roughly follow the sketch imported as a layer underneath:

Once done, I remove the sketch from the background and refine the paths until I’m happy with the result. No matter what tools you use, nor technique, the most important thing is to prepare the drawing as lines and to use just strokes, no fills.

These paths can be successfully animated with Path Animator as they are created with strokes

These paths can be successfully animated with Path Animator as they are created with strokes. (Large preview)

In this example, we have four such paths. The first is the letter “H”; the second is the three middle letters “ell”; and “o” is the third. The fourth path is the line of the exclamation mark.

The dot of “!” is an exception — it’s the only layer we will style with a fill, rather than a stroke. It will be animated in a different way than the other layers, without using Path Animator.

Note that all the paths we’re going to animate with Path Animator are open, except for the “o,” which is an ellipse. Although animating closed paths (such as ellipses or polygons) with Path Animator is utterly fine and doable, it’s worth making it an open path as well, because this is the easiest way to control exactly where the animation starts. For this example, I added a tiny gap in the ellipse just by the end of the letter “l” as that’s where you’d usually start writing “o” in handwriting.

A small gap in the letter ‘o’ controls the starting point of the animation

A small gap in the letter ‘o’ controls the starting point of the animation. (Large preview)

Before importing our layers to SVGator, it’s best to clean up the layers’ structure and rename them in a descriptive way. This will help you quickly find your way around your file once working in SVGator.

If you’d like to learn more about preparing your shapes for path animations, I would recommend you check out this tutorial by SVGator.

It’s worth preparing your layers carefully and thinking ahead as much as possible. At the time of writing, in SVGator you can’t reimport the file to an already existing animation. While animating, if you discover an issue that requires some change to the original file, you will have to import it into SVGator again as a new project and start working on your animation from scratch.

Creating An Animation

Once you’re happy with the structure and naming of your layers, import them to SVGator. Then add the first path to the timeline and apply Path Animator to it by choosing it from the Animators list or by pressing Shift + T.

To achieve a self-drawing effect, our goal is to turn the path’s stroke into a dashed line. The length of a dash and a gap should be equal to the length of the entire path. This allows us to cover the entire path with a gap to make it disappear. Once hidden, change stroke-dashoffset to the point where the entire path is covered by a dash.

SVGator makes it very convenient for us by automatically providing the length of the path. All we need to do is to copy it with a click, and paste it into the two parameters that SVGator requires: Dashes and Offset. Pasting the value in Dashes turns the stroke into a dashed line. You can’t see it straightaway as the first dash of the line covers the whole path. Setting the Offset will change stroke-dashoffset so the gap then covers the path.

Once done, let’s create an animation by adding a new keyframe further along the timeline. Bring Offset back to zero and… ta-da! You’ve just created a self-drawing letter animation.

Creating a self-writing text animation in SVGator: Part 1

There’s one little issue with our animation, though. The letter is animated — but back-to-front. That is, the animation starts at the wrong end of the path. There are, at least, a few ways to fix it. First, rather than animating the offset from a positive value to zero, we can start with a negative offset and bring it to zero. Unfortunately, this may not work as expected in some browsers (for example, Safari does not accept negative stroke offsets). While we wait for this bug to be fixed, let’s choose a different approach.

Let’s change the Dashes value so the path starts with a gap followed by a dash (by default, dashed lines always start with a dash). Then reverse the values of the Offset animation. This will animate the line in the opposite direction.

Reversing the direction of self-writing animation

Now that we’re done with “H” we can move on to animating all the other paths in the same way. Eventually, we finish by animating the dot of the exclamation mark. As it’s a circle with a fill, not an outline, we won’t use Path Animator. Instead, we use Scale Animator to the make dot pop in at the end of the animation.

Creating a self-writing text animation in SVGator: Part 2

Always remember to check the position of an element’s transform origin when playing with scale animations. In SVG, all elements have their transform origin in the top-left corner of the canvas by default. This often makes coding transform functions a very hard and tedious task. Fortunately, SVGator saves us from all this hassle by calculating all the transforms in relation to the object, rather than the canvas. By default, SVGator sets the transform origin of each element in its own top-left corner. You can change its position from the timeline, using a button next to the layer’s name.

Transform origin control in SVGator’s Timeline panel

Transform origin control in SVGator’s Timeline panel (Large preview)

Let’s add the final touch to the animation and adjust the timing functions. Timing functions define the speed over time of objects being animated, allowing us to manipulate their dynamics and make the animation look more natural.

In this case, we want to give the impression of the text being written by a single continuous movement of a hand. Therefore, I applied an Ease-in function to the first letter and an Ease-out function to the last letter, leaving the middle letters with a default Linear function. In SVGator, timing functions can be applied from the timeline, next to the Animator’s parameters:

Timing function control in SVGator’s Timeline panel

Timing function control in SVGator’s Timeline panel (Large preview)

After applying the same logic to the exclamation mark, our animation is done and ready to be exported!

Final result of the first example

Example #2: Animated Icon

Now let’s analyze a more UI-focused example. Here, we’re going to use SVGator to replicate a popular icon animation: turning a hamburger menu into a close button.

Final result of the second example
Final result of the second example (Large preview)

The goal of the animation is to smoothly transform the icon so the middle bar of the hamburger becomes a circle, and the surrounding bars cross each other creating a close icon.

Preparing The File

To better understand what we’re building and how to prepare a file for such an animation, it’s useful to start with a rough sketch representing the key states of the animation.

It’s helpful to plan your animation ahead and start with a sketch

It’s helpful to plan your animation ahead and start with a sketch. (Large preview)

Once we have a general idea of what our animation consists of, we can draw the shapes that will allow us to create it. Let’s start with the circle. As we’re going to use path animation, we need to create a path that covers the whole journey of the line, starting as a straight bar in the middle of the hamburger menu, and finishing as a circle around it.

Complete path of the middle bar animation turning into a circle

Complete path of the middle bar animation turning into a circle. (Large preview)

The other two bars of the menu icon have an easier task — we’re just going to rotate them and align to the centre of the circle. Once we combine all the shapes together we’re ready to export the file as SVG and import it to SVGator.

Our icon, ready to be animated in SVGator

Our icon, ready to be animated in SVGator. (Large preview)

Creating An Animation

Let’s start by adding the first shape to the timeline and applying Path Animator to it. For the initial state, we want only the horizontal line in the middle to be visible, while the rest of the path stays hidden. To achieve it, set the length of the dash to be equal to the length of the hamburger’s lines. This will make our straight middle line of the menu icon. To find the correct value, you can use the length of one of the other lines of the hamburger. You can copy it from the timeline or from the Properties panel in the right sidebar of the app.

Then set the length of the following gap to a value greater than the remaining length of the path so it becomes transparent.

Creating an icon animation in SVGator: Part 1

The initial state of our animation is now ready. What happens next is that we turn this line into a circle. To do that, two things need to happen simultaneously. First, we use Offset to move the line along the path. Second, we change the width of the dash to make the line longer and cover the entire circle.

Creating an icon animation in SVGator: Part 2

With the circle ready, let’s take care of the close icon. Just as before, we need to add two animations at the same time. First, we want the top line to lean down (45 degrees) and the bottom line to move up (-45 degrees) until they cross each other symmetrically. Second, we need to move the lines slightly to the right so they stay aligned with the circle.

As you might remember from the previous example, in SVGator, transform origins are located in the top-left corner by default. That’s very convenient to us as, in this case, that is exactly where we want them to be. All we need to do is to apply the correct rotation angles.

When it comes to aligning the lines with the circle, note that we don’t have to move them separately. Rather than adding Animators to both of the lines, we can add a group containing both of them to the timeline, and animate them together with a single Position Animator. That’s one of those moments when a nice, clean file structure pays off.

Creating an icon animation in SVGator: Part 3

Next thing to do is add a reverse animation that turns the close button back into a hamburger menu. To achieve that, we can basically follow the previous steps in reverse order. To speed things up a bit, copy and paste the existing keyframes on the timeline — that’s yet another improvement SVGator introduced in the past few months.

Reversing icon animation: back to the hamburger menu.

Once done, don’t forget to adjust the timing functions. Here, I’ve decided to go with an Ease-in-out effect on all elements. Our icon is ready for action.

Final result of the second example

Implementation

Even though implementing microinteractions goes far beyond the scope of this article, let me take a moment to briefly describe how such animation can be brought to life in a real project.

Illustrations and decorative animation are usually more straightforward. Quite often, you can use SVG files generated by SVGator out of the box. We can’t say that about our icon, though. We want the first part of the animation to be triggered when users click the button to open the menu drawer, and the second part of the animation to play once they click it for the second time to close the menu.

To do that, we need to slice our animation into a few separate pieces. We won’t discuss here the technical details of implementing such animation, as it depends very much on the environment and tech stack you’re working with; but let’s at least inspect the generated SVG file to extract the crucial animation states.

We’ll start by hiding the background and adjusting the size of the canvas to match the dimensions of the icon. In SVGator, we can do this at any time, and there are no restrictions to the size of our canvas. We can also edit the styles of the icon, such as color and width of the stroke, and test what your graphic will look like on a dark background using a switch in the top-right corner.

Preparing icon animation for development

When we’re ready, we can export the icon to SVG and open it in a text editor.

Elements you see in the body of the document are the components of your graphic. You should also notice that the first line of code is exceptionally long. Straight after the opening <svg> tag, there’s a <style> element with plenty of minified CSS inside. That’s where all the animation happens.

<svg viewBox="0 0 600 450" fill="none" xmlns="http://www.w3.org/2000/svg" id="el_vNqlglrYK"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations -->
<g id="el_SZQ_No_bd6">
<g id="el_BVAiy-eRZ3_an_biAmTPyDq" data-animator-group="true" data-animator-type="0"><g id="el_BVAiy-eRZ3">
<g id="el_Cnv4q4_Zb-_an_6WWQiIK_0" data-animator-group="true" data-animator-type="1"><path id="el_Cnv4q4_Zb-" d="M244 263H356" stroke-linecap="round"/></g>
<g id="el_aGYDsRE4sf_an_xRd24ELq3" data-animator-group="true" data-animator-type="1"><path id="el_aGYDsRE4sf" d="M244 187H356" stroke-linecap="round"/></g>
</g></g>
<path id="el_VqluQuq4la" d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/>
</g>
</svg>

It’s really nice of SVGator to minify the code for us. However, we’ll have to undo it. Once the CSS code is written out in full (you can do this in your browser’s development tools, or in one of many online code formatters), you’ll see that it’s a long list of @keyframes followed by a list of id rules using the @keyframes in their animation properties.

The code may look unreadable (even when nicely formatted) but, rather, it’s very repetitive. Once you understand the underlying rule, following it is no longer that hard. First, we’ve got the @keyframes. Each animated element has its own @keyframes @-rule. They’re sorted in the same order as elements in SVGator. Therefore, in our case, the first @-rule applies to the middle bar of the hamburger icon, the second one to the top bar, and so on. The keyframes inside also match the order of keyframes created in SVGator:

@keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */
    0%{
        stroke-dasharray: 112, 2000; /* initial state */
    }
    25%{
        stroke-dasharray: 112, 2000;
    }
    50%{
        stroke-dasharray: 600, 2000; /* turns into a circle */
    }
    75%{
        stroke-dasharray: 600, 2000; /* back at initial state */
    }
    100%{
        stroke-dasharray: 112, 2000;
    }
}

All you need to do now is use these values from the keyframes to code your interaction. It’s still a lot of work up ahead, but thanks to SVGator the crucial part is already done.

What happens next is another story. However, if you’re curious to see an example of how this animation could work in practice, here’s a little CodePen for you:

See the Pen [Hamburger icon path animation](https://codepen.io/smashingmag/pen/ewNdJo) by Mikołaj.

See the Pen Hamburger icon path animation by Mikołaj.

The example is built with React and uses states to switch CSS classes and trigger transitions between the respective CSS values. Therefore, there’s no need for animation properties and @keyframes @-rules.

You can use a set of CSS custom priorities listed at the top of the SCSS code to control the styling of the icon as well as duration of the transitions.

Example #3: Animated Illustration

For the third and final example of this article, we’re going to create an animated illustration of an atom with orbiting particles.

Final result of the third example
Final result of the third example (Large preview)

Dashed Lines And Dotted Lines

In the two previous examples, we’ve taken advantage of dashed SVG paths. Dashed lines are cool but did you know that SVG also supports dotted lines? A dotted line in SVG is no more, no less than a dashed line with round caps, and the length of the dashes is equal to zero.

If we can have a path with lots of dots, who said we can’t have a path with a single dot? Animate the stroke’s offset and you’ve got an animation of a circle following any path you want. In this example, the path will be an ellipse, and a circle will represent an orbiting particle.

Preparing The File

As no SVG element can have two strokes at the same time, for each of the particles we need two ellipses. The first of them will be an orbit, the second will be for the particle. Multiply it by three, combine with another circle in the middle for the nucleus and here it is: a simple atom illustration, ready to be animated.

Our illustration, ready to be imported to SVGator.

Our illustration, ready to be imported to SVGator. (Large preview)

Note: At the time of writing, creating dotted lines in Figma is a hard task. Not only can’t you set a dash’s length to zero, but neither can you create a gap between the dashes long enough to cover the entire path. And when it comes to export, all your settings are gone anyway. Nonetheless, if you’re working with Figma, don’t get discouraged. We’ll fix all of these issues easily in SVGator. And if you’re working in Sketch, Illustrator, or similar, you shouldn’t experience these problems at all.

Creating An Animation

Once you have imported the SVG file into SVGator, we’ll start by fixing the dotted lines. As mentioned above, to achieve a perfect circular dot, we need a dash length set to zero. We also set the length of the gap equal to the length of the path (copied from above). This will make our dot the only one visible.

Creating an illustration animation in SVGator: Part 1

With all three particles ready, we can add new keyframes and animate the offsets by one full length of the path. Finally, we play a bit with the Offset values to make the dots’ positions feel a bit more random.

Creating an illustration animation in SVGator: Part 2.

Remember that if you find your animation too fast or too slow you can always change its duration in the settings. Right now, SVGator supports animations up to 30 seconds long.

As a final touch, I’ve added a bit of a bounce to the whole graphic.

Creating an illustration animation in SVGator: Part 3

Now the animation is ready and can be used, perhaps as a loader graphic.

Final result of the third example

A Quick Word On Accessibility

As you can see, there’s hardly a limit to what can be achieved with SVG. And path animations are a very important part of its tool kit. But as a wise man once said, with great power comes great responsibility. Please refrain from overusing them. Animation can add life to your product and delight users, but too many animations can ruin the whole experience as well.

Also, consider allowing users to disable animations. People suffering from motion sickness and other related conditions will find such an option very helpful.

Conclusion

That’s it for today. I hope you enjoyed this journey through the possibilities of path animations. To try them out yourself, just visit SVGator’s website where you can also learn about its other features and pricing. If you have any remarks or questions, please don’t hesitate to add them in the comments. And stay tuned for the next updates about SVGator — there are lots of other amazing new features already on the way!

Further Reading

Useful Resources

Smashing Editorial
(og, yk, il)
Reblogged 53 seconds ago from www.smashingmagazine.com

Google Search Console drops preferred domain setting

Make sure to watch your Google search results to see if this impacts the canonical URL Google shows in its search results.

Please visit Search Engine Land for the full article.

Reblogged 9 hours ago from feeds.searchengineland.com

At Sprout, all agencies are partners

You don’t have to look far and wide at Sprout to see someone that has lived the #agencylife. Across our product, marketing, sales and success organizations, we have team members that have experienced the highs and lows of working at agencies, from boutique and startup agencies to large and enterprise agencies … and everything in between.

The rush of pitching a new creative campaign, the late nights tweaking copy or putting final touches on a pitch deck and the feeling of accomplishment when the results show real impact for a client’s bottom line. We know them all, all too well.

And from that experience and in our work every day with our agency customers, we have seen the time, creativity and commitment that agencies put in to deliver clients the best and most creative campaigns possible.

We’ve also seen that running and working at an agency brings its own challenges.

From managing the day to day on client projects, to staying on top of the most recent trends in the industry, to working through new pitches, proposals and project requests … the work can pile up. In many ways, all agency team members are responsible for sourcing new business, executing on the client services cycles and growing client relationships:

 

 

And as the martech ecosystem continues to grow, the options for agencies and clients are endless. Managing an agency’s or a client’s ever-growing tech stack can quickly shift your role from client service provider to tool manager.

The agency <> client opportunity

Research on how and when clients outsource work to agencies tells us that the biggest challenge in front of marketing agencies is meeting the client’s expectations and proving value. And data from our social media and digital marketing agency customers tell us that the most common pain points for agencies are to meet client expectations and continue to educate on the value of the services provided.

 

 

For those agencies that provide social media services as part of their digital marketing offering, that expectation-to-value gap is even more prominent.

In the 2019 Sprout Social Index, 90% of social marketers agree that investing in social media has a direct impact on their business revenue, yet communicating its value across departments remains their largest roadblock.

So, how do social media and digital marketing agencies deliver on client expectations and prove the value of their work in an ever-changing digital landscape, where social plays an increasingly important role in building brand, generating revenue and managing customer experience?

Putting partnership first

Since we launched our Agency Partner Program in 2017, we’ve been committed to the idea that agencies shouldn’t have to go it alone. The opportunity is for SaaS platforms to recognize the role that we play in helping agencies execute and report on their client services, and invest accordingly.

Which is why we’re excited to relaunch our Agency Partner Program under the rallying cry that All Agencies are Partners.

 

 

Now, all agencies that work with Sprout are eligible to take advantage of partner program benefits. No longer limited to one specific plan type, Sprout is invested in making the tools agencies need to make their business successful — from marketing resources and industry intel to education and training. And with a global community of agencies with whom to network and collaborate, the power of the partner community only increases as it grows.

And since every agency’s goals may be different, the program is built to meet you where you are. We’ve provided agency partner benefits in co-marketing, communities, growth and product at every tier level. So, program participation unlocks growth … not the other way around.

 

Partnership plus platform

We see time and again that our agency customers come to Sprout for help with managing and reporting on their client social media services. Whether they’re managing a client’s social media campaigns, using social listening for a global brand or operating a client’s social customer care strategy across hundreds of social profiles, the power of the Sprout platform gives them confidence that they are tapping into world-class technology to run their business.

Our promise is to couple our best-in-class platform with best-in-class partnership.

The Agency Partner Program is now built to help all of our agency customers, whether they need to:

  • quickly and effectively train their teams;
  • leverage pre-built tools, templates and creative to efficiently market their agency; or
  • partner on growth opportunities that help increase their client base or deepen their service offering,

All you have to do is get certified. We’ll provide the tools, templates, knowledge and know-how to stay on top of social and industry trends and help deliver best-in-class social media services.

 

A global community of agencies, helping each other

If we’ve learned one thing from our first two years investing in partnership with agencies, it’s that agencies are more than willing to help each other. Whether it be through our Agency Facebook Group, at in-person agency events or through virtual meetups in our Agency Partner Slack workspace, agencies are tapping into the collective mindshare to raise all boats…and help each other deliver excellence in client social media services.

To get a glimpse of the impressive array of expertise of our Certified Agency Partners, you need to look no further than their ongoing social conversation or their capabilities, as featured in our Partner Directory.

The Power of Partnership

This new phase of our Agency Partner Program is and will be built to help all agencies succeed. We’re doubling down on our belief in agencies as critical to helping organizations and brands of all sizes make real connection through social.

Clients come to agencies to help them elevate their strategies and produce results. Agencies can and should rely on the platforms they use and the teams that support them to not only help them deliver on what they need today, but to be a partner in getting to where they want to be tomorrow.

We believe in the power of agencies … treating all agencies like partners is how we turn that belief into action.

And we’re just getting started.


To find out more about our Agency Partner Program and the growth, co-marketing and education benefits available at each partner tier, check out our plan options for agencies or apply to be a partner today.

This post At Sprout, all agencies are partners originally appeared on Sprout Social.

Reblogged 10 hours ago from feedproxy.google.com

Personal branding trends to tap into on social media

Having a personal brand, whether you’re job hunting, running your own business or at any stage in your career, is essential. It’s what separates you from the rest of the pack and helps build important connections that boost your growth and development.

One of the best ways to enhance your personal brand is through social media. Just as social has given rise to the likes of influencer marketing, there are opportunities across a wide variety of networks in which to build and enhance your personal brand.

However, before you get too carried away, you should be aware of the following social media trends (and to some degree, expectations) — they’ll greatly impact how you’ll want to launch and run your personal brand campaign.

1. Embrace authenticity

How important is authenticity on social media? Look no further than the aforementioned influencer industry, which has embraced genuine perspectives. If you really want to connect with your audience, you, too, have to consistently be 100% yourself.

“A great personal brand is one that is authentic and intrinsically connected to who you are as a person. It magnifies your talents and knowledge in a way that makes them appealing to a specific audience — in this case, your coworkers, clients, and extended network.”

Ed Keller, CEO of Navient

Taking it a step further by honing in on the data, Sprout Social’s #BrandsGetReal report on “Social media & the evolution of transparency” was able to put numbers behind the ever-growing authenticity trend.

Authenticity is now a standard expectation on social media from brands

While the study itself may have been centered around businesses, there is much to be gained when it comes to adopting the same social media trends and expectations for your personal brand. And this is especially true if you’re well-known not just as an individual, but as a public-facing representative of a company as well.

Consider what the report found in regards to CEOs:

CEOs have the unique power to bolster transparency efforts on social and bring out the best in others. One third of consumers say they would purchase more from brands whose CEOs demonstrate transparency on social. By setting an example of transparency, CEOs can lead the charge in empowering their employees to share and advocate authentically for the brand on social.

#BrandsGetReal: Social media & the evolution of transparency

So, what does authenticity on social media look like in action?

Famed entrepreneur and businessman Gary Vaynerchuk suggests that you “Document. Don’t create.” This could be sharing your successes and failures, discussing a journey, giving your opinion or letting people see what your daily life is like, both inside and outside work.

You also could use Sprout’s 2018 Index for inspiration. For example, the type of posts most likely to earn engagement and shares from brands are those that entertain, followed by posts that inspire and posts that tell a story. All of which translate well when considering content for your personal brand strategy.

2. Keep organized

What does calendar management have to do with social media and personal branding? Broadly speaking, it ensures that you’re able to maintain and map out the content you’ll be sharing across your social media accounts. Because you’re going to need to create and share multiple types of content — including video, podcasts, selfies, and mobile-friendly articles — a calendar will guide your efforts.

For example, a calendar will make sure that you block out time in your schedule to brainstorm and devise content. After it’s been created, you’ll then use your calendar to determine when that content will go live. It enables you to group like-minded content and themes in campaigns to keep engagement high. In short, it provides some much-needed structure to your social media strategy.

Additionally, it provides an overview of your content schedule so you can keep tabs on what’s been published and track how it’s performing. And, most importantly, it encourages accountability — which is important, considering that around half of marketers are making up their social media plans on the fly.

Once your content is off and running, reap the benefits of planning while also saving time by using Sprout to automatically schedule posts during the most optimal times. But for now, learn more about the best times to post on social media to get a feel for when users are most engaged across various networks, or learn how to easily create your social media calendar.

3. Stories aren’t going anywhere

In 2013, Snapchat introduced the world to Stories. Since then, Facebook Messenger, Instagram, WhatsApp and YouTube have joined in on the fun and for good reason. As noted in Fast Company, research shows that “Stories are growing 15 times faster than newsfeeds. More than one billion users are already hooked on the format.”

While the look of Stories is all relatively similar across each platform, the biggest consideration you’ll want to make is determining the type of content that fits each network’s audience.

For those on Facebook and Instagram, you may be able to double dip using a tool like Sprout rather than spending time going into each account, while the likes of WhatsApp and YouTube may demand something a little different. This will also vary depending on what you’ve established for your personal brand.

Bottom line: If you haven’t adopted Stories yet, it’s time to incorporate the format into your strategy to take your personal brand to the next level.

4. Don’t limit yourself to just Facebook

Around 69% of U.S. adults use Facebook, so there’s plenty of reasons to make sure you’ve staked out your social presence on the platform. However, there are plenty of other opportunities to expand the reach of your personal brand across other networks. You don’t want to miss out on the opportunity to establish your voice on Twitter and LinkedIn as well.

Twitter, as Dakota Shane, co-founder of Copy Buffs, explains in Inc., is ideal for developing thought leadership by sharing the content you’ve created, as well as your thoughts on current events. t’s a great platform for sharing brief, easily digested updates that can quickly grab an audiences’ attention.

LinkedIn, on the other hand, can help you establish meaningful professional connections through narrative-style posts, such as telling the story of how you overcame a challenge in your career. On LinkedIn, you can repurpose some of the longer-form content you might have shared on Facebook and gain the readership of a more targeted professional audience.

5. Embrace social media automation on your profiles

Artificial intelligence is changing the way we conduct business across all types of industries. We’re seeing this with the increased use of chatbots on social media. While chatbots are an obvious answer for customer service, they’re also great for individuals who want to build stronger relationships with audience members. For instance, these bots can generate leads and revenue, by providing after-hours support and steering users in the right direction.

Let’s say that someone wants to know what services you offer or whether you have any upcoming speaking engagements. The chatbot could then send them to your “Services” or “Events” page. As a result, you’ll save crucial amounts of time and money while being able to connect with many more interested audience members.

More promising, AI can learn more about your audience and make smart suggestions. For example, as tools powered through machine learning advance, you could easily identify the content people engage with the most, as well as pinpoint when and where to share this content. Sprout’s ViralPost is one example, as it analyzes your followers’ engagement with your posts to identify a customized optimal posting time for your content.

6. Build a robust community on social media

“Building community is one of the most rewarding and wonderful ways to launch and grow a brand,” wrote Forbes contributor Goldie Chan. “After all, if your community doesn’t feel a connection to you or to each other, it’s much less likely they will engage in with your content or purchase your products.”

Private communities have been a major social media trend emerging throughout 2019. Business Pages on Facebook can now participate in Facebook Groups, giving brands a way to directly connect with their most dedicated followers.

These passionate fans are equally interested in keeping in touch with brands through more exclusive communities like Facebook and LinkedIn Groups. According to research from the Sprout Social Index 2019, 46% of consumers join private groups specifically to communicate directly with a brand or business.

Among other benefits, private groups can help your personal brand get feedback from the most passionate fans and present content without worrying about algorithm changes. This is one of the reasons some influencer accounts on platforms like Instagram have chosen to switch their accounts to private. Because FOMO has a strong psychological pull, you can use this to your advantage by creating private and exclusive accounts and groups.

Conclusion

While using social media is a given to strengthen your personal brand, it can get overwhelming. However, these trends should guide you in creating the right content, as well as assist you in engaging with your audience. They’ll also keep your efforts organized and ensure you’re not spending every waking moment on social — after all, your personal brand will be pretty boring if you’re not actually doing anything.

Personal branding trends are evolving constantly, but it’s important that you take the time to invest in yourself and make sure you are doing everything you can to build a personal brand that stands out.

This post Personal branding trends to tap into on social media originally appeared on Sprout Social.

Reblogged 10 hours ago from feedproxy.google.com

SMX Overtime: When to use automation to improve account performance

PPC expert Duane Brown answers questions from SMX Advanced about what works, and what doesn’t, in smart shopping campaigns, automated bidding and third-party automation tools.

Please visit Search Engine Land for the full article.

Reblogged 13 hours ago from feeds.searchengineland.com

The 8-Step Guide to Achieving 100% Google Page Speed

Nothing ruins a great website more than a poor loading experience. In fact, Google has said that visitors who experience a load time of seven seconds are 113% more likely to bounce off a page.

Page speed is so important to the user experience that Google began including it as one of its ranking factors in 2018. Now, even if you’re working hard on SEO strategies, a low page speed could allow another site — maybe even one of your competitors — to get ahead of you on a crucial search engine results page.

For those who want to gain insight on their loading times, Google offers a free PageSpeeds Insights tool which can score your page on a scale of zero to 100. Here’s a quick example of a report that PageSpeed Insights presents after you search “google.com”:

Google.com's score at 99% on Google PageSpeed Insights.

The report looks clean and simple. But if you aren’t the most tech-savvy person, it can be a little hard to comprehend what some of the report’s suggestions actually mean.

Here’s an example of a report that has a long list of jargony comments:

opportunity suggestions on Google PageSpeed Insights

While the jargon above might look intimidating, many of the PageSpeed Insights suggestions could actually be pretty simple to take on — even if you aren’t an web developer.

To help you boost your user experience and address slow loading times, here’s an eight-step guide to achieving a 100% speed score. For each step, we’ll explain why it’s important, give you insight on how to do it, and let you know if a tech expert might need to get involved.

1. Determine if and where you’re lagging.

Many CMSs have built-in tools or plugin options that can help you figure out why your entire website or a particular page has a slow load time. Before you take any action on fixing your website’s load time, you should use one of these tools to gain a baseline understanding of where you currently stand. This will help you narrow down the actual steps you need to take to improve your website’s load time.

Here are five free tools you can try:

Google’s PageSpeed Insights, which we highlighted above, might be one of your best guides — especially if your goal is achieving a high Google page speed score specifically.

Some of the other tools listed are also helpful because they can give you a quick rundown of other details related to your site speed.

For example, KeyCDN will allow you to see how quickly your page loads in different countries. To get a solid understanding of where you currently stand, try using a few different tools and comparing the results.

2. Compress your images.

Large images are one of the most common causes of slow page speeds. There are many different opinions on what an optimal file size is. While some hosts say you should aim for files under 200KB, Shopify’s blog suggests going under 70KB. Google developers suggest going as small as you can before losing crispness.

To shrink your images without totally destroying the quality, we suggest compressing files with a free online software like Squoosh.app or Compress.io. You can also use Photoshop, too.

Before you upload an image, use Photoshop or other editing software to crop or size to the exact resolution that it will appear to be on the site.

Your display size is not the same as your file size. The display size is simply the size an image looks on your website.

Your file size is the size of the actual image that you uploaded. If you have a large file and a small display size, the large file still takes the same time to load as it would if it had a giant display size. Oppositely, if you upload a small file and present it at a small display size, it will load quickly.

A good rule of thumb is to crop the image to the exact display size it will show up on your page, then compress the image file to make it take up less storage space.

For example, if your CMS will automatically crop or resize an image to 500px by 300px, you should still crop it to that same exact size manually before you upload it. Even if you don’t see a giant image on the page, the large image file you uploaded could still be contributing to a major slowdown.

3. Shrink, or minify, your code HTML, CSS, and JavaScript code.

CSS, HTML, and JavaScript can contain a lot of extra, redundant, or completely useless code. Similarly to images, that data can slow your page.

To avoid this, Google developers suggest “minifying” your code. Minifying shrinks your code by removing useless language, notes, and spaces that might have gotten left behind when a page was being created or updated.

4. Eliminate render-blocking elements.

Sometimes, a page will be coded to load less important elements, like a sidebar or banner, before the main content. You want to prioritize your code so your main content comes first above the fold.

Once you know where these elements are, you can use this quick guide to learn how to eliminate them.

5. Accelerate your mobile speed.

In 2018, 60% of Google searches were done on mobile devices. Along with rewarding mobile-optimized sites in its search result rankings, Google will also give you a higher page speed score — and possibly a higher ranking — if your mobile site loads quickly.

PageSpeed Insights can show you how your mobile site is scoring. After you search your URL and see the report, you can toggle between Desktop and Mobile tabs to see the individual scores for each format.

Mobile and Desktop tabs on Google PageSpeed Insights

If you’re lagging, try to streamline what the visitor views on the mobile site. Hide or minimize desktop site elements, like photos or extra text boxes, that might seem clunky or unnecessary on the small screen.

Services like AMP (which stands for Accelerated Mobile Pages) can guide you through creating simplified web pages that load quickly and auto-adjust to fit on different browser sizes or devices.

6. Avoid or minimize page redirects.

A redirect is when a visitor clicks or types one link and is then automatically directed to one or more different locations before they hit their desired webpage. Because this can take valuable time away from your page speed, you should only use redirects when absolutely necessary.

An example of this could be during a company or website rebrand. In that case, this post touches on how to create SEO-friendly 301 redirects.

7. Improve your server response times.

Google suggests having a server response time of under 200 milliseconds. A slow server can be caused by a number of different things, including your website host.

Addressing a lagging server can get a bit more technical than the last few steps. This guide to combating a 502 Gateway error has a few useful tips about diagnosing and resolving server-related issues.

If your website uses servers from a host company, like GoDaddy, contacting a knowledgeable representative might also help you determine and solve the problem.

8. Use a content delivery network.

A content delivery network (CDN) is a group of globally distributed servers that can store a browser cache of your website and load it quickly for visitors around the world. When someone from a far geographical place visits your website, pages will be loaded from nearby CDN servers close to the visitor, instead of your own server.

Why would you use this? Because visitors who are far away from your server might incur longer page load times. For instance, if your servers are based in California, a German web visitor would see a slower website speed than someone in a nearby place, like Seattle.

Because of their global locations CDN servers prevent this issue and will boost site speed for international visitors.

If you’ve built your site with a CMS, like HubSpot, it might already run on a CDN. GoDaddy and Squarespace are other examples of content management software that offer a CDN service. WordPress users can also set up a number of free plugins, like CDN Enabler.

If you don’t think you have a CDN, a few CDN providers include Amazon CloudFront, Cloudflare, and the AT&T Content Delivery Network.

Next time you look at your Google PageSpeed Insights report, keep this list of steps handy. These tips will guide you through how to quickly minimize and streamline your pages as you aim for that perfect 100% score.

seo myths 2019

Reblogged 13 hours ago from blog.hubspot.com

What’s it like to be a Google Gold Product Expert?: An interview with Ben Fisher

Ben Fisher explains how he became a Google product expert and the benefits of being a tester and providing feedback to make tools better for local business.

Please visit Search Engine Land for the full article.

Reblogged 17 hours ago from feeds.searchengineland.com

Google allegedly caught scraping lyrics from Genius

Lyrics site Genius used Morse code to catch Google ‘red handed.’

Please visit Search Engine Land for the full article.

Reblogged 17 hours ago from feeds.searchengineland.com