Archive

Archive for the ‘Designing’ Category

How To Make Your Designs Scannable (And Why You Should)

September 28th, 2022 No comments

Jakob Nielsen’s How Users Read on the Web is 25 years old this week, and one glance at an eye-tracking study will tell you its key observations are still relevant today.

Simply put, users don’t read a web page; they scan it for individual words and sentences.

A typical pattern shown in eye-tracking reports is that users will rapidly scan a page, scrolling down to do so. Then either hit the back button and pump your bounce rate, or scroll to the top and re-engage with the content.

Even when content, volume, and quality tick all the user’s boxes, and they choose to stay on your site, they still don’t read; they scan; a slightly deeper scan, but still a scan.

As a result, it’s vital to design websites to be easily scannable, both in a split-second scan to decide if your page is worth the reader’s time and on a second or third pass.

Clarify the Page’s Purpose Immediately

Every page should have a primary goal. The majority of the time, that goal is embodied in a CTA (Call to Action).

The good news is, if your SEO (Search Engine Optimisation) has gone to plan, your goal (i.e., to sell something) and your user’s goal (i.e., to buy something) will align. By clarifying the page’s purpose, you can show the user that your goals align.

You can be experimental if you’re an established company and the user knows what to expect. But if you’re new to the market or have a lower profile, you need to conform to established design patterns. This means that a SaaS should look like a SaaS, a store should look like a store, and a blog should look like a blog.

Including your CTA above the fold — which in the context of the web, means the user doesn’t have to interact to see it. Doing so makes it easier for the user to progress and clearly tells the user what you are offering.

The landing page for next month’s Webflow Conf 2022 clarifies the page’s content, with a clear CTA above the fold.

Employ a Visual Hierarchy

The Von Restorff effect states that the more something stands out, the more likely we are to notice and remember it.

Visual hierarchies are excellent for guiding a user through content. HTML has the h1–h7 heading levels — although, in reality, only h1–h4 are much use — which gives you several levels of heading that can be scanned by different readers scanning at different rates.

For example, we know that subheadings have little impact if a user diligently reads the page from top to bottom, but they are excellent for catching the eye of skim readers.

Amnesty uses very a very simple hierarchy, the only change for its subheading being increased weight. But it is enough to catch the user’s eye.

You can also create visual hierarchies with other forms of contrast; weight and color are often employed in addition to size. For accessibility and inclusive design, it’s wise to combine visual indicators when creating a hierarchy; for example, headings are usually larger, bolder, and colored.

Use Negative Space

Imagine a person standing in a crowd. Let’s say they’re wearing a red and white striped jumper and a red and white bobble hat — pretty distinctive. But if there are hundreds of other characters around them, they might be hard to spot.

Now imagine the same person dressed the same, standing on their own. How long will it take you to spot them? Even without the stripy outfit, it’s not much of a challenge.

Elements in isolation are not only easier to spot, but they pull the eye because the negative space (sometimes referred to as white space) around them creates contrast.

When using negative space, the key is to give elements enough room to breathe and attract the eye without giving them so much room that they are disassociated from the rest of your content.

Across its site, Moheim uses negative space to highlight UI elements while grouping associated content.

Use F Patterns

Users scan a page using either an F-pattern or a Z-pattern.

Because users scan your page in predictable ways, we can employ layouts that cater to this tendency.

Designers have been aware of F and Z patterns for some time, and because they’ve been used for so long, they may be self-fulfilling, with users being trained to scan a page in this fashion. However, both patterns are similar to how eyes travel from line to line in horizontal writing systems.

Whatever the cause, by placing key content along these paths, you increase the chance of capturing a user’s attention.

Kamil Barczentewicz uses a beautiful, natural layout that also conforms to a classic F pattern.

Include Images with Faces

Images are a great way of conveying brand values and making a site engaging. But when it comes to catching the eye of a user scanning your design, the best images include faces.

For example, a testimonial with an image of the customer will catch the eye more than a text-only testimonial.

The Awwwards Conference uses an animated computer with a face to capture attention. And large images of speakers making eye contact.

This is almost certainly due to social conditioning; we see a face, and we engage with it to see if it is a threat or not. Most of us naturally look to expressions of emotion to understand situations, and the distinction between a real-life person and an image hasn’t made its way into our mental programming yet.

You don’t need to use photos. Illustrations are fine. The key is to ensure there is a face in the image. That’s why illustrations of characters perform so well.

Copy Print Design

Print design is centuries older than the web, and many print applications, from newspapers to advertising, developed design elements to catch the eye of readers scanning the design.

Subheadings, lists, blockquotes, and pull quotes all catch the eye. Introductory paragraphs in a larger size or even italics draw users into the text. Shorter paragraphs encourage users to keep reading.

Horizontal rules used to delineate sections of text act as a break on eyes traveling over content with momentum. They are a good way of catching a scan-reader who is losing interest.

You can use a horizontal rule or break up your layout with bands of color that divide content sections.

Omono uses horizontal bands to highlight different sections of content.

Mass, Not Weight

We often discuss design elements as having weight; font-weight is the thickness of strokes.

But it is more helpful to think of design elements as having mass; mass creates gravity, pulling a user’s eye towards them.

The trick is to design elements with enough mass to attract the user‘s eye when scanning at speed without forcing the user to change how they engage with your content.

 

Featured image via Pexels.

Source

The post How To Make Your Designs Scannable (And Why You Should) first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Named Element IDs Can Be Referenced as JavaScript Globals

September 27th, 2022 No comments

Did you know that DOM elements with IDs are accessible in JavaScript as global variables? It’s one of those things that’s been around, like, forever but I’m really digging into it for the first time.

If this is the first time you’re hearing about it, brace yourself! We can see it in action simply by adding an ID to an element in HTML:

<div id="cool"></div>

Normally, we’d define a new variable using querySelector("#cool") or getElementById("cool") to select that element:

var el = querySelector("#cool");

But we actually already have access to #cool without that rigamorale:

CodePen Embed Fallback

So, any id — or name attribute, for that matter — in the HTML can be accessed in JavaScript using window[ELEMENT_ID]. Again, this isn’t exactly “new” but it’s really uncommon to see.

As you may guess, accessing the global scope with named references isn’t the greatest idea. Some folks have come to call this the “global scope polluter.” We’ll get into why that is, but first…

Some context

This approach is outlined in the HTML specification, where it’s described as “named access on the Window object.”

Internet Explorer was the first to implement the feature. All other browsers added it as well. Gecko was the only browser at the time to not support it directly in standards mode, opting instead to make it an experimental feature. There was hesitation to implement it at all, but it moved ahead in the name of browser compatibility (Gecko even tried to convince WebKit to move it out of standards mode) and eventually made it to standards mode in Firefox 14.

One thing that might not be well known is that browsers had to put in place a few precautionary measures — with varying degrees of success — to ensure generated globals don’t break the webpage. One such measure is…

Variable shadowing

Probably the most interesting part of this feature is that named element references don’t shadow existing global variables. So, if a DOM element has an id that is already defined as a global, it won’t override the existing one. For example:

<head>
  <script>
    window.foo = "bar";
  </script>
</head>
<body>
  <div id="foo">I won't override window.foo</div>
  <script>
    console.log(window.foo); // Prints "bar"
  </script>
</body>

And the opposite is true as well:

<div id="foo">I will be overridden :(</div>
<script>
  window.foo = "bar";
  console.log(window.foo); // Prints "bar"
</script>

This behavior is essential because it nullifies dangerous overrides such as

, which would otherwise create a conflict by invalidating the alert API. This safeguarding technique may very well be the why you — if you’re like me — are learning about this for the first time.

The case against named globals

Earlier, I said that using global named elements as references might not be the greatest idea. There are lots of reasons for that, which TJ VanToll has covered nicely over at his blog and I will summarize here:

Additional considerations

Let’s say we chuck the criticisms against using named globals and use them anyway. It’s all good. But there are some things you might want to consider as you do.

Polyfills

As edge-case-y as it may sound, these types of global checks are a typical setup requirement for polyfills. Check out the following example where we set a cookie using the new CookieStore API, polyfilling it on browsers that don’t support it yet:

<body>
  <img id="cookieStore"></img>
  <script>
    // Polyfill the CookieStore API if not yet implemented.
    // https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
    if (!window.cookieStore) {
      window.cookieStore = myCookieStorePolyfill;
    }
    cookieStore.set("foo", "bar");
  </script>
</body>

This code works perfectly fine in Chrome, but throws the following error in Safari.:

TypeError: cookieStore.set is not a function

Safari lacks support for the CookieStore API as of this writing. As a result, the polyfill is not applied because the img element ID creates a global variable that clashes with the cookieStore global.

JavaScript API updates

We can flip the situation and find yet another issue where updates to the browser’s JavaScript engine can break a named element’s global references.

For example:

<body>
  <input id="BarcodeDetector"></input>
  <script>
    window.BarcodeDetector.focus();
  </script>
</body>

That script grabs a reference to the input element and invokes focus() on it. It works correctly. Still, we don’t know how long it will continue to work.

You see, the global variable we’re using to reference the input element will stop working as soon as browsers start supporting the BarcodeDetector API. At that point, the window.BarcodeDetector global will no longer be a reference to the input element and .focus() will throw a “window.BarcodeDetector.focus is not a function” error.

Bonus: Not all named elements generate global references

Want to hear something funny? To add insult to the injury, named elements are accessible as global variables only if the names contain nothing but letter. Browsers won’t create a global reference for an element with a ID that contains special characters and numbers, like hello-world and item1.

Conclusion

Let’s sum up how we got here:

  • All major browsers automatically create global references to each DOM element with an id (or, in some cases, a name attribute).
  • Accessing these elements through their global references is unreliable and potentially dangerous. Use querySelector or getElementById instead.
  • Since global references are generated automatically, they may have some side effects on your code. That’s a good reason to avoid using the id attribute unless you really need it.

At the end of the day, it’s probably a good idea to avoid using named globals in JavaScript. I quoted the spec earlier about how it leads to “brittle” code, but here’s the full text to drive the point home:

As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the web platform, for example. Instead of this, use document.getElementById() or document.querySelector().

I think the fact that the HTML spec itself recommends to staying away from this feature speaks for itself.


Named Element IDs Can Be Referenced as JavaScript Globals originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

20 Best New Websites, October 2022

September 26th, 2022 No comments

The design world fluctuates back and forth, swerving between love and hate for different design trends. Sometimes we see a wide range of approaches, and sometimes designers all hop on the same idea.

This month, the web is dominated by animation. Designers are cramming in motion in unexpected ways. And it’s fun to explore. Here are 20 of the best new sites on the web this month. Enjoy!

Bannach

Bannach is a German furniture brand. Its products are colorful and geometric, so it makes sense that when you scroll down to the collection, the thumbnails begin as pixel blocks and animate into product photography.

Fornasetti Profumi

Fornasetti Profumi takes a different approach to motion. It uses video to emphasize stillness to promote the calming qualities of its candle products.

The Other Side of Truth

The Other Side of Truth is a superb exercise in utilizing the web for a cause. It presents facts on the Russia-Ukraine war, but the standout feature is the toggle switch that, instead of light mode-dark mode, toggles facts and Russian state propaganda.

Glasfurd & Walker

Glasfurd & Walker is a portfolio site for a design agency. So far, so standard. However, it sets itself apart because it’s slightly bigger than the browser and swerves left and right with your mouse movement.

Sirup 5th Anniversary

Sirup is a Japanese singer-songwriter, and to celebrate the fifth anniversary of his first hit single, his record company has put together this awesome maximalist micro-site that uses type, motion, and art direction to capture his style.

Fitzjohn’s

Fitzjohn’s is a slick site for a new apartment complex in the Hampstead area of London. It uses a refreshing modern color palette and calming animation to take the edge off the frankly ludicrous price tag.

Persepolis Reimagined

Persepolis Reimagined is an awe-inspiring WebGL tour through one of the most important cities in ancient Iran. Make sure you tour it on a large screen. It’s hard not to be wide-eyed with wonder.

JaM Cellars

JaM Cellars is a Californian wine brand that’s pitching to bachelorette parties. With names like Butter, and Sugar, it’s not the most sophisticated tipple, but yellow, we love a yellow site.

Danielle Levitt

This portfolio site for film director and photographer Danielle Levitt features samples of her best work scrolling past the viewport. There’s a clever switch of thumbnail and background color when you scroll down to the contact details.

Propel

From total color energy to Apple-levels of minimalism: Propel is a slick, animate-on-scroll site for a marine motor brand selling an outboard and inboard motor. The animated masks on the images are a nice subtle touch.

Standards

Standards is a site for a SaaS that helps organizations create, maintain, and share brand guidelines. It uses subtle animation, video of its UI, and compelling copy to sell its approach.

Chris Carruthers

The portfolio site for Chris Carruthers is deliberately self-indulgent with scrolling text, clipped images, and scroll-jacking, but it’s also delightful to peruse.

Theodore Ellison Designs

We don’t often see colored glass in real life, but the play of light on stained glass is beautiful. This site for Theodore Ellison Designs uses video to bring the effect to the web.

Owomaniya!

The Owomaniya report for 2022 uncovers the state of gender diversity in the Indian entertainment industry. Presented in the style of infographics, the information is brought to life by animation.

Meetings

Meetings is a French events company. Its site uses an animated collage approach to showcase its services, and animated text to pull you into its content.

Blakeney

Blakeney invests in African companies on behalf of institutional investors. Its site is typical of the financial industry, but it uses animation to lift it to a higher level of interest.

Becklyn

Becklyn is a digital design agency. Its portfolio site uses animated text, expanding image masks, and video to guide us through its site and app design approach.

Cabi

Cabi is a brand of Japanese condiments with a typically Japanese feeling site. Bright colors, a slowly scrolling slideshow of dishes, and editorial to pack shot hover effects are a great introduction to the brand.

Slantis

Slantis provides building information modeling to architecture and infrastructure providers. Its site uses animation to showcase the types of content it produces for clients.

July Fund

July Fund is a venture capital project. It takes an entirely different approach than its competitors by adopting a chaotic but enjoyable card-based design.

Source

The post 20 Best New Websites, October 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images

September 23rd, 2022 No comments

If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even in the block theme directory screenshots as well.

Let’s consider the following example from Twenty Twenty (a classic theme) which includes a cover template that can be used to display both in single post and page, where the post’s featured image displays at the top that stretches across the browser screen, with post title and other desired meta data below. Cover templates allow creating content that stands out from the traditional constraints of displaying content.

Screenshot showing a single post with Twenty Twenty cover template.

Creating cover templates currently requires writing PHP code as captured here in the Twenty Twenty default theme’s cover template. If we look at the template-parts/content-cover.php file, it contains the code for displaying content when the cover-template is used.

Thus, it is not possible to create a customized cover page if you do not possess a deep knowledge of PHP. For many ordinary WordPress users, the only option is to use plugin like Custom Post Type UI as described in this short video.

Cover sections in block themes

Since WordPress 5.8, theme authors could create custom templates (like single post, author, category, and others) with a top hero section using block editor cover block and bundled into their themes with minimal or no code.

Before diving into how top large cover sections are created in block themes templates, let’s briefly look at the two block themes Twenty Twenty-Two and Wabi by Rich Tabor (full review here).

Screenshot showing cover page thumbnails of Twenty Twenty-Two (left) and Wabi (right) themes.

Behind-the-scenes, Twenty Twenty-Two implements a large header by adding a hidden image stored as a pattern in the header-dark-large parts. Whereas, in the Wabi theme, the large header background color in a single post is implemented with accent background colors and a 50px height spacer block (lines: 5-9). The accent colors are managed by the assets/js/accent-colors.js file.

Many others chose to create a top cover section by using cover block, which allowed users to change the background color and add a static image from Media Library or upload from media devices – without writing any code. With this approach, images from the post featured image block had to be added manually to each single post if you wanted to have the post featured image as the background image in single posts.

Cover Blocks with dynamic post featured image

WordPress 6.0 made available another cool featured image cover blocks feature, which allows use of the featured image of any post or page as the background image in the cover block.

In the following short video, Automattic engineers discuss adding featured images to cover blocks with an example from Archeo theme:

The image block including post featured image block can be further customized using duotone color in theme.json as discussed in this short Connecting The Dots YouTube video (Automattic’s Anne McCarthy).

Use case examples (Wei, Bright Mode)

If we browse the thumbnail images in the block theme directory, we see a majority of them include large cover header sections. If we dig into their template files, they make use of cover blocks with static image background.

Some recently developed themes are using cover blocks with the dynamic post featured image background (e.g., Archeo, Wei, Frost, Bright Mode, etc.). A brief overview of the new feature is available in this short GitHub video.

Screenshot showing cover page thumbnails of Wei (left) and Bright-mode (right) themes.

Combining dynamic accent colors features of Wabi theme with cover and post featured image blocks, Rich Tabor further expands his creativity in his new Wei theme (full review available here) to display dynamic cover images from a single post.

In his Wei announcement post, Rich Tabor writes: “Behind-the-scenes, the single.html template is using a Cover block that leverages the post’s featured image. Then the duotone is applied by the color scheme assigned to the post. This way, just about any image will look fine”.

If you would like to dig deeper into the Wei theme’s header cover block and learn how to create your own, here is a short video from Fränk Klein (WP Development Courses) who explains step-by-step how it was created.

Similar to the Wei theme, Brian Gardner also makes use of cover block with post featured image block in his recent Bright Mode theme to display standout contents with vibrant colors.

Brian told WPTavern: “he loves most about the theme is the way the Cover Block is used on single pages. It pulls the featured image into the Cover block and also offers custom block styles for shadows and full-height options. […] I feel as though this really presents what’s possible with modern WordPress.”

For more detail, here is its demo site and full review of Brian’s Bright Mode theme.

Designing complex layouts with block editor

Recently, WordPress launched a new block editor designed landing homepage and a download page. The announcement attracted mixed reactions from its readers, including from Matt Mullenweg (Automattic) who commented on the 33-days taken to design and launch such a “simple page”. You can find additional behind the scene discussions here.

In response, Jamie Marsland of Pootlepress created this YouTube video where he reproduces a nearly identical homepage in nearly 20 minutes.

Commenting on Marsland video, Sarah Gooding of WP Travern writes: “He is what one might describe as a power user with the block editor. He can quickly shuffle rows, columns, and groups around, adjusting padding and margins as necessary, and assign each section the corresponding color for the design. At this point, this is not something most average WordPress users could do.”

Though the block editor has come a long way, there are still growing pain points to most theme developers and ordinary users to create and design complex layouts with it.

Adding enhancement to TT2 Gopher blocks

In this section, I will walk you through how I added enhancements to the TT2 Gopher Blocks theme that I referenced in my previous article. Inspired by cover blocks from themes that I described earlier, I wanted to add three cover templates (author, category, and single-cover) to the theme.

While browsing websites, we notice two types of cover headers. The mostly observed header is cover section blended with the site header (site title and top navigation) into the cover block (e.g., Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). We also find header cover section which is not blended with site header and positioned just underneath, such as this BBC Future website. For TT2 Gopher blocks theme, I opted for the latter.

Creating cover header patterns

First, let’s create cover header patterns for author, single, and others (categories, tags) templates using cover blocks. Then we will convert them into patterns (as described here previously) and call the respective header cover patterns into the templates.

If you are familiar to working with the block editor, design your header section using cover blocks in the site editor and then convert the cover header code into patterns. However, if you are not familiar with FSE editor, then the easiest way is to copy patterns from the patterns directory in a post, make necessary modification and convert it into a pattern.

In my previous CSS-Tricks article, I discussed in detail on creating and using block patterns. Here is a brief overview of the workflow that I am using to create the single post cover header pattern:

Single post cover header pattern

Step 1: Using FSE interface, let’s create a new blank file and start building block structure as shown on the left panel.

Screenshot of the WordPress UI with the Full Site Editor. A block is being assembled with post date, categories, and post title.

Alternatively, this could be done in a post or page first, and then copy and paste the markup into a pattern file, later.

Step 2: Next, to covert the above markup into a pattern, first we should copy its code markup and paste into a new /patterns/header-single-cover.php in our code editor. We should also add required pattern file header markup (e.g., title, slug, categories, inserter, etc.).

Here is the entire code of the /patterns/header-single-cover.php file:

<?php
    /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
    <!-- wp:cover {"url":"https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg","id":100,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
    <div class="wp-block-cover alignfull is-light" style="margin-top:0px;margin-bottom:0px;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-100" alt="" src="https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg" style="object-position:40% 37%" data-object-fit="cover" data-object-position="40% 37%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"10px"}},"textColor":"base","layout":{"wideSize":"800px"}} -->
    <div class="wp-block-group has-base-color has-text-color has-link-color"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"primary","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"small"} -->
    <div class="wp-block-group has-primary-color has-text-color has-small-font-size"><!-- wp:post-date {"textColor":"foreground"} /-->
    
    <!-- wp:paragraph -->
    <p>|</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"foreground","fontSize":"max-60"} /--></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

Step 3: For this demo, I have used this image from photos directory as a filler background image, and applied the Midnight duotone color. To use post featured image dynamically, we should add "useFeaturedImage":true in the cover block by replacing the above filler image link just before the "dimRatio":50 such that the line 10 should look like the following:

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->

Alternatively, the filler image could also be changed by clicking Replace and selecting Use featured image option:

Screenshot of the WordPress UI with ‘Replace’ and ‘Use featured image’ selected.

Now, the header cover patterns should be visible in the patterns inserter panel for use anywhere in the templates, posts, and pages.

Archive cover headers

Inspired by this WP Tavern post and a step-by-step walkthrough to create an author template header, I wanted to create a similar cover header and add to TT2 Gopher theme, too.

First, let’s create the archive cover header pattern for author.html the template as well, following the above workflow. In this case, I am creating this in a new blank page, by adding blocks (as shown below in list view):

Screenshot of the WordPress UI for an Author page using a single post header cover.

In the background for the cover, I used the same image used in the single post header cover.

Because we would like to display a short author biography on the author block, a biographical statement should also be added to the user profile page, or else a blank space will be displayed in the front-end.

The following is the markup code of the header-author-cover, that we will use pattern, in the next step:

    <!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":200,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
    <div class="wp-block-cover alignfull is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
    <div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
    
    <!-- wp:group -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
    <div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"foreground","fontSize":"large"} -->
    <p class="has-foreground-color has-text-color has-large-font-size">Published by:</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"foreground"} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-author-biography {"textColor":"foreground","fontSize":"small"} /-->
    
    <!-- wp:separator {"backgroundColor":"foreground"} -->
    <hr class="wp-block-separator has-text-color has-foreground-color has-alpha-channel-opacity has-foreground-background-color has-background"/>
    <!-- /wp:separator --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

To covert the markup into a header-author-cover pattern, we should add the required pattern file header markup as described earlier. By editing the header-author-cover.php pattern, we can create similar header covers for tags, taxonomy, and other custom templates.

The header-category-cover.php pattern for my category.html template is available on GitHub.

Creating Templates with header cover blocks

WordPress 6.0 and the recent Gutenberg 13.7 extended template creating features into the block editor, thus making it possible for many WordPress users, without deep knowledge of coding, to create their customized templates.

For more detailed information and use cases, here is a thorough customization note by Justin Tadlock.

Block editor allows creating various types of templates, including cover templates. Let’s briefly overview how combining cover block and post featured image block with new template UI makes easy to create various types of cover custom templates even with no or low coding skills.

Screenshot of the WordPress UI displaying available templates provided by TT2 Gopher Blocks – Single, Page, Index, Home, 404, Blank, and Archive.

Creating templates has been made much easier with Gutenberg 13.7. How to create block templates with codes and in site editor is described in the Theme handbook and in my previous article.

Author template with cover block

Top (header section) markup of the author.html template is shown below (line 6):

    <!-- wp:template-part {"slug":"header-small-dark","theme":"TT2-GOPHER-V2","tagName":"header"} /-->
    
    <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0px"},"padding":{"bottom":"80px"},"blockGap":"0px"}},"className":"site-content"} -->
    <main class="wp-block-group site-content" style="margin-top:0;margin-bottom:0px;padding-bottom:80px">
    
        <!-- wp:pattern {"slug":"tt2gopher/header-author-cover"} /-->
    
    ...
    ...
    ...
    <!-- /wp:group -->
    ...

Here are screenshots of cover headers for the author.html and category.html templates:

Screenshot of Author Page header (left) with author name, avatar, and biography. And screenshot of Category Page header (right).

The entire code for both templates is available on GitHub.

Single post with cover block

To display cover block in our single post, we have to call the header-cover-single pattern below the header section (line 3):

    <!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
    
     <!-- wp:pattern {"slug":"tt2gopher/header-cover-single"} /-->
    
    <!-- wp:spacer {"height":32} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    ....
    ....
    ....

Here is a screen capture showing the front-end view of the single post with the header cover section:

Screenshot of TT2 Gopher Blocks Single Post with Header Cover Section Pattern.

The entire single-cover.html template is available on GitHub.

You can find additional step-by-step walkthrough tutorials on creating a hero header post section and using post featured image background cover blocks on WP Tavern and Full Site Editing website.

There you have it!

Helpful Resources

Featured image cover block

Blog posts


Even though the block themes, in general, are getting lots of pushback from WordPress community members, in my opinion, they are the future of WordPress, too. With block themes, amateur theme authors, without the deep coding skills and mastery of PHP and JavaScript languages, can now create themes with complex layouts with a hero cover section as described in this article combined with patterns and style variations.

As an early Gutenberg user, I couldn’t be more excited with the new theming tools like create block theme plugin and others which allow theme authors to achieve the following directly from block editor UI without writing any code:

  • (i) create
  • (ii) overwrite theme files and export
  • (iii) generate blank or a child theme, and
  • (iv) modify and save style variation of the current theme

Additionally, the recent iterations of the Gutenberg plugin allow enabling fluid typography and layout alignments and other stylistic controls using only theme.json file without JavaScript and a line of CSS rules.

Thank you for reading and share your comments and thoughts below!


How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

How I Made an Icon System Out of CSS Custom Properties

September 22nd, 2022 No comments

SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.

There are many ways to include an SVG on a page and each technique has its own advantages and disadvantages. For the last couple of years, I have been using a Sass function to import directly my icons in my CSS and avoid having to mess up my HTML markup.

I have a Sass list with all the source codes of my icons. Each icon is then encoded into a data URI with a Sass function and stored in a custom property on the root of the page.

TL;DR

What I have for you here is a Sass function that creates a SVG icon library directly in your CSS.

The SVG source code is compiled with the Sass function that encodes them in data URI and then stores the icons in CSS custom properties. You can then use any icon anywhere in your CSS like as if it was an external image.

This is an example pulled straight from the code of my personal site:

.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}

Demo

CodePen Embed Fallback

Sass structure

/* All the icons source codes */
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);

/* Sass function to encode the icons */
@function svg($name) {
  @return url('data:image/svg+xml, #{$encodedSVG} ');
}

/* Store each icon into a custom property */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* Append a burger icon in my button */
.menu::after {
  content: var(--svg-burger);
}		

This technique has both pros and cons, so please take them into account before implementing this solution on your project:

Pros

  • There are no HTTP requests for the SVG files.
  • All of the icons are stored in one place.
  • If you need to update an icon, you don’t have to go over each HTML templates file.
  • The icons are cached along with your CSS.
  • You can manually edit the source code of the icons.
  • It does not pollute your HTML by adding extra markup.
  • You can still change the color or some aspect of the icon with CSS.

Cons

  • You cannot animate or update a specific part of the SVG with CSS.
  • The more icons you have, the heavier your CSS compiled file will be.

I mostly use this technique for icons rather than logos or illustrations. An encoded SVG is always going to be heavier than its original file, so I still load my complex SVG with an external file either with an tag or in my CSS with url(path/to/file.svg).

Encoding SVG into data URI

Encoding your SVG as data URIs is not new. In fact Chris Coyier wrote a post about it over 10 years ago to explain how to use this technique and why you should (or should not) use it.

There are two ways to use an SVG in your CSS with data URI:

  • As an external image (using background-image,border-image,list-style-image,…)
  • As the content of a pseudo element (e.g. ::before or ::after)

Here is a basic example showing how you how to use those two methods:

CodePen Embed Fallback

The main issue with this particular implementation is that you have to convert the SVG manually every time you need a new icon and it is not really pleasant to have this long string of unreadable code in your CSS.

This is where Sass comes to the rescue!

Using a Sass function

By using Sass, we can make our life simpler by copying the source code of our SVG directly in our codebase, letting Sass encode them properly to avoid any browser error.

This solution is mostly inspired by an existing function developed by Threespot Media and available in their repository.

Here are the four steps of this technique:

  • Create a variable with all your SVG icons listed.
  • List all the characters that needs to be skipped for a data URI.
  • Implement a function to encode the SVGs to a data URI format.
  • Use your function in your code.

1. Icons list

/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.8 18.92" width="24.8" height="18.92"><path d="M23.8,9.46H1m22.8,8.46H1M23.8,1H1" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/></svg>'
);

2. List of escaped characters

/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
  ' ': '%20',
  ''': '%22',
  '"': '%27',
  '#': '%23',
  '/': '%2F',
  ':': '%3A',
  '(': '%28',
  ')': '%29',
  '%': '%25',
  '<': '%3C',
  '>': '%3E',
  '': '%5C',
  '^': '%5E',
  '{': '%7B',
  '|': '%7C',
  '}': '%7D',
);

3. Encode function

/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
  // Check if icon exists
  @if not map-has-key($svg-icons, $name) {
    @error 'icon “#{$name}” does not exists in $svg-icons map';
    @return false;
  }

  // Get icon data
  $icon-map: map-get($svg-icons, $name);

  $escaped-string: '';
  $unquote-icon: unquote($icon-map);
  // Loop through each character in string
  @for $i from 1 through str-length($unquote-icon) {
    $char: str-slice($unquote-icon, $i, $i);

    // Check if character is in symbol map
    $char-lookup: map-get($fs-escape-chars, $char);

    // If it is, use escaped version
    @if $char-lookup != null {
        $char: $char-lookup;
    }

    // Append character to escaped string
    $escaped-string: $escaped-string + $char;
  }

  // Return inline SVG data
  @return url('data:image/svg+xml, #{$escaped-string} ');
}		

4. Add an SVG in your page

button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}

If you have followed those steps, Sass should compile your code properly and output the following:

button::after {
  content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}		
CodePen Embed Fallback

Custom properties

The now-implemented Sass svg() function works great. But its biggest flaw is that an icon that is needed in multiple places in your code will be duplicated and could increase your compiled CSS file weight by a lot!

To avoid this, we can store all our icons into CSS variables and use a reference to the variable instead of outputting the encoded URI every time.

We will keep the same code we had before, but this time we will first output all the icons from the Sass list into the root of our webpage:

/**
  * Convert all icons into custom properties
  * They will be available to any HTML tag since they are attached to the :root
  */

:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

Now, instead of calling the svg() function every time we need an icon, we have to use the variable that was created with the --svg prefix.

button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}

Optimizing your SVGs

This technique does not provide any optimization on the source code of the SVG you are using. Make sure that you don’t leave unnecessary code; otherwise they will be encoded as well and will increase your CSS file size.

You can check this great list of tools and information on how to optimize properly your SVG. My favorite tool is Jake Archibald’s SVGOMG — simply drag your file in there and copy the outputted code.

Bonus: Updating the icon on hover

With this technique, we cannot select with CSS specific parts of the SVG. For example, there is no way to change the fill color of the icon when the user hovers the button. But there are a few tricks we can use with CSS to still be able to modify the look of our icon.

For example, if you have a black icon and you want to have it white on hover, you can use the invert() CSS filter. We can also play with the hue-rotate() filter.

CodePen Embed Fallback

That’s it!

I hope you find this little helper function handy in your own projects. Let me know what you think of the approach — I’d be interested to know how you’d make this better or tackle it differently!


How I Made an Icon System Out of CSS Custom Properties originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

5 Ways That UX Developers Influence SEO 

September 21st, 2022 No comments

User Experience is a crucial consideration for any web developer or designer; the only way to ensure that you’re delivering a successful website is to ensure that the end-user or customer will feel comfortable using it. 

A strong user experience increases your client’s chances of successful audience engagement and conversions.

What you might not realize, however, is that the strategies you use to enhance UX as a web developer or designer can also influence how the search engines respond to a website. 

Though many designers assume that SEO (Search Engine Optimization) is the work of a copywriter or content producer, there are design elements to consider too. 

After all, the definition of optimization is “the action of making the best version of a resource.”

So, how are UX and SEO connected?

Adding UX to a Successful SEO Strategy

SEO used to be easy. To stand out on the search results, you just needed to stuff a page full of as many keywords and phrases as possible. Now, it’s a little more complicated. 

Leaders in search engine development, like Google and Bing, know that they need to offer their customers excellent experiences to keep them. In this new experience-focused landscape, SEO and UX share common goals. 

Search engines don’t just want to provide customers with any answers to their questions. Instead, Google and its competitors are using everything from artificial intelligence to machine learning algorithms to ensure that search results are accurate, relevant, and engaging. 

In the same way, user experience is about providing users with easy access to the information and resources they want. 

Now that SEO is a multi-disciplined approach, UX is just one of the essential tools that makes it possible for developers to optimize their websites properly. 

Where UX Developers Influence SEO 

There are plenty of connections between UX and site indexability

We all know that since 2018, site speed has become a crucial ranking factor for companies in search of better search results. As a developer, it’s up to you to ensure that there aren’t too many elements weighing a website down that would prevent it from delivering fast results. 

Bounce rate is another critical factor in search engine ranking algorithms. When customers click on a website, Google wants to see that they get the answers they want. If your navigation is difficult to understand, or the correct information isn’t easy to see on a page, end-users will just hit the back button. 

Let’s take a closer look at how developers can influence SEO with their UX strategies. 

1. Site Navigation and Ease of Use

It’s no secret that today’s digital consumers crave easy-to-use sites.

A complex website with pages ranking for different terms might seem like an excellent idea for SEO. However, from a UX perspective, the easier it is to navigate your website, the more your end-users will benefit. 

According to a study from Ahrefs, well-optimized pages that rank for several keywords can be more beneficial than dozens of pages ranking for similar terms. At the same time, if the search engines have difficulty crawling all your pages due to a poor site navigation strategy, then some pages won’t get indexed. 

So, how do you improve navigation and SEO at once? Follow the proper structure for your site first, categories and subcategories on the retail page help customers find exactly what they need. A solid internal linking structure allows the crawlers to examine your website and index each essential page individually.

Keep navigation simple when designing a website for both UX and SEO potential. 

2. User-Friendly Page Layouts

There are countless cases where poor layout design and formatting disrupts SEO potential. For example, cluttering a page with too much information makes it tougher to read and index. At the same time, if your pages aren’t attractive and easy to navigate, customers are more likely to hit the back button. 

If customers come to a website and immediately leave it again, this tells the search engines that they’re not finding what they need on those pages. That means Google will bump you to a lower position on the SERPs. 

So, how do you make your layouts more UX and SEO-friendly?

  • Get your category pages right: Say you’re creating a blog page for your client. They want to list all of their blogs on one main page while linking to separate locations for each article. A design that puts a large chunk of content from each blog on the main page can be problematic for UX and SEO. It means your customers have to scroll further to find what they need. At the same time, the search engines never know which words to rank that main page for. On the other hand, listing blogs on smaller cards, as Fabrik does in this example, makes sorting through content easier. 
  • Leverage headers and tags: Your customers and the search engines habitually “scan” your pages. When trying to improve UX and SEO simultaneously, you must ensure that it’s easy to find crucial information quickly. Header 1 or H1 tags can help by showing your audience your website’s critical sections. Title tags also give search engines more information on the term you want to rank for. Organizing your content into a structure that draws the eye down the page also means your customers are more likely to stay on your website for longer. That shows the search engines that you have quality, relevant content. 
  • Make the most of images and videos: Visual media isn’t just an excellent way to engage your audience. With videos and pictures, you can convey more vital information in a quick and convenient format. This leads to greater satisfaction from your audience from a UX perspective. However, visual content is also great for SEO. You can optimize every image with alt text and meta descriptions. That means you have a higher chance of ranking both in the main search results and the image searches on Google. 

3. Using Search Data to Inform Site Architecture

Today, SEO is less about building hundreds of landing pages for individual queries. Now, it’s more important to take a simple, de-cluttered approach with your website. SEO can determine what kind of architecture you need to create for a successful website. 

For instance, say you wanted to rank for eCommerce SEO. There are tons of related words that connect to that primary search term. Rather than making dozens of different pages that try to rank for distinct phrases, you can cover a lot of other ideas at once with a larger, more detailed piece of content. 

If a topic is too big to cover everything on a single page, then you might decide to create something called “pillar” content out of your main terms. This involves using one main page where you discuss all of the topics you will cover. Then, you design several smaller sub-pages that link back to that central pillar. 

Once again, this helps the search engines to navigate your website and index your pages while assisting the customers in finding the correct information. At the same time, you combine more pages on a website and remove anything that might be detracting from your site’s authority or not offering enough value. 

4. Improving Website SERP Listings

It’s easy to forget as a developer that a customer’s first experience with a website won’t always happen on that site’s homepage. Usually, when your customers are looking for solutions to a problem, they’ll find your website on the search engine results instead. 

This means that you need to ensure that you make the right impression here:

There are a few ways that developers can ensure the search engine listings they create for their clients are up to scratch. For instance, a reasonable title tag for each page that includes appropriate keywords is excellent for SEO and UX. A title tag lets your customers know they’re in the right place and helps them find the information they need. 

Remember, around eight out of ten users on search engines say that they’ll click a title if it’s compelling. 

Another component you have control over as a developer or designer is the “rich snippet.” Rich snippets are the informative chunks of content that Google adds to a search listing to help it stand out. You can use rich snippet plugins on a website to tell Google what kind of extra information you want to include on a page. 

For instance, you might want a company’s ratings to show up on your search results, so customers can see how trustworthy they are:

5. Local Business Rankings

When you’re creating a website for a company, it’s easy to forget about local rankings. We see the digital world as a way of reaching countless people worldwide. Local orders are easier to overlook when you have a global scope to work with. 

However, as a developer, you can boost a company’s chances of attracting the right local audience and boosting its credibility. For instance, you can start by ensuring that the correct directory information appears on your client’s website and social media profiles.

Another option is to create dedicated location pages for each area the company serves. This will make it easier for clients to find the contact details they need for their specific location. 

At the same time, pages that have been carefully optimized to rank for specific locations will earn more attention, specifically from search engines. The more of the search engine landscape your client can cover, the more chances they have to attract new customers and leads. 

Combing SEO and UX

In a world where experience is crucial for every business, it’s no wonder that UX and SEO are blending more closely together. There are a lot of areas where SEO and UX work in harmony together if you know where to find them. Improving your client’s SEO ranking with UX doesn’t just mean ensuring that their pages load quickly anymore. 

Simple strategies, like making sure a call-to-action button is clickable on a mobile page, can simultaneously boost a website’s UX potential and SEO performance. At the same time, adding images and alt text to a website provides search engines with more information while adding context to your content. 

The key to success is understanding how SEO and UX work together. If you look at SEO and UX as part of the same comprehensive strategy to give end-users a better online experience, achieving the right design goals is much easier. 

Of course, just like any strategy, it’s also worth making sure that you take the time to track the results of your UX and SEO campaigns. Examine which systems help you, and examine customers from an SEO perspective with design and development strategies.

 

Features image by gstudioimagen on Freepik

Source

The post 5 Ways That UX Developers Influence SEO  first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

The Best WooCommerce Themes for Your Website

September 19th, 2022 No comments

Not just any old plan or approach will do when opening a new business, nor will it suffice when building and launching an online store – even if the underlying business is already a successful one.

It takes the right tools and design philosophy to build a successful online store – things not every WooCommerce WordPress theme is apt to have.

When you do come across a set of great WooCommerce WordPress themes that offers the optimal designs and settings to get the job done, you still may have to spend a little time narrowing the list down until you find one that suits your needs perfectly.

That’s the situation you are facing here. You have the 10 best WooCommerce themes on the market. At least one of them will have your name on it.

  1. BeTheme | The Biggest WordPress & WooCommerce Theme

With its more than 40 powerful core features, BeTheme has every tool, setting, and option you need to build any website type you want. BeTheme has addressed the special needs required to build an online store as well.

  • First, there’s BeBuilder Woo. This absolute gem of a WooCommerce-oriented tool features collections of single product layouts, WooCommerce theme options, and shopper-centric design elements.
  • BeBuilder is another powerful tool you’ll be happy to have at your fingertips. BeBuilder is the fastest and most flexible page builder for WordPress, and when combined with BeBlocks gives you a ton of design options and flexibility to work with.
  • Be’s Header Builder makes creating responsive headers a piece of cake rather than an unpleasant chore thanks to Header Builder 2.0. This drag and drop builder helps you create whatever you want in no time at all.
  • Be’s 650+ pre-built websites also deserve special notice. Their embedded UI functionality can save you tons of time.

Click on the banner. There is much, much more to see.

  1. WoodMart

When it gets down to having the right design philosophy in mind, WoodMart is hard to beat. A mere glimpse of their website says a lot about what you could accomplish when using this easy-to-set-up WooCommerce theme.

WoodMart gives you the following to work with:

  • Pre-built demo websites designed to help you get your online store building project off to a fast start,
  • Elementor and WPBakery page-building support – the most popular WordPress page builders on the market.
  • 400 pre-made templates you can use to create your pages or prototype them if you’re not quite sure of how you want them to appear.
  • A full Ajax shop and an Ajax Quick Shop. Smooth-running product search and checkout designs save customers time and correspondingly increases conversion rates.

Click on the banner to catch a glimpse of this all-in-one solution’s capabilities. You’ll want to dig deeper.

  1. Rey Theme

eCommerce rests on 4 pillars – filtering, searching, navigation, and presentation. Rey brilliantly addresses each of these in its design, innovation, and performance and easily passes them on into your online shop.

Rey does this with –

  • The Elementor page builder that Rey has spiced up with extra eCommerce oriented features and extensions
  • Ajax navigation options including smart search to help customers find what they want quickly, leading to higher conversion rates
  • Predesigned plug and play pages, a cart page with a progress bar and discounts – again to boost conversion rates
  • Headers designed specifically for eCommerce applications with a focus on mega menus, caller headers, and wish lists

Rey is SEO optimized to rank better on organic search so you can get more customers without spending more on advertising

Click on the banner to learn more.

  1. Uncode – Creative & WooCommerce Theme

Uncode is a pixel-perfect multiuse WordPress theme that creatives, businesses, and agencies have found to be a perfect fit for their eCommerce needs.

  • Enjoy the same performance that 100.000+ buyers have experienced.
  • Experience the joy of working with Uncode’s souped up Page Builder, professional WooCommerce shop design features, and its Wireframes plugin and 550+ section templates.

The best way to fully grasp Uncode’s capabilities is to view its gallery of user-created websites.

  1. TheGem – Creative Multi-Purpose WooCommerce Theme

This best-selling WooCommerce theme gives you the ultimate WooCommerce toolbox to build a modern online shop. TheGem’s unlimited customizations serve to improve CTR through its use of unique layouts and designs.

In TheGem’s WooCommerce toolbox you’ll find –

  • 400+ pre-built designs plus the Product Builder, Cart & Checkout Builder, Ajax filters, and more
  • TheGem Blocks with its 500+ pre-built WooCommerce-oriented page sections
  • Elementor and WPBakery page builder compatibility
  • one-click optimization for fast loading and optimal conversions.
  1. Total WordPress Theme

This aptly named multipurpose theme has the tools and flexibility you need and is designed with easy website building in mind.

Total’s key features include –

  • Total integration with WooCommerce
  • Professionally-crafted selections of ready-made section templates, site-builder elements, and quick-start demos
  • WooCommerce styling options for colors, fonts, cart icons, social sharing, product pages, and more.
  • An extended version of the WPBakery page builder.
  1. Jupiter X

The Jupiter X2 update introduces advanced segmentation and personalization to increase engagement and conversion in WooCommerce stores.

These advanced features include a full-site editing layout builder and automated discounts, personalized coupons and checkout notices that enable –

  • Showing personalized content to different audiences
  • Showing personalized product loops based on customer shopping behaviour
  • Creating personalized coupons, applying automated discounts, and showing smart checkout alerts
  • Introducing smart promotional campaigns based on customer journey state and loyalty.
  1. Avada Theme

What does Avada have that other WooCommerce WordPress themes may not?

  • Recognition as the #1 selling theme for the past 6+ years.
  • The ability to create a shopping experience that is both intuitive and gorgeous.
  • All the options you could want in a theme with custom settings for each and every page.
  • Fusion Builder and the Fusion Core toolbox of powerful tools and premium plugins,
  • 50+ design elements with hundreds of options.
  1. Hongo – Modern & Multipurpose WooCommerce WordPress Theme

The Hongo modern multipurpose WordPress theme is rich in features created with building WooCommerce stores in mind.

Features like –

  • 12 stunning, impressive, and unique store demos, 10 modern styles, and 8 elegant product page styles to get your creative juices flowing and beautifully showcase your products
  • quick view, compare products, wish list, catalog mode, advanced filters, color swatches, product tabs, product videos and more
  • 200 + creative elements and a library of ~250 templates.
  1. XStore – Best WordPress WooCommerce Theme for eCommerce

The XStore WooCommerce theme has already won the praise of 65,000+ delighted customers.

XStore –

  • is built for speed; quick site loading gives visitors more enjoyable experiences
  • works with Elementor and WPBakery, the best page builders on the market
  • features an outstanding collection of 120+ ready-to-customize shops together with 500+ pre-built blocks
  • a live Ajax theme option and $510 worth of “must have” plugins.

In other words, everything you need.

*******

It takes using a theme with the right tools and design philosophy to build a successful online store, plus working with a WooCommerce WordPress theme that has some great ideas to offer is a great deal quicker than trying to build a store from scratch.

When you do come across a set of WordPress themes with WooCommerce that offers the optimal designs and settings to get the job done, like those listed here, you’ll still need to spend a little time finding one that best suits your needs.

Hopefully, you already have a good idea as to which one that might be.

Read More at The Best WooCommerce Themes for Your Website

Categories: Designing, Others Tags:

Adobe Has Acquired You

September 19th, 2022 No comments

There were mixed reactions on Thursday morning when Adobe announced it had acquired Figma.

Excited press releases extolling the benefits of the “collaboration” followed the news. Dylan Field, founder and CEO of Figma, said: “There is a huge opportunity for us to accelerate the growth and innovation of the Figma platform with access to Adobe’s technology…”

The reaction from the design community has been a little less enthusiastic.

The problem for the design industry is that we’ve been here before. The acquisition of Macromedia followed a period in which Adobe tried to compete, failed to update its legacy code, lost the battle, and purchased the victor. You only need to look at the number of former Macromedia products in Adobe’s stable (zero) to see where Figma’s heading.

Figma has grown faster than any of its rivals in the last eight years. It is, of course, easier to grow when you start at zero. But there’s no denying Figma is a well-managed business and probably a good investment — if not worth the $20bn that Adobe reportedly paid.

Figma’s technology will give Adobe a leg-up in the collaborative design stakes, where it is clearly lacking. And Adobe’s resources will iron out some of the kinks in Figma, especially around typography, which is, if we’re honest, a bit hacky in places.

Adobe will provide a good home (we hope) for the Figma team, who will have the opportunity for career advancement in a much wider pool of development teams.

And, of course, Figma’s annual revenue will begin to trickle into Adobe’s vault — although it may be some time before it makes a dent in that $20bn hole.

But Adobe didn’t buy Figma for its business model, collaborative technology, team, or revenue stream. Adobe bought Figma’s users, all four million of them.

Adobe‘s approach to design software is upselling. It lures you in with free apps, and when you’re engaged, it integrates them with other parts of its ecosystem until suddenly, without meaning to, you’ve agreed to a Creative Cloud subscription.

Adobe was losing customers to a competitor. And more importantly, due to Figma’s free-use approach for individuals, it was losing young customers to a competitor. If it hadn’t bought Figma, Adobe would have needed to invest heavily in its own products while providing them to freelancers for free; that isn’t viable for a company with as many commitments as Adobe.

Yes, it is entirely accurate to say that competition drives innovation, and with fewer competing apps, there is less need for companies like Adobe to build high-quality, reliable products. However, it is also true to say that a lack of competition creates opportunities for new apps.

Somewhere out there, in a dorm room, or a basement, or on a kitchen table, someone is working on Adobe’s next big acquisition. It’s probably an AR design app; we need a few more of those.

For Figma, the next 12 months will be bright as Adobe works to retain the customers it’s bought. Within five years, you’ll probably need an Adobe Fonts subscription and a Photoshop plugin to use Figma. In ten years, it will be stored in a code archive next to Freehand.

Some designers will turn to Sketch; others will turn to Affinity; some will shrug and keep using Figma; others will shrug and keep using XD.

If an app is intrinsic to your design work, it’s probably time to switch apps. Your skills are transferable. I’ve switched apps many times; some I loved, some I just needed. I’ve never encountered an app that improved my work, although plenty have improved my mood while working.

Figma took a great approach and will continue to be great until it isn’t. Tools come and go, Adobe’s acquisitions team, it appears, is eternal.

 

 

Featured image uses photos by Afrika ufundi, Andrea Piacquadio, Andrea Piacquadio, Anna Tarazevich, cottonbro, fauxels, Ketut Subiyanto, Mikhail Nilov, Moose Photos, Pavel Danilyuk, Pavel Danilyuk, Polina Tankilevitch, Tima Miroshnichenko.

Source

The post Adobe Has Acquired You first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Making a Real-Time Clock With a Conic Gradient Face

September 19th, 2022 No comments
Black Apple Watch on a person's wrist showing a deep purple conic gradient face.

Gradients have been a part of the CSS spectrum for quite some time now. We see a lot of radial and linear gradients in a lot of projects, but there is one type of gradient that seems to be a bit lonely: the conic gradient. We’re going to make a watch face using this type of gradient.

Working with conic gradients

What we’re making consists of a gradient with color transitions rotated around a center point and can have multiple color values. For this clock to work, we will also be using the angle value of a conic gradient which defines the rotation or starting point. The angle is defined by using a from value.

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

What is interesting about this, is that a starting angle can have a negative value in CSS, which will come in handy later.

A simple elegant example of a conical gradient:

CodePen Embed Fallback

Building our basic clock

Let’s start by adding some HTML for the clock and the hands:

Let’s create some default styling for our clock. For this to work properly, we will update CSS variables with JavaScript later on, so let’s scope these variables inside our .clock selector. For easy tweaking, let’s add the colors of the hands as well.

.clock {
  /* general clock vars */
  --hour-hand-color: #000;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #000;
  --minute-hand-degrees: 0deg;
  --second-hand-color: hotpink;
  --second-hand-degrees: 0deg;

  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  border: 7px solid #000;
}

/* clock hands */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 4px;
  margin-left: -2px;
  background: var(--second-hand-color);
  border-radius: 6px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
  transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}

This sets us up with the general styling we need for the clock. We’ve set transform-origin on the hands so that they properly rotate around the face of the clock. There are also a few custom properties in there to set angles on the hands that we’ll update with JavaScript to get the timing just right so that each hand maps to seconds, minutes, and hours accordingly.

Here’s what we have so far:

CodePen Embed Fallback

Alright, let’s move on to updating those custom properties!

Adding the JavaScript for our basic clock

First off, we’re going to target our clock and create a function:

const clock = document.getElementById("clock");
function setDate() {
  // Code to set the current time and hand angles.
}
setDate();

Inside of our function we’re going to fetch the current time using the Date() function to calculate the correct angle of the hands:

const now = new Date();
const secondsAngle = now.getSeconds() * 6; 
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;

Here is how this calculation works:

  • Seconds: We take 60 seconds and multiply it by 6, which happens to be 360, the perfect number of angles in a full circle.
  • Minutes: Same as seconds, but now we add the seconds angle and divide it by 60 to increase the angle just a little bit within the minute for a more accurate result.
  • Hours: First, we calculate the remainder of the hour and divide it by 12. Then we divide that remainder by 12 again to get a decimal value we can multiply by 360. For example, when we’re at the 23rd hour, 23 / 12 = remain 11. Divide this by 12 and we get 0.916 which then gets multiplied by 360 for a grand total of 330. Here, we will do the same thing we did with the minutes and add the minutes angle, divided by 12, for a more accurate result.

Now that we have our angles, the only thing left to do is to update the variables of our clock by adding the following at the end of our function:

clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");

Last, but not least, we will trigger the function with an interval of a second to get a working clock:

const clock = document.getElementById("clock");
function setDate() {
  // etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();

See the working demo of our basic clock:

CodePen Embed Fallback

Applying this to a conical gradient

OK, so the hands of our clock are working. What we really want is to map them to a conical gradient that updates as the time changes. You may have seen the same effect if you have an Apple Watch with the “Gradient” face active:

Credit: Macworld

To do this, let’s start by updating our .clock element with a conic gradient and two custom properties that control the starting and ending angles :

.clock {
  /* same as before */

  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;

  /* same as before */

  background: 
    conic-gradient(
      from var(--start),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.5) var(--end),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.7)
  );
}

You can play around with this a bit to style it just the way you like it. I added some extra colors in the gradient to my liking, but as long as you have a starting point and an ending point, you’re good to go.

CodePen Embed Fallback

Next up, we will update our setDate() function so that it updates the variables for our starting and ending points on the conic gradient. The starting point will be our seconds hand, which is easy to find because it will be the same as the angle of our minutes. To make this end at the hours hand, we should make our ending point the same as the hourAngle variable in the script, but subtract our starting point from it.

let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;

Now we can update our variables with JavaScript again:

clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");

It looks like we could be done at this point, but there is a catch! This calculation works fine as long as the minutes hand has a smaller angle than the hours hand. Our conic gradient will get messy the moment when the minutes hand has moved past it. To fix this, we will use a negative value as a starting point. Luckily, it’s easy to spot when this happens. Before updating our variables we’ll add the following:

if (minsAngle > hourAngle) {
  startPosition = minsAngle - 360;
  endPosition = hourAngle - startPosition;
}

By subtracting 360 from our minutes angle, we are able to set a negative value for our startposition variable. Because of this negative starting point, our end position should be updated by the hour angle, subtracted by the starting position.

There we go — now the hour and minute hands are set to gradient angles:

CodePen Embed Fallback

That’s it! But don’t let that stop you from taking this even further. Create your own styles and share them with me in the comments so I can check them out.. Here is a little inspiration to get you going:

CodePen Embed Fallback

Making a Real-Time Clock With a Conic Gradient Face originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Exciting New Features in Safari 16

September 14th, 2022 No comments

Apple has released an OS update. Packaged in with it is the latest version of Safari, 16.

Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.

For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.

Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.

CSS Container Queries

The most exciting addition to Safari 16 is CSS Container Queries.

It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.

Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.

Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.

Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design—all without caring what size the whole viewport is.

This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)

The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.

CSS Subgrid

Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.

CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.

CSS Subgrid is likely to be a practical solution within 18 months.

AVIF Support

AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.

AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.

AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.

Enhanced Animation

Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.

Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.

Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.

Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.

Web Inspector Extensions

Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.

Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.

Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.

Improved Accessibility

Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.

When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.

Further gains in this field mean that Safari continues to be an essential tool for QA tests.

Reduced Resets

Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.

For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.

Safari 16 has reportedly “Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.

Source

The post Exciting New Features in Safari 16 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags: