Avoid frustrating your users with 404 pages when creating a custom 404 page on WordPress is easier than ever. Here are several ways to do it.
When navigating a website, few things are more frustrating than landing on a screen with a 404 error, “Page Not Found.”
This issue could cause a user to click away from your website quickly.
To prevent this, you can ensure that your internal page links are correct and working.
But what happens if someone types in the wrong URL or the slug of one of the page links changes?
Unfortunately, it is inevitable for users to end up stumbling across a non-existent URL.
However, you can take steps to help people get back to the page they were looking for so they don’t bounce off of your website.
Why Do I Need A 404 Page?
One way to take the sting out of users becoming misguided and instead create a positive user experience is to add a custom 404 page to your website.
This allows you to provide a little character and personality, perhaps even humor, on your site and a link for them to get back on track.
Additionally, you could add links to other popular pages, such as blogs, or link them to a form if they wanted to report the bad connection that led them to the 404 page.
You might be tempted to have a 404 error instance link to your homepage instead of a custom error page.
This can confuse the user, as they may not realize they had an incorrect URL because they still end up on the homepage.
Redirecting users to the homepage can also affect your SEO, as Google still sees this redirect as a soft-404 error.
According to Google, redirecting all 404 links to your homepage will be an issue. Website owners should always focus on building user-friendly 404 pages.
Setting Up A Custom 404 Page
Depending on the WordPress theme, you have a few options to take advantage of a custom 404 page.
Using a plugin to create a custom 404 page should work well with any up-to-date theme.
Classic WordPress Themes & Block Editor Themes
Option 1: Use Theme’s 404.php
Screenshot from WordPress Dashboard, September 2022
If you are comfortable working with your website’s PHP files, many themes will already have a template for a 404 page.
Step 1: Go to Appearance > Theme File Editor in the WordPress dashboard.
Step2: Select your theme in the dropdown menu and look for the 404.php file.
Step 3: Ideally, you’ll want to copy the 404.php to your child theme so that you won’t lose your work with theme updates.
Step 4: Personalize the text, and add an image or other elements to make it your own.
Step 5: Hit’ Update File’ to save your changes.
Option 2: Copy A 404.php File
Some themes may not include a 404.php file. If this is the case, you can copy a 404.php file over from a different theme, such as Twenty-Twenty, with a 404.php file.
This may require some tweaking to match your theme, but you can customize the 404.php file and save it inside your theme folder.
Step 1: Find a theme with a 404 page that you would like to use.
Step2: Navigate into the theme folder for that theme and make a copy of the 404.php file.
Step3: Move the copy into the theme folder of the theme or child theme your site uses, making sure it is called 404.php.
Step4: Look at the 404 page at your site’s front-end to ensure everything looks as you expect.
Step5: You can use the same steps as above for making changes to the file in the Theme File Editor and hit Update File to save your changes.
Option 3: Copy The Index.php File
If your theme does not include a 404.php file, this is another alternative to create one.
Step1: You will need to duplicate the index.php file.
Step2: Rename the duplicate 404.php
Step3: Remove the code used to display posts.
Step4: Personalize the text, and add an image or other elements to make it your own.
Step5: Hit Update File to save your changes.
You will need some PHP and HTML knowledge, but this option means that the 404 page will match your current theme, so it is a bit cleaner than using a 404 page from a different theme.
Create A 404 Page Within A Page Builder
If you are using a WordPress page builder such as Elementor, Divi, Beaver Builder, or Oxygen, you have the option within the interface of your builder to add a 404 page.
You should consult with your preferred builder’s documentation for more details on where you can adjust the settings to redirect any wrong URLs to your custom 404 page.
Use A 404 Page WordPress Plugin
An easy way to add a custom 404 page to any WordPress site is to use a WordPress 404 page plugin.
Screenshot from WordPress.org, September 2022
These plugins will allow you to design the custom 404 page and track 404 errors. Some popular 404 page plugins include:
404page – your smart custom 404 error page – This is an extremely simple 404 page plugin you can use for free. Create a new WordPress page you want to be your custom 404 page. To set this as your custom 404 page, go to ‘Appearance’ in your WordPress dashboard, then navigate to ‘404 Error Page’ and select the page you created, becoming the default 404 page.
SeedProd – This WordPress plugin allows you to create beautiful, lightweight, customized 404 page templates that you can use on your website.
Colorlib 404 Customizer – This free WordPress plugin uses the Live Customizer to easily create a custom 404 page that matches the look of your site.
The settings show up in your WordPress dashboard under Appearance > Customize and allow you to add additional CSS to customize your 404 page further.
Custom 404 Pro – This WordPress plugin allows you to create a custom 404 page in the Pages section of the WordPress admin dashboard. Additionally, it will enable you to track instances of URLs entered that prompted the 404 page so you can monitor broken links.
Screenshot from WordPress.org, September 2022
Full Site Editing
If you are using a WordPress Full Site Editing Theme, creating a custom 404 page is easier than ever. Go through the following steps to create a custom 404 page for your WordPress website.
It will automatically redirect if someone tries to go to a non-existent page.
Step 1: In the WordPress dashboard, click on Appearance, then navigate to the ‘Editor.’
Step 2: Under Editor, select Templates.
Step 3: Select the 404 template.
Step4: Use the block editor to create your custom 404 page and hit Save.
Step5: Hit Save again to save the template.
WordPress Custom 404 Pages
A broken link or incorrect URL doesn’t have to be a disaster.
You can make your 404 error page fun and keep the user engaged by providing a link to your homepage or another page of interest on your website.
Creating a custom 404 page on WordPress is easier than ever and should not be overlooked because it enhances the user’s experience.
This page also allows you to track when visitors find your 404 page so that you can correct links or redirect pages when appropriate.
If you want to see some creative 404 pages, go to some of your favorite sites and type in their URL and add a page that you know doesn’t exist to the end.
You’re sure to get some great ideas for your own 404 pages!
If you are interested in original article by Julia Taylor you can find it here
Full-Site Editing is one of the main improvements added to the WordPress platform with version 5.9. It allows users to make sweeping changes to their website design and layout via a graphic interface, thus moving WordPress closer to the experience of a page builder. In addition, it offers new ways to create and customize themes.
These drastic changes have great consequences not only for the WordPress user experience but also for large parts of the platform’s ecosphere. For that reason, in this post, I am planning to take a deep dive into WordPress Full-Site Editing (or FSE for short, there are also discussions about changing the name because it’s a bit of a mouthful).
In the following, I will first talk about what Full-Site Editing is and provide a tutorial on how to use it to make changes to your site. I will also examine the tools it provides for theme development and close with a discussion of how the arrival of this feature will impact developers, theme authors, and existing page-builder plugins.
In a nutshell, Full-Site Editing means that WordPress now offers the ability to create and edit page templates and elements like headers and footers in a block-based graphic user interface.
This is part of phase two of the Gutenberg project and the preliminary culmination of a development that saw its beginning with the introduction of the WordPress block editor in WordPress 5.0. Since its initial release, the block workflow has branched out to other parts of the WordPress user interface. For example, you can now also use it for widget management.
One of the main goals of Full-Site Editing is to provide users with a singular workflow for making changes to their WordPress sites. In the past, you often needed to know several different systems to create a new menu, compose a page or post content, populate the sidebar, or adjust the color scheme. Even more complex changes required you to know how to edit page template files or write CSS. With Full-Site Editing, you can now make changes to everything in pretty much the same way (even if much of it still happens in different menus).
For everyday users, the benefit is reduced dependence on front-end developers. Site owners can now do a lot by themselves that, in the past, would require technical chops or professional help, such as making changes to page templates. Plus, those changes are now visible in the editor right away instead of having to go back and forth between the front end and back end of your site or even a code file.
At the same time, Full-Site Editing makes it easier for theme developers and designers to create markup and allows for quicker templating.
Here are the main building blocks that Full-Site Editing consists of:
Page templates and template parts The central attractions are two new editor interfaces that allow you to customize page layouts similar to the normal content editor. You can move page elements around, change their design (colors, fonts, alignment, and so on), and add or remove them at will. The same is also possible for single template parts such as headers and footers. It’s even possible to edit them separately. Plus, you can export your templates to use and distribute them as themes.
Global styles and theme.json A common feature in WordPress page builder plugins, Full-Site Editing allows you to define global styling for your entire site, such as colors and typography, in a central place. In the past, you would have to change the styling in different locations (e.g., the Customizer and block editor). FSE also introduces the theme.json file, which acts as a nexus for different APIs and contains the majority of styling information in block-based themes.
Template blocks and block patterns Full-Site Editing adds new block types to WordPress and the WordPress editor. These include static blocks like the site logo but also dynamic elements such as blocks for navigation, post titles, and featured images. These change according to settings in other places. There is even a full-fledged query block that’s basically the WordPress PHP loop. It lets you display a list of posts anywhere on the page. Each block also comes with its own design and configuration options.
Sounds exciting? Then let’s dive into how to use this new WordPress feature practically.
How To Use Full-Site Editing To Customize WordPress #
In the following, I will first go over how to take advantage of Full-Site Editing as a user. Later, we will also examine what makes this a useful feature for developers and theme designers.
In order to take advantage of Full-Site Editing, the most important thing is that you have a WordPress site running at least version 5.9. You can also use a lower version, but then you need to have the Gutenberg plugin installed and up to date.
The second thing you require is a block theme. That’s a theme that can take advantage of the new feature. We will go over how these are different from classic themes later. For now, a good option is Twenty Twenty-Two, which also came out with WordPress 5.9. I will be using it for this Full-Site Editing tutorial. Refer to the resources section at the end for other options.
Finally, if you are giving WordPress Full-Site Editing a spin for the first time, I recommend using a staging site or local development environment for it. That way, you can make all the mistakes you want without anyone knowing.
When you are logged into your test site, you can access Full-Site Editing via Appearance > Editor (also notice that the widget and Customizer options are missing).
An alternative way to get there is via the Edit Site link in the WordPress admin taskbar on the front end. Either will land you on the main editor interface.
Let’s walk through all the options available here:
Top left corner: Let’s start here because it’s easy to overlook. A click on the WordPress logo opens up a menu to edit templates and template parts. It also has a link to return to the WordPress dashboard.
Top bar: This should look familiar to anyone who has used the Gutenberg editor before. It contains the option to add blocks and block patterns, toggle between editing and selecting blocks, and undo/redo buttons. You can also open a list view of the current page, select different template parts, and jump directly to them.
Top right corner: Contains the buttons to save changes and preview the design on different screen sizes. The gear icon opens up settings for templates as a whole and individual blocks. Besides, that is the option to customize Global Styles. The three-dot icon contains display options for the editor, the ability to export templates and template parts, and access to the welcome guide.
Center: In the middle is the main editing screen. Here is where you will make changes to page templates and work with blocks. It is also an accurate representation of what your design will look like and contains some controls to add blocks and other elements to the page.
Most of these are togglable, so you can only have those options open that you really need and want.
As mentioned above, you can access this menu by clicking the half-black, half-white circle in the top right corner. It offers two types of styling options: for the entire website and for individual blocks. What exactly is available here depends on your theme.
For Twenty Twenty-Two, you have options for typography, colors, and layout. We will get to those below. For now, let’s turn to the most exciting part of the Global Styles menu — the preset color themes. You can find them when you click on Browse styles.
In this menu, developers have the possibility to offer styling presets for the entire theme. Hover over one of the options to see a preview of its color and font scheme, and then adopt the look for your entire theme with a single click.
I really like this feature as it offers users different versions of the same theme that they can easily use as jump-off points for their own creations. It’s a bit like themes shipping together with a number of their own child themes. You can also go back to the previous state by clicking the three dots at the top and choosing Reset to defaults.
As you can see, it’s possible to customize the font family, size, line height, and appearance, meaning font-weight and slant. Options here depend on the theme as well. For example, under Font family, you can only choose System Font and Source Serif Pro as these are the only options Twenty Twenty-Two ships with.
However, this is also due to the fact that full support for (local) web fonts only became available in WordPress 6.0, and this theme came out before that.
Likewise, the numbers under Size represent defaults set by the theme authors. You also have the option to click on the little icon in the upper right corner to set a custom value.
What’s interesting here is the Palette option, where the theme can provide its own color palette, including gradients. This is besides the default options Gutenberg offers and custom colors that users can create.
Besides that, just like for typography, the theme provides different options for elements for which you can change colors. In Twenty Twenty-Two, that’s Background, Text, and Links.
After choosing any of these, you get to a screen where you can easily pick a color or gradient from available options or create your own. When you do, your pick automatically translates to what you see on the editing screen.
Styling defaults are not only available for the website as a whole, but you can also set them for individual blocks. For that, you find an option in Global Styles at the bottom where it says Blocks.
Click those in turn to find similar options to customize their design on a per-block basis. For example, below, I have set the link color globally to blue but set the color for the Post Title block (which is also a link) to orange. As a consequence, orange overwrites the initial value, and the title comes out in that color.
If you have ever worked with CSS, this principle should be very familiar. Set some site-wide standards at the top of the style sheet and then overwrite them with customizations further down in the cascade. It’s the same thing here.
Making layout changes works the same way as in the main WordPress block editor. Everything you see on the screen is made up of blocks. Some may be combined as groups or block patterns, but they are blocks nevertheless.
As such, you can move and customize them however you want. For example, the main part of the homepage is the Query Loop block, whose function is to serve up the latest blog posts. However, it, too, is made up of different blocks, namely Post Title, Post Featured Image, Post Excerpt, Post Date, Spacer, and Pagination.
If you want to change something about the way it looks, you can very easily do so. For example, you may click on the Post Featured Image block and then use the arrows in the toolbar to move it below or above the post title.
Alternatively, hover over the block and then use the Drag button (which looks like six dots) to move it to another position. If you hit Save after this, it will translate to the design on your site.
In addition to the ability to move them around, every block also comes with its own settings. Like in the Gutenberg content editor, you can access those via the gear icon in the upper right corner. When a block is selected, you will see its customization options there.
What’s available in this place depends on the block you are working with. For example:
Post Featured Image: Has options to add the margin, padding, and configure image dimensions.
Pagination: Control the justification and orientation of its elements, wrapping, colors, and whether to show arrows, chevrons, or nothing as indicators.
Post Title: Besides setting colors, you can decide if the title should be a link, open in a new tab, or have a rel= attribute. You can also control colors and typography (including the ability to use Title Case) and add a margin.
You get the gist. Be aware that there are often more settings hidden that you can access via a plus or three-dot icon within the sections.
In addition, there are settings in the toolbar atop blocks when they are selected. You should not forget those as they can be decisive. For example, in the case of the Post Title block, it’s where you determine what order of heading (h1-h6) it takes, an important factor for SEO.
Of course, you can not just customize the available blocks, but you are also able to add your own. This works the same way as in the content editor and comes with different options:
Hover over an empty space in the template until a plus button appears, and click it. Then search or choose what you want from a list of blocks.
Click existing blocks and use the options button in the top bar to pick Insert before and Insert after.
Use the plus button in the upper left corner to see and search the full list of available blocks, then drag and drop them where you want.
In some places and existing blocks, you will also find icons to add more blocks. Plus, you have the ability to add block patterns, but we will talk about this further below.
Leaves the question, how is any of this helpful?
Well, it means you can easily add both static and dynamic content to the homepage. An example would be a heading and paragraph above the Query Loop block as an introduction to your blog.
Naturally, you can also remove blocks you don’t want just as easily. Simply select one and hit the Del or backspace button on your keyboard, or remove it via the block options.
You also have the ability to open a list view at the top (the icon with three staggered lines) and navigate to blocks from there or choose to delete them right away.
Template parts are entire sections inside templates that you can exchange as a whole and modify separately. In the case of Twenty Twenty-Two, that is the header and footer. You can see this in the template options on the right or when you click the arrow in the top bar.
Template parts are just groups of blocks on the page, so you can edit them as described above. However, what’s special about them is that themes can offer variations that allow you to change the entire part with one click.
For example, when you select the header in the example, it will show a Replace option in the settings bar at the bottom.
Twenty Twenty-Two has several default options to choose from. Click any of them, and Full-Site Editing will automatically replace the entire header with the new option.
In the Template Parts menu, click Add New in the upper right corner to create additional ones. This is useful if you want to make another version of the footer, for example. The cool thing is when you click it, besides asking for a name, WordPress automatically gives you templates for both header and footer, so you don’t have to start from scratch (unless you want to).
Besides that, you may also just click on existing parts in the list to edit them. This works the same way as in the main editor. The only thing that is different for template parts is that you have handles on the left and right that you can use to shrink and expand the size in order to check its behavior on smaller screens, i.e., mobile devices.
Just like a template file, anything you change and save here will translate to all pages and templates that use this part.
Finally, if you have set up a group of blocks on the main screen, you can turn them into a template part as well. Click the options in the main screen or in the list view and pick Make template part.
In the WordPress logo menu, there is also an item called Templates. Unsurprisingly, it contains a list of all page templates available on your site, from the 404-page over archives and single pages to single posts.
Page templates are usually files that control the basic layout of different types of content. If you change the template, all content of that type changes, too. With Full-Site Editing, you can edit existing templates and create your own in the user interface instead of a code editor.
Note, however, that FSE only lets you create standard page templates via Add New. More on that soon.
Something that comes especially handy here (and also for template parts) is block patterns. These are predesigned layouts consisting of several blocks you can add to website pages to instantly create entire sections. Examples include newsletter sign-up forms, pricing tables, and event lists, but also simple things like a styled divider or an image with a quote or caption.
Patterns allow you to put together entire designs quickly. They are easy to use, too! When editing a template, simply click the plus symbol in the upper left and go to the Patterns tab.
Filter the patterns via the drop-down menu at the top, e.g., by featured patterns, footers, pages, or buttons. If you find something you like, simply drag and drop it on the page. You can also search for something specific, like a “header” at the top, which will even show blocks from the WordPress block directory.
For a better overview, it helps to click on Explore to access the block pattern explorer.
This shows the block patterns in a larger window with the ability to search and filter them on the left. A click on a pattern you like automatically adds it to the template editor, where you can position and customize it as usual.
By the way, you can clear all customizations you have made for individual templates by clicking the three-dot icon in the Template menu and choosing so.
There is a second way to edit and create page templates, which happens in the normal Gutenberg content editor. It offers less complexity than the site editor interface (e.g., no access to other templates) but works similarly.
Simply create a new post or page, then, in the document settings sidebar, locate the Template panel below Status & visibility.
Here, it lists your current template and makes other options available in the drop-down menu. You can edit what’s already there via the Edit button or create a new template by selecting New. Each opens the more limited template editing experience.
Edit and save the template in the same way as in the site editor. Anything you create this way will also show up in the list of templates in the Full-Site Editing editor.
To make templating in FSE possible, the developers have added a number of dynamic blocks that can pull content from the database depending on the following:
Site title, tagline, and logo;
Post title, featured image, content, excerpt, author, avatar, author biography, date, tags, categories, next and previous post, read more;
Post comments, single comment, comments query loop, author, date, content, count, comment form, and link;
Archive title and term description;
Query loop, post list, post template, pagination;
Template part.
These are also available in the normal WordPress editor. There are more to come in future versions, and you can get early access to them via the Gutenberg plugin.
When you have made all the changes you want, you have the option to preview them in different screen sizes by clicking Preview in the upper right corner.
If you are satisfied, a click on Save will make the modifications permanent. WordPress will also list which templates and template parts your changes will affect.
That way, if you want to discard them in one place but keep them elsewhere, you can do so. Simply uncheck those components where you don’t want to save your changes. Click Save again, and your choices will translate to the front end of your site.
Full-Site Editing is also a useful tool for developers. You can use the interface to create templates and then export them as files to add to and publish as themes.
To take advantage of this, you need to be aware that FSE-ready block themes have a different architecture than classic WordPress themes. For one, the template and template-part files for Full-Site Editing no longer contain PHP but are HTML files with block markup.
Instead of style.css, styling is mostly taken over by theme.json. Here is where you set up styles for the block editor and individual blocks, styling presets, as well as CSS defaults (both for the front-end and backend editor). In fact, theme.json is so powerful that, by modifying it, you can change the style of an entire website.
This also allows you to switch between different sets of global styles (i.e., theme.json files) in the same theme. It’s a feature that only arrived in WordPress 6.0.
Relying mostly on theme.json greatly reduces CSS in other places. For example, Twenty Twenty-Two’s style.css is only 148 lines long. For comparison, its predecessor Twenty Twenty-One has almost 6,000 lines in its style sheet.
In addition, theme.json uses a whole different kind of markup. Yet, you could write an entire article just on this one file, so you are better served to start with the documentation for details.
The minimum requirements for a block theme are to have an index.php, style.css, and an index.html file in a templates folder. The latter is what marks the theme as a block theme to WordPress.
If you want to add template parts, you will place those in a parts folder. Having a functions.php and theme.json files is optional. Finally, you can also include a styles folder for global style presets. For example, this can include different color schemes for the theme.
Besides the changed structure, you also have different ways of creating template files when using a block theme. While you can still do it manually, using the new WordPress interface is also possible.
USING FSE OR THE TEMPLATE EDITOR TO CREATE THEME FILES #
If you want to use the page editors to create templates, the first step is to simply set up your templates as described in the first part of this article. One important option here is to know that you can use the Advanced settings for template-part blocks to change their type of HTML element.
When satisfied, you can download all your theme files at once. The option for that is available in the More tools & options menu, which you access by clicking the three dots in the upper right corner of the Full-Site Editing screen.
Here, locate the Export option. It will automatically download all template and template part files as a zip. Simply unpack them, and you can use them for your theme.
Consequences Of Full-Site Editing For The WordPress Ecosphere #
Besides providing a tutorial on how to use Full-Site Editing, I also want to talk about what its arrival means for the WordPress environment and those working there.
As is to be expected, an important question is whether this kind of feature will eliminate the need for professional developers and designers. Are they still needed when users can seemingly do everything themselves?
The short answer is “yes.”
Neither the emergence of WordPress itself nor page builders or page builder plugins, or any other technology that makes it easier for laypeople to build their own websites have eradicated the need for professional help. And it won’t happen this time, either.
While these days, users don’t need help for every little thing (like changing colors or fonts), there are still lots of tasks that non-technical site owners simply can not do with the available tools and where they need someone to do it for them. Plus, if you want a unique design and not rely on a template that hundreds or thousands of other people might also be using, you still need a designer and/or developer.
Plus, with great power also comes a great opportunity to screw things up (to loosely quote Spiderman). Just because everyone has the tools at their disposal to make a well-designed website, that doesn’t mean everyone can. Design is more than mere technical ability.
What’s more, not everyone actually wants to do the work. They’d rather hire someone with the skills than acquire them from scratch. Finally, there is so much more to a successful website than “just” design, such as SEO, performance, security, and maintenance.
So, even if there are fewer obstacles to building websites, there is no need to think that designers and developers are a dying breed. In contrast, the switch to new tools offers plenty of opportunities to build services and products around them.
WHAT DOES FSE MEAN FOR THE THEME MARKET AND THEME DESIGNERS? #
So what about theme creators? Does everyone have to switch to block themes now?
Here, it’s first important to keep in mind that many themes have not yet switched to the Gutenberg block editor and that there are still many users on the Classic Editor. The latter will also continue to work for a while as the plugin will still be supported until at least the end of 2022.
Also, all of the features described above are optional, not mandatory. Therefore, the switch does not have to be immediate. You can even build hybrid themes that are not complete block themes but are able to use block templates. This option exists by default unless you specifically switch it off.
Nevertheless, in the long run, it’s probably a good idea to move your existing themes over to FSE capabilities. It’s something that WordPress users will likely grow to expect as it gives them more flexibility and power to customize themes on their own.
At the same time, as described above, you can also use Full-Site Editing to create themes with less coding, which can speed up development time. Plus, it offers new economic opportunities. Besides themes, theme authors can now offer extensions like blocks and block patterns, opening up whole new business models and opportunities.
The existing page builder plugins are probably one of the biggest question marks. Will the likes of Divi, Elementor, and Co survive when WordPress can do a lot of what they were created to provide?
First of all, it’s unlikely that everyone will immediately switch away from the tools they are used to working with, so page builder plugins will likely stay around for a while. Also, many of them are currently more powerful than what Full-Site Editing is capable of in its present form. Another reason to stay with what you have.
Overall, these types of plugins have become very established over the last years, to the point that they sometimes ship packaged with themes. For that reason, it’s improbable that they will suddenly lose all their market share. Despite that, Full-Site Editing will likely eat into it over time, especially with new users who get to know it as a normal part of WordPress.
Just like everyone else, page builder plugins will have to evolve so that they offer things that FSE doesn’t to stay competitive. One way would be to offer kind of hybrid plugins that extend WordPress’ native page editor. Similar things already exist for Gutenberg and for the Classic Editor.
If you are interested in original article by Nick Schäferhoff you can find it here
Not sure which option is the better page navigation practice? Here’s Tony Wright’s take on this week’s Ask An SEO.
Today’s Ask An SEO question comes from Daniela in the U.K., who asks:
What is best for SEO?
I want to give more information about a certain aspect of my business. When a visitor clicks on “read more,” is it better to direct the visitor to a new subpage? Or is a popup page (inside the current page) also good?
As SEO pros, we know that navigation can make or break a website.
Unfortunately, it seems many designers like to create navigation that breaks a site, from a number of different perspectives.
Let’s discuss some navigation best practices, and then we’ll get to this question.
Navigation Is More Than Links
Your navigation is more than the links the visitor clicks on to travel from one page to the next.
Understanding how visitors consume your content is paramount to creating successful site navigation.
When you set up a website, the most important thing to remember is how visitors will guide themselves through the information you have provided.
Yes, visitors guide themselves.
Modern websites are “choose your own adventure” games. There is no way to dictate a specific linear path through a website without essentially banging your visitors on the head with a straight line through your buying funnel.
And, trust me – that doesn’t always work out well for the website owner.
The key to creating a successful website navigation structure is anticipating the path a potential visitor would take to complete the desired action.
But, if the visitor veers off your desired path, it’s the webmaster’s job to provide them with alternative navigation methods through the site – and a way to get back on track if they wander from the funnel.
Pagination As Navigation
How the site is built is an important part of your site navigation.
Pagination is, in its simplest terms, the way a page is laid out. You might have slide shows, image galleries, product lists, article tags, and a host of other elements on a page.
Understanding that different people consume the same information in different ways is paramount to creating functional pagination.
In academic research papers, you will find every chart and every image explained in detail in the text.
The same principle works in pagination.
Describe your images. Describe your charts.
Google loves words.
And despite what some designers think, many people also love words.
I’m one of them. If my wife and I are looking at a vacation rental property, you will find me reading the property description while she goes straight for the pictures.
Some people are visual, and some people are verbal.
Search engines are more verbal than visual.
Of course, creating intimidating walls of text is not appealing to most visitors.
That’s where your designer comes in.
Designers will typically fight against large amounts of text on a page, but if they can break that text up in a visually pleasing way, everyone wins.
Subpage Or Pop-ups?
So back to the question at hand: Daniela asked if she should use subpages or pop-up pages in her navigation.
The answer, as always, is: It depends.
In most cases, a simple link that launches the new content on a new page in the same browser tab is appropriate. This is standard navigation.
However, if the information is something you want the consumer to see after they have left the site, using a pop-under window can be effective.
In many cases, a pop-up is against the rules if you run a paid search on the page.
But, pop-ups in the same browser window can be extremely effective if you have some information that the consumer should see – like, say, an email sign-up.
Without knowing your site and seeing your analytics, it’s impossible to know exactly what to do – but in most cases, standard navigation is standard for a reason.
It works.
If you are interested in original article by Tony Wright you can find it here
It’s easy to get lost while trying to get around the Site Editor unless you are working day and night inside the tool. The navigation is jumpy and confusing, especially when going from template browsing to template editing to modifying individual blocks. A large PR is in progress for redesigning this UI with the introduction of a “browse mode” that would make the experience feel more like a design tool.
Gutenberg lead engineer Riad Benguella opened the PR as a continuation of the ongoing work on this project, which has its roots in ideas and explorations that have been fermenting since 2019. He shared a video that roughly demonstrates the target for the proposed UI changes.
It essentially introduces a “navigable frame” where users can select from a menu of features on the left. More detailed efforts on improving the animations and placement of the menu items is happening simultaneously within the ticket.
The original idea was to include the “Navigation menu” item inside the sidebar, but Benguella removed it in favor of keeping the PR contained to simply adding the “edit/view” mode.
Although such a large PR has the potential to introduce a slew of regressions, Benguella said there is no other way around a big PR due to the the necessity of the structural changes to how the site editor is organized. He is attempting to keep it narrowly focused and not try to tackle features like browsing capabilities and adding UI (template lists, global styles, etc) to the sidebar.
The idea is not without some pushback. Alex Stine, Cloud Platform Engineer at Waystar, warned against introducing another Mode into Gutenberg, saying it “feels kind of reckless considering we haven’t refined existing modes for all users.” He noted that Gutenberg already has select/edit mode contexts.
“This was a feature basically added for screen readers only,” Stine said. “I am hoping this will one day be removed, but we’re not quite there yet.
“I think the community is trying to solve the wrong problem. If Gutenberg itself did not have such a complex UI, there would not be the need for a hundred different modes in a hundred different contexts, blocks, or even editors. We have gone so crazy making everything so quickly, no one thought about how to unify the interface across all editors. This feels like it could be another patch to a bigger problem.”
Stine cautioned against growing the UI for something that ultimately doesn’t make things any simpler.
“In a sense this PR doesn’t introduce any new mode, it just redesigns the current navigation panel a bit,” Benguella said in response. “I think it’s an opportunity to improve the a11y of the navigation in the site editor.
“The confusion in this PR is that it’s not about another mode in the editor itself, it’s higher level, it’s how we choose which template and template part to edit before actually entering the editor.”
Although the project’s contributors have been referring to it as “browse mode,” it is essentially a redesign for the existing UI to make it more intuitive for users to navigate. Gutenberg may not need any more new “modes” but the site editor is in dire need design improvements that will unify the experience and make it less chaotic for getting around.
During the most recent core Editor meeting, Gutenberg contributors called for feedback on the big PR, since it has so many moving parts and needs more scrutiny. It’s not ready to land in the next release of Gutenberg yet, but the concept is rapidly taking shape and may expand to include more features in the sidebar once the basic structure is in place.
If you are interested in original article by Sarah Gooding you can find it here
Let’s dig into the primary differences — as well as the pros and cons — of static and dynamic websites.
When building a new website, choosing to build a static or dynamic website is one of the first decisions that web designers make.
To make the right decision, you need to understand the difference between the two.
In web design, static and dynamic websites refer to the way they display content. A static website offers the same content to all visitors, while a dynamic website can tailor content per individual visitor.
Let’s explore the concepts of static and dynamic websites, learn the pros and cons of each, and discuss what concept is better to follow when you build your website.
What is a static website?
The word “static” is typically used to describe something that is lacking in movement, action, or change. A static website is a website made up of a collection of static pages, or pages that don’t change, created by HTML, CSS, and Javascript. In its simplest form, each web page is represented as an HTML file visitors access while browsing a website. Static websites appear the same for every visitor who accesses them, and the only way to change this is to modify the source files.
Though the term “static website” might give you a false impression that this kind of website doesn’t have any interactive elements — static websites can have interactive elements like web forms, although those elements cannot be tailored per individual user.
Static websites generally work for smaller websites with a limited number of pages and don’t require frequent content updates. Examples of static sites include a personal portfolio, a company brochure site, and a product promo page.
Pros and cons of a static website
Most avengers of static websites come from their relative simplicity:
Ease of creation. Static websites don’t require creating any logic for content loading from a database. Today, anyone can create a static website using an online website builder.
Good performance. Static websites require minimal back-end processing. Because all content is predetermined, it’s possible to optimize it to offer better performance. For example, web designers can use caching so the content will be delivered without delays.
Better level of security. Since static websites require much fewer tech building blocks to perform, they are generally less affected by security issues.
But static websites have a few downsides, too:
Time-consuming content management. On static websites, content and design are not separated; if you want to modify content, you need to dive into source code to do so. Introducing site-wide updates on a static website can be tedious because all changes should be introduced manually on all individual pages.
Poor scalability. If you need to add 100 new pages to your website, you will need to create all 100 pages manually, and every page will be built as a separate entity. The faster your website grows, the harder it will be to manage it.
Unable to offer tailored experience. Static websites allow limited or no personalization and customization for visitors. It’s possible to provide only limited real-time tweaks based on user behavior. As a result, static websites might not work for eCommerce sites, for example, because it’s impossible to tailor the shopping experience to customers.
What is a dynamic website?
The word “dynamic” is often used to describe something that constantly changes or progresses. Dynamic websites generate content on the fly, loading it from a database. The dynamic content on pages can be tailored to the visitor’s needs (based on visitor behavior). This means a dynamic site can present different information to different visitors. Dynamic websites typically have a content management system (CMS) or a web framework like Ruby at its core, and they work best for websites that require frequent content updates.
Examples of dynamic websites include content-heavy portals (i.e., news resources like CNN), websites with user-generated content (i.e., social media platforms like Twitter), and various online services with user-driven content (i.e., online entertainment platforms like Netflix that offer recommendations based on viewing habits).
Pros and cons of a dynamic website
The list of advantages of dynamic websites include:
Ease of content management. Dynamic websites make it much easier to manage content on a website. Changes can be done in one place and applied across all pages. For example, a site owner can update company contact information and be sure that the relevant information is displayed across the entire website.
Easy to update the visual design. Since content and design on dynamic websites are separate, it’s easier to introduce changes to a page’s layout. If a website uses a CMS, it’s possible to use a different visual theme. It allows web creators to stay current with the latest visual design trends.
Better visitor experience. It’s possible to use mechanisms like user location and cookies to offer tailored experiences to visitors. For example, when you design a property booking website, you can use the visitor’s location to show them offerings in their area.
Because dynamic websites are more complex than static websites, they also have disadvantages:
More complex web design process. When you create a dynamic website, you must invest time in creating business logic. You will need to define rules on how content will be organized in a database (content structure) and accessed by visitors (define rules on how to display the content).
Higher cost of creation. Dynamic websites have a higher cost of creation because they are typically more hardware demanding (i.e., dynamic websites require database insurance) and require technical expertise (i.e., you need to know how to use a CMS or have coding skills).
Performance and security problems. Dynamic websites can be affected by various performance and security issues. Since dynamic websites have more technical components, each component can affect the performance and be vulnerable to a security breach.
Should I design a static or dynamic website?
There is no single correct answer to this question. The nature of your content and the experience you want to offer to your audience should define the type of website you want to build. If you’re starting to develop a new website, it’s safer to begin by creating a static one because it will help you launch faster and better understand how to effectively organize your information. Once you see how visitors interact with your website, you will know what content they want to see.
It’s essential to mention that these days, most websites belong to the category of hybrid websites. Hybrid websites have a set of static web pages (content that doesn’t change very often), as well as a set of dynamic web pages. For example, you can blend some static and dynamic functionality on your company’s website with a set of static pages (i.e., “About us,” “Our mission,” etc.), as well as dynamic ones (pages where content changes frequently, such as a blog or a private user space where users can track the status of their requests).
Getting started on your site
Whether you choose to build a dynamic or static site, it’s important to make sure that on both the frontend and backend, it is well designed and works well for your specific business needs. To get started, be sure to check out our ultimate web design course.
If you are interested in original article by Nick Babich you can find it here
More isn’t always better when it comes to web design. A well-done one-page website can communicate the products or services of small businesses and individual professionals. Even if the site structure seems limited, its simple layout could be effective at enticing audiences to focus on a specific aspect of a business and driving conversions
Looking to create your own one-page website design? In this article, we’ll compile some examples to give you some inspiration.
1. Use Impactful Headings
How will you pitch your product in just a few words? Quack—a video recording tool—uses clear and concise headings. The heading “more than a video recorder” and the subheadings “tackle your bugs with full context” and “record bugs and capture network and console logs” summarize its features on the home page. If you have hesitations about getting the product, the call to action (CTA) “Add to Chrome – It’s free” will encourage readers to try it out for themselves.
Game designer Martin Gauer has a one-page portfolio with interactive elements. Upon clicking the page, you’ll find a Game Boy made out of 100% HTML and CSS that highlights his skills as a developer and creative. There is also more about his interests, skills and profession. Follow this example to pique people’s interest and unconsciously encourage them to continue interacting with your website.
The Twenty Fourth Pizza & Meatballs website proves high-quality food photos are all you need to make your restaurant stand out from the crowd. To present products in the best light, you’ll find combined high-quality photos, menus and product details. Guaranteed to tempt customers with its mouth-watering products, this restaurant will surely receive orders from hungry visitors.
Having a consistent color scheme will instantly make your brand recognizable. No one understands this better than Apple Plug—a parody site of Apple products.
It jokingly offers a slim plug that fits in your headphone jack but won’t be removed. Since the page has an Apple logo and product photos akin to real-life Apple products, it fools individuals into thinking it was launched by the tech giant.
Experience design agency Neverland shows off its expertise via a centralized interactive image on its website. In fact, the first thing you’ll see is a 360-degree view of a conceptual work of art with horizontal scrolling. For those looking to learn more about Neverland, there’s more information about its services and notable clients too. All of these elements combined make for a polished and professional page that can make clients stop and stare.
Relays is a branding studio that encapsulates what branding means. The page has a consistent blue and white color scheme highlighting its dedication to crafting consistent visual identities for a variety of clients. As another cool feature, you’ll have to click the CTA button “Next: Who” to reach the next section of the page instead of scrolling down.
The goal of Alinea is to build a social investing app for crypto, playlists and stocks. Its website is simple: Just get the app, and you’ll see what your friends are investing in, share playlists, invest in cryptocurrency and learn bite-sized investment insights.
Combining high-quality photos, interactive graphics, consistent design and informative copy, this homepage does a great job of getting interested visitors to try the product themselves.
The Lucky Bones offers stunning 3D animated lucky charms through the Ethereum blockchain. It has a Lucky Wheel that users can spin to reap stickers, wallpapers and emojis.
This site is another example of how scrolling can enrich your branding and user experience. Much like the popular “Spin the Wheel,” it has a horizontal scrolling feature to replicate a wheel’s movement.
A glove icon functions as a cursor or mouse pointer that changes colors each time you click. If you don’t want to scroll horizontally, hover the cursor to the lower right-hand corner. Here, you’ll find clickable buttons to reach a section of the web page with the click of a button.
If you want to promote your apartment listings, a one-page website can do the trick. This Brooklyn-based property business has informational sections about the type of units, amenities and floor plans for interested tenants. Visitors can also find information about nearby Citi Bike stations, public transportation, parks, coffee shops and supermarkets and click the “Get Direction” button to find its location via Google Maps. Overall, this information makes it easy for tenants to decide whether they’re interested in checking out the property.
From a visual perspective, The Art of Texture does an impressive job of introducing the artworks of its owner—Tom Lawrence. The artist believes that rubbish can be transformed into something beautiful which is conveyed by his images, videos and slideshows. Whenever the mouse pointer hovers over the creative pieces, you’ll find the title, details or click the image to view its larger version. Overall, the site’s clever use of visual elements are enough to pique the interest of art connoisseurs.
Pixelmator Pro has impressive photographs and screenshots featuring its extensive collection of powerful professional image editing tools. Each individual section manages to highlight the product’s capabilities, be it its handcrafted dual-texture brushes, intuitive workspace, remove background tool and machine learning capabilities. If you’re looking to showcase the capabilities of your software, try replicating this example.
Graphic design firm Panache has a website with fantastic scrolling experiences combined with animation effects and colorful transitions. The navigational links on the side make it easy for users to move from one section to the other. Instead of presenting a series of projects, the visual experience highlights the team’s skills despite not opening a new tab. It’s clear the designers are experts and have a lot to offer, which entices users to convert.
Typically, educational websites display a lot of textual data to prove their point. The one-pager of World Pollution diverges from this example with its interactive pages about the world pollution phenomenon. Clicking a number on the globe triggers pop-ups about environmental issues and potential solutions. It’s an effective way at keeping readers engaged about world issues across the globe.
Jivati offers refreshing vodka seltzers with natural flavors. Its optimism and cheerful vibe are depicted in its vibrant color gradients, floating cans and fly-in typography.
Also, notable is the site’s compelling copy. Upon landing on the website, viewers can find information about its ingredients and variety packs that accurately represent the brand’s fun and bold personality. There’s also an option to check out where to buy the product and view retailer locations via Google Maps.
Washington, D.C. restaurant Falafel offers a close-up view of its dishes and, above all, an overview of its menu, which leaves a strong impression. As if that weren’t enough, it shares the ingredients of each item on the menu to convey that each item is all-natural, fresh and sourced locally. Having doubts about buying from this restaurant? Just head to the reviews section at the bottom to find five-star Yelp reviews from loyal patrons.
Bottom Line
One-page websites are a testament to the fact that sometimes simple is better. The ideal one-page websites have seamless navigation, high-quality images and a compelling call to action. Here’s hoping this list of stunning websites inspires your own sites too.
If you are interested in original article by Monique Danao you can find it here
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptRead More
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Screenshot from WordPress Dashboard, September 2022
Screenshot from WordPress.org, September 2022
Screenshot from WordPress.org, September 2022
