In a post titled “Using Motion to Express Change,” Gutenberg designer and engineer Matías Ventura takes a deep dive into how animation can be applied to interfaces to replicate realistic motion. These animations can sometimes more clearly communicate changes, particularly in relationship to the action of moving or reordering items on a page.
“Even though the instant transformation of the interface is accurate it may not be the clearest expression of the change that just occurred,” Ventura said. “The relationship between intention and effect might become harder to grasp. Motion can be a great aid in communicating relationships and clarifying the changes experienced in a more intuitive way.”
This creates an interesting choice for an interface designer. Although instantaneous changes are possible to implement, they may require more time for the user’s brain to process. In the case of an editor, any added cognitive processing can pull a user out of the flow of writing. Ventura sets a good practical rule of thumb for determining if an animation adds value to an interaction:
One could say that an animation is worth being present if the clarity of change it provides is greater than the time it would take to adjust cognitively to the new state in its absence.
Ventura illustrates this concept with two video demos in his post – one showing how block reordering currently looks in WordPress’ editor and a second with an example of how it could be improved with subtle, tasteful animations. It’s an early prototype but very convincing:
When Gutenberg was still in the selling phase before being merged into core, some said that moving forward was simply a matter of retraining your muscle memory to work with the new editor. However, at that time there were still a number of markedly flawed interactions that didn’t feel natural and were even jarring for the user. The legacy editor didn’t have blocks to reorder or many of the other interactions introduced by the new block paradigm, so there wasn’t much prior context for comparison.
User reviews have complained about the cognitive load that Gutenberg adds and have continued to identify problematic interactions with the core blocks. Unfortunately, in many heated exchanges that took place in comments and discussions prior to WordPress 5.0’s release, these concerns were often brushed aside as coming from people who were resistant to change.
Many of the reviewers may not have had the right words to communicate what it was they were experiencing, but the cognitive load may be one of the strongest reasons why the Classic Editor plugin has more than 5 million active installs.
Matías Ventura’s proposal to add motion to express change in the editor has the potential to solve some of these unintuitive interactions. The Gutenberg repository now has an issue dedicated to exploring and discussing the use of motion to add clarity to the action of reordering blocks.
Ventura’s post is an encouraging read that demonstrates the thought and craftsmanship that go into architecting an interface that is required to meet the needs of millions of users. If you have been impatient with Gutenberg’s progress, as I have been, it’s important to recognize that these kinds of refinements to interactions take time to percolate. Replicating realistic motion comes from contemplating how we interact with the known world and understanding how that informs users’ digital expectations.
With the recent increase in Cloud Hosting services and availability of new and exciting technologies, creating a hosting business is easier than ever before. Part of the success of bringing a good service to your customers is due to the easy of use, presentation and options on your business website and that is why selecting […]
When it comes to creating a WordPress website, you must don many hats. If you choose to everything yourself you must be a website designer, a content strategist, a social media maven, a writer, and even a graphic designer. But let’s be honest; there are very few of us who are talented in all of […]
WordProof Timestamp is a new free plugin that bridges the WordPress and blockchain communities in an approachable, user-friendly way. It gives users the ability to timestamp their posts and pages to demonstrate transparency and claim ownership of content.
WordProof works with any EOSIO blockchain to create the timestamp and provides a custom certificate link with a frontend pop-up to display it.
The plugin adds a “View the blockchain certificate” link under each post or page, which pops up the URL, title, content, timestamp information, and will soon also display revisions. Users will be able to browse through different timestamps to view the changes.
WordProof Timestamp was first created by Van Ons, a WordPress agency based in Amsterdam. This is the same company that recently open sourced Laraberg, a package that allows developers building applications with Laravel to integrate the Gutenberg editor. Development has now been passed on to a dedicated WordProof team that is funded by Tenos.
“I have been working and investing with blockchain as a hobby since 2013,” Van Ons founder Sebastiaan van der Lans said. “After we built the WP GDPR Compliance plugin and started working Laraberg, I am trying to work more and more on open source projects. From my point of view, WordPress + blockchain could not only democratize publishing but also doing business as a whole.”
Van der Lans said he expects that any type of publishing website or any site with “Terms & Conditions” pages can benefit from timestamping. It’s especially useful in mediating claims of plagiarism and content theft. WordProof has no transaction costs and is almost instant (0.5s). Van der Lans said it was important for this solution to have no transaction fees, since it is fundamental to proving the author’s identity and the integrity of the content.
Right now the plugin offers the ability to timestamp an entire article, including the title and content. Block level time-stamping is not on the roadmap, but the team is open to adding it in the future. They are currently looking into time-stamping media files and legal documents.
After launching the plugin in beta, a team of 60 testers, from both the WordPress and EOS.IO blockchain communities, gave feedback that led to the creation of a WordProof Wizard to make it easier for users to set up the required accounts.
“Our testers’ main concern: it was too difficult to create an account on the blockchain and download and set-up a blockchain wallet afterwards,” Van Ons head of product Jelle van der Schoot said. “Therefore, we invested a lot of time into improving the UI/UX of the entire process (downloading the plugin, creating a blockchain account, downloading and setting up a wallet, timestamping).”
The wizard supports both Telos and EOS and guides users through the process of setting up an account directly inside the WordPress dashboard. The process takes approximately five minutes.
“We believe the WordProof Wizard can have a massive impact on the onboarding of new users to the blockchain in general, but more specifically to the Telos and EOS blockchains,” van der Schoot said.
Timestamping posts is by no means a new idea. There are already several free WordPress plugins that have similar functionality and work with various blockchain technology, such as WP Blockchain, STAMPD.IO, Po.et, and Mingrana WP to Blockchain. WordProof is different from many of them in that it doesn’t use a centralized middle layer.
The team behind the plugin is working on more tools that bring blockchain features to WordPress and will soon be adding cryptographically secured decentralized WordPress hosting to the WordProof lineup. van der Lans will also be speaking about more of the benefits of timestamping content with the blockchain at WordCamp Europe in his presentation titled “From WordPress to blockchain: the future is 100% open source.”
The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple's latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O'Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.
Sara says There is no One Way to Rule Them All, but it does seem like you really need to use actual text inside that button and either hide it or override it somehow. SVG alone has no rock solid way to provide an accessible name to a button or link.
Funny how long this has been a tricky pattern to get right.
Angular recently introduced the Architect API as a new feature of Angular CLI version 8. The Architect API provides tools that help schedule and coordinate tasks. The API uses functions that the company calls "builders", which are responsible for the implementation of the tasks.
While screen scraping has been bridging the connection gap between banks and fintech for decades, banks are now starting to deprecate it because of PSD2.
Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal.
That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant to do) but the rest of page continues to behave as normal.
Sometimes this is a non-issue, like screens that are the exact height of the viewport. Anything else, though, we're looking at Scroll City. The good news is that we can prevent that with a sprinkle of CSS (and JavaScript) trickery.
Let's start with something simple
We can make a huge dent to open-modal-page-scrolling™ by setting the height of the entire body to the full height of the viewport and hiding vertical overflow when the modal is open:
That's good and all, but if we've scrolled through the <body> element before opening the modal, we get a little horizontal reflow. The width of the viewport is expanded about 15 pixels more, which is exactly the with of the scroll bar.
Note that the modal needs to be shorter than the height of the viewport to make this work. Otherwise, the scroll bar on the body will be necessary.
Great, now what about mobile?
This solution works pretty great on desktop as well as Android Mobile. That said, Safari for iOS needs a little more love because the body still scrolls when a modal is open when tapping and moving about the touchscreen.
We can set the body to a fixed position as a workaround:
body {
position: fixed;
}
Works now! The body will not respond when the screen is touched. However, there's still a "small" problem here. Let's say the modal trigger is lower down the page and we click to open it up. Great! But now we're automatically scrolled back up to the top of the screen, which is just as disorientating as the scrolling behavior we're trying to resolve.
We can use JavaScript to avoid the touch event bubble. We all know there should be a backdrop layer when a modal is open. Unfortunately, stopPropagation is a little awkward with touch in iOS. But preventDefault works well. That means we have to add event listeners in every DOM node contained in the modal — not just on the backdrop or the modal box layer. The good news is, many JavaScript libraries can do this, including good ol' jQuery.
Oh, and one more thing: What if we need scrolling inside the modal? We still have to trigger a response for a touch event, but when reaching the top or bottom of the modal, we still need to prevent bubbling. Seems very complex, so we're not totally out of the woods here.
Let's enhance the fixed body approach
This is what we were working with:
body {
position: fixed;
}
If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to the top of the screen, so problem solved. We can use JavaScript for this by calculating the scroll top, and add that value to the body styles:
// When the modal is shown, we want a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;
// When the modal is hidden, we want to remain at the top of the scroll position
document.body.style.position = '';
document.body.style.top = '';
This works, but there's still a little leakage here after the modal is closed. Specifically, it appears that the page already loses its scroll position when the modal is open and the body set to be fixed. So we have to retrieve the location. Let's modify our JavaScript to account for that.
// When the modal is hidden...
const top = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
That does it! The body no longer scrolls when a modal is open and the scroll location is maintained both when the modal is open and when it is closed. Huzzah!
Harry Roberts outlines the disadvantages of hosting your static assets “off-site”, and shows the overwhelming benefits of hosting them on your own origin.
Uibot is an experiment on how far one could automate the generation of visual designs, what kinds of advantages it would lead to and what issues one would face.
The web is a beautiful, expressive medium that’s evolved over time as trends and technology have changed. Moments of delight and flair are what set companies apart from one another. At the same time, today’s top products rely on scalable, component-based design systems to efficiently develop a coherent brand. And it’s more important than ever to have accessibility and a solid user experience baked in from the start! But these two worlds — creative web design and systematic web design — don’t need to be at arms. The beautiful gooey center of the web design world is where we can find a way to meld creative web design in with our systems, and luckily, you can have both!
One of those design systems is called Material Design (the team I just joined at Google!). Material is built on years of research and best practices to give designers and developers access to creating beautiful, accessible UIs with the least amount of work possible. But in its initial launch, one thing was missing from the equation: the ability to express a brand’s personality in an easy-to-implement way. The team heard two key pieces of feedback:
Material wasn’t stylistically flexible enough to meet the needs of all products, brands, and users.
It wasn’t easy enough to apply and build brand experiences systematically across products.
And as of last year (specifically, I/O 2018), Material announced new theming capabilities! Theming allows developers and designers to benefit from all the parts of Material that make it a world-class design system — and make it their own! In other words: You can customize the look and feel of Material Components by applying global changes to your product’s color, shape, and typography.
Material Components are built for multiple systems like Android, iOS, and Flutter, and we’re going to focus on the web for this post (this is CSS-Tricks after all). Let’s start off with a base login template using Material Components for the web to see how easy implementing a theme atop this will be:
About theming
The current theming implementations allow for color, typography, and shape adjustments that trickle down to every component in your product. These three subsystems may not sound like many options, but together they bring a big impact to the design, and are a great springboard to jump off of with more design changes on a more granular level.
Color
The first themable option is color. There’s a great color picker tool on Material.io for you to be able to see contrast and aid your color selection process. Since this is CSS-Tricks, let’s write some CSS (okay, more like SCSS), to get started with an example. In a few lines of code in our my-theme.scss file, we can entirely change the look and feel of this login screen:
Even though we have not specified a $mdc-theme-on-primary, the system knows to make this white now (using a Sass contrast function) to help us ensure accessible color contrast. We can also override the text color on the primary and secondary themes with $mdc-theme-on-primary and $mdc-theme-on-secondary. However, if no value is explicitly set, these will either be black or white based on the background. See the color picker for more information.
Typography
Material sets up a base typography scale, which can be customized with theming. You can adjust the typography for each individual headline level and apply it throughout your product in two ways:
Using CSS classes to apply the styles. I.e. <h1 class="mdc-typography--headline1">
Using mixins to extend the styles from a header component onto another (i.e. h1 {@include mdc-typography(headline1);}). You can see an example of this in our starter kit example on Glitch.
A quick way to change the typeface is by using Google Fonts — a really nice directory of free web fonts. We’re going to make this easy for ourselves and pick out a Google font called Josefin Sans. In order to use this in our project, we’ll need to import it, and then can set the base typography to use it:
Shape is another way to be expressive with your code! What do I mean by shape? In Material, shape affects the corner radius of components, such as buttons, cards, and sheets. In product design, shape helps to define your brand. Is it angular and machine-like, or is it more rounded and organic? Changing shape trickles down through the rest of the system. Here are some examples of shape in Material:
The other cool thing about shape in Material Components is that you don’t have to have the same shape on each corner, or even the same component at different sizes. There are small, medium, and large components in Material, and you can apply different styles for these different component types, and you can mix it up and specify each corner, one-by-one, in a space-separated list of values just as you would with border-radius.
MDC Web does not currently support cut corners like the other platforms do since it is a non-trivial operation with current web standards. This is another reason I personally love Houdini and see a lot of impact for it in future CSS development!
In the example we’re working with, we have both large and small components. The large components are the text field inputs, and the small component is the “login” button. We can apply different shapes to these with:
And voilà! We have transformed our application in 12 lines of code.
Themes, themes, everywhere!
Now here’s the part where you get creative. There are so many ways to mix and match the elements of color, typography, and shape to really make your brand stand out. Here are four very distinct example apps that use color theory, typography, and shape to differentiate their products, each based on the baseline Material Components:
Themes IRL
Google itself customizes and extends upon the baseline Material Components with its own products. This is called the Google Material Theme, and it was defined by a number of product teams, including Gmail, Google News, Google Play, and Google Home:
Lyft, a ridesharing service, is just one example. They used an extended FAB component to highlight key actions, and designed it with a gradient to give it a unique feel that users were still familiar with. Lyft also leveraged Material’s elevation system in their own product.
Anchor, a free app that helps people record, distribute, and host podcasts, is another great example of making Material your own. They showcase their bold color palette, and integrate it with choice chips to delineate display options, a list of cards for content selection, and an extended FAB anchored to the bottom to remain persistently available for user actions.
Get started
Now you have everything you need to make own Material Theme with Material Components for the web. It’s easy to start building your web project with our Material Starter Kit, and exploring theming with the Build a Material theme Glitch project we’ve just released. Change around the variables in my-theme.scss to explore how they can customize the individual components. Then, you can open any template, paste those variables into the my-theme.scss, and start building.
TL;DR: If you thought that Material Design wasn’t for you in the past, it’s a great time to start exploring. Happy theming!
This is the June 2019 edition of "This Month in WordPress with CodeinWP." Hi WordPress lovers, welcome to a fresh roundup of news from our community! Just like last month, May was full of interesting events, announcements, and changes in the WordPress ecosystem.
Of all the tools web designers use to make a living, WordPress stands out as unique. And it’s not necessarily because of the software itself (which is excellent, by the way).
No, what really separates WordPress from just about everything else out there is the amazing community built around it. It’s made up of an incredibly diverse group – web professionals, bloggers, business owners and educators (to name just a few). They hail from all over the world and pretty much every background you can imagine.
Among the crown jewels of this community are the many WordCamps held annually. These events have taken place in over 60 countries, spanning 6 continents (sorry, Antarctica – your time will come).
If you haven’t gotten around to attending an event, it’s definitely something to put on your bucket list. There are a number of benefits to doing so, including:
A Low-Cost Day Out
Everyone needs some time out of the office – even if it’s work-related (though WordCamps rarely feel like work). And you can’t get one much more affordable than a WordCamp. Prices are generally kept to around $20 USD per day! How many pro-level conferences can you attend for about the price of dinner at a pizza place?
Speaking of which, you won’t go hungry while you’re there. For that more-than-reasonable price, you’ll often get a meal (typically lunch), while snacks and beverages are also included. Plus, just walking in the door nets you a giveaway item, like a custom T-Shirt.
Prices are generally kept low due to the kindness of sponsors – both corporate and individual. As a bonus, they often attend the conference with their own collection of swag to give away.
Depending on the location of the camp, the largest expense for attendees tends to be travel (and, if necessary, a hotel). However, various organizations may provide grants to those in need of assistance, such as the Kim Parsell Memorial Scholarship.
The Chance to Meet New People
Part of the WordPress community’s strength lies in its ability to attract people from all walks of life. Go to a WordCamp and you’re likely to run into experts and novices alike – not to mention everyone in-between those two skill levels.
And you can’t help but find yourself in at least a few good conversations. This is particularly true between sessions and at meal time, when attendees often congregate in a common area. Therefore, you’ll want to be prepared to answer the question, “How do you use WordPress?”
It’s also worth noting that the atmosphere is generally laid back. There is no corporate stiffness to be found and the dress code is pretty much come-as-you-are.
Overall, people are friendly and willing to chat. But even if you’re a bit shy – not to worry. You’ll find yourself in a place that lets you be you and move at your own pace.
Learning Opportunities
As much as anything, WordCamps are about learning. Many camps split their sessions into multiple “tracks”, each one aimed at a specific skill level or use type. For instance, you may find a track for hardcore developers along with others for visual designers, content creators or marketers.
It can be very worthwhile to attend sessions across a variety of tracks. Even if you don’t know a lot about a particular subject, you may be surprised at how much knowledge you can pick up. At the very least, you’ll have a better idea of, say, what React does or how the Gutenberg editor affects design choices.
Not only that, but you might also just discover a new favorite plugin or technique for getting things done. Everyone approaches building a WordPress website differently, and there is a chance to pick up some pointers from both speakers and attendees.
Expand Your Reach
Of course, professionals primarily attend conferences to get their names out there, and a WordCamp provides a perfect opportunity to do so. And there are a number of ways to achieve your goal.
Volunteering to speak can be very effective, allowing you to show off your expertise in a particular WordPress-related area. If you’re comfortable giving presentations, this provides you with a room full of people who are eager to learn whatever knowledge you can share. Just know that you must apply to speak ahead of time, as there is often stiff competition for spots.
Even if you aren’t a featured speaker, there are still plenty of chances to network. As mentioned earlier, you’ll have opportunities to connect with other attendees, so make sure to bring lots of business cards! You never know when a casual conversation can lead to a new project.
A Worthwhile Experience
WordCamps provide a fun, affordable and potentially profitable experience. And, no matter your experience or skill level, there is an opportunity both meet new people and advance your career.
Sound interesting? To get started, watch a few of the top presentations from past events. Then, check out the upcoming schedule and register for an event in your neck of the woods.
A nofollow link is a type of link that tells search engines to not pass any link authority from your page to the other website that you’re linking to. You can turn any link into a nofollow link by adding the link attribute rel=”nofollow”.
Links or backlinks are an important search engine ranking factor.
When you link to an external website, search engines consider that as a ranking signal, and they will pass a small portion of your authority (link juice) to the other website.
Some SEO experts believe that making external links nofollow can help your own website rank higher. However this is not proven to be the case.
Note: Earlier this year, Google announced that their search algorithm now uses nofollow as a hint rather than a directive for crawling and indexing purposes.
How to Check if a Link is Nofollow?
All nofollow links contain the rel="nofollow" HTML attribute.
Here is the HTML code for an example of a nofollow link:
To check if the nofollow attribute is added to a link on a website, you need to take your mouse to that link, right click on it, and then select Inspect on your browser.
Your browser window will now split into two parts.
In the Inspect pane, you will be able to see the HTML source code of the link along with the nofollow attribute.
Alternatively, you can use a Chrome extension like Strike Out Nofollow Links. This lets you instantly see which links have the nofollow attribute.
When Should You Add Nofollow Links?
As a general SEO best practice, you should add nofollow to all external websites that you don’t trust.
It’s completely acceptable and actually recommended to link to authority websites like Wikipedia, WPBeginner, New York Times, etc without the nofollow attribute. Linking to authority sites helps add credibility to your own website.
However, we recommend you nofollow links to less credible websites.
Here are some cases when you should always add nofollow attributes to the links:
Affiliate links are tracking links for products and services that you recommend. You get a referral commission if someone purchases after going through your link.
You should always add the nofollow attribute to affiliate links. This applies whether you’re using a direct affiliate link or cloaking it using Pretty Links.
Another popular way bloggers make money is by adding sponsored links. You should always nofollow sponsored links. Otherwise, search engines may consider your site to be selling links or spamming. This can get you penalized in the search engine results.
Tip: In 2019, Google introduced some additional link attributes. You can use sponsored instead of nofollow for affiliate and sponsored links, if you want. For our purposes, it has the same effect.
2. External Links
Sometimes, you may link to external sources as references. Since you don’t control the content on those websites, you should consider adding nofollow to them.
In simple words, you are telling the search engines that you are linking to a source, but it is not something you can vouch for.
Note: You don’t need to nofollow links to authority websites.
3. Sidebar Links
Some bloggers add a list of external or affiliate links to the sidebar of their WordPress blog. These external links may be from authority sites or websites that they trust.
The problem is every time a new page is created on your site, you also create a new backlink for those websites from your sidebar on that page.
It is important to make these links nofollow. That way, you are not passing the SEO juice from every page to certain links.
How to Add Nofollow Links in WordPress using All in One SEO (Easy)
The easiest way to add nofollow links to your site is to use the All in One SEO (AIOSEO) plugin for WordPress. This lets you add the nofollow attribute without needing to edit any HTML code.
You can use the free or premium version of AIOSEO plugin.
Upon activation, create a new page or post and add the anchor text for your link. Next, select the anchor text and click on the link icon.
This will open a box for your link, with several options that you can toggle on or off. We recommend switching on the ‘Open in a new tab’ option as well as the ‘Add “nofollow” to link’ option.
Tip: Many bloggers select the “Open link in a new tab” checkbox when adding an external link. This is a great way to improve engagement and keep your visitors from leaving your website.
Once done, just click the ↵ arrow button or press Enter on your keyboard. This instantly adds the nofollowed link to your page or post.
Using All in One SEO to Add a Nofollow Link in the Classic Editor
Although we recommend using the block editor, some users still prefer to use the Classic Editor for writing posts and creating pages.
AIOSEO lets you easily add nofollow links in the classic editor, too. Simply open up the post or page you want to edit.
Next, add some anchor text for your link, then highlight it and click the link button. Then, enter your link.
Now, click the cog icon to open up the settings for the link. After that, check the box for Add rel=”nofollow” to link. You may also want to set your link to open in a new tab. Once you’re done, click the Add Link button.
Your nofollowed link will then be added to your WordPress post.
How to Manually Add Nofollow Links in the WordPress Block Editor (Gutenberg)
If you don’t want to use the AIOSEO plugin, then you will have to manually add nofollow links in the WordPress block editor.
Let’s take a look at the step by step process on how to add nofollow links in WordPress posts or pages with the block editor.
First, go to Posts » Add New to create a new page.
As before, select the anchor text for your link and click on the link icon. Go ahead and enter your link. If you want the link to open in a new tab, simply toggle that option on.
Once done, just click the ↵ arrow button or press Enter on your keyboard to add the link.
To add the nofollow attribute to your link, you need to select the block containing your link and then click on the 3 vertical dots icon present at the top bar.
This will open a dropdown menu where you need to click on the Edit as HTML option.
You will now see the HTML code of your link. Go ahead and add the rel="nofollow" attribute to the link element.
If you see the rel="noopener noreferrer" attribute in the HTML code, then add simply add nofollow within the quotation marks.
Once done, just click on the 3 dots icon again then select ‘Edit visually’ to go back to the standard visual format.
This will convert your normal link to a nofollow link. You can follow the same process for adding nofollow attribute to all other external links.
How to Manually Add Nofollow Links in the WordPress Classic Editor
Even though AIOSEO is the easiest way to add nofollow links, you can also add links manually if you are using the classic editor.
First, go to Pages » Add New to create a new page. Add some anchor text for your link, then highlight it and click the link button. Then, enter your link.
If you want to set your link to open in a new tab, just click the cog icon and click the ‘Open link in a new tab’ checkbox. Then, click the Add Link button.
Now, click on the Text tab of the classic editor. You just need to add rel="nofollow" to the link here. If rel="noopener" is already present, simply add nofollow too.
How to Manually Add Lots of Nofollow Links in WordPress
You have already learned how to add individual nofollow links in the Gutenberg editor manually. However, that method is best when you only plan to add a few nofollow links.
If you have a lot of external and affiliate links in your post, then you should switch to the Code Editor. This lets you add the nofollow attribute faster.
On the post or page editing screen, click on the 3 vertical dots icon in the top-right corner. This will open a dropdown menu. Simply select the Code Editor option.
You will now see the HTML code of your page. Go ahead and find all your external links, and add the nofollow attribute to each of them.
Once done, you need to click the Visual Editor option to switch back.
How to Add Nofollow Links in WordPress Menus?
Adding a nofollow attribute to your WordPress menu links is extremely simple, but the option isn’t very visible. This is why many WordPress users don’t even realize it’s there.
Let’s take a look at how to add nofollow links in WordPress navigation menus.
First, you need to go to the Appearance » Menus page in your WordPress admin.
Next, choose the menu where you want to add the external link. Go ahead and click on the ‘Select’ button to open it.
After that, you need to click the ‘Custom Links’ tab to add the link text and external link URL. Once done, click on the ‘Add to Menu’ button to create a new menu item.
The external link will now appear in the Menu Structure column along with the other menu items.
Next, click the ‘Screen Options’ button at the top-right corner of the page. You just need to select the Link Relationship (XFN) and Link Target options.
Now, scroll back down and click on the downward arrow icon of the new menu item to expand it.
To add the nofollow attribute, just type nofollow in the Link Relationship (XFN) textbox. You can also check the ‘Open link in a new tab’ option if you want.
Don’t forget to click the ‘Save Menu’ button to save your changes.
How to Automatically Make All External Links Nofollow?
Some WordPress users want to automatically add the nofollow attribute to all external links on their site.
Most solutions that offer this are done with the help of JavaScript. This is not helpful for Google or for your site’s SEO. Instead, you should manually nofollow the links using the above methods.
Some bloggers worry about comment links. The good news is that WordPress adds the nofollow attribute to all comment links by default.
If you’re still looking for a solution to automatically nofollow all external links, then you can use the WP External Links plugin.
It adds the nofollow attribute to all external links in your posts, pages, navigation menus, and the sidebar.
Upon activation, go to the new External Links page in your WordPress dashboard.
Here, you need to change the ‘Set follow or nofollow’ dropdown to ‘nofollow’.
Above this, you have the option to set links to open in a new tab using the ‘Open external links’ dropdown.
Don’t forget to click the ‘Save Changes’ button when you’ve finished. This plugin will now automatically turn all the external links on your site into nofollow links.
When Do We Need A Design System? An Interview With Brad Frost
When Do We Need A Design System? An Interview With Brad Frost
Vitaly Friedman
Design systems have been around for quite some time. We’ve even published a book on design systems, yet just as they can be difficult to maintain, how do we know when we actually need one in the first place?
Design systems are a wonderful yet intricate tool. They provide us with a solid ground to stand on as we tackle the increasingly diverse and fast-moving digital landscape. However, like most things in our field, the hard part of design systems isn’t specific design tools or code frameworks; it’s wrangling people and all their quirks.
I had a chance to speak with Brad Frost, author of the book Atomic Design that introduces a methodology to create and maintain effective design systems, and one of the speakers who I’m looking very much forward to bringing onto the stage at SmashingConf Toronto in just a few weeks.
Vitaly: Okay, so hello everyone and welcome again to one of those interviews where we’re talking to interesting people behind the scenes, doing the magic, sometimes silently, sometimes quite publicly, openly, and so today I’m happy to have with us our one and only Mr Frosty.
Vitaly: Hello, Mr Brad Frost, how are we doing today?
Brad: Hi, I’m doing great, thanks for having me Vitaly.
Vitaly: Oh it’s my pleasure. I’m looking forward to see and explore some of the things you’re going to cover in Toronto but most specifically, I’m kind of looking forward to see what’s going on in your head right now? What are you thinking of right now?
Brad: Oh my. What am I thinking of right now?
Vitaly: Yes.
Brad: I’m thinking about, uh, we’re doing a big design system for an airline, and so I am fixing an excessive [inaudible 00:01:07] and a date picker calendar widget.
Vitaly: Oh, that sounds—
Brad: That’s what I’m doing, like, literally right this second.
Vitaly: Okay, this sounds like it’s a lot of fun.
Brad: Yes, or something.
Vitaly: I heard rumors, maybe it’s just me, I don’t know, but I heard rumors that you’re involved in some way to design systems and atomic design and stuff, so I’m wondering, design systems, does every website need one really at this point of life?
Brad: I generally think so, yes. I mean, the degree of formality around the design system is probably not every website needs, but I think that every single website could benefit from component driven architecture, design, and development principles. Just as one example, my wife is a jeweler and also she just has a five pager kind of website and I was able to build that in four days, because I was following good reusable component based design and development. So the first template I had to make, I obviously had to build all of those components sort of from scratch, but then the second page template, I was able to reuse some of those and by the time I got to the third and forth and fifth template, I already had a lot of the building blocks in place, so those latter templates were able to roll off the assembly line a lot faster.
Brad: I think a lot of people will get in touch with me and ask me those kind of questions and say, well, I make these landing pages for a marketing company and people scan a QR code and go to these landing pages, and they have a shelf life of a month at most or something like that. It is like very short lived sort of websites, and they’re like, “Well, we could have used a design system,” and I said, well yes, you’re making the same type of page over and over again, and so rather than rebuilding those pages with 100% effort each time, if you are to put in place a pattern, and you could be as clever as you want when it comes to skinding them or theming them or whatever and making them aesthetically unique. But they have to rebuild a big splashy new hero component or a button every single time, just doesn’t make sense.
Brad: Even for these things that at face value feel very ephemeral, or it’s just like a one-page landing page, surely I don’t need a design system from that? Yes, actually you can benefit from them, so again, I think that, that’s important. Any project could benefit from solid component-based design and development. The whole, “Do you need this big glossy website (like a material.io or lightning design system with a bunch of design principles and a bunch of documentation and stuff)”? Probably not, for those smaller sites, and that’s fine. But that doesn’t mean that you should just be thinking of things as individual screens or individual projects.
Vitaly: So Brad, one more thing though, when we talk about things like again, design systems and so on, I think that especially larger companies, they always desperately try to find case studies, like this company may be preferably our competitor, they build a design system or design a design system and they did magic for them. However, I’m not sure if there are any publicly available data or publicly available case studies which show that we did this, our conversion improved, our maintenance improved, we’re building faster and so on. Do you think there is anything of that thing or is it still something that has to be discovered and then you actually get to see the benefits of a design system, maybe months or even years ahead of time? Is it an investment or is it something you can measure efficiently?
Brad: Yes, great questions, and the questions around metrics, it’s definitely hard to come by, hard numbers, just because sort of unlike just doing a big redesign where you have one site and then you redesign and then launch the new site and then you’re able to look at the Google analytics and see whatever metrics you’re looking for, whether that’s page weight has gone down or time spent on site has increased, or whatever your metrics are, it’s easy to see that result.
Brad: Obviously, if you’re creating a design system, you should still be able to see some of those results as new projects launch and get out into the world. You should see those metrics going in the right direction. Obviously, that’s a sign that the design system is doing what it need to do, but it’s hard to pin down metrics and public case studies because so many of the metrics for the success of a design system are internally facing — right? So it’s not really about like the public website — well, of course, it is, but (and again you can track that stuff with Google Analytics and the rest of them) but a lot of it has to do with how fast the internal teams are working right?
Brad: How quickly you can get projects out the door and how many UI-related bugs are you fielding, what are your customer support centers getting as far as UI-related issues with respect to your website and stuff like that, so there’s a lot of metrics that are tuned towards how many jitterbugs are there around the UI and those should be trending downwards as the design system gets adopted. Or like how many customer service calls are you getting or support tickets around (“Oh, I’m using this browser and this thing is broken, and I can’t do that.”)
Brad: It’s like those things should diminish over time. But because those are also internally facing things, not many companies publish that. There are a few examples though out in the wild, and a lot of them are wrapped up in case-study blog posts and things like that, but one of them that comes to mind is the Westpac design system. They’re gelled, their global experience language and they have some stats on their websites and stuff about how they were able to increase their velocity by 700% or whatever. So there’s stuff out there, but a lot of the stuff — if I’m honest — is pulling some numbers out of the air a little bit, just like looking at, “Here’s what we were doing before, we were able to launch projects in six months and now with the design system we’re able to launch them in six weeks.” And so just putting some marketing spin on that and saying, “oh, we’re able to launch things five times faster,” whatever that math works out to. So it’s just like putting a bow on it and stuff but that’s generally like the metrics that we want to follow as our people getting things out the door faster, is the overall code and design quality improved, are there less customer facing issues on the site and are our products, are people getting things done faster as a result of using a more consistent, cohesive user experience.
Vitaly: Yes, that makes sense. I’m curious though, so when it comes to specifics of a design system, it’s been very interesting because just recently I saw a project, and it’s also something that I explored sometime like in the past but every now and again you see people using interesting naming conventions in their design system. Like for three different sizes for different blogs, like the same media object, they would use something that’s memorable rather than something that’s functional. So they would use something like “momma bear”, “papa bear”, “baby bear”, but would you say, when it comes to naming, what would you prefer to use, what would you rather recommend to avoid?
Vitaly: Because obviously, when you have “papa bear”, “momma bear”, “baby bear”, how do you grow from there if you have a fourth part of the family, you need to find a really convenient name for that right? Is it better to use small, large, medium, like what patterns would you recommend to stay away from when naming things, what works for you best?
Brad: Yes, it’s a tough question that I think that every team faces. The short answer is, use whatever language makes sense for the team. You don’t want to introduce crazy, clever names if one person invented those names, and I was just thrusting them upon everybody else without their involvement, I guess. And I’ve seen that happen with atomic design, which is a naming convention that I created, but a lot of people will take that naming and adapt it or abandon it, or just call things or map them to whatever makes sense for their teams, like, “Oh, we call these things ‘components’, and we call these ‘smaller things’ or ‘modules’ or whatever, so we’re going to call it ‘elements’, ‘modules’, and ‘components’ instead of ‘atoms’, ‘molecules’, and ‘organisms’.”
Brad: And I love that, I think that, that’s really important for teams to establish a language that makes sense with them and how they’re already thinking and stuff like that. You don’t want to get new and jazzy and inventive if that isn’t warranted or if people are just going to, “Wait, what is ‘momma bear’ again?” So that’s important, but you’re also talking about, it’s like what happens when it goes to naming things that might need some space in between? So things like t-shirt sizes. It’s like, yes, there’s ‘small’, ‘medium’, ‘large’, ‘extra large’ or whatever, but what if you need a ‘medium two’ or a ‘medium three’ and a ‘large two’ and stuff like that?
Brad: And so you end up wedging these things in between and that never really feels right. My colleague, Dan Mahr, recently talked about this with respect to typography sizes. A lot of different design systems and style guides and things will tend to call things, ‘H1’ through to ‘H6’ for the different heading styles. But even that’s a little misleading, because one it like time, a semantic meeting to a stylistic thing, which isn’t always great. But then two, there tends to be more than six styles not just for headings for body copy, but also some may be stylized text or a block quote or a pool quote, so he explored that in a recent post where he’s talking about the naming of the stuff.
Brad: For a project we’re working on now, where basically we have just ‘typography preset one’, ‘typography preset four’ and ‘five’ and ‘six’, and the first few are loosely mapped two sizes and things like that, but for a lot of them, as the system has grown, and we’re like, Oh we actually need an additional preset, and we need the ability to add even more, they just get thrown onto the pile as ‘typography preset eight’ and ‘nine’ and ‘ten’ — and those aren’t terribly intuitive names. It’s not like, “Oh, this is ‘baby bear’” or whatever, and “Oh, this is…” (you know, Dan was toying around with the names of X-men or whatever — you could get clever like that.) But ultimately, at the end of the day, we picked a convention in a system that scales in that, “here’s what happens when you need to add a new thing” and crucially — the crucial bit to any of this — is the documentation and the shared understanding of that stuff.
Brad: In our style guide, in our reference website for the design system, we have a typography page where we spell out, here’s what ‘typography preset one’ is, and here’s what characteristics it has and here’s what usage it should be used for. And it’s like, “Oh, here’s ‘typography preset eight’” which is more of like a kicker, really small eyebrow, you know what I’m talking about, it goes above a title that might be the category of the blog post or whatever, I don’t know, but it’s like a little stylized, so it’s upper case, it’s spaced out a little bit, it’s like a thinner font, it’s like an understated typographic thing.
Brad: Now, none of that says ‘typography preset eight’, it just comes with the usage, you have to understand, “Oh, that’s the ‘kicker styles’.” But it can’t just be called ‘kicker style’ because we’re actually using it for a bunch of different things. We’re using it for a primary navigation, we’re using it for the eyebrows or the kickers above a title, but we’re also using it for a bunch of other things as well, which is why I think it’s important to establish more agnostic names, rather than tightly coupled to its usage names.
Vitaly: That makes sense, of course. I heard rumors that you might be doing or covering something along the lines of design systems in Toronto? May it be that I’m right or maybe I’m wrong? Maybe you’re even having a workshop in there — if I’m not mistaken?
Brad: Yes…
Vitaly: So I’m wondering, can you briefly describe maybe like within a minute or so, what you’re going to speak about, what is the session going to be like and also what the workshop is going to be like?
Brad: Yes. I’m super excited for Toronto and the gist of my session at the conference is going to be live in front of everyone, building a design system, so this is using what I call a workshop tool like Pattern Lab or Storybook to build out a design system, components as well as the screens that we’re building from those components, like live in a session. And that’s to demonstrate how that process works, how that component driven, so the design and development process works and how we iterate inside of this environment to build real pilot projects for the design system, as well as actually extracting the components from those projects.
Brad: So that’s the session, which I’m excited about and then the workshop is more of a deeper dive, there’s so many aspects to a design system initiative, and so basically the workshop is set up to go soup from nuts, from selling the design system to kicking the design system off, to planning what tools and technologies we’re going to use, what methodologies, what processes are we going to use, launching a design system, getting it into actual products, so deploying a design system, but then crucially maybe like the main bit is like, how do we maintain this over time? How do you set up your team structure? How do you set up your technology structure and infrastructure to support an ongoing living, breathing design system? So, that’s the workshop: it’s soups to nuts and how we build and maintain a design system?
Vitaly: That sounds pretty intriguing. So maybe then just the last one — the last question for you — and thank you so much for your time… I’m wondering if there were some lessons you learned the hard way, things that you would definitely not recommend to do when building or designing or creating or setting up our design system? What are some of the hard lessons you had to learn, things you definitely would recommend to stay away from?
Brad: There’s a bunch. I’ll say that one thing I’ve learned in consulting with a bunch of clients is, probably one of the biggest things (pitfalls we see teams falling into) is that they think that a design system is just the components and so I’ve worked with teams that they’ve spun up entire teams for, “Oh, this team is going to work on the buttons,” and, “Oh, this team is going to work on the cards,” and, “This team is going to work on the foreign fields” — it doesn’t work like that. You can’t just create these things in isolation and then cross your fingers and hope that they come together to form a cohesive experience.
Brad: Our big recommendation is, you have to start with real work, this is why pilot projects are so incredibly important. It’s like, you start with a real thing that really needs a built and then you use that as an opportunity to build your design system from. If your pilot project is the home page, you’re going to have a hero, you’re going to have some cars, you’re going to have a newsletter sign-up thing. You need to build all those in order to build the home page. And so through the lens of building out the home page, you’re able to extract those other components. So that’s my mistake to avoid is: don’t just build a design system in isolation. It has to be tied to the real products that your organization needs to produce.
Vitaly: Okay, that makes sense. Wow, Brad. I’m looking forward to your session. I’m wondering maybe you will be, I don’t know, building a design system for horoscopes, or maybe for, I don’t know, for something else? Is there a particular project you ever dreamed of, maybe like for NASA, design systems for NASA? No?
Brad: I mean that would be awesome. I don’t know, in my view I’ve never really thought of that in what would be like a dream client, I think that my sweet spot is where the technical ends of things but also the organizational end of things are both interesting. They have some interesting problems to solve, and so I love working with clients that are at that place where it’s like, “Oh, we need some technical heLp, but crucially we also need a lot of organizational or cultural help,” so I’m being vague here but I love that sweet spot in between. The work itself is good and I have fun as a web developer swimming in those waters, but then I also really like helping teams establish better processes and cultures around design and development.
Vitaly: Yes, well listen Brad, your curiosity of things, in things, and seeing things through and also making things a bit better, so let’s make things a bit better in Toronto then.
Brad: I’d love it.
Vitaly: Alright, thank you. Thank you so much for taking the time, I’m looking forward to seeing you soon. And please say ‘hi’ to Louis as well.
Brad: Alright, hey, thanks for having me.
Vitaly: Of course, my pleasure! Okay, talk to you soon Brad, thank you.
Vitaly: Alright, so thank you so much to everybody for joining in. Let’s see, well, I hope I will see some of you in Toronto as well. It’s going to be an interesting conference with a couple of live sessions along the way. And please stay tuned, we’re going to have a couple of more interviews like this one and if you’re interested, please do let us know in the comments, or even ask the questions we should ask next time. With that in mind, signing off, and see you next time.
That’s A Wrap!
Build a design system in less than an hour? That’s crazy, but not entirely impossible.
We’re looking forward to welcoming Brad at SmashingConf Toronto 2019, with a live session on building design systems. He’ll demonstrate how to use Pattern Lab to simultaneously build both a design system’s front-end components and several screens of a real pilot project. We’d love to see you there as well!
Please do let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it!
For global manufacturing enterprises or other industries that rely on automated machinery across locations, the ability to keep tabs on asset performance becomes crucial. While manual supervision has worked well in such scenarios, there is a definite opportunity to optimize costs here. That's by enabling virtual monitoring and logging of asset performance data.
Our team recently built a solution for this use case using machine learning solutions from AWS. It was designed to remotely capture video on machine performance and create logs of when the asset/machine was in operation and for how long.
Throttling is one of the three effective methods for protecting a high concurrency system. The other two are respectively caching and downgrading. Throttling is used in many scenarios to limit the concurrency and the number of requests. For example, in the event of flash sales, throttling protects your own system and the downstream system from being overwhelmed by tremendous amounts of traffic.
The purpose of throttling is to protect the system by restricting concurrent access or requests or restricting requests of a specified time window. After the threshold is exceeded, denial of service or traffic shaping is triggered.
With the recent increase in Cloud Hosting services and availability of new and exciting technologies, creating a hosting business is easier than ever before. Part of the success of bringing a good service to your customers is due to the easy of use, presentation and options on your business website and that is why selecting […]
When it comes to creating a WordPress website, you must don many hats. If you choose to everything yourself you must be a website designer, a content strategist, a social media maven, a writer, and even a graphic designer. But let’s be honest; there are very few of us who are talented in all of […]
