Overcoming The Challenges Of Content Creation For Informational Websites

Original Source: https://smashingmagazine.com/2023/03/overcoming-challenges-content-creation-informational-websites/

Web apps and e-commerce sites may get all the love these days, but the majority of the web is still informational, and most websites are still content-led. Whether it’s a marketing website trying to convince you to buy a product or an informational site seeking to educate and answer your questions, the web is still dominated by words. But unfortunately, these sites face two substantial challenges:

According to the Nielsen Norman Group, users only read 20 to 28% of a webpage.
Most people who write content for the web lack the necessary skills, which leads to poor-quality content.

In an ideal world, professionals would write our website copy, but that rarely happens, especially in larger organizations. Instead, we have an eclectic mix of people from all parts of the organization posting content online, which is why content quality is often poor.

Of course, complaining about this fact fixes nothing. So, what can we do to improve the copy on our websites when we potentially have dozens of inexperienced people posting the copy online?

Unsurprisingly, there’s no single magic answer that will fix the quality of our site content. However, there are four techniques we can use that together can get us where we want to be. When implemented correctly, these techniques can have a transformational impact.

Technique #1: Provide Content Creators Training

In my experience, most of the training that content creators receive focuses on how to use the content management system, not how to write good web copy. Even when they do receive training on how to write online, this is often in the form of live training.

Live training has its place, but it comes with its drawbacks. It is hard to arrange and needs to be repeated every time there is a new member of staff. However, the biggest problem with live training is that unless the person goes out of that training session and starts using what they learned immediately and on an ongoing basis, they quickly forget what they have learned and fall back into old patterns of writing.

What content creators really need is training material they can easily reference when they sit down to create content for the website. The material should be broken down into modules that are directly related to things they might want to do, like the following:

How to optimize a page for search engines.
How to ensure your page is accessible.
How to structure your content.
How to write clear and engaging titles.
How to make content more engaging.

And so on.

Each module should be small, self-contained, and take only a few minutes to digest. Ideally, it should also be supported by video walkthroughs and include specific actions people can take.

There should also be checklists that ensure they have thought of all the things that need doing when writing, all as quickly accessible as possible.

Technique #2: Make Content Creators Accountable

If content creators are not made accountable for the content they create, they will not put the effort in to ensure its quality.

To address this issue, we can assign every page on a website to a specific individual and potentially even add their contact details to the page in case users have questions. Doing this motivates content creators to ensure the page answers as many user questions as possible and is up-to-date.

You may meet resistance to this idea because people change roles, and so responsibilities change. However, that is why pages should have a specific owner. Too often, pages do not get handed over when people move on, and these orphan pages are abandoned, leading to content ROT (redundant, out of date or trivial content).

Ensuring content remains relevant and up-to-date is essential, which leads me to my third technique.

Technique #3: Establish Governance Around Website Content

The only way content will remain up-to-date is if it is reviewed regularly. And to achieve that, we need some governance that motivates content creators to do exactly that with the pages for which they are responsible.

You can create this motivation by establishing a policy stating that if certain conditions are not met, the content will be archived.

What these conditions are is entirely up to you. You could require a page to meet a certain threshold of page views or engagement (encouraging content creators to ensure page titles are relevant and clear.) You could even flag pages that perform poorly in search engine rankings.

However, as an absolute minimum, you should require pages to be reviewed regularly — how regularly will depend on your content and situation.

For instance, I work on many public sector and higher education websites where change is slow. In such cases, an annual review of pages is usually sufficient, except for certain time-sensitive pages.

If the condition is not met (such as the page not being reviewed by a required date), the page could be removed from navigation and search, effectively orphaning it. Whatever you decide, it should also have a banner added to the page saying that the content may not be up-to-date and to contact the page owner for the latest information. This will motivate the content creator to update the page to avoid a lot of emails!

Another condition I often use is poor user feedback on a page, which brings me to my final technique for ensuring quality content.

Technique #4: Provide Content Creators with Good Feedback

One way to gather user feedback for content creators is through surveys. Surveys can be added to the bottom of a page or integrated into the site experience, asking users how they found the content and if there is anything missing that they would like to see.

Another way to gather feedback is through social media listening. Monitoring social media channels can help you understand how users are engaging with your content and what they are saying about it. This can be valuable in identifying areas of your site that may need improvement or in identifying content that resonates with your audience.

In addition, it’s important to regularly review your site’s analytics to see which pages are performing well and which are not. Special attention should be given to dwell time, traffic levels, and search engine rankings.

By analyzing this data, you can better understand which pages may need improvement or which topics are of most interest to your audience.

Whatever the case, all of this feedback needs to be made available to content creators because if the page rates poorly, it will encourage content creators to act.

You can also take this technique even further by celebrating the most successful content creators or the most improved pages by giving out awards and prizes (much like employee of the month).

Bringing It All Together

To bring these techniques together, we can create a content creator’s dashboard that shows each content creator all the pages they are responsible for. This dashboard will display how well pages are performing and highlight pages that are doing well or poorly.

At the top of the dashboard, we can flag pages that need the content creator’s particular attention — pages that are in danger of being archived because they need reviewing or have been rated poorly.

Finally, we can integrate training directly into the dashboard in the form of quick tips (like the Hemingway App example) and more detailed advice on how to address questions content creators may have at that point.

Of course, the approach I have laid out in this post is not a comprehensive solution to poor quality, but it does at least put in place a framework for improvement. One that works well for large sites that have a significant number of content creators who are not web copy specialists.

By using these four techniques together, we can ensure that the copy on our websites is of high quality and that our users find the content they are looking for.

Further Reading on SmashingMag

“Why Content Is Such A Fundamental Part Of The Web Design Process”, Matt Saunders
“How To Deal With Redundant, Out-Of-Date And Trivial Content ROT”, Paul Boag
“50 Resources And Tools To Turbocharge Your Copywriting Skills”, Freya Giles
“Information And Information Architecture: The BIG Picture”, Carrie Webster

Unreal Engine 5 puts actual real people into Lords of the Fallen

Original Source: https://www.creativebloq.com/news/lords-of-the-fallen-tech

Fantasy becomes reality.

Cyberpunk inspired Three.js Scene with JavaScript and Blender

Original Source: https://tympanus.net/codrops/2023/03/22/cyberpunk-inspired-three-js-scene-with-javascript-and-blender/

Learn how to code a vibrant Cyberpunk scene using Three.js, complete with post-processing and dynamic lighting, no shader expertise needed!

How to add Twitter Feed to Shopify Website

Original Source: https://ecommerce-platforms.com/articles/how-to-add-twitter-feed-to-shopify-website

Learning how to add a Twitter feed to your Shopify website enables your brand to showcase its social presence on pages like your homepage, blog, and even product pages.

The great part about embedding a Twitter feed on your website is that it automatically updates Twitter content on your website, meaning you don’t have to copy over posts from your Twitter page.

In addition, a Twitter feed is an excellent way to inject a significant amount of imagery on your website; many brands use Twitter galleries or feeds to serve as their homepage image galleries.

There are two ways to add a Twitter feed to your Shopify website:

With an app

By embedding code for a Twitter widget

In this guide, we’ll walk you through both methods, allowing you to decide on which one works best for you. We recommend trying each option, as you may find that one looks or functions better than the other, depending on your site layout and workflow.

Keep reading to learn all about how to add a Twitter feed to a Shopify website!

How to Add Twitter Feed to Shopify Website

To begin, we’ll explore how to add a Twitter feed to Shopify with an app. There are several Twitter apps in the Shopify App Store, all of which provide unique functionality. Some give you social media buttons, Twitter follower counts, or even auto-posting. What we’re looking for, however, is an app to sync your current Twitter feed, displaying a certain number of the most recent posts from your account (or another public account).

Method 1: Add Twitter Feed to Shopify with an App

There are some free, and some paid, Twitter feed apps available for download through the Shopify App Store. In this tutorial, we’ll use the Zestard Twitter Feed app, since it provides the functionality required, and it’s free. If you decide on a different app, we suggest trying out all the free apps first, since this isn’t exactly a feature that you should have to pay for.

To begin, install the Zestard Twitter Feed app on your Shopify store. If you’re still getting started with Shopify, learn how to create your store here. You can find apps by logging into your Shopify account, and going to Add Apps, or navigating directly to the App Store.

Click Add App in the Shopify App Store, then Install App once it brings you back to the dashboard screen with information about permissions and privacy.

installing the app - how to add Twitter feed to Shopify website

Once installed, you’ll see a new tab for Twitter Feed under the Apps tab in Shopify. There’s also a section on How to Use the app, which you can follow to properly set it up.

Some configuration is required before viewing any Twitter feeds on the frontend. Go to Timeline Settings to start.

going to the Twitter Feed app

This page provides several fields for customizing the overall appearance and content of the feed.

The most important field to fill is the Feed Name; type or paste in the Twitter handle you want to pull from. It’s possible to display the feed from any public Twitter profile.

Other settings include:

Feed Box Width

Feed Box Height

Feed Theme (Light or Dark)

Feed Limit (only displaying a certain number of recent tweets)

Data Link Color

Feed Background Color

Once you’re done customizing, make sure you click on the Save Changes button to render a preview.

placing in the feed name

After clicking Save Changes, the app generates a preview of the Twitter feed. Feel free to scroll through the feed and go back to adjust settings based on what you’d like to achieve.

a preview of the Twitter feed in Shopify

Right above the preview, you’ll see that the app also generated a shortcode for the feed. This is a unique bit of code for you to paste anywhere on your Shopify website. Click to Copy the code to your clipboard.

the shortcode

The Twitter Feed app reveals a popup for you to easily copy the code. All you have to do is use the keyboard shortcode CTRL + C (Command + C for Mac) to copy the shortcode to your computer’s clipboard.

copying the shortcode for how to add Twitter feed to Shopify website

You may want to place the Twitter feed on a Shopify webpage, like on your About Us, Contact, or Support pages. To do so, go to Online Store > Pages in Shopify. Open the new page for which you’d like to add the feed. Click the <> (Show HTML) button to switch from the Visual Editor to the HTML Code Editor.

choosing the HTML editor

Paste the previously copied shortcode into the HTML editor. If there’s other content on the page, simply choose where you want the feed to go, and insert the code there. Be sure to save the page.

pasting code into Shopify page

Navigate to the frontend of that page by previewing or going to its web address. You’ll now see the Twitter feed displayed exactly where you inserted the shortcode.

the results on the frontend

Many online store owners would rather learn how to add Twitter feed to a Shopify homepage. In that case, Shopify provides a visual customizer for the homepage, making it even easier to insert the Twitter feed shortcode.

For that, go to Online Store > Themes > Customize.

Next, find the area in which you’d like to place the Twitter feed. Click the Add Section button in this area. Search for the Custom Liquid theme section and insert it into Shopify.

adding a section

The Custom Liquid theme section presents several settings on the left side. The most important of which is the Custom Liquid field. Paste in the shortcode previously copied from the Twitter Feeds app.

After clicking Save, you’ll see the Twitter feed rendered in the Shopify homepage preview to the right.

You might even customize the section a bit with options for:

Color Scheme

Section Padding

Custom CSS

how to add Twitter feed to Shopify website using the custom liquid section

The last way to insert a shortcode from the Twitter Feeds app is by adding it to the actual theme source code. This is generally only recommended if you’d like the Twitter feed to globally appear in certain sections or pages.

To do so, go to Online Store > Themes in Shopify. Click on the Ellipsis (…) button to reveal more options. Click on Edit Code from the drop-down menu.

editing code

Pick the theme.liquid file and paste the code wherever you want within the theme coding. As an alternative, you could choose to modify Templates or Sections for more control over where the Twitter feed appears.

how to add Twitter feed to Shopify website through the theme files

Other settings you can find in the Twitter Feed app include:

Options to embed a single Tweet (or Retweet)

A tool to generate a Twitter sharing button

Options to show hashtag feeds

Method 2: Add Twitter Feed to Shopify with an Embedded Twitter Widget

Twitter offers a way to publish any public timeline to your website. This means that you have the ability to show your brand’s feed, or the posts from another account.

To get started, go to Publish.Twitter.com.

Paste or type in the URL of the Twitter profile you’d like to display as a feed on your Shopify store. Click on the arrow button to proceed.

pasting in a Twitter URL

Here, you have two options:

Embedded Timeline

Twitter Buttons

The Twitter Buttons are useful for adding a Follow or Mention button somewhere on your website. But for this article, we’re more focused on getting a Twitter feed to appear. So, select the Embedded Timeline option.

choosing an embedded timeline on Twitter

Twitter automatically generates the Twitter feed widget code. However, we suggest clicking on the Set Customization Options link to format the feed fully before publishing to your website.

setting customization options

This reveals several settings to change the appearance of your feed widget:

Height

Width

Look (Dark or Light)

Language (You can usually just go with Automatic)

Click the Update button to see your modifications in the preview below. As you can see, our simple change from Light to Dark already rendered in the preview.

customizing the Twitter widget

Once you’re happy with the way your Twitter feed looks, click on the Copy Code button to copy the widget code to your computer’s clipboard.

copying the Twitter code

Now it’s time to learn how to add the Twitter feed to your Shopify website. The easiest option is to place the feed on your Shopify homepage, via a Shopify section.

Go to Online Store > Themes > Customize to open the Shopify visual customizer. Find the area of the homepage you’d like to insert the Twitter feed. Click one of the Add Section buttons to reveal Shopify’s collection of sections. Scroll through the list or search for the Custom Liquid section. Click to add that to the page.

adding a section

Use the Custom Liquid field to paste the previously copied code (from the Twitter website). Feel free to adjust other section settings like the Color Scheme, Section Padding, or Custom CSS.

You’ll notice that, initially, all that’s shown is a link to the Tweets of your Twitter account.

pasting in the code

You simply have to click the Save button for Shopify to render the Twitter feed in the customizer preview.

how to add Twitter feed to Shopify website in the customizer

An additional way to add a Twitter feed via embed code is by placing it into a specific page in Shopify. Go to Online Store > Pages to accomplish this. Open the page in which you’d like to edit.

Once in the page editor, click on the Show HTML (<>) button. This switches from the Visual Editor to the Custom HTML Editor, which is required for adding code.

going to a page

Paste in the code you originally copied from Twitter. Click on the Save or Publish button for the changes to take effect.

pasting code in a page

Either preview the page or go to its frontend view. Here, you’ll see the Twitter feed displayed alongside any other content you may have had on that page.

twitter feed on the frontend

The last way to embed a Twitter widget with code is by utilizing the Shopify theme files. Go to Online Store > Themes to begin. Choose the Ellipsis (…) button, then select Edit Code.

edit code in Shopify

The theme.liquid file gives you complete control over the theme you currently have installed on Shopify. Paste the Twitter feed code wherever you want the feed to appear in the theme. Otherwise, it’s possible to utilize Template and Section files in case you’d rather the Twitter feed only appear in certain portions of your website, like in the sidebar.

how to add Twitter feed to Shopify website using the theme files

That’s How to Add a Twitter Feed to a Shopify Website!

You may have noticed that using a Shopify app still creates a shortcode for you to place anywhere on your website. That may get you to ask, “what’s the point of using an app?” There are three reasons:

Using an app means all of your work is contained to one dashboard: Shopify.

There are far more customization settings available in Twitter Feed apps when compared to what’s offered through the Twitter embeddable widget.

A shortcode is at least a little less intimidating than the code provided by Twitter.

And that’s all there is to it! We hope our complete guide on how to add Twitter feed to Shopify has helped you figure out if a plugin or code widget is right for your ecommerce store. We encourage you to look into other apps for embedding alternative social media feeds, like an Instagram feed, or even for showing something like social proof or TikTok videos. Let us know in the comments if you have any questions!

The post How to add Twitter Feed to Shopify Website appeared first on Ecommerce Platforms.

5 Best Free Video Converters for Mac

Original Source: https://www.hongkiat.com/blog/free-mac-video-converters/

Want to do some simple video conversion on your Mac but not ready to get a paid tool just yet? Well, the good thing is that there are some free video converter apps for Macs out there.

We have researched, tested, and experimented with many of the free video-converting apps out there, and in the following list, you will find some of the best ones that we found together with their respective pros and cons and what each one is best for.

1. The Video Converter
The Video ConverterThe Video Converter
 Best for:  Easy, quick and straightforward video converting.

Developed by Float Tech, LLC, The Video Converter’s best feature is its lightweight (3.4MB in size) and super easy to use through a straightforward interface. Plus, there are no annoying pop-up ads.

You simply drag and drop or upload the video to convert and get results instantly. The converted video will be saved into the Download folder. It also supports bulk video conversion and various formats in the free version.

Input: MP4, MOV, MP3
Output: MP4. MP4. WEBM, GIF, MOV, WMV, 3GX, AAC, AVI, FLAC, FLV, M4A, MKV, OGG, WAV, MPG

Note: Conversion to some formats (MP4, MP3, GIF, WMV, MKA, MKV, WAV, MPG) requires a premium pass. A premium pass costs $2.48/month or a Lifetime Pass for $12.98

What we like:

It is free, with a simple interface, and no ads.

What we don’t like:

It only convert video, nothing more nothing less; converting to some formats requires a premium pass.

Download The Video Converter for Mac

2. Handbrake
HandbrakeHandbrake
 Best for:  Many options to customize the converted video.

Also listed as one of the apps in our 100 Useful Free Mac apps, Handbrake is an open-source video transcoder that provides much information about your input video, including its current tracks, filters, and dimensions, all of which you can change for your output video. You can also see the progress of your current frame in real-time.

Apart from Mac, the app is available for Windows and Linux as well. Plus, it offers tons of output presets, so just provide where you want to use the video (e.g., Gmail 720p30 or Android 1080p30), and it will convert accordingly.

You can also change the video encoder (AV1, H.265, and H.264, MPEG-4 and MPEG-2, VP8, and VP9), video quality, framerate, and much more for the output video. It also supports batch and bulk converting.

Input: MP4, MKV, WEBM
Output: MP4, MKV, WEBM

What we like:

Open source and free, versatile.

What we don’t like:

Limited to only three input and output video formats.

Download Handbrake for Mac

3. Smart Converter
Smart ConverterSmart Converter
 Best for:  Convert (from and to) videos compatible with other Apple devices.

Smart Converter app is simple to use through a powerful yet intuitive interface. Just drag and drop the video, choose an output format (like Apple TV, QuickTime, iPad, or Music, etc.), and then click to convert.

So basically, the app does not allow you to choose the output format. Instead, it converts your video to a format that can be played on a specified device.

Input: MOV, MKV, AVI
Output: Apple and Android device

What we like:

Ad-free, easy to convert.

What we don’t like:

Unable to choose the output file format.

Download Smart Converter for Mac

4. VLC
VLCVLC
 Best for:  A 2-in-1 app for playing and converting videos.

VLC is more commonly known as a media player, but the app can also convert your videos into the required format. You can also alter the video and audio codec for the output video. The app is available for Windows and Linux as well.

The conversion process is fairly simple, just hit Command + Shift + S, or go to File > Convert & Stream, drag-drop your video, choose a profile (or click Customize to choose other file formats), select a destination for output, and then click Save.

Related: 20 Tips For VLC Player Users

Input: MOV, MKV, AVI, MP4
Output: MPEG, WEBM, OGG, MP4, MOV, FLV, RAW, WMV

What we like:

Output quality is good.

What we don’t like:

Cannot do bulk convert.

Download VLC for Mac

5. Prism
PrismPrism
 Best for:  Ripping videos from disc.

If you want a free video-converting app that does more than just convert video, then Prism by NCH Software is the one to go with. Aside from converting video, you can add video effects, trim and split your video, and convert video directly from your DVD or Blu-ray disc.

Through a simple interface, you just drop or upload your videos, select your output format, and click the convert button. The app supports bulk video conversion and also allows you to customize the encoding settings and video output options.

Prism also had a paid version with advanced features, but the free version is good enough if you are converting videos for non-commercial usage.

Input: 3GP, AMV, ASF, AVI, DIVX, DV, FLV, ISO, M4V, MKV, MOD, MOV, MP4, MPE, MPEG, MPG, MSNWCTCP, MVE, NUT, OGV, SWF, TOD, VC1, VIV, VOB, WEBM, WEBP, WMV, XVID
Output: 3GP, AMV, ASF, AVI, DIVX, DV, FLV, GIF, JPG sequence, M2TS, M4V, MKV, MOV, MP3, MP4, MPG, OGV, PNG sequence, RM, SWF, VOB, WAV, WEBM, WMV, SWF, XVID

What we like:

Converts videos really fast.

What we don’t like:

The app’s interface seems a little dated.

Download Prism for Mac

The post 5 Best Free Video Converters for Mac appeared first on Hongkiat.

Free Fonts For Interface Designers

Original Source: https://smashingmagazine.com/2023/03/free-fonts-interface-designers/

Not every project has the budget to spend a lot of money on fonts. But that doesn’t mean that typography needs to play a secondary role when the budget is tight. The variety and quality of free and open-source fonts out there is impressive and enables everyone to use beautiful, well-crafted typefaces.

In this post, we compiled some free fonts that we came across and that you probably haven’t spotted before. Some of them shine with their flexibility, some put a special focus on readability, and others are a great choice if you want to make a bold statement. As different as the fonts are, they all have one thing in common: You can use them for free in both personal and commercial projects. A huge thank-you to the wonderful type designers and contributors for making their fonts available to all of us! 👏🏼👏🏽👏🏾

Recursive

Built to maximize versatility, control, and performance, Recursive is a five-axis variable font that can go from Sans to Mono. Taking full advantage of variable font technology, it gives you full flexibility.

Recursive allows you to choose from a wide range of predefined styles or dial in exactly what you want for each of its axes: Monospace, Casual, Weight, Slant, and Cursive. Inspiration came from single-stroke casual signpainting to give the font a flexible and warmly energetic look, making it a great fit for data-rich-apps, technical documentation, code editors, and much more. Designed by Stephen Nixon, with contributions from Lisa Huang, Katja Schimmel, Rafał Buchner, and Cris R Hernández.

Yrsa & Rasa

The type families Yrsa and Rasa have a different approach than other type projects. They build upon the existing typefaces Merriweather and Skolar Gujarati to produce two entirely new type families that span different writing systems.

Yrsa supports over 92 languages in Latin script and has a special focus on properly shaping the accents in Central and East European languages. Rasa supports a wide array of basic and compound syllables used in Gujarati. Both type families include five weights and are intended for continuous reading on the web. Perfect for longer articles in online news, magazines, or blogs. Designed by Anna Giedryś and David Březina.

Space Grotesk

Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry’s fixed-width Space Mono family. It retains the idiosyncratic details of the monospace while optimizing for improved readability of non-display sizes.

Space Grotesk includes four weights and open-type features like old-style and tabular figures, superscript and subscript numerals, fractions, and stylistic alternates. Latin Vietnamese, Pinyin, and all Western, Central, and South-Eastern European languages are supported. Designed by Květoslav Bartoš for Florian Karsten Typefaces.

Figtree

Figtree combines friendly curved shapes, a simple monolinear construction, a high x-height, and slight taper into a charming geometric typeface that ensures maximum readability.

Figtree comes in seven weights, ranging from Light to Black, and includes typographic finesses such as fractions, monospace numbers, and scientific inferiors. Minimal but not stiff, casual but not silly, the typeface beautifully manages to maintain a crisp, clean feeling. Designed by Erik Kennedy.

Reforma

Reforma is a versatile font family designed for long-form reading. Commissioned to celebrate the centenary of the university reform of the Universidad Nacional de Córdoba, Argentina, the typeface had to convey four premises: plurality, intellectual heritage, versatility, and free availability.

After three years of work, 20 font styles were born that work harmoniously in different contexts. They are grouped into three subfamilies — from a classic serif to a modern sans-serif and an intermediate hybrid style with flare serifs — and are available in three weights plus an ultra-black companion set for headings. Reforma beautifully manages to strike the balance between tradition and novelty while staying super-versatile. Designed by Alejandro Lo Celso, Jorge Ivan Moreno Majul, Francisco Galvez Pizarro, Francis Ramel, and Oscar Yañez.

Hanken Grotesk

If you’re looking for a versatile sans-serif typeface inspired by the classic grotesques, Hanken Grotesk might be right down your alley. It shines with a friendly, distinguishable look and is equally suitable for small text and headings.

Nine weights are available, ranging from Thin to ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, and Black. Each weight comes with matching italics. A modern classic designed by Alfredo Marco Pradil.

Grenze

Grenze combines the best of two worlds. As a hybrid between Roman and Blackletter styles, it transports a sense of boldness and texture while at the same time offering the readability of classical typefaces.

The family includes nine weights (Thin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, and Black) with matching italics. To respond to different needs, Grenze comes with some useful advanced features such as ligatures, ornaments, extended language support, and various figure sets. Designed by Renata Polastri and the Omnibus team.

Fira Sans

Originally designed as a system font for Mozilla’s FirefoxOS, the humanist sans-serif Fira Sans grew into a versatile open-source typeface that stays readable across screen qualities and sizes.

Fira Sans is available in 18 styles, including nine weights and accompanying italics. The package also includes a mono-spaced variant. Designed by Carrois Apostrophe in cooperation with Erik Spiekermann.

Atkinson Hyperlegible

Certain letters and numbers can be hard to distinguish from one another for low-vision readers. Atkinson Hyperlegible is here to change that. Named after Braille Institute founder J. Robert Atkinson, the typeface focuses on letterform distinction to increase character recognition and improve readability.

Recognizable footprints, differentiated letterforms, unambiguous characters, and exaggerated forms are some of the techniques that optimize readability and give the typeface its distinctive look. Atkinson Hyperlegible includes four fonts, with two weights (Regular, Bold, Italics, Italics Bold). Thanks to accent characters, 27 languages are supported. Designed by Braille Institute of America.

Anek

The multi-script typeface Anek tells a very special story. It covers nine Indian languages plus Latin and was created through a collaboration of twelve type designers working across eight cities in India. The design of each script is deeply rooted in its typographic culture, while the different scripts live together in visual harmony.

All Anek fonts share visual similarities like circles and circular shapes, robust letter structures, and delicate joineries. With 40 styles per set, Anek is one of the few Indian variable display fonts with such a large set of weight and width styles. Designed by Sarang Kulkarni, Girish Dalvi, Noopur Datye, Hanif Kureshi, Maithili Shingre, Yashodeep Gholap, Divya Kowshik, Aadarsh Rajan, and Shuchita Grover.

Source Sans

Designed by Paul D. Hunt, Source Sans is Adobe’s first open-source typeface family. The sans-serif draws inspiration from classic grotesques and is characterized by a visual simplicity that works equally well in long-form texts just like as short labels in user interfaces.

Source Sans comes in six weights (ExtraLight, Light, Regular, SemiBold, Bold, Black) plus matching italics. The fonts offer wide language support for Western and East European languages, Vietnamese, Pinyin romanization of Chinese, and Navajo. A modern classic.

Beattingvile

If you’re looking for a font to give your project a personal, hand-made touch, Beattingvile by Garisman Studio is worth checking out.

The multilingual script font features stylistic alternates, swashes, and ligatures and is perfect for all projects where you want to make a statement that is a bit bolder. Perfect for headings, branding, label design, logo type, quotes, and much more — both on screen and in print.

Disket Mono

Monospace fonts often have a technical feel to them, waking connotations of coding editors or typewriters. Disket Mono is a bit different. The font strikes a perfect balance between the inspiration it draws from geometry, grids, and architecture and using soft corners for a more tactile, personal feel.

Disket Mono comes in two weights (Regular and Bold) and supports twenty languages. A beautiful display font, designed by Mariano Diez.

Srbija Sans

Srbija Sans is a neo-grotesque sans-serif typeface with a geometric look. It gets by without any decorative details, but when you look more closely, you’ll notice how small design decisions improve readability and give the clear shapes a warm and natural touch.

The typeface includes 315 glyphs, supporting Latin and Cyrillic, and featuring accents and ligatures, mathematical symbols, and currencies. Srbija Sans was designed by Vedran Eraković and Studio Metaklinika for the National Tourism Organisation of Serbia.

The League Of Moveable Type

The League of Moveable Type opened its doors back in 2009 when designers were just gaining the ability to put custom fonts on the web. The project’s mission has stayed the same since day one: to raise the design standards of the web.

Micah Rich, maintainer of the foundry, cares deeply about good typography and empowering everyone with great design skills. That’s why the catalogue only features carefully-picked open-source fonts — 17 at the moment. You can use them for free however and wherever you want.

Google Fonts

It’s certainly not an insider’s tip but always a great place to look for free fonts: Google Fonts. The library features more than 1,400 open-source font families for more than 135 languages, plus icons for common actions and items.

By the way, if you want to dive deeper into the principles of typography or delve into all of the artistic and technical aspects of modern typesetting and font technology, the Google Fonts Knowledge library is a treasure chest of typography wisdom.

Wrapping Up

Do you have a favorite free font that isn’t listed in the post? Let us know in the comments below. We’d love to hear about it!

Top 10 Best Laptops for Graphic Design

Original Source: https://designrfix.com/graphic-design/best-laptops-for-graphic-design

If you are interested in graphic design, you need a laptop that can help you create your favorite projects and edit existing ones. There are a lot of different laptops on the market, and some of them are better for graphic design than others because of their capability of processing High Graphics Data Easily. Some […]

The Top Creator Economy Statistics for 2023

Original Source: https://ecommerce-platforms.com/articles/top-creator-economy-statistics

Creator economy statistics for 2023 provide some interesting insights into the changing state of the marketing, promotional, and sales landscape.

Currently, the “creator economy”, made up of YouTube stars, streamers, influencers, and more, is changing the way people connect with, consume, and even research products online. According to some stats, there were around 50 million people in the “creator economy” as of 2022.

Experts believe creators will change the internet forever, particularly as we move ahead towards an era of decentralization. In the past, content was primarily dictated and published by large companies and organizations. Today, virtually anyone can create a lucrative presence on the web.

Today, we’re exploring some of the most valuable creator economy statistics worth knowing as we move ahead into the new era of promotion.

What is the Creator Economy?

Before we dive into the stats about the creator economy, it’s worth gaining a clear understanding of what this landscape actually involves. While discussions about the creator economy are growing, there are still many people who don’t understand exactly what it is.

To understand the creator economy, we need to look back. Around a century ago, we all lived in the “Industrial economy”. This was the age when manufacturing began to evolve, and people earned cash primarily via physical labor, working in factories, or agricultural environments. We earned our living by making physical items which could be sold to local consumers.

In the 1950s, the world began to shift, moving towards the “consumer economy”. Following a “depression”, and a World War, customers were ready for new purchasing experiences. People began earning money through services, offered to others. Trade moved into a global scale, and traditional media started promoting products based on the concept of “FOMO”, or fear of missing out.

When the internet emerged, we moved into the “knowledge economy”. Some traditional, hands-on jobs were replaced by technology, and people began earning cash by sharing knowledge through content creation, blogs, and educational resources. The knowledge economy formed the foundation for the creator landscape we know today.

The evolution of technology and humankind effectively transformed the way we consume and access media, making content more decentralized. The internet shifted from a repository of information, into a powerful resource for entertainment and experiences. Where in the past, content production required specialist equipment, knowledge, and skills, the creator economy created a world where anyone could produce, and monetize content.

Go to the top

illustration of a cat climbing a ladder

Creator Economy General Statistics

Now you know a little about the creator economy and how it works, it’s time to start diving into the statistics. Notably, the creator economy is growing at an incredible rate. According to HubSpot, around 30% of 18-24 year-olds, and 40% of 25-34 year-olds believe themselves to be “creators”.

At the same time, younger generations are increasingly viewing content creation as a viable job opportunity. Many children today say they want to grow up to become a YouTuber, a TikTok star, or an Instagram influencer. Here are some general insights into how the creator economy has evolved.

The creator economy is valued at $104.2 billion

According to the Influencer Marketing Hub’s “Creator Earnings” benchmark report for 2021, the creator economy market size is growing. Today, the landscape is currently worth around $104.2 billion. This economy includes a wide variety of content creators, from YouTube stars to everyday influencers, bloggers, and vloggers.

(Influencer Marketing Hub)

Between 2020 and 2022, the creator economy grew by 165 million people

Notably, the growth of the creator economy has accelerated mostly in recent years. A study by Adobe found between 2020 and 2022, the number of content creators worldwide increased by around 165 million people, marking a rise of 119%.

Adobe also noted the creator economy grew significantly in 2020, with around 52% of people starting to post social content. This may have something to do with the pandemic pushing more people to get active in the online world.

(Adobe)

The top content topic for full-time creators is “entrepreneurship”

When assessing what kind of content creators develop for their audience, ConvertKit found the majority of full-time creators focus on entrepreneurship, followed by personal development, marketing, small business growth, and online business development.

Among “hobbyists”, the most common topic covered was “personal development”, followed by art, design, crafts, and mental health.

(ConvertKit)

Educators are the most common type of creator

According to a report from ConvertKit into the state of the creator economy in 2022, Educators are the most common type of “creator” today, followed by bloggers, coaches, writers, and artists. Interestingly, when asked about their creation strategies, around 46.7% of professionals said they engage in content creation full-time, while 42.7% do so part-time. Around 10.6% classify their creation strategies as a hobby.

(ConvertKit)

About 2 million creators are defined as “experts”

Linktr.ee found that around 2 million “creators” can be deemed as experts in their field, with around 100k, to 1 million followers online. Another 2 million creators are considered more than experts, with more than 1 million followers.

The majority of content creators assessed by the platform are seen as semi-pro, with about 1k to 10k in followers overall. Around 66% of all creators assessed by Linktree also said they only devote part of their time to creating content (less than 5 hours per week). Additionally, around 36% of the creators in the report said they had only been making content for about 1 year.

(Linktree)

Creators are most likely to be young, and female

While anyone can thrive as a content creator in today’s digital world, creators are more likely to be young and female, according to some studies. The Global Web Index found that 63% of creators belong to Gen Z, and 48% identify as female. Interestingly, ConvertKit also found that around 64% of content creators are women.

(Global Web Index)

63% of creators say they post content for fun

While monetization is something that many creators focus on in today’s economy, it’s not the only reason people get involved with the digital world. Around 61% of the creators in a Global Web Index study said they post content just for fun.

Another 34% said they post their content because they’re passionate about the topic they’re covering. Plus, 31% say they post content to help them explore a new potential interest or hobby.

(Global Web Index)

85% of content creators say they enjoy their work

People in the creator economy tend to enjoy what they do, according to a study from “The Tilt”. When asked about the benefits of content creation, 85% of creators said they enjoyed their work, while 82% said they appreciated the independence of running their own business.

However, creators still face challenges. The Tilt study also found 54% of full-time content creators saying making sure their content was found was one of their top challenges. 60% of part-time content creators felt the same way. Other common challenges included finding the right strategies for monetization, marketing, and publishing on a regular schedule.

(The Tilt)

Go to the top

illustration of a cat climbing a ladder

Creator Economy Marketing Statistics

In many circles, creators are considered marketing experts and valuable promotional resources. Companies are increasingly looking for ways to work with creators like influencers and social media stars to improve their position in the changing online landscape.

According to Sprout Social, 52% of companies lean on creators to strengthen their community following. Additionally, 41% of companies say they work with content creators to promote their brand values. What’s more, marketers say they frequently work with creators on making “educational content”.

Social media posts are the most common content created in the creator economy

ConvertKit’s study also found that social media posts are by far the most common form of content created by experts, consuming about 60.9% of the creator landscape. After social media posts, articles and blog posts reign supreme at 51.2%.

However, around 67% of creators did say they would be focusing more on emails and newsletters moving into 2022.

(ConvertKit)

58% of creators create 2-4 types of content

About 58% of all creators create at least 2-4 kinds of content, ranging from newsletters, to blogs and social media posts. Around 1 in 3 creators say they will only produce one type of content. According to Linktree’s report, 12% of beginners in the creator economy consider TikTok to be their biggest platform, compared to 6% of experienced creators.

Additionally, 16% of beginners consider Facebook to be their biggest marketing platform, compared to around 22% of experienced creators.

(Linktree)

European brands spent over 1.3 billion euros on creator marketing in 2020

According to Adobe, European brands spent around 326 million euros on creator marketing in 2016, but in 2020, that number had more than quadrupled. In 2020, companies were spending around 1.3 billion euros on creator marketing, marking a spending increase of 32%.

(Adobe)

77% of marketers had a dedicated influencer budget in 2022

According to the State of Influencer Marketing Report in 2022, influencer marketing increased by around 19% in 2022, to a value of around $16.4 billion. What’s more, around 77% of marketing teams said they had a dedicated budget in place for influencer marketing.

(Influencer Marketing Hub)

Clicks and engagement are the most important metrics for creators

When asked about the metrics that matter most when working with creators, around 39% of companies said engagement and clicks were the most valuable metrics. Approximately 23% of marketers said content type and category was most important, while 21% mentioned reach, views, and impressions.

(Influencer Marketing Hub)

Brands spent around $27.5 billion on influencer advertising in 2022

According to numbers presented by StockApps.com, the demand for influencers grew significantly during 2021 and 2022. By 2022, companies were expected to spend around $27.5 billion on influencer marketing. However, this number is expected to grow to around $51.15 billion in 2027.

According to the report, these numbers highlight the growing importance of creators in marketing and advertising strategies worldwide. Interestingly, China was expected to spend the most on influencer marketing ($15.69 billion), followed by the US at $4.25 billion in 2022.

(StockApps)

90% of companies believe influencer marketing is effective

Not only are companies spending more on influencer marketing, but they’re also more inclined to believe it effectively helps them to reach their goals. Around 90% of marketing professionals in the Influencer Marketing Hub report for 2022 said that influencers were key players in their marketing campaigns.

(Influencer Marketing Hub)

Go to the top

illustration of a cat climbing a ladder

Creator Economy Statistics by Platform

Platforms are a core component of the creator economy landscape. The number of available platforms for creators to share their content on has increased significantly over the last few years. However, more than 25% of part-time and full-time creators still say Instagram is their top channel for audience engagement, followed by email, and Facebook.

Creator economy platforms raised an average of $13.2 million in funding in 2021

Creator Economy “Unicorn” platforms started to emerge in earnest during 2021. According to one report, platforms like Axie Infinity, Cameo, Clubhouse, and Whatnot made significant strides in recent year. Around 9 out of 11 of these unicorns were created in the US.

Notably, the Creator Platforms that achieved the status of Unicorn within the year of 2021 managed to raise an average of around $13.2 million in Series A funding.

(Antler)

Influencer marketing software platforms raised over $800 million in capital in 2021

According to the Influencer Marketing Hub, platforms for influencer marketing and software solutions raised over $800 million in capital in 2021. These platforms are growing at an increased rate in 2022, with more solutions emerging all the time.

(Influencer Marketing Hub)

The community platform sector saw a revenue increase of 148% in 2021

Between 2020 and 2021, the “community platform” sector, which focuses on providing environments where users can connect with their audience, saw a revenue increase of around 148%. Community platforms allow creators to monetize their community with meetups, newsletters, and exclusive content. They’re growing particularly valuable in the age of NFTs, too.

(Stripe)

There are more than 30 million creators on Instagram

Since many creators consider Instagram to be the core launch pad for their careers, it’s probably no surprise that more than 30 million creators are active on the platform. However, there are countless other high-value platforms out there too. Around 13 million creators are active on YouTube today, and 3 million are active on Twitch.

(SignalFire)

The average Patreon user makes around 41% of their income on the platform

Patreon has emerged as one of the most attractive platforms for content creators in the new economy, with around 250,000 members. Around 56% of these users say they’re seasoned veterans of the creator economy. Additionally, Patreon’s own research found the average user makes around 41% of their income through the channel.

(Patreon)

Substack has over 1 million paid subscribers

While the creator economy may be best known for the development of visual content, there’s still plenty of demand for written content out there. For instance, Substack allows creators to publish serialized novels and newsletters via a paid subscription model.

In 2021, the platform hit the milestone of 1 million paid subscribers, demonstrating just how effective it is for the creator economy.

(Substack)

There are over 7.5 million active sellers on Etsy

The creator economy isn’t just made up of influencers. Independent creators who make and sell physical goods and downloadable products online are also part of this landscape. Etsy is perhaps the go-to platform for creators who make their own physical products. According to recent reports, there are about 7.5 million sellers active on Etsy.

(Etsy)

Over 25 million creators have a Linktree account

If you’ve ever followed an influencer on Instagram, you’ve probably noticed them referring their followers to the link in their bio. Since Instagram only allows individuals to have one link pointing out to another site, most creators leverage tools like “Linktree”.

According to Linktree, there are about 25 million creators with their own account on the platform.

(Linktree)

The number of YouTube channels making more than $10,000 has increased

YouTube is another major channel for innovators in the creator economy. Although the revenue a creator can generate from this platform can vary, studies have shown a significant increase in recent years. According to one report from 2022, the number of YouTube channels making more than $10,000 per year has increased by around 40% year over year.

(Music Business worldwide)

Marketers pay anywhere up to $50,000 just to advertise on certain YouTube channels

Part of the reason YouTube is becoming such a valuable tool for content creators, is marketers and brands are paying a lot more to be featured on the most popular channels. Having 1 million subscribers on YouTube can mean marketers pay up to $50,000 to be featured on your videos.

What’s more, channels with over 100,000 subscribers can earn up to $2,000 per video. In other words, the more viewers you have, the more money you make.

(Digiday)

TikTok Users with 100,000 followers can make up to $1000 per month

TikTok has also begun to earn attention as a valuable tool for the creator economy, particularly in recent years. The top 5 creators on TikTok made around $46 million in 2021. However, not everyone is earning this level of revenue from the platform.

According to Followchain, TikTok users with around 100,000 followers make an average of around $200 to $1,000 per month for their posts. Alternatively, TikTok users with about 1 million followers can make up to $5,000 per month.

(Followchain)

Go to the top

illustration of a cat climbing a ladder

Creator Economy Monetization Statistics

The Creator Economy gives everyday people a chance to create content and monetize their insights across a range of channels. The exact amount a person can earn in the creator economy can vary, depending on the methods of monetization they choose. For instance, the top-earning TikTok influencer is currently Charli D’Amelio, who earns around $105,770 per post. Alternatively, top earning YouTube influencers like Mr. Beast earn about $54 million from their content.

Only 13% of content creators say monetization is a top priority

When the Influencer Marketing Hub surveyed over 2,000 creators, they found that the majority aren’t as concerned about making money as you might think. Around 34.9% of content creators said the thing they actually cared most about was connecting with audience.

35.3% said they were most concerned about creating the best content, and 16.6% said they were concentrating on growing their following. Only 13.1% of content creators said making money was a top priority.

(Influencer Marketing Hub)

69% of content creators agree brand deals are their best source of revenue

According to the Influencer Marketing Hub, the majority of content creators (69%) consider brand deals to be their biggest source of income. When it comes to interacting with brands, the majority of creators also say they prefer to monetize content on TikTok and Instagram.

For creators on video and social media platforms, the second highest source of revenue is often “ad revenue” or ad share revenue. Around 7% of content creators say they make money from ads on videos, posts, and podcasts.

(Influencer Marketing Hub)

The number of content creators earning more than $69 per year increased by 41% between 2020 and 2021

Content creators now have a number of ways to create income, from live streaming exclusive content to sponsorship deals, onlyfans payments and more. According to Stripe, the number of content creators earning more than $69k per year increased significantly between 2020 and 2021, by approximately 41%.

This indicates even amateur creators do have an opportunity to make money if they invest in the right creator economy startups and platforms.

(Stripe)

59% of content creators have yet to monetize their content

Although many content creators use the creator ecosystem to make money, there are still many who have yet to make any income from their work. According to Linktree, 59% of content creators have yet to explore opportunities for monetization.

Those who have started working on monetization opportunities often explore a range of different options. For instance, 70% of creators earn less than 10% of their total income from brand partnerships. This could mean they’re investing more into become e-commerce entrpreneurs, selling merchandise, or setting up consulting companies.

(Linktree)

Creators tend to take more than a year to make a significant income

Even professional creators can take a while to upgrade their pricing and earn more income. According to ConvertKit, creators less than a year into their new career usually have an income of less than $50k per year. Additionally, many full-time creators are leveraging an average of 2.7 sources of income to pay for all of their bills.

Despite this, 32.4% of creators say money isn’t the most important aspect of being part of the creator economy. Rather, most professionals simply appreciate having the opportunity to be their own boss.

(Convert Kit)

35.2% of content creators don’t earn enough to support themselves

While the number of high-earning YouTube creators, TikTok creators, and other professionals in the creator economy have increased in the last year or two, not everyone earns a lucrative income. Around 35.2% of creators say they earn some money from their work, but not enough to fully support themselves. This could be due to the fact many still aren’t using the right monetization tools to make the most of their podcast, video content, and other creations.

Additionally, the Tilt found it takes content creators anywhere up to 6 and a half months on average to start building their revenue streams and earning their first dollars.

(The Tilt)

The average salary for content creators is around $44,192 per year

Though it can take a while to start making money as a creator, there is earning potential available to the right professionals. HubSpot found in 2022 that the average salary for a content creator is around $22 per hour, $3,680 per month, or $44,192 per year. However, the salary can range from $36,000 to $58,500 on average, depending on the content developed.

In comparison, a social media manager earns around $53,761 per year, while a SEO specialist can earn about $52,210 per year.

Understanding the Evolving Creator Economy

As the creator landscape continues to grow, the opportunities for creative and innovative people are potentially endless. While there are clearly challenges in the creator economy market, the valuation of this landscape is developing. What’s more, many tools are being developed to help content creators move into their new careers.

Today, creators can build websites on WordPress, design stores on Shopify, and even become full-time entrpreneurs in their own right, selling video and audio content to build their creator fund. As the number of creators worldwide continues to increase, there’s no doubt we’ll see the members of the creator economy beginning to thrive.

The post The Top Creator Economy Statistics for 2023 appeared first on Ecommerce Platforms.

Beginners Guide To Getting Started With NPM

Original Source: https://1stwebdesigner.com/beginners-guide-to-getting-started-with-npm/

NPM, which stands for Node Package Manager, is a package manager for the JavaScript programming language. It provides a central repository for managing and sharing packages of code that can be used in a variety of projects. With NPM, developers can easily install, update, and manage packages without having to manually download and manage dependencies.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


DOWNLOAD NOW

 

Getting Started with NPM

Before you can start using NPM, you need to have Node.js installed on your computer. You can download the latest version of Node.js from the official website (https://nodejs.org/).

Once you have Node.js installed, you can start using NPM by opening a terminal or command prompt window. You can then use the following command to check if it is installed:

npm -v

Creating a Package.json File

The first step in using NPM is to create a package.json file for your project. This file is used to manage your project’s dependencies, scripts, and metadata. You can create a package.json file by running the following command in your project’s directory:

npm init

Installing Packages

NPM makes it easy to install packages and add them to your project. You can install packages using the following command:

npm install <package_name>

For example, to install the lodash package, you would run the following command:

npm install lodash

The installed packages will be added to the dependencies section in your package.json file.

Using Packages in Your Project

Once you have installed a package, you can use it in your project by requiring it in your code. For example, to use the lodash package, you would add the following code to your project:

var _ = require(“lodash”);

Updating Packages

NPM makes it easy to keep your packages up-to-date. You can update all packages in your project by running the following command:

npm update

Or, you can update a specific package by running the following command:

npm update <package_name>

Uninstalling Packages

You can uninstall a package from your project by running the following command:

npm uninstall <package_name>

Conclusion

NPM is a powerful tool for managing packages and dependencies in your JavaScript projects. With its simple commands and centralized repository, this tool makes it easy for developers to install, update, and manage packages in their projects. By following the steps outlined in this article, you can get started using NPM today and start taking advantage of its many benefits.

Further reading

CSS Basics: Visibility: Hidden vs. Display: None

Original Source: https://1stwebdesigner.com/css-basics-visibility-hidden-vs-display-none/

visibility: hidden and display: none are two CSS properties that can be used to hide elements. While they may seem similar at first glance, there are some significant differences between them. In this article, we’ll explore these differences and provide some examples to illustrate their use.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!


DOWNLOAD NOW

 

visibility: hidden

The visibility property in CSS determines whether or not an element is visible on the web page. If set to hidden, the element will be hidden from view, but it will still occupy space on the page. This means that any other elements that would normally be positioned after it will still be positioned as if the hidden element were still visible.

Here’s an example of how visibility: hidden works:

<!DOCTYPE html>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23hidden-element%20%7B%0A%20%20%20%20%20%20%20%20visibility%3A%20hidden%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
<p>This is some text before the hidden element.</p>
<div id="hidden-element">
<p>This element is hidden using visibility.</p>
</div>
<p>This is some text after the hidden element.</p>
</body>
</html>

In this example, the #hidden-element is hidden using visibility: hidden. Notice that the element still occupies space on the page, and the text after it is still positioned as if it were visible.

display: none

The display property in CSS determines how an element is displayed on the web page. If set to none, the element will be completely removed from the page and will not occupy any space. This means that any other elements that would normally be positioned after it will be repositioned as if the hidden element were not present.

Here’s an example of how display: none works:

<!DOCTYPE html>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23hidden-element%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
<p>This is some text before the hidden element.</p>
<div id="hidden-element">
<p>This element is hidden using display.</p>
</div>
<p>This is some text after the hidden element.</p>
</body>
</html>

In this example, the #hidden-element is hidden using display: none. Notice that the element does not occupy any space on the page, and the text after it is repositioned as if the element were not present.

When to use visibility: hidden vs. display: none

Now that we’ve seen how visibility: hidden and display: none work, it’s important to consider when to use one over the other.

Use visibility: hidden when you want to hide an element from view but still want it to occupy space on the page. This can be useful when you want to reveal the element later or when you want to maintain the layout of the page.

Use display: none when you want to completely remove an element from the page and don’t want it to occupy any space. This can be useful when you want to completely hide an element and don’t plan to reveal it later.