I guess that implies all this stuff is actually in Chromium, but not added to Chrome in some build step. That means if you wanna build your own Chromium fork and de-couple yourself from Google, you’ve got some work to do.
Several big players have done that work. Clearly, Microsoft has done it with Edge. Vivaldi and Brave are other big Chromium-based browsers with presumably similar de-Googleification.
Dan Abramov was asking around about this the other day:
is there a regularly updated mod of chrome that’s basically chromium (so chrome minus google-specific stuff except search) but also without experimental features and always based on a stable revision
Sounds like Dan (and by extension: me) learned through this thread that Chromium isn’t actually just the core browser stuff where Chrome then adds stuff on top of it. It’s that if you want to base another browser on Chromium, you have to yank stuff out of Chromium.
Seems a smidge weird to me, but hey, it’s open-source, so if you don’t like it, fork it. And obviously many have. Perhaps most notable is ungoogled-chromium. It lists this as the philosophy:
Remove all remaining background requests to any web services while building and running the browser
Remove all code specific to Google web services
Remove all uses of pre-made binaries from the source code, and replace them with user-provided alternatives when possible.
Disable features that inhibit control and transparency, and add or modify features that promote them (these changes will almost always require manual activation or enabling).
I have zero doubt that the browser world is converging on Chromium. You can imagine Apple hanging onto their own thing with WebKit forever, but things don’t seem to be going terribly well at Mozilla, and they haven’t for a while. Mozilla’s money seems to come from Google anyway so it’s tough to imagine Mozilla’s browser engines hanging on for that much longer. Y’all can call me an ignorant asshole in January 2032 if Mozilla still has a competitive browser engine.
The health of the browser ecosystem would benefit from a cleaner, company-agnostic version of Chromium (and maybe call it something else). If most browsers are based on it, so be it, but let the innovation happen from a level playing field.
If you’re disciplined and make use of the inheritance that the CSS cascade provides, you’ll end up writing less CSS. But because our styles often comes from all kinds of sources — and can be a pain to structure and maintain—the cascade can be a source of frustration, and the reason we end up with more CSS than necessary.
Some years ago, Harry Roberts came up with ITCSS and it’s a clever way of structuring CSS.
Mixed with BEM, ITCSS has become a popular way that people write and organize CSS.
However, even with ITCSS and BEM, there are still times where we still struggle with the cascade. For example, I’m sure you’ve had to @import external CSS components at a specific location to prevent breaking things, or reach for the dreaded !important at some point in time.
Recently, some new tools were added to our CSS toolbox, and they allow us to finally control the cascade. Let’s look at them.
O cascade, :where art thou?
Using the :where pseudo-selector allows us to remove specificity to “just after the user-agent default styles,” no matter where or when the CSS is loaded into the document. That means the specificity of the whole thing is literally zero — totally wiped out. This is handy for generic components, which we’ll look into in a moment.
First, imagine some generic
styles, using :where:
:where(table) {
background-color: tan;
}
Now, if you add some other table styles before the :where selector, like this:
…the table background becomes hotpink, even though the table selector is specified before the :where selector in the cascade. That’s the beauty of :where, and why it’s already being used for CSS resets.
:where has a sibling, which has almost the exact opposite effect: the :is selector.
The specificity of the :is() pseudo-class is replaced by the specificity of its most specific argument. Thus, a selector written with :is() does not necessarily have equivalent specificity to the equivalent selector written without :is(). Selectors Level 4 specification
background color will be tan because the specificity of :is is less specific than table.
CodePen Embed Fallback
However, if we were to change it to this:
:is(table, .c-tbl) {
--tbl-bgc: orange;
}
…the background color will be orange, since :is has the weight of it’s heaviest selector, which is .c-tbl.
CodePen Embed Fallback
Example: A configurable table component
Now, let’s see how we can use :where in our components. We’ll be building a table component, starting with the HTML:
CodePen Embed Fallback
Let’s wrap .c-tbl in a :where-selector and, just for fun, add rounded corners to the table. That means we need border-collapse: separate, as we can’t use border-radius on table cells when the table is using border-collapse: collapse:
And, because of our rounded corners and the missing border-collapse: collapse, we need to add some extra styles, specifically for the table borders and a hover state on the cells:
Now we can create variations of our table component by injecting other styles before or after our generic styles (courtesy of the specificity-stripping powers of :where), either by overwriting the .c-tbl element or by adding a BEM-style modifier-class (e.g. c-tbl--purple):
Cool! But notice how we keep repeating colors? And what if we want to change the border-radius or the border-width? That would end up with a lot of repeated CSS.
Let’s move all of these to CSS custom properties and, while we’re at it, we can move all configurable properties to the top of the component’s “scope“ — which is the table element itself — so we can easily play around with them later.
CSS Custom Properties
I’m going to switch things up in the HTML and use a data-component attribute on the table element that can be targeted for styling.
<table data-component="table" id="table">
That data-component will hold the generic styles that we can use on any instance of the component, i.e. the styles the table needs no matter what color variation we apply. The styles for a specific table component instance will be contained in a regular class, using custom properties from the generic component.
[data-component="table"] {
/* Styles needed for all table variations */
}
.c-tbl--purple {
/* Styles for the purple variation */
}
If we place all the generic styles in a data-attribute, we can use whatever naming convention we want. This way, we don’t have to worry if your boss insists on naming the table’s classes something like .BIGCORP__TABLE, .table-component or something else.
In the generic component, each CSS property points to a custom property. Properties, that have to work on child-elements, like border-color, are specified at the root of the generic component:
:where([data-component="table"]) {
/* These will will be used multiple times, and in other selectors */
--tbl-hue: 200;
--tbl-sat: 50%;
--tbl-bdc: hsl(var(--tbl-hue), var(--tbl-sat), 80%);
}
/* Here, it's used on a child-node: */
:where([data-component="table"] td) {
border-color: var(--tbl-bdc);
}
For other properties, decide whether it should have a static value, or be configurable with its own custom property. If you’re using custom properties, remember to define a default value that the table can fall back to in the event that a variation class is missing.
:where([data-component="table"]) {
/* These are optional, with fallbacks */
background-color: var(--tbl-bgc, transparent);
border-collapse: var(--tbl-bdcl, separate);
}
If you’re wondering how I’m naming the custom properties, I’m using a component-prefix (e.g. --tbl) followed by an Emmett-abbreviation (e.g. -bgc). In this case, --tbl is the component-prefix, -bgc is the background color, and -bdcl is the border collapse. So, for example, --tbl-bgc is the table component’s background color. I only use this naming convention when working with component properties, as opposed to global properties which I tend to keep more general.
CodePen Embed Fallback
Now, if we open up DevTools, we can play around with the custom properties. For example, We can change --tbl-hue to a different hue value in the HSL color, set --tbl-bdrs: 0 to remove border-radius, and so on.
When working with your own components, this is the point in time you’ll discover which parameters (i.e. the custom property values) the component needs to make things look just right.
We can also use custom properties to control column alignment and width:
:where[data-component="table"] tr > *:nth-of-type(1)) {
text-align: var(--ca1, initial);
width: var(--cw1, initial);
/* repeat for column 2 and 3, or use a SCSS-loop ... */
}
In DevTools, select the table and add these to the element.styles selector:
element.style {
--ca2: center; /* Align second column center */
--ca3: right; /* Align third column right */
}
Now, let’s create our specific component styles, using a regular class, .c-tbl (which stands for “component-table” in BEM parlance). Let’s toss that class in the table markup.
Now, let’s change the --tbl-hue value in the CSS just to see how this works before we start messing around with all of the property values:
.c-tbl {
--tbl-hue: 330;
}
Notice, that we only need to update properties rather than writing entirely new CSS! Changing one little property updates the table’s color — no new classes or overriding properties lower in the cascade.
Notice how the border colors change as well. That’s because all the colors in the table inherit from the --tbl-hue variable
We can write a more complex selector, but still update a single property, to get something like zebra-striping:
And remember: It doesn’t matter where you load the class. Because our generic styles are using :where, the specificity is wiped out, and any custom styles for a specific variation will be applied no matter where they are used. That’s the beauty of using :where to take control of the cascade!
And best of all, we can create all kinds of table components from the generic styles with a few lines of CSS.
Purple table with zebra-striped columnsLight table with a “noinlineborder” parameter… which we’ll cover next
Adding parameters with another data-attribute
So far, so good! The generic table component is very simple. But what if it requires something more akin to real parameters? Perhaps for things like:
zebra-striped rows and columns
a sticky header and sticky column
hover-state options, such as hover row, hover cell, hover column
We could simply add BEM-style modifier classes, but we can actually accomplish it more efficiently by adding another data-attribute to the mix. Perhaps a data-param that holds the parameters like this:
I know my data-attribute way of styling and configuring generic components is very opinionated. That’s just how I roll, so please feel free to stick with whatever method you’re most comfortable working with, whether it’s a BEM modifier class or something else.
The bottom line is this: embrace :where and :is and the cascade-controlling powers they provide. And, if possible, construct the CSS in such a way that you wind up writing as little new CSS as possible when creating new component variations!
Cascade Layers
The last cascade-busting tool I want to look at is “Cascade Layers.” At the time of this writing, it’s an experimental feature defined in the CSS Cascading and Inheritance Level 5 specification that you can access in Safari or Chrome by enabling the #enable-cascade-layers flag.
The true power of Cascade Layers comes from its unique position in the Cascade: before Selector Specificity and Order Of Appearance. Because of that we don’t need to worry about the Selector Specificity of the CSS that is used in other Layers, nor about the order in which we load CSS into these Layers — something that will come in very handy for larger teams or when loading in third-party CSS.
Perhaps even nicer is his illustration showing where Cascade Layers fall in the cascade:
Credit: Bramus Van Damme
At the beginning of this article, I mentioned ITCSS — a way of taming the cascade by specifying the load-order of generic styles, components etc. Cascade Layers allow us to inject a stylesheet at a given location. So a simplified version of this structure in Cascade Layers looks like this:
@layer generic, components;
With this single line, we’ve decided the order of our layers. First come the generic styles, followed by the component-specific ones.
Let’s pretend that we’re loading our generic styles somewhere much later than our component styles:
@layer components {
body {
background-color: lightseagreen;
}
}
/* MUCH, much later... */
@layer generic {
body {
background-color: tomato;
}
}
The background-color will be lightseagreen because our component styles layer is set after the generic styles layer. So, the styles in the components layer “win” even if they are written before the generic layer styles.
Again, just another tool for controlling how the CSS cascade applies styles, allowing us more flexibility to organize things logically rather than wrestling with specificity.
Now you’re in control!
The whole point here is that the CSS cascade is becoming a lot easier to wrangle, thanks to new features. We saw how the :where and :is pseudo-selectors allows us to control specificity, either by stripping out the specificity of an entire ruleset or taking on the specificity of the most specific argument, respectively. Then we used CSS Custom Properties to override styles without writing a new class to override another. From there, we took a slight detour down data-attribute lane to help us add more flexibility to create component variations merely by adding arguments to the HTML. And, finally, we poked at Cascade Layers which should prove handy for specifying the loading order or styles using @layer.
If you leave with only one takeaway from this article, I hope it’s that the CSS cascade is no longer the enemy it’s often made to be. We are gaining the tools to stop fighting it and start leaning into even more.
Happy New Year, fabulous new website design trends!
This month’s design trends are a collection of the somewhat unexpected – from NFT website design to large text to illustrations; you won’t see a single photo or video here. Here’s what’s trending in design this month.
NFT Websites
This website design trend has more to do with the greater trends in digital marketplaces and commerce but has value in the design space as well. NFT websites are popping up everywhere.
Marketplaces for non-fungible tokens use modern design effects to draw users in and help them make purchases and view available images. If you haven’t delved into the world of NFTs, they are data units – often in the form of gifs – stored on a blockchain digital ledger. You can buy, sell, and trade these digital nuggets on various marketplaces.
The designs of NFTs could be explained as a trend of their own. Here, we’re focusing on the look and feel of the websites surrounding them. While some designs are relatively primitive, the best marketplaces have a full e-commerce feel with easy-to-use interfaces and a modern design.
Each of these three NFT marketplaces does it a little differently.
Styllar puts a focus on NFT avatars with a minimal aesthetic that gives plenty of room to individual NFTs. Sit on the website too long, though, and hundreds of options begin to cover the screen. Each visual element has a small text element to match that explains each image. It feels like a modern e-commerce experience that instills trust with users because of clean visual patterns. The site itself is just a gateway to a more traditional marketplace, but the calls to action are large, clear, and easy to follow.
OpenSea treats the NFT marketplace more like an art gallery with card-style buttons to look at different elements and images. Everything about the website design is tailored for the mobile user and quick browsing with large areas to click in the card format and easy-to-read headers that help you find your way through the NFT space, whether you want to buy, create, or sell. The site also does one more thing that’s not as common with e-commerce – it explains how to get started in this new digital territory with plenty of resources.
Rarible has an almost social media feel with lots of small blocks showing different NFTs. Digestible content in a grid-based design helps you navigate from images to rankings to what’s trending in NFTs. This site design is set up for high interaction and engagement, also featuring card-style elements and the ability to favorite items before bidding.
The key commonality with NFT website designs is that they are made for mobile users. These sites look good on desktops, but they are highly focused on a mobile, instant gratification user.
Text-Based Hero Headers
A trend in website design from 2021 is bleeding into 2022 with a lot of popularity: Hero headers that are mostly text. These designs have background texture and color, but for the most part, they don’t have a lot of other visuals.
These designs often rely on powerful language or messaging to help get user engagement. A secondary theme is the use of bright colors to help add focus and attention to the typography.
Font choices seem to be fairly neutral, with a lot of thicker sans serifs for the main headline and something a little lighter for secondary text options. WeTransfer uses a smaller text block with multiple lines to create weight. The off-center placement draws the eye and is interesting even with the neutral background. Stacking elements create a nice focal area that encourages reading.
Halborn Blockchain Security goes with a less traditional font option and flips the color to the text to enhance the visual display. This design also uses an off-center, asymmetrical approach to create focus on the text element. The dark counterweight on the screen is an excellent guide to draw you back to the main hero headline.
FWD goes with giant oversized text elements to create a strong visual focus with this design. Other than the faint animation of the arrows next to “Here’s what they said,” everything is still and static. The color and blocky depth of the background help draw the eye through the text and to clickable elements so that you know what to do next.
Intricate Illustrations
Another trending design element is the use of intricate illustrations on homepages. These highly detailed images can tell a visual story, help add meaning to messaging, or serve as a remarkable visual element when you don’t have a photo or video.
The great thing about this trend is that the only limitation is your imagination.
Once you find someone to create the illustration (if you can’t do it yourself), the world is open to interpretation.
We are seeing three major themes within this trend, as showcased in the examples.
Multi-layer illustrations with hints of animation, such as the one from Highvibe Network. This illustration used lots of colors, layers, unexpected elements within outlines, and a little animation to pull it all together. The effect is rather stunning and provides a lot of interest for the user.
Realistic, painting-style illustrations, such as the one from Healthline, bring the content to life without real people or images. This technique is especially nice for industries where you may want to anonymize people in images. (Perfect for a healthcare website design because you don’t know if the illustrations are of real people or not.)
Detailed geo shapes and lines, such as the design from Radio Meuh Circus Festival. With great color and lines that draw the eye, this design can keep you looking and finding new depth for a long time. Color also helps draw you into the striking imagery.
Conclusion
What’s nice about all these design trends is that they have flexible elements that you can use and replicate across industries and projects. The common factor is that they lack traditional dominant imagery, which works exceptionally well.
These trends are likely a result of the worldwide pandemic as well. With less social contact, creating without conducting photo or video shoots is an ideal situation. Good luck trying some of these trending design elements on your own.
Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Typography is one of those things! Here’s a list of typography links to other articles that I’ve been saving up and think are worth sharing.
Output Sans goes variable — David Jonathan Ross’s Output is a real workhorse typeface. He’s been re-doing it as a variable as part of an effort to get variable fonts “over the hump” — that is, away from being thought of as experimental and thought of as practical for day-to-day usage.
Line Lengths — Shawn says, “it seems an obvious immediate win to apply max-width: 69ch to your blog content blocks.” Nice. Oliver Schöndorfer dug into line length recently too.
Smarter line-heights with “calc” — Check out this particular part of Josh’s custom CSS reset. A potentially cool way to handle line-height for both body copy and headers in one swoop.
Women in Type — Just an incredible website from the University of Reading team. “These women worked daily on developing and producing typefaces that were, eventually, almost always attributed to male designers. They merit attention as key contributors to the design process of many renowned typefaces that emerged throughout the twentieth century.”
Retail — “Retail is the result of focussing our energy on the not-too-trendy world of humanist sans.” Very nice work from OH no Type Company.
Designers’ Pick: Best Google Fonts for 2022 — The fact that you can go from zero to implemented custom fonts, for free, in like 30 seconds with Google Fonts is going to keep it the most-used custom font solution likely as long as it exists. Fortunately, the website for it has gotten a lot better, the performance of them has gotten good (and controllable), and as this post on Qode shows, there is a ton of really great new choices available. I like the look of Space Grotesk. The Typewolf newsletter is always covering new good ones. Lately: Readex Pro & Spline Sans.
If you are a designer and have never dealt with designer’s block, you are probably a superhero. For us mortals, designer’s block is a pretty common problem. There are occasions when we sit in front of our screen, and our creativity just evaporates.
I have spent many hours trying to get rid of this annoying wall. It took some time, but I have found some tactics that work best for me. So, do not panic! In this article, we will share five ways you can overcome designer’s block and get back on track.
From innovative sources of inspiration to the importance of collaboration and food, nothing will be left out. But first, let us analyze what designer’s block is and how common it is among creatives.
What is the Designer’s Block? Can You Force Creativity?
In a few words, designer’s block is nothing but a situation where you are stuck as a designer. In this unpleasant moment, you feel like you are losing your design skills and creativity.
Fortunately, this is not permanent. Of course, you are still a great designer. You should know and embrace that designer’s block happens to almost every creative out there. Even the most experienced of us. So the first thing you should do is to stay calm.
Remember that you can not force creativity. When designer’s block comes knocking on your door, you need some time to recover.
So instead of panicking, take to heart some practical tips that will help you regain your confidence and creativity.
How to Get Rid of Designer’s Block?
1. Take Care of Yourself
In some cases, designer’s block is your own body’s reaction. Think about it. How can you perform well when you are tense with pressure? There are many ways to take care of your mental and physical health. For example, you can take a break and have a snack.
Sleep is also critical when it comes to avoiding designer’s block. Recent research has shown that creative thinking is directly related to our periods of sleep. Lack of concentration, more mistakes, and erratic behavior are just some of the consequences of insufficient sleep.
For this reason, napping is a smart solution to designer’s block. So if you are feeling unproductive, first make sure you are not tired or hungry.
2. Change Your Location, Get Inspired
But what if you’re not hungry or tired? There are situations where we are stuck in front of a project. If that’s the case, you should decide to take an inspirational break.
The first thing you can do is to change your location. If you are working from home, you should get some fresh air. There are numerous sources of inspiration that can help you overcome designer’s block. Personally, I take a break and visit one of the following sources:
Parks: Nature will calm you and help you get inspired.
Art Galleries: A designer’s best friend. Visiting an art gallery can help you find the missing elements for your upcoming project.
Coffee shops: Quiet coffee shops are an intelligent way to get inspired. What’s better than a big mug of coffee and relaxing music?
Alternatively, watch a movie or a TV series. This may sound like an unorthodox way to get inspired, but it works perfectly when overcoming designer’s block.
3. Explore the Power of Collaboration
More than 90% of graphic designers in the world are freelancers. Although freelancing is an exciting job, it can be pretty lonely. The next time you are struggling with designer’s block, you might want to ask for some help.
Other UI or UX designers can help you see a project through different eyes and find the missing design elements. For this reason, collaborating with other designers is a great way to overcome designer’s block.
On the other hand, you can also ask your friends or family for ideas and feedback. Remember that inspiration can come from anyone.
4. Plan and Break the Project into Chunks
Most times, I get stuck as a designer, it is entirely my fault. To be precise, there are many cases when we do not plan the project efficiently. When the work is overwhelming, the lack of a well-organized plan can be why.
The best thing you can do is to take a step back. Take a look at the work that needs to be done. Then, you can start breaking your project down into small sections. If you reorganize everything, you can get rid of designer’s block in a matter of minutes.
Try not only to organize your tasks but also to manage the time you will spend on each chunk. This will probably help you understand that you have more time than you think.
5. Apply Some Pressure, Just Start
Unfortunately, few of us have infinite time to find inspiration. Most professional designers work with deadlines. That’s why putting pressure on yourself is not always a bad thing.
After following the above tips, all you have to do is start. Don’t forget that the designer’s block will remain until you start designing.
When I try to apply some pressure, my first drafts are usually bad. But after a while, everything comes back to normal.
Wrap Up
If none of the tactics analyzed above helped, you can always use one (or more) of the following quick tips:
Take a short break (5 minutes or so);
Start with the most challenging task;
Go for a walk or exercise;
Ask for more information about the project. Sometimes, the client can help you overcome designer’s block;
Think about what is distracting you and solve it.
Remember, every creative out there has faced designer’s block at least once. So there’s no need to panic at all. Of course, not all of us deal with it in the same way. That’s why you should first try out the tips above and find out what works best for you. This will help you overcome designer’s block and regain your skills as a designer.
I was working on a client project a few days ago and wanted to create a certain effect on an . See, background images can do the effect I was looking for somewhat easily with background-attachment: fixed;. With that in place, a background image stays in place—even when the page scrolls. It isn’t used all that often, so the effect can look unusual and striking, especially when used sparingly.
It took me some time to figure out how to achieve the same effect only with an inline image, rather than a CSS background image. This is a video of the effect in action:
The exact code for the above demo is available in this Git repo. Just note that it’s a Next.js project. We’ll get to a CodePen example with raw HTML in a bit.
Why use instead of background-image?
The are a number of reasons I wanted this for my project:
It’s easier to lazy load (e.g. .
It provides better SEO (not to mention accessibility), thanks to alt text.
It’s possible to use srcset/sizes to improve the loading performance.
It’s possible to use the tag to pick the best image size and format for the user’s browser.
It allows users to download save the image (without resorting to DevTools).
Overall, it’s better to use the image tag where you can, particularly if the image could be considered content and not decoration. So, I wound up landing on a technique that uses CSS clip-path. We’ll get to that in a moment, right after we first look at the background-image method for a nice side-by-side comparison of both approaches.
1. Using CSS background-image
This is the “original” way to pull off a fixed scrolling effect. Here’s the CSS:
But as we just saw, this approach isn’t ideal for some situations because it relies on the CSS background-image property to call and load the image. That means the image is technically not considered content—and thus unrecognized by screen readers. If we’re working with an image that is part of the content, then we really ought to make it accessible so it is consumed like content rather than decoration.
Otherwise, this technique works well, but only if the image spans the whole width of the viewport and/or is centered. If you have an image on the right or left side of the page like the example, you’ll run into a whole number of positioning issues because background-position is relative to the center of the viewport.
Fixing it requires a few media queries to make sure it is positioned properly on all devices.
2. Using the clip-path trick on an inline image
Someone on StackOverflow shared this clip-path trick and it gets the job done well. You also get to keep using the tag, which, as we covered above, might be advantageous in some circumstances, especially where an image is part of the content rather than pure decoration.
Now, before we rush out and plaster this snippet everywhere, it has its own set of downsides. For example, the code feels a bit lengthy to me for such a simple effect. But, even more important is the fact that working with clip-path comes with some implications as well. For one, I can’t just slap a border-radius: 10px; in there like I did in the earlier example to round the image’s corners. That won’t work—it requires making rounded corners from the clipping path itself.
Another example: I don’t know how to position the image within the clip-path. Again, this might be a matter of knowing clip-path really well and drawing it where you need to, or cropping the image itself ahead of time as needed.
Is there something better?
Personally, I gave up on using the fixed scrolling effect on inline images and am back to using a CSS background image—which I know is kind of limiting.
Have you ever tried pulling this off, particularly with an inline image, and managed it well? I’d love to hear!
The online world keeps growing and growing. Nearly exponentially it seems. A thousand or so new websites appear on a daily basis. More and more shoppers are relying on handheld devices to purchase products or services they want.
Consequently, website design has become more demanding than ever. To keep up with the competition a website has to be responsive, it has to be fast, and it has to be user-friendly in every detail.
Most of the popular WordPress themes are great at helping website builders get a site up and running quickly. Many if not most do not require any special design or coding skills. And many, though by no means all, are sufficiently customizable and responsive.
The best way to ensure a website will be able to stay ahead of the competition is to select one of the best WordPress themes that has the features you will need. It needs to have a proven track record, and to be ranked highly by those who should know. Add 100% responsiveness and you have a theme you can place your confidence in.
Here are 10 such great WordPress themes – the best of the best.
Given its more than 240,000 satisfied customers it is safe to say that since BeTheme has such a large and devoted following there must be a reason for it. There are several in fact. This biggest WordPress theme of them all gives you all the tools, options, and flexibility you need to build a website that will leave the competition in the dust.
Be features a library of more than 650 pre-built websites that cover all the major website types and niches and many of the smaller ones. These pre-built websites are responsive, customizable, and extremely user friendly.
Be’s Live Builder is fast and a pleasure to work with given its outstanding assortment of powerful page-building capabilities. You’ll find the popular Muffin Builder, Header Builder, and Shortcode Generator in the package, and Be is Elementor ready as well.
Creating a shop? The WooCommerce Builder will take care of that for you with its single product page builder and multiple customer-centric options.
Users receive free lifetime updates. Click on the banner to learn more.
A wealth of design options and customizer settings coupled with a selection of layout choices, navigation options, dynamic template functionality, and the popular WPBakery frontend drag and drop page builder enables Total WordPress theme users to create stunning responsive websites with ease.
Design options include Live Customizer Theme settings, Unlimited Styling, page builder blocks and extra modules, Post entry cards, animations, and custom backgrounds
Layout options include boxed and full-width layouts, dynamic layouts, one-page sites, page and post designs, and advanced page settings
Navigation features include 8 preset header styles, local scroll menus, mobile menu styles, and a simple mega menu
Click on the banner to see why 48,000 Total customers are happy customers.
Sales figures can at times be a legitimate factor in choosing a WordPress theme. A well-established theme with a poor sales record tells you one thing. A WordPress theme like Avada, with 45OK+ sales that make it the #1 best seller of them all tells you something quite different.
It tells you that with this theme, you can build a website that will leave the competition in the dust!
Avada’s Fusion core addresses your need for website responsiveness, performance, and attractiveness with its –
Fusion theme and page options and professionally crafted design elements
Fusion Slider, Fusion Builder, a Mega Menu, and Dynamic Content System
40+ slick one-click importable demos
Avada is optimized for speed, it is 100% WooCommerce ready, and it gives you complete control over your design. Click on the banner to learn more.
Uncode is a pixel perfect WordPress theme that would be an ideal choice for building creative and WooCommerce websites. Uncode has more than 90,000 sales to date.
Key components include –
A powerful Frontend Editor, a WooCommerce Custom Builder, and more than 450 Wireframe section templates.
The Content Block enables you to create replicable headers, footers, and content sections, while with the Dynamic Contents feature it is possible to create personalized custom templates and design elements.
The WoodMart WordPress theme may well be one of the most reliable and dependable ThemeForest eCommerce themes to hit the market.
Its many useful features include some you won’t find in most eCommerce themes
They include trendy selections of premade websites, templates, and special pages together with a nice assortment of shop and product page display options
Check out WoodMart’s landing page. It demonstrates why this popular theme belongs in the top 10 themes for 2022.
TheGem offers the ultimate in WordPress toolboxes for building business and eCommerce websites as well as portfolio, blogging, and magazine websites.
This ultimate toolbox features –
Elementor and WPBakery page builders with extended features
Awesome WooCommerce demos, features & tools for creating high conversion online shops
400+ beautiful pre-built websites and templates and 300+ premium pre-designed section templates to speed up your workflow – a website building game changer
Flexible customization and boosted webpage performance along with premium plugins like Revolution Slider and WP Rocket, included in TheGem.
Rey takes building a WooCommerce site to the next level thanks to its powerful integrations with Elementor, WooCommerce, and of course, WordPress’s sophisticated engine.
Rey is easy to set up
Rey features the popular and powerful Elementor page builder together with a useful selection of Elementor widgets to cover almost any situation
Ajax Navigation and Filters streamline page browsing and navigation
Rey is performance oriented, SEO and developer friendly, and (obviously) responsive
Picking the wrong theme can make building a shop a complicated affair. Choose Impeka can make doing so a piece of cake.
Impeka is easy for a beginner to use; yet it contains features advanced designers tend to look for. For either type of user the end result will be a fast, SEO friendly, and totally responsive website
Impeka offers Elementor, Gutenberg, and WPBakery page building and editing options
Impeka does not require special design or coding skills to create an impeccable WooCommerce site.
It’s creative, modern, highly flexible, and built with the Elementor page builder. What more could you ask for? Responsiveness of course, and Litho features that as well.
Other reasons for selecting Litho include –
Slider Revolution, 37+ home pages, 300+ templates, and 200+ creative elements
Single-click demo import
Easy access to WordPress Customizer
Documentation and customer support are great as well and your sites will be fast, 100% responsive, and SEO friendly.
It’s popular, available at a bargain price, and features 110+ ready to customize shops. What else could entice you to purchase a copy of the XStore WooCommerce theme?
If you have your content at your fingertips, you can get your shop up and running quickly
WPBakery and Elementor page building support is at your fingertips together with carefully selected product features and product page layout options
$500 worth of plugins are included to seal the deal.
*****
Given the thousands of awesome WordPress themes that are on the market there are several approaches you can take to find one you can work with –
The quickest would be to take a chance on one that “looks good” and hope for the best.
If you have (lots of) time to spare, you could take a deep dive into checking out and comparing a wide variety of cool WordPress themes.
The best approach would be to seek advice from a source of expertise on what to look for and why to look for it, and what some good candidates might be
There are a lot of factors that contribute to a better user experience on a website. Pages need to load quickly to give users peace of mind and efficiency. Navigation must be clear and straightforward, with direct pathways for visitors to follow when finding your contact pages, blog posts, and products. Your colors need to work seamlessly together while providing just enough contrast in the areas that need it most.
Excellent user experience needs to be considered for every part of your website that acts as a touchpoint with a potential customer or user.
One of the most significant touchpoints of all is your forms.
All websites need some form of interactive content to thrive. Users need to be able to do something with the site, whether it’s looking for information with a search bar, contacting a team for a quote, making a booking, or completing a purchase. Forms power the majority of the interactive activities available on websites.
If you know how to master great UX on a form, you can contribute to more meaningful interactions between your brands and their customers. But not all web forms are the same. Here are some of the top types of forms you need to master and how you can optimize them.
The “Opt-In” Form
The Opt-in Form is probably the best-known form in the digital landscape. It’s essentially a form that asks visitors to “opt-in” to a specific offer. Sometimes, this means signing up for a webinar; other times, it’ll be agreeing to an email newsletter or a regular series of blog updates.
Opt-in forms grab attention quickly and ask for something specific from the audience. For instance, this example from HuffPost encourages visitors to “Subscribe to the Morning Email.”
Opt-in forms are all about generating action.
Sometimes, they’re placed at the bottom of a landing page after a company has had a chance to explain precisely what they’re offering. Other times, you’ll find the opt-in form situated on a sidebar of a website, constantly enticing people to “sign up” if they like what they see on a blog post or article.
It’s also common for opt-in forms to appear as pop-ups and exit pop-ups on modern websites. For example, a brightly colored opt-in form that promises an immediate benefit to a customer could encourage them to hand over their details before they abandon your website.
How to Design a Great Opt-In Form
So what kind of best practices go into an excellent opt-in form?
Start with simplicity: If you’re asking your visitors to do something, don’t overwhelm them with too big of a request straight away. Keep the form short and simple, so it doesn’t seem like too much extra work for the visitor. Something like “Subscribe to our newsletter” should ask for nothing more than an email.
Highlight the benefits: Most customers won’t want to give you a place in their inbox or the opportunity to interact with them further unless you can offer something in return. Even if you’re asking for something small, like an email address, let the customer know what’s in it for them. In the HuffPost example above, the company highlights that you can wake up to the day’s “most important news.”
Give the visitor the power: Let your visitor know they’re in control here. They want to see that they’re getting exactly what they need from you in exchange for their contact details. This means reassuring them that their email address won’t be used for spam, like H&B Sensors does here:
The Contact Form
The Contact Form is another crucial part of building an effective UX for your website – but it’s also an element that web designers and business owners often overlook. When customers decide they want to learn more about a business, they need a quick and easy way to get in touch.
Contact forms need to be easy to find and use on any website. Usually, your user will expect to see a link to the contact form situated somewhere at the bottom of your webpage. It might be called “Contact Us” or “Customer Support.” Avoid anything that would go over the user’s head.
Aside from being easy to track down, your contact form also needs to reassure an audience that they’re making the right decision by getting in touch. Therefore, the content needs to be short, sweet, and authoritative—highlight why the user might contact your company and how they can do so.
Avoid any unnecessary information in the contact form. For example, you don’t need to know your client’s age and their job to answer a question about where their nearest physical branch is. Keep form fields to the point, or you’ll chase customers away.
How to Design a Great Contact Form
Design something personalized but straightforward to make the most of your contact form. Use features like smart content and conditional logic, if possible, to adapt the page to the user’s needs. Dynamic content is becoming increasingly valuable these days. Other best practices include:
Set the right expectations: Let your customers know how active you are and how quickly they can expect to hear back from you. Imagery and the right fonts can also set expectations about the kind of communication your audience can expect. For example, this contact page from the Marvel app is fun and playful, like the company itself:
Provide multiple options: If your customer doesn’t want to use your contact form, give them another way to get in touch. Ensure the contact page includes information like where to find you on social media and your professional phone number.
Simplify things on your end: To ensure that you can contact your audience as quickly as possible, allow your customers to choose a specific subject that their query is connected to. Allowing them to choose “Sales” or “Order issues” means you can automatically direct the message to the right team member on the back-end.
The Online Payment Form
Sometimes, when your customers have seen what you have to offer and they’ve checked out the competition, they decide to go ahead with their purchase. To facilitate this, you’re going to need an online payment form. Online forms ensure that your customers can safely enter their credit or debit card details to purchase whatever you have to offer.
Most payment processing companies like PayPal, Square, and Stripe come with payment forms included, so you can easily embed them into a website in minutes. However, there’s always the option to customize those payment forms.
For instance, ideally, you’ll need a payment form that keeps your customer on the same page, so they don’t have to log into another browser to make their purchase. The fewer transitions your client has to make, the safer they’ll feel.
How to Design a Great Payment Form
When designing any payment form, simplicity and security are the two most important factors. Your customer should be able to enter their information quickly and easily and get through the transaction process without worrying about their details.
Remember to:
Keep it simple: The fewer fields the visitor has to fill out, the better. Customers still feel uncomfortable sharing personal information and payment details online. Make the experience as painless as possible. If your client already has an account with your business, you might create a system that automatically fills some of the fields, such as their email address, name, and billing address.
Offer the right integrations: The proper payment forms will integrate with the payment services your customers prefer to use. Options include PayPal, Stripe, Square, Verified by Visa, and Mastercard. Get a developer to integrate the right APIs with your form to give your customers the broadest range of options.
Ensure security: Give customers peace of mind by providing as much security evidence as possible. An SSL certificate that places the padlock on the top of the browser next to the URL is a great way to make customers feel more secure. Integrating verification options so your customers can avoid fraud issues is another significant step. Sometimes just putting logos from the card types you accept on the page will make a customer feel more secure.
Support Forms
Some companies bundle the contact form and the support form together. Others have a separate support form to get their queries routed directly to the people most capable of helping them. If you want to take the second route, it might be a good idea to design a “help” section on your website where you can locate the support form.
The “Help” section on a site often appears alongside other links on the footer. For instance, it could appear alongside “About” links and “Contact” options. Here’s an example of Hubspot’s Customer Support options:
The best customer support pages come with various ways for clients to help themselves and find answers to their most pressing questions. For example, you might have a search bar where your audience can search for the answers to their queries or a knowledge base full of helpful blogs.
Hubspot allows users to choose between a blog, knowledge base, academy training center, community forum, developer discussion board, and assistance from a certified partner.
How to Design a Great Customer Support Form
Designing a good customer support form is about getting your audience the information they need as quickly as possible. Once again, you’ll need to stick to as few form fields as possible here to avoid angering an already frustrated customer. Also, remember to:
Ask for the right information: Find out what the query is about by giving the customer a drop-box menu full of possible topics to choose from. If you need a product reference number or something similar, ask for that at the top of the form, then allow the customer to provide extra information about their query underneath.
Set expectations: Let your customers know when they can expect to get a response to their concerns and provide them with advice on what to do next. For instance, you could invite them to check out your knowledge base while they wait for a response.
Keep it simple: Avoid using technical jargon on your support request forms. Be direct in your requests for summaries of the issue at hand, contact information, and other supplemental data.
Customer Feedback Forms
According to Microsoft, around 96% of customers say that customer service is crucial in determining their loyalty to a specific brand. Another 52% of global customers believe that companies need to respond to the feedback provided by customers.
To ensure your customer service strategies are on-par with what your customers expect, you need to get feedback from your audience. That’s where a feedback form comes in. Customer feedback forms often appear after a client has finished purchasing on the “thank you” screen. They may also occur after a customer has completed a service interaction online.
By leaving you feedback, your customer is doing you a massive favor. They’re giving you a chance to learn from your mistakes and improve the service you can give next time around. Feedback is one of the best tools for any business that wants to grow and thrive.
If you want your customers to use your feedback forms, you’ll need to make them as simple as possible. Your customers don’t have time to waste on a complex form.
Don’t make any fields mandatory: Don’t stop your customers from submitting a form unless they’ve completed every field. Allow them to enter the information they consider to be the most important, and that’s it. You can even fill some of the form out for your customer, if possible, by entering their name and email address if they’re already a member of your site.
Make it mobile responsive: Remember there are around 3.5 billion smartphone users worldwide. You can’t afford to lose feedback because your form isn’t responsive. Every form should look and feel incredible on any device.
Include a rating option: If your customers don’t have much to say about your service, or they’re not wordsmiths, they might prefer a rating option instead. A one-to-five rating system that allows your customer to judge your product or service on a scale of poor to wonderful is a great way to gain quick information. Check out the Uber Engineering example here:
Though you can pre-enter some information on a feedback form to make your customer’s life easier, don’t overstep your bounds. Adding your customer’s email address to the form is fine if they’re already a customer with you. Pre-selecting the “very satisfied” rating above would look presumptuous.
Top Tips to Improve Every Form Design
The online form is an essential part of any web design project, but it’s also frequently overlooked. Unfortunately, without a good set of forms, your customers will struggle to interact with your company in a meaningful way.
When creating any form, remember:
Reduce friction: Reduce the friction for your customers by asking as few questions as possible. The less your customer has to answer, the better. If you can pre-populate forms with information like your customer’s name and email address, this could help.
Keep it simple: Make sure that the form is clean and easy to use. Your customers shouldn’t be confused about where to click or how to submit their information. A single-column design is often better than a multi-column option.
Be clear in error messages: Don’t just tell your visitors that something has gone wrong. Let them know what they need to do to submit the form successfully. If possible, use inline validation with real-time feedback to let your audience know that you recognize the information they’ve submitted.
Keep data secure: Make sure your audience feels safe by letting them know how you will use this information and why you’re asking for it. If you’re asking for an email address, make the benefits of entering that information clear.
Make fields optional: Allow your audience to add more information to a form if they want to – but don’t demand it. Give some freedom to the visitor.
The better your forms are, the more effective your interactions with customers will be. Remember, it’s not just the face-to-face interactions that your customers judge when making decisions about your business and whether to trust you. Today’s digital world has prompted a new demand for more meaningful virtual experiences.
Your form could be the first interaction you have with a client, whether it’s a contact form, a booking form, or something else entirely. Get that right, and you can improve your chances of your customers coming back to interact with you again later.
CSS overrides can change the default look of almost anything:
You can use CSS to override what a checkbox or radio button looks like, but if you don’t, the checkbox will look like a default checkbox on your operating system and some would say that’s best for accessibility and usability.
You can use CSS to override what a select menu looks like, but if you don’t, the select will look like a default select menu on your operating system and some would say that’s best for accessibility and usability.
You can override what anchor links look like, but some would say they should be blue with underlines because that is the default and it’s best for accessibility and usability.
You can override what scrollbars look like, but if you don’t, the scrollbars will look (and behave) the way default scrollbars do on your operating system, and some would say that’s best for accessibility and usability.
In my experience, everyone has a different line. Nearly everybody styles their buttons. Nearly everybody styles their links, but some might only customize the hue of blue and leave the underline, drawing the line at more elaborate changes. It’s fairly popular to style form elements like checkboxes, radio buttons, and selects, but some people draw the line before that.
Some people draw a line saying you should never change a default cursor, some push that line back to make the cursor into a pointer for created interactive elements, some push that line so far they are OK with custom images as cursors. Some people draw the line with scrollbars saying they should never be customized, while some people implement elaborate designs.
CSS is a language for changing the design of websites. Every ruleset you write likely changes the defaults of something. The lines are relatively fuzzy, but I’d say there is nothing in CSS that should be outright banned from use — it’s more about the styling choices you make. So when you do choose to style something, it remains usable and accessible. Heck, background-color can be terribly abused making for inaccessible and unusable areas of a site, but nobody raises pitchforks over that.
I’ve encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties, and I want to share them with you here in this article.
But first, let’s acknowledge one thing:
Default underlines are inconsistent
Let’s add a text link to a plain web page, set its font-family to Arial, and compare the underlines across browsers and operating systems.
From left to right: Chrome, Safari, and Firefox on macOS; Safari on iOS; Chrome, and Firefox on Windows; Chrome, and Firefox on Android.
As you can see, the default underline is inconsistent across browsers. Each browser chooses their own default thickness and vertical position (offset from the baseline) for the underline. This is in line with the CSS Text Decoration module, which specifies the following default behavior (auto value):
The user agent chooses an appropriate thickness for text decoration lines. […] The user agent chooses an appropriate offset for underlines.
Luckily, we can override the browsers’ defaults
There are two new, widely supported CSS properties that allow us to precisely define the thickness and offset for our underlines:
With these properties, we can create consistent underlines even across two very different browsers, such as the Gecko-based Firefox on Android and the WebKit-based Safari on macOS.
Top row: the browsers’ default underlines; bottom row: consistent underlines with CSS. (Demo)
Note: The text-decoration-thickness property also has a special from-font value that instructs browsers to use the font’s own preferred underline width, if available. I tested this value with a few different fonts, but the underlines were inconsistent.
OK, so let’s move on to the two Chrome bugs I noted earlier.
Chrome bug 1: Underlines are too thin on macOS
If you set the text-decoration-thickness property to a font-relative length value that computes to a non-integer pixel value, Chrome will “floor” that value instead of rounding it to the nearest integer. For example, if the declared thickness is 0.06em, and that computes to 1.92px, Chrome will paint a thickness of 1px instead of 2px. This issue is limited to macOS.
a {
font-size: 2em; /* computes to 32px */
text-decoration-thickness: 0.06em; /* computes to 1.92px */
}
In the following screenshot, notice how the text decoration lines are twice as thin in Chrome (third row) than in Safari and Firefox.
From top to bottom: Safari, Firefox, and Chrome on macOS. (Demo)
The text-underline-offset property allows us to precisely set the distance between the alphabetic baseline and the underline (the underline’s offset from the baseline). Unfortunately, this feature is currently not implemented correctly in Chrome and, as a result, the underline is positioned too low.
Note: As you might have noticed from the image above, Safari draws underlines on top of descenders instead of beneath them. This is a WebKit bug that was fixed very recently. The fix should ship in the next version of Safari.
Help prioritize the Chrome bugs
The two new CSS properties for styling underlines are a welcome addition to CSS. Hopefully, the two related Chrome bugs will be fixed sooner rather than later. If these CSS features are important to you, make your voice heard by starring the bugs in Chromium’s bug tracker.
Sign in with your Google account and click the star button on issues #1172623 and #1255280.
