Replace JavaScript Dialogs With the New HTML Dialog Element

February 8th, 2022 admin No comments

alert()

Showing how to replace JavaScript dialogs that use the confirm method. The modal is white against a gray background. The content reads please do you want to continue? and is followed by a black link that says cancel, and a blue button with a white label that says OK. — `confirm()`

Showing how to replace JavaScript dialogs that use the prompt method. The modal is white against a gray background. The content reads the meaning of life, and is followed by a a text input filled with the number 42, which is followed by a black link that says cancel, and a blue button with a white label that says OK. — `prompt()`

To overwrite these styles and use your own, add a class in dialogClass,

dialogClass: 'custom'

…then add the class in CSS, and update the CSS custom property values:

.custom {
  --dlg-accept-bgc: hsl(159, 65%, 75%);
  --dlg-accept-c: #000;
  /* etc. */
}

A custom dialog example

What if the standard alert(), confirm() and prompt() methods we are mimicking won’t do the trick for your specific use case? We can actually do a bit more to make the more flexible to cover more than the content, buttons, and functionality we’ve covered so far — and it’s not much more work.

Earlier, I teased the idea of adding a sound to the dialog. Let’s do that.

You can use the template property of the settings object to inject more HTML. Here’s a custom example, invoked from a

You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element.

Let me explain.

I recently worked on a project with a lot of API calls and user feedback gathered with JavaScript dialogs. While I was waiting for another developer to code the component, I used alert(), confirm() and prompt() in my code. For instance:

const deleteLocation = confirm('Delete location');
if (deleteLocation) {
  alert('Location deleted');
}

Then it hit me: you get a lot of modal-related features for free with alert(), confirm(), and prompt() that often go overlooked:

It’s a true modal. As in, it will always be on top of the stack — even on top of that
with z-index: 99999;.
It’s accessible with the keyboard. Press Enter to accept and Escape to cancel.
It’s screen reader-friendly. It moves focus and allows the modal content to be read aloud.
It traps focus. Pressing Tab will not reach any focusable elements on the main page, but in Firefox and Safari it does indeed move focus to the browser UI. What’s weird though is that you can’t move focus to the “accept” or “cancel” buttons in any browser using the Tab key.
It supports user preferences. We get automatic light and dark mode support right out of the box.
It pauses code-execution., Plus, it waits for user input.

These three JavaScripts methods work 99% of the time when I need any of these functionalities. So why don’t I — or really any other web developer — use them? Probably because they look like system errors that cannot be styled. Another big consideration: there has been movement toward their deprecation. First removal from cross-domain iframes and, word is, from the web platform entirely, although it also sounds like plans for that are on hold.

With that big consideration in mind, what are alert(), confirm() and prompt() alternatives do we have to replace them? You may have already heard about the HTML element and that’s what I want to look at in this article, using it alongside a JavaScript class.

It’s impossible to completely replace Javascript dialogs with identical functionality, but if we use the showModal() method of combined with a Promise that can either resolve (accept) or reject (cancel) — then we have something almost as good. Heck, while we’re at it, let’s add sound to the HTML dialog element — just like real system dialogs!

If you’d like to see the demo right away, it’s here.

A dialog class

First, we need a basic JavaScript Class with a settings object that will be merged with the default settings. These settings will be used for all dialogs, unless you overwrite them when invoking them (but more on that later).

export default class Dialog {
constructor(settings = {}) {
  this.settings = Object.assign(
    {
      /* DEFAULT SETTINGS - see description below */
    },
    settings
  )
  this.init()
}

The settings are:

accept: This is the “Accept” button’s label.
bodyClass: This is a CSS class that is added to element when the dialog is open and is unsupported by the browser.
cancel: This is the “Cancel” button’s label.
dialogClass: This is a custom CSS class added to the element.
message: This is the content inside the .
soundAccept: This is the URL to the sound file we’ll play when the user hits the “Accept” button.
soundOpen: This is the URL to the sound file we’ll play when the user opens the dialog.
template: This is an optional, little HTML template that’s injected into the .

The initial template to replace JavaScript dialogs

In the init method, we’ll add a helper function for detecting support for the HTML dialog element in browsers, and set up the basic HTML:

init() {
  // Testing for <dialog> support
  this.dialogSupported = typeof HTMLDialogElement === 'function'
  this.dialog = document.createElement('dialog')
  this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
  this.dialog.role = 'dialog'
  
  // HTML template
  this.dialog.innerHTML = `
  <form method="dialog" data-ref="form">
    <fieldset data-ref="fieldset" role="document">
      <legend data-ref="message" id="${(Math.round(Date.now())).toString(36)}">
      </legend>
      <div data-ref="template"></div>
    </fieldset>
    <menu>
      <button data-ref="cancel" value="cancel"></button>
      <button data-ref="accept" value="default"></button>
    </menu>
    <audio data-ref="soundAccept"></audio>
    <audio data-ref="soundOpen"></audio>
  </form>`

  document.body.appendChild(this.dialog)

  // ...
}

Checking for support

The road for browsers to support has been long. Safari picked it up pretty recently. Firefox even more recently, though not the part. So, we need to add type="button" to the “Accept” and “Cancel” buttons we’re mimicking. Otherwise, they’ll POST the form and cause a page refresh and we want to avoid that.

<button${this.dialogSupported ? '' : ` type="button"`}...></button>

DOM node references

Did you notice all the data-ref-attributes? We’ll use these for getting references to the DOM nodes:

this.elements = {}
this.dialog.querySelectorAll('[data-ref]').forEach(el => this.elements[el.dataset.ref] = el)

So far, this.elements.accept is a reference to the “Accept” button, and this.elements.cancel refers to the “Cancel” button.

Button attributes

For screen readers, we need an aria-labelledby attribute pointing to the ID of the tag that describes the dialog — that’s the

tag and it will contain the message.

this.dialog.setAttribute('aria-labelledby', this.elements.message.id)

That id? It’s a unique reference to this part of the

element:

this.dialog.setAttribute('aria-labelledby', this.elements.message.id)

The “Cancel” button

Good news! The HTML dialog element has a built-in cancel() method making it easier to replace JavaScript dialogs calling the confirm() method. Let’s emit that event when we click the “Cancel” button:

this.elements.cancel.addEventListener('click', () => { 
  this.dialog.dispatchEvent(new Event('cancel')) 
})

That’s the framework for our to replace alert(), confirm(), and prompt().

Polyfilling unsupported browsers

We need to hide the HTML dialog element for browsers that do not support it. To do that, we’ll wrap the logic for showing and hiding the dialog in a new method, toggle():

toggle(open = false) {
  if (this.dialogSupported && open) this.dialog.showModal()
  if (!this.dialogSupported) {
    document.body.classList.toggle(this.settings.bodyClass, open)
    this.dialog.hidden = !open
    /* If a `target` exists, set focus on it when closing */
    if (this.elements.target && !open) {
      this.elements.target.focus()
    }
  }
}
/* Then call it at the end of `init`: */
this.toggle()

Keyboard navigation

Next up, let’s implement a way to trap focus so that the user can tab between the buttons in the dialog without inadvertently exiting the dialog. There are many ways to do this. I like the CSS way, but unfortunately, it’s unreliable. Instead, let’s grab all focusable elements from the dialog as a NodeList and store it in this.focusable:

getFocusable() {
  return [...this.dialog.querySelectorAll('button,[href],select,textarea,input:not([type=&quot;hidden&quot;]),[tabindex]:not([tabindex=&quot;-1&quot;])')]
}

Next, we’ll add a keydown event listener, handling all our keyboard navigation logic:

this.dialog.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    if (!this.dialogSupported) e.preventDefault()
    this.elements.accept.dispatchEvent(new Event('click'))
  }
  if (e.key === 'Escape') this.dialog.dispatchEvent(new Event('cancel'))
  if (e.key === 'Tab') {
    e.preventDefault()
    const len =  this.focusable.length - 1;
    let index = this.focusable.indexOf(e.target);
    index = e.shiftKey ? index-1 : index+1;
    if (index < 0) index = len;
    if (index > len) index = 0;
    this.focusable[index].focus();
  }
})

For Enter, we need to prevent the from submitting in browsers where the element is unsupported. Escape will emit a cancel event. Pressing the Tab key will find the current element in the node list of focusable elements, this.focusable, and set focus on the next item (or the previous one if you hold down the Shift key at the same time).

Displaying the

Now let’s show the dialog! For this, we need a small method that merges an optional settings object with the default values. In this object — exactly like the default settings object — we can add or change the settings for a specific dialog.

open(settings = {}) {
  const dialog = Object.assign({}, this.settings, settings)
  this.dialog.className = dialog.dialogClass || ''

  /* set innerText of the elements */
  this.elements.accept.innerText = dialog.accept
  this.elements.cancel.innerText = dialog.cancel
  this.elements.cancel.hidden = dialog.cancel === ''
  this.elements.message.innerText = dialog.message

  /* If sounds exists, update `src` */
  this.elements.soundAccept.src = dialog.soundAccept || ''
  this.elements.soundOpen.src = dialog.soundOpen || ''

  /* A target can be added (from the element invoking the dialog */
  this.elements.target = dialog.target || ''

  /* Optional HTML for custom dialogs */
  this.elements.template.innerHTML = dialog.template || ''

  /* Grab focusable elements */
  this.focusable = this.getFocusable()
  this.hasFormData = this.elements.fieldset.elements.length > 0
  if (dialog.soundOpen) {
    this.elements.soundOpen.play()
  }
  this.toggle(true)
  if (this.hasFormData) {
    /* If form elements exist, focus on that first */
    this.focusable[0].focus()
    this.focusable[0].select()
  }
  else {
    this.elements.accept.focus()
  }
}

Phew! That was a lot of code. Now we can show the element in all browsers. But we still need to mimic the functionality that waits for a user’s input after execution, like the native alert(), confirm(), and prompt() methods. For that, we need a Promise and a new method I’m calling waitForUser():

waitForUser() {
  return new Promise(resolve => {
    this.dialog.addEventListener('cancel', () => { 
      this.toggle()
      resolve(false)
    }, { once: true })
    this.elements.accept.addEventListener('click', () => {
      let value = this.hasFormData ? 
        this.collectFormData(new FormData(this.elements.form)) : true;
      if (this.elements.soundAccept.src) this.elements.soundAccept.play()
      this.toggle()
      resolve(value)
    }, { once: true })
  })
}

This method returns a Promise. Within that, we add event listeners for “cancel” and “accept” that either resolve false (cancel), or true (accept). If formData exists (for custom dialogs or prompt), these will be collected with a helper method, then returned in an object:

collectFormData(formData) {
  const object = {};
  formData.forEach((value, key) => {
    if (!Reflect.has(object, key)) {
      object[key] = value
      return
    }
    if (!Array.isArray(object[key])) {
      object[key] = [object[key]]
    }
    object[key].push(value)
  })
  return object
}

We can remove the event listeners immediately, using { once: true }.

To keep it simple, I don’t use reject() but rather simply resolve false.

Hiding the

Earlier on, we added event listeners for the built-in cancel event. We call this event when the user clicks the “cancel” button or presses the Escape key. The cancel event removes the open attribute on the , thus hiding it.

Where to `:focus`?

In our open() method, we focus on either the first focusable form field or the “Accept” button:

if (this.hasFormData) {
  this.focusable[0].focus()
  this.focusable[0].select()
}
else {
  this.elements.accept.focus()
}

But is this correct? In the W3’s “Modal Dialog” example, this is indeed the case. In Scott Ohara’s example though, the focus is on the dialog itself — which makes sense if the screen reader should read the text we defined in the aria-labelledby attribute earlier. I’m not sure which is correct or best, but if we want to use Scott’s method. we need to add a tabindex="-1" to the in our init method:

this.dialog.tabIndex = -1

Then, in the open() method, we’ll replace the focus code with this:

this.dialog.focus()

We can check the activeElement (the element that has focus) at any given time in DevTools by clicking the “eye” icon and typing document.activeElement in the console. Try tabbing around to see it update:

Clicking the “eye” icon

Adding alert, confirm, and prompt

We’re finally ready to add alert(), confirm() and prompt() to our Dialog class. These will be small helper methods that replace JavaScript dialogs and the original syntax of those methods. All of them call the open()method we created earlier, but with a settings object that matches the way we trigger the original methods.

Let’s compare with the original syntax.

`alert()` is normally triggered like this:

window.alert(message);

In our Dialog, we’ll add an alert() method that’ll mimic this:

/* dialog.alert() */
alert(message, config = { target: event.target }) {
  const settings = Object.assign({}, config, { cancel: '', message, template: '' })
  this.open(settings)
  return this.waitForUser()
}

We set cancel and template to empty strings, so that — even if we had set default values earlier — these will not be hidden, and only message and accept are shown.

`confirm()` is normally triggered like this:

window.confirm(message);

In our version, similar to alert(), we create a custom method that shows the message, cancel and accept items:

/* dialog.confirm() */
confirm(message, config = { target: event.target }) {
  const settings = Object.assign({}, config, { message, template: '' })
  this.open(settings)
  return this.waitForUser()
}

`prompt()` is normally triggered like this:

window.prompt(message, default);

Here, we need to add a template with an that we’ll wrap in a :

/* dialog.prompt() */
prompt(message, value, config = { target: event.target }) {
  const template = `
  <label aria-label="${message}">
    <input name="prompt" value="${value}">
  </label>`
  const settings = Object.assign({}, config, { message, template })
  this.open(settings)
  return this.waitForUser()
}

{ target: event.target } is a reference to the DOM element that calls the method. We’ll use that to refocus on that element when we close the , returning the user to where they were before the dialog was fired.

We ought to test this

It’s time to test and make sure everything is working as expected. Let’s create a new HTML file, import the class, and create an instance:

<script type="module">
  import Dialog from './dialog.js';
  const dialog = new Dialog();
</script>

Try out the following use cases one at a time!

/* alert */
dialog.alert('Please refresh your browser')
/* or */
dialog.alert('Please refresh your browser').then((res) => {  console.log(res) })

/* confirm */
dialog.confirm('Do you want to continue?').then((res) => { console.log(res) })

/* prompt */
dialog.prompt('The meaning of life?', 42).then((res) => { console.log(res) })

Then watch the console as you click “Accept” or “Cancel.” Try again while pressing the Escape or Enter keys instead.

Async/Await

We can also use the async/await way of doing this. We’re replacing JavaScript dialogs even more by mimicking the original syntax, but it requires the wrapping function to be async, while the code within requires the await keyword:

document.getElementById('promptButton').addEventListener('click', async (e) => {
  const value = await dialog.prompt('The meaning of life?', 42);
  console.log(value);
});

Cross-browser styling

We now have a fully-functional cross-browser and screen reader-friendly HTML dialog element that replaces JavaScript dialogs! We’ve covered a lot. But the styling could use a lot of love. Let’s utilize the existing data-component and data-ref-attributes to add cross-browser styling — no need for additional classes or other attributes!

We’ll use the CSS :where pseudo-selector to keep our default styles free from specificity:

:where([data-component*="dialog"] *) {  
  box-sizing: border-box;
  outline-color: var(--dlg-outline-c, hsl(218, 79.19%, 35%))
}
:where([data-component*="dialog"]) {
  --dlg-gap: 1em;
  background: var(--dlg-bg, #fff);
  border: var(--dlg-b, 0);
  border-radius: var(--dlg-bdrs, 0.25em);
  box-shadow: var(--dlg-bxsh, 0px 25px 50px -12px rgba(0, 0, 0, 0.25));
  font-family:var(--dlg-ff, ui-sansserif, system-ui, sans-serif);
  min-inline-size: var(--dlg-mis, auto);
  padding: var(--dlg-p, var(--dlg-gap));
  width: var(--dlg-w, fit-content);
}
:where([data-component="no-dialog"]:not([hidden])) {
  display: block;
  inset-block-start: var(--dlg-gap);
  inset-inline-start: 50%;
  position: fixed;
  transform: translateX(-50%);
}
:where([data-component*="dialog"] menu) {
  display: flex;
  gap: calc(var(--dlg-gap) / 2);
  justify-content: var(--dlg-menu-jc, flex-end);
  margin: 0;
  padding: 0;
}
:where([data-component*="dialog"] menu button) {
  background-color: var(--dlg-button-bgc);
  border: 0;
  border-radius: var(--dlg-bdrs, 0.25em);
  color: var(--dlg-button-c);
  font-size: var(--dlg-button-fz, 0.8em);
  padding: var(--dlg-button-p, 0.65em 1.5em);
}
:where([data-component*="dialog"] [data-ref="accept"]) {
  --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
  --dlg-button-c: var(--dlg-accept-c, #fff);
}
:where([data-component*="dialog"] [data-ref="cancel"]) {
  --dlg-button-bgc: var(--dlg-cancel-bgc, transparent);
  --dlg-button-c: var(--dlg-cancel-c, inherit);
}
:where([data-component*="dialog"] [data-ref="fieldset"]) {
  border: 0;
  margin: unset;
  padding: unset;
}
:where([data-component*="dialog"] [data-ref="message"]) {
  font-size: var(--dlg-message-fz, 1.25em);
  margin-block-end: var(--dlg-gap);
}
:where([data-component*="dialog"] [data-ref="template"]:not(:empty)) {
  margin-block-end: var(--dlg-gap);
  width: 100%;
}

You can style these as you’d like, of course. Here’s what the above CSS will give you:

To overwrite these styles and use your own, add a class in dialogClass,

dialogClass: 'custom'

…then add the class in CSS, and update the CSS custom property values:

.custom {
  --dlg-accept-bgc: hsl(159, 65%, 75%);
  --dlg-accept-c: #000;
  /* etc. */
}

A custom dialog example

Earlier, I teased the idea of adding a sound to the dialog. Let’s do that.

You can use the template property of the settings object to inject more HTML. Here’s a custom example, invoked from a

Categories: Designing, Others Tags:

CSS Scroll Snap Slide Deck That Supports Live Coding

February 7th, 2022 admin No comments

Screenshot of the text slide containing a heading, byline, and Twitter handle. The text is dark blue and the background has a light blue. There is the number one in white inside a bright blue circle located in the bottom-left corner of the slide indicating the page title.

Virtual conferences have changed the game in terms of how a presenter is able to deliver content to an audience. At a live event it’s likely you just have your laptop, but at home, you may have multiple monitors so that you can move around windows and make off-screen changes when delivering live coding demos. However, as some events go back to in-person, you may be in a similar boat as me wondering how to bring an equivalent experience to a live venue.

With a bit of creativity using native web functionality and modern CSS, like CSS scroll snap, we’ll be building a no-JavaScript slide deck that allows live editing of CSS demos. The final deck will be responsive and shareable, thanks to living inside of a CodePen.

To make this slide deck, we’ll learn about:

CSS scroll snap, counters, and grid layout
The contenteditable attribute
Using custom properties and HSL for theming
Gradient text
Styling the element

Slide templates

When making a slide deck of a bunch of different slides, it’s likely that you’ll need different types of slides. So we’ll create these three essential templates:

Text: open for any text you need to include
Title: emphasizing a headline to break up sections of content
Demo: split layout with a code block and the preview

Text presentation slide

A slide with the text Topic 1 in dark blue and a soft linear gradient that goes from a super light blue to a brighter blue, going from left to right. — Title presentation slide

Slide deck screenshot showing the split view with live code on the left and the output on the right. The page number of the slide is shown in the bottom-left corner and includes the word CSS after the page number. — Demo presentation slide

HTML templates

Let’s start creating our HTML. We’ll use an ordered list with the ID of slides and go ahead and populate a text and title slide.

Each slide is one of the list elements with the class of slide, as well as a modifier class to indicate the template type. For these text-based slides, we’ve nested a

with the class of content and then added a bit of boilerplate text.

<ol id="slides">
  <li class="slide slide--text">
    <div class="content">
      <h1>Presentation Title</h1>
      <p>Presented by Your Name</p>
      <p><a target="_blank" href="<https://twitter.com/5t3ph>">@5t3ph</a></p>
    </div>
  </li>
  <li class="slide slide--title">
    <div class="content">
      <h2>Topic 1</h2>
    </div>
  </li>
</ol>

We’re using target="_blank" on the link due to CodePen using iframes for the preview, so it’s necessary to “escape” the iframe and load the link.

Base styles

Next, we’ll begin to add some styles. If you are using CodePen, these styles assume you’re not loading one of the resets. Our reset wipes out margin and ensures the element takes up the total available height, which is all we really need here. And, we’ll make a basic font stack update.

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
}

Next, we’ll define that all our major layout elements will use a CSS grid, remove list styling from #slides, and make each slide take up the size of the viewport. Finally, we’ll use the place-content shorthand to center the slide--text and slide--title slide content.

body,
#slides,
.slide {
  display: grid;
}

#slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.slide--text,
.slide--title {
  place-content: center;
}

Then, we’ll add some lightweight text styles. Since this is intended to be a presentation with one big point being made at a time, as opposed to an article-like format, we’ll bump the base font-size to 2rem. Be sure to adjust this value as you test out your final slides in full screen. You may decide it feels too small for your content versus your presentation viewport size.

h1, h2 {
  line-height: 1.1;
}

a {
  color: inherit;
}

.content {
  padding: 2rem;
  font-size: 2rem;
  line-height: 1.5;
}

.content * + * {
  margin-top: 0.5em;
}

.slide--text .content {
  max-width: 40ch;
}

At this point, we have some large text centered within a container the size of the viewport. Let’s add a touch of color by creating a simple theme system.

We’ll be using the hsl color space for the theme while setting a custom property of --theme-hue and --theme-saturation. The hue value of 230 corresponds to a blue. For ease of use, we’ll then combine those into the --theme-hs value to drop into instances of hsl.

:root {
  --theme-hue: 230;
  --theme-saturation: 85%;
  --theme-hs: var(--theme-hue), var(--theme-saturation);
}

We can adjust the lightness values for backgrounds and text. The slides will feel cohesive since they will be tints of that base hue.

Back in our main style, we can apply this idea to create a very light version of the color for a background, and a dark version for the text.

body {
  /* ... existing styles */
  background-color: hsl(var(--theme-hs), 95%);
  color: hsl(var(--theme-hs), 25%);
}

Screenshot of a CSS scroll snap slide with the presentation title, a byline, and a Twitter handle. The text is dark blue and the background is a light blue.

Let’s also give .slide--title a little bit of extra pizazz by adding a subtle gradient background.

.slide--title {
  background-image: 
    linear-gradient(125deg, 
      hsl(var(--theme-hs), 95%), 
      hsl(var(--theme-hs), 75%)
    );
}

Demo slide template

Our demo slide breaks the mold so far and requires two main elements:

a .style container around an inline element with actual written styles that you intend to both be visible on screen and apply to the demo
a .demo container to hold the demo preview with whatever markup is appropriate for that

If you’re using CodePen to create this deck, you’ll want to update the “Behavior” setting to turn off “Format on Save.” This is because we don’t want extra tabs/spaces prior to the styles block. Exactly why will become clear in a moment.

Screenshot of a CodePen's HTMLand CSS code panels. The settings menu for the HTML panel is open and highlighting the first item, which is Format HTML.

Here’s our demo slide content:

<li class="slide slide--demo">
  <div class="style">
  <style contenteditable="true"> 
.modern-container {
  --container-width: 40ch;

  width: min(
    var(--container-width), 100% - 3rem
  );
  margin-inline: auto;
}
  </style>
  </div>
  <div class="demo">
    <div class="modern-container">
      <div class="box">container</div>
    </div>
  </div>
</li>

Note that extra contenteditable="true" attribute on the block . This is a native HTML feature that allows you to mark any element as editable. It is not a replacement for form inputs and textareas and typically requires JavaScript for more full-featured functionality. But for our purposes, it’s the magic that enables “live” coding. Ultimately, we’ll be able to make changes to the content in here and the style changes will apply immediately. Pretty fancy, hold tight.

However, if you view this so far, you won’t see the style block displayed. You will see the outcome of the .modern-container demo styles are being applied, though.

Another relevant note here is that HTML5 included validating a block anywhere; not just in the .

What we’re going to do next will feel strange, but we can actually use display properties on to make it visible. We’ve placed it within another container to use a little extra positioning for it and make it a resizable area. Then, we’ve set the element itself to display: block and applied properties to give it a code editor look and feel.

.style {
  display: grid;
  align-items: center;
  background-color: hsl(var(--theme-hs), 5%);
  padding-inline: max(5vw, 2rem) 3rem;
  font-size: 1.35rem;
  overflow-y: hidden;
  resize: horizontal;
}

style {
  display: block;
  outline: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: hsl(var(--theme-hs), 85%);
  background: none;
  white-space: pre;
  line-height: 1.65;
  tab-size: 2;
  hyphens: none;
}

Then, we need to create the .slide--demo rule and use CSS grid to display the styles and demo, side-by-side. As a reminder, we’ve already set up the base .slide class to use grid, so now we’ll create a rule for grid-template-columns just for this template.

.slide--demo {
  grid-template-columns: fit-content(85ch) 1fr;
}

If you’re unfamiliar with the grid function fit-content(), it allows an element to use its intrinsic width up until the maximum value defined in the function. So, this rule says the style block can grow to a maximum of 85ch wide. When your content is narrow, the column will only be as wide as it needs to be. This is really nice visually as it won’t create extra horizontal space while still ultimately capping the allowed width.

To round out this template, we’ll add some padding for the .demo. You may have also noticed that extra class within the demo of .box. This is a convention I like to use for demos to provide a visual of element boundaries when the size and position of something are important.

.demo {
  padding: 2rem;
}

.box {
  background-color: hsl(var(--theme-hs), 85%);
  border: 2px dashed;
  border-radius: .5em;
  padding: 1rem;
  font-size: 1.35rem;
  text-align: center;
}

Here’s the result of our code template:

Screenshot of a slide that's split in half vertically, the left side with a almost black dark blue background and code that is a lighter blue in a mono font. The right side has a light blue background and an element at the top that says container, with a dashed border and slightly darker blue background.

Live-editing functionality

Interacting with the displayed styles will actually update the preview! Additionally, since we created the .style container as a resizable area, you can grab the resize handle in the lower right to grow and shrink the preview area as needed.

The one caveat for our live-editing ability is that browsers treat it differently.

Firefox: This provides the best result as it allows both changing the loaded styles and full functionality of adding new properties and even new rules.
Chromium and Safari: These allow changing values in loaded styles, but not adding new properties or new rules.

As a presenter, you’ll likely want to use Firefox. As for viewers utilizing the presentation link, they’ll still be able to get the intention of your slides and shouldn’t have issues with the display (unless their browser doesn’t support your demoed code). But outside of Firefox, they may be unable to manipulate the demos as fully as you may show in your presentation.

You may want to “Fork” your finished presentation pen and actually remove the editable behavior on blocks and instead display final versions of your demos styles, as applicable.

Reminder: styles you include in demos can potentially affect slide layout and other demos! You may want to scope demo styles under a slide-specific class to prevent unintended style changes across your deck.

Code highlighting

While we won’t be able to achieve full syntax highlighting without JavaScript, we can create a method to highlight certain parts of the code block for emphasis.

To do this, we’ll pair up linear-gradient with the -webkit properties that enable using an element’s background as the text effect. Then, using custom properties, we can define how many “lines” of the style block to highlight.

First, we’ll place the required -webkit properties directly on the element. This will cause the visible text to disappear, but we’ll make it visible in a moment by adding a background. Although these are -webkit prefixed, they are supported cross-browser.

style {
  /* ...existing styles */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

The highlighting effect will work by creating a linear-gradient with two colors where the lighter color shows through as the text color for the lines to highlight. As a default, we’ll bookend the highlight with a darker color such that it appears that the first property is highlighted.

Here’s a preview of the initial effect:

An up-close screenshot of the live code panel of the slide, with the second line of code a lighter blue than the rest, indicating that it is emphasized.

To create this effect, we need to work out how to calculate the height of the highlight color. In our element’s rules, we’ve already set the line-height to 1.65, which corresponds to a total computed line height of 1.65em. So, you may think that we multiply that by the number of lines and call it a day.

However, due to the visible style block being rendered using white-space: pre to preserve line breaks, there’s technically a sneaky invisible line before the first line of text. This is created from formatting the tag on an actual line prior to the first line of CSS code. This is also why I noted that preventing auto-formatting in CodePen is important — otherwise, you would also have extra left padding.

With these caveats in mind, we’ll set up three custom properties to help compute the values we need and add them to the beginning of our .style ruleset. The final --lines height value first takes into account that invisible line and the selector.

style {
  --line-height: 1.65em;
  --highlight-start: calc(2 * var(--line-height));
  --lines: calc(var(--highlight-start) + var(--num-lines, 1) * var(--line-height));
}

Now we can apply the values to create the linear-gradient. To create the sharp transitions we need for this effect, we ensure the gradient stops from one color to the next match.

style {
  background-image: linear-gradient(
    hsl(var(--theme-hs), 75%) 0 var(--highlight-start),
    hsl(var(--theme-hs), 90%) var(--highlight-start) var(--lines),
    hsl(var(--theme-hs), 75%) var(--lines) 100%
  );
}

To help visualize what’s happening, I’ve commented out the -webkit lines to reveal the gradient being created.

A close-up screenshot of the live code example, but with a bright blue background to reveal the near-white gradient that highlights the second line of code.

Within our --lines calculation, we also included a --num-lines property. This will let you adjust the number of lines to highlight per demo via an inline style. This example adjusts the highlight to three lines:

<style contenteditable="true" style="--num-lines: 3">

We can also pass a recalculated --highlight-start to change the initial line highlighted:

<style contenteditable="true" style="--num-lines: 3; --highlight-start: calc(4 * var(--line-height))">

Let’s look at the outcome of the previous adjustment:

Showing the live code example with lines 3 through 6 highlighted in a lighter blue than the rest of the code.

Now, if you add or remove lines during your presentation, the highlighting will not adjust. But it’s still nice as a tool to help direct your viewers’ attention.

There are two utility classes we’ll add for highlighting the rule only or removing highlighting altogether. To use, apply directly to the element for the demo.

.highlight--rule-only {
  --highlight-start: calc(1 * var(--line-height))
}

.highlight--none {
  background-image: none;
  background-color: currentColor;
}

Slide motion with CSS scroll snap

Alright, we have some nice-looking initial slides. But it’s not quite feeling like a slide deck yet. We’ll resolve that in two parts:

Reflow the slides horizontally
Use CSS scroll snap to enforce scrolling one slide at a time

Our initial styles already defined the #slides ordered list as a grid container. To accomplish a horizontal layout, we need to add one extra property since the .slides have already included dimensions to fill the viewport.

#slides {
  /* ...existing styles */
  grid-auto-flow: column;
}

For CSS scroll snap to work, we need to define which axis allows overflow, so for horizontal scrolling, that’s x:

#slides {
  overflow-x: auto;
}

The final property we need for scroll snapping for the #slides container is to define scroll-snap-type. This is a shorthand where we select the x axis, and the mandatory behavior, which means initiating scrolling should always trigger snapping to the next element.

#slides {
  scroll-snap-type: x mandatory;
}

If you try it at this point, you won’t experience the scroll snapping behavior yet because we have two properties to add to the child .slide elements. Use of scroll-snap-align tells the browser where to “snap” to, and setting scroll-snap-stopto always prevents scrolling past one of the child elements.

.slide {
  /* ...existing styles */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

The scroll snapping behavior should work either by scrolling across your slide or using left and right arrow keys.

There are more properties that can be set for CSS scroll snap, you can review the MDN docs to learn what all is available. CSS scroll snap also has a bit different behavior cross-browser, and across input types, like touch versus mouse, or touchpad versus mouse wheel, or via scrollbar arrows. For our presentation, if you find that scrolling isn’t very smooth or “snapping” then try using arrow keys instead.

Currently, there isn’t a way to customize the CSS scroll snap sliding animation easing or speed. Perhaps that is important to you for your presentation, and you don’t need the other features we’ve developed for modifying the code samples. In that case, you may want to choose a “real” presentation application.

CSS scroll snap is very cool but also has some caveats to be aware of if you’re thinking of using it beyond our slide deck context. Check out another scroll snapping demo and more information on SmolCSS.dev.

Slide numbers

An optional feature is adding visible slide numbers. Using a CSS counter, we can get the current slide number and display it however we’d like as the value of a pseudo-element. And using data attributes, we can even append the current topic.

The first step is giving our counter a name, which is done via the counter-reset property. This is placed on the element that contains items to be counted, so we’ll add it to #slides.

#slides {
  counter-reset: slides;
}

Then, on the elements to be counted (.slide), we add the counter-increment property and callback to the name of the counter we defined.

.slide {
  counter-increment: slides;
}

To access the current count, we’ll set up a pseudo element. Within the content property, the counter() function is available. This function accepts the name of our counter and returns the current number.

.slide::before {
  content: counter(slides);
}

The number is now appearing but not where we want it. Because our slide content is variable, we’ll use classic absolute positioning to place the slide number in the bottom-left corner. And we’ll add some visual styles to make it enclosed in a nice little circle.

.slide::before {
  content: counter(slides);
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 1.65em;
  height: 1.65em;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  color: hsl(var(--theme-hs), 95%);
  background-color: hsl(var(--theme-hs), 55%);
}

We can enhance our slide numbers by grabbing the value of a data attribute to also append a short topic title. This means first adding an attribute to each

element where we want this to happen. We’ll add data-topic to the

for the title and code demo slides. The value can be whatever you want, but shorter strings will display best.

<li class="slide slide--title" data-topic="CSS">

We’ll use the attribute as a selector to change the pseudo element. We can get the value by using the attr() function, which we’ll concatenate with the slide number and add a colon for a separator. Since the element was previously a circle, there are a few other properties to update.

[data-topic]::before {
  content: counter(slides) ": " attr(data-topic);
  padding: 0.25em 0.4em;
  width: auto;
  border-radius: 0.5rem;
}

With that added, here’s the code demo slide showing the added topic of “CSS”:

Small viewport styles

Our slides are already somewhat responsive, but eventually, there will be problems with horizontal scrolling on smaller viewports. My suggestion is to remove the CSS scroll snap and let the slides flow vertically.

To accomplish this will just be a handful of updates, including adding a border to help separate slide content.

First, we’ll move the CSS scroll snap related properties for #slides into a media query to only apply above 120ch.

@media screen and (min-width: 120ch) {
  #slides {
    grid-auto-flow: column;
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
  }
}

Next, we’ll move the CSS scroll snap and dimension properties for .slide into this media query as well.

@media screen and (min-width: 120ch) {
  .slide {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

To stack the demo content, we’ll move our entire rule for .slide--demo into this media query:

@media screen and (min-width: 120ch) {
  .slide--demo {
    grid-template-columns: fit-content(85ch) 1fr;
  }
}

Now everything is stacked, but we want to bring back a minimum height for each slide and then add the border I mentioned earlier:

@media (max-width: 120ch) {
  .slide {
    min-height: 80vh;
  }

  .slide + .slide {
    border-top: 1px dashed;
  }
}

Your content also might be at risk of overflow on smaller viewports, so we’ll do a couple of adjustments for .content to try to prevent that We’ll add a default width that will be used on small viewports, and move our previous max-width constraint into the media query. Also shown is a quick method updating our

to use fluid type.

h1 {
  font-size: clamp(2rem, 8vw + 1rem, 3.25rem);
}

.content {
  /* remove max-width rule from here */
  width: calc(100vw - 2rem);
}

@media screen and (min-width: 120ch) {
  .content {
    width: unset;
    max-width: 45ch;
  }
}

Additionally, I found it helps to reposition the slide counter. For that, we’ll adjust the initial styles to place it in the top-left, then move it back to the bottom in our media query.

.slide {
  /* adjust default here, removing the old "bottom" value */
  top: 0.25rem;
  left: 0.25rem;
}

@media (min-width: 120ch) {
  .slide::before {
    top: auto;
    bottom: 1rem;
    left: 1rem;
  }
}

Final slide deck

The embed will likely be showing the stacked small viewport version, so be sure to open the full version in CodePen, or jump to the live view. As a reminder, the editing ability works best in Firefox.

CodePen Embed Fallback

If you’re interested in seeing a fully finished deck in action, I used this technique to present my modern CSS toolkit.

CSS Scroll Snap Slide Deck That Supports Live Coding originally published on CSS-Tricks. You should get the newsletter and become a supporter.

Categories: Designing, Others Tags:

5 Ways Influencer Marketing Can Work For B2B

February 7th, 2022 No comments

Operating a business means that you’re constantly searching for ways to get in front of new customers, increase revenue and generate more leads. But where do you start?

With so many different avenues and options to choose from, it can be difficult to find the best strategy that works hand-in-hand with your brand.

Plus, setting yourself apart from the competition within the B2B industry has never been as challenging.

The good news? Influencer marketing could be the leverage you’ve been looking for. It can be a relatively cost-effective way to solidify brand reputation and increase the level of trust you have with your audience.

The even better news? We’ve put together a guide that outlines the ways influencer marketing can work for your B2B company. We’ll explore what influencer marketing is, why it can be so effective, and 5 actionable ways that it can work for you.

What Is Influencer Marketing?

At its core, influencer marketing allows you to promote the products or services you offer by working with someone that’s aligned with your brand. They already have an established following and the personal connection they have with their followers provides a brand new audience to get in front of.

This immediately leads to generating a broader reach that’s backed by credibility. Partnering with an influencer that’s in your niche, and that has a solid track record, lets you tap into their following. Why does that matter? Because they have a following that’s ultimately built upon trust and familiarity.

Their followers listen, react and act.

Why Is Influencer Marketing Effective for B2B?

Think about the traditional way of advertising and promoting a business. Typically, it would include things like television spots, radio campaigns, and billboard messaging. All of these tactics worked, but they can be expensive, time-consuming, and only reach a limited audience.

Now, think about the power that social media holds today. Billions of people all around the world, from different backgrounds and varying interests, tune into and scroll their favorite social media channels for hours at a time. Platforms like Instagram, Facebook, YouTube, and TikTok can narrow in on your target audience.

On top of all of this, influencer marketing doesn’t just benefit B2C brands. B2B companies can see the same types of rewards and return on investment. Ultimately, this converts to generating more B2B leads, increasing engagement, and building awareness.

Here are 4 of the biggest benefits that influencer marketing can provide your B2B company:

Thought leadership that can increase brand visibility
A new point of view that resonates with your audience on a deeper level
Increase the network of professionals that you wouldn’t have reached on your own
Increased credibility that highlights the benefits your business provides

All of this lets you take your B2B services to the next level.

5 Ways Influencer Marketing Can Work for B2B

Below you will find five ways that influencer marketing can help your business increase visibility, establish a level of trust with your audience, and highlight the benefits you provide.

Partner With an Influencer in Your Niche

Since influencers already have an established audience and partnering with one that can speak to your target market can go a long way. Not only will they likely have a large following, but they might also have a professional email list you otherwise wouldn’t be able to tap into.

This can help the awareness of your service spread wide but still allow you to reach the people you want to reach. And it can be done in any number of ways – they can create a training course, hold an event or promote your brand across their social channels.

Leverage the Power of Social Media

Social media holds a lot of power and a lot of sway, and influencers play a big role in that. According to a social media study, brands are going to spend $15 billion on their influencer marketing strategies by the end of 2022. To break it down even further, 97% of marketers plan to use Instagram posts in their overall strategy.

Try and keep up with the latest trends and connect with multiple influencers across more than one platform. This can help you stay ahead of your competition and reach a wider audience. And this doesn’t mean you should only focus on influencers with a large following. While that’s still beneficial, partnering with an influencer that’s influential in your niche will still get you in front of the right audience.

For example, Microsoft partnered with National Geographic to create an incredibly powerful and engaging influencer marketing campaign. Microsoft’s ultimate goal was to try and encourage young women to go in the direction of STEM careers (Science, Technology, Engineering, and Math). The campaign was called Make What’s Next, and they leveraged some of the best photographer influencers on Instagram.

Create Branded Content with Influencers

Instead of simply partnering with an influencer and having them promote your service to their audience, try and include them in your own content. Branded content is a great way to leverage influencer marketing and you can do it in a variety of different ways. It allows the influencers to get creative in their own way but be part of your own marketing strategy.

It could include things like a series of blog posts, promotional videos, or even a podcast series. This can work well on both sides since it gives you some creative control and helps your marketing efforts stay aligned with your B2B brand as a whole.

A great example of this was the Cisco Champions Program. They partnered with their community of advocates and built an entire marketing program with them involved. Not only did this allow the advocates to increase their knowledge, but it provided Cisco with a wide range of promotional content.

Give Away Your Service to An Influencer and Have Them Review It

Influencers, big or small, have one major thing in common: they’re leaders that their community follows. This means their following trusts what they say and believes in the things that they do. Giving away your service to an influencer and having them review it can be a powerful way to establish a level of trust with their audience and, ultimately, grow your own customer base.

Plus, it’s an incredibly cost effective way to help generate some buzz around your B2B company. The influencer might make a video of them testing out your service, or even use your service to make the video, depending on what it is.

Have an Influencer Conduct an Interview

One of the best things about an interview is that it can get published in multiple ways. It can be a blog post, a podcast, or a video. Or, it can be a combination of all three. This allows your marketing efforts to multiply by strategically putting the content out through several mediums.

You can set it up in your own office to provide an inside look at where the service gets created. And throughout the interview, you can touch on the most important aspects of your service, like the value it provides and the benefits your customers will receive.

There are several ways that you can use influencer marketing with your B2B brand and now you have some ideas to help you get started. You’ll be seeing an increase in engagement, a boost in sales, and establish the credibility your product offers your customers.

Did you enjoy finding out how influencer marketing can help your B2B brand? Let us know which idea you loved most in the comments below, or share some of your own ideas!

The post 5 Ways Influencer Marketing Can Work For B2B appeared first on noupe.

Categories: Others Tags:

15 Best New Fonts, February 2022

February 7th, 2022 admin No comments

Type foundries have been putting out some really interesting fonts these last few months. Based on the collection of the best new fonts for February 2022, it looks like we’re going to see lots of throwbacks to the ‘70s in the coming year.

Do we have Burger King’s most recent and successful rebranding campaign to thank for that? I don’t know, but it looks like many font designers are going to try and emulate those fun retro vibes going forward.

1. Crafty Signs

Crafty Signs is a display font that draws inspiration from old game shows — think Family Feud or anything on Nickelodeon in the ‘90s. This playful bubble font would work well for brands targeting children or ones that have a big personality and old school vibe.

2. Epicene Collection

Epicene is a Baroque font with beautifully exaggerated calligraphic details (like swirls and strokes). There are two families within Epicene — one for Display and one for Text — so you can use this single font collection to style your entire site.

3. Kingsad

It’s hard to call Kingsad a sans serif font when it has such a distinctly unique design to it. The font’s creator suggests using Kingsad for branding. I’d add that the curious structure of the characters would make this font perfect for branding in the science and tech spaces.

4. Lucius

Lucius is a lively-looking font, combining serif and sans serif characteristics. There are eight weights in this font family, which can be used both for display and text purposes.

5. Manju

Manju is a retro font that the designer describes as “soft and chewy”. You don’t see it as much in the thinner styles, but the bolder, thicker styles definitely feel like the kinds of fonts you’d see on food packaging and candy wrappers in the ‘70s and ‘80s.

6. Midnight Sans

Midnight Sans is a font that comes in a single weight (Black) and also has two variants: Midnight Sans RD and Midnight Sans ST. It was originally designed for When Midnight Comes Around, a book about the emerging punk music scene in NYC in the ‘70s, so it has a somewhat grungy, nostalgic feel to it.

7. Nagel

Nagel is technically still in beta, so this may not end up being the finished font when it’s done. For instance, they still have the italic and variable styles to develop. That said, it’s a neat-looking sans serif font — easy to read, but has a bit of an edge to it as well.

8. Painless

What you see is what you get with Painless. It has just one style — a textured, bold sans serif. Because of its casual, hand-brushed feel, it won’t fit well with just any brand. Where it would look cool is on websites for brands that sell hardware, furniture, and other DIY products.

9. Recipient

Recipient is a monospaced font inspired by the typefaces that appeared on old typewriters. With five weights and a set of matching italics, this font can be used for standard paragraph text as well as for smaller headlines.

10. Sea Angel

Sea Angel is a beautiful serif font with elegant curves. This easy-on-the-eyes font would look great on websites for high-end retailers, luxury magazines, museums, fashion brands, beauty companies, and more.

11. Smack Boom

Comic books and graphic novels will never go out of style. Especially as their stories branch out into other channels, like TV and movies. Smack Boom will enable you to bring that exciting and heroic look to your logos and web designs.

12. Stoner Sport

Stoner Sport is an outline display font that brings a modern touch to a retro sporty style. This font would work especially well for sporting industries as well as businesses that are associated with them—retailers, sports complexes, automakers, publications, and so on.

13. Stormland

Stormland is a good example of what makes Scandinavian design so striking. The lettering is clean and simple, built using uniformly sized lines. However, the characters are wide, which gives them a sturdy and strong feeling as well.

14. Tellumo

Tellumo is a humanist sans serif font family, ranging in styles from Thin to Extra Bold. What you see in the example below demonstrates some of the charm and warmth you can add to branding and designs with Tellumo’s swash caps. However, if you want to keep things simple and reap the benefits of the font’s clean and tidy design, you can use the regular character set.

15. Yamet Kudasi

Yamet Kudasi is a script font that comes in just the one style. Based on where it’s used (like in a signature line vs. a hero image) and the background it’s framed against, this versatile font can be used in a variety of ways and for various niches.

Source

The post 15 Best New Fonts, February 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Popular Design News of the Week: January 31, 2022 – February 6, 2022

February 6th, 2022 admin No comments

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Web 3.0: How Web Design will Change Forever

Cookie Notice for Websites

The Most Popular JavaScript Frameworks of 2022

Exciting New Tools for Designers, February 2022

The CSS From-font Value Explained in 4 Demos

A UX Designer Walks into a Tesla Bar

Looking Ahead to WordPress 6.0: The Early Roadmap

What’s the Difference Between Good UI and Good UX?

22+ CSS Dropdown Menus

Famous Logos in the Grotesque Art Style Typical for the Middle Ages

Source

Categories: Designing, Others Tags:

How to Use Hand-Drawn Elements in Web Design

February 4th, 2022 admin No comments

What stands out as an incredible web design project for you? Do you count your creation as a success if it’s modern, minimal, and accessible? Maybe you’re the kind of designer that’s constantly experimenting with the latest dynamic design tools or state-of-the-art technology. Perhaps your websites are vivid, animated, and brimming with unique components?

Sometimes, creating the ideal design means thinking carefully about what you want to accomplish for your client. The purpose of your web creation has a significant impact on the components that you need to consider. For instance, if you’re hoping for a highly emotive and human design, it may be worth combining some of your sleek lines and graphics with hand-drawn elements.

The Value of Hand-Drawn Graphics in Web Design

Hand-drawn elements are just like the other components of web design; that way may use to express individuality in a cluttered digital environment. In a world where everyone focuses on futuristic and virtual creations, hand-drawn elements can pull attention back to the importance of humanity in your content.

As web designers, we know that visual components often impact people more than text-based content. Illustrations are highly engaging functional elements that capture audience attention and convey relevant information.

The main difference between hand-drawn elements and graphics built with vectors and other digital components is that one appears to be more influenced by the human hand than the other. Even if your illustrations are created on a screen, just like any other web design component, it pushes an audience to see something more straightforward, more natural, and authentic.

For a brand trying to convey innocence and humanity in its personality, hand-drawn design can speak to the part of the human psyche that’s often unappreciated by web design. Perhaps more than any other visual, the content reminds your audience that there’s a human behind the web page.

The Value of Hand-Drawn Features in Web Design

Any image can have a massive impact on the quality of your web design. Visuals deliver complex information in an easy-to-absorb format. In today’s world of fast-paced browsing, where distractions are everywhere, visuals are a method of capturing attention and delivering value fast.

However, with hand-drawn elements, you go beyond the basic functionality of images to embrace the emotional side of the content. Benefits include:

A memorable experience: Web illustrations are becoming more popular among leading brands like Innocent Smoothies and Dropbox. However, the time that goes into these components means that they’re still scarce. If you want to stand out online, illustrations can help you do that.
Brand personality: One of the most significant benefits of hand-drawn web design is showcasing your brand personality. The blocky lines of imperfect content that go into illustrated images highlight the human nature of your company. So many businesses are keen to look “perfect” today to make the human touch much more inviting.
Differentiation: As mentioned above, hand illustrations are still rare in the digital design landscape. If you’re struggling to find a way to make your brand stand out, this could be it. Although there needs to be meaning behind your design, the result could be a more unique brand if you can convey that meaning properly.

Tips for Using Hand Drawn Elements in Web Design

Hand-drawn components, just like any other element of visual web design, demand careful strategy. You don’t want to overwhelm your websites with these sketches, or you could end up damaging the user experience in the process.

As you work on your web designs, pulling hand-drawn elements into the mix, think about how you can use every illustration to accomplish a crucial goal. For instance:

Create Separation

Hand-drawn design components can mix and match with other visual elements on your website. They work perfectly alongside videos and photos and help to highlight critical points.

On the Lunchbox website, the company uses hand-drawn elements. This helps make the site stand out, and it provides additional context for customers scanning the website for crucial details.

Engage Your Audience

Sometimes, hand-drawn elements are all about connecting with end-users on a deeper, more emotional level. One of the best ways to do this is to make your hand-drawn elements fun and interactive pieces in the design landscape.

One excellent example of this is in the Stained Glass music video here. This interactive game combines an exciting web design trend with creative interactive components so that users can transform the web experience into something unique to them.

Highlight Headers with Typography

Sometimes, the best hand-drawn elements aren’t full illustrations or images. Hand-drawn or doodle-like typography can also give depth to a brand image and website design.

Typography styles that mimic natural, genuine handwriting are excellent for capturing the audience’s attention. These captivating components remind the customer of the human being behind the brand while not detracting from the elegance of the website.

This example of hand-drawn typography from the Tradewinds hotel shows how designers can use script fonts to immediately capture customer attention. Notice that the font is still easy to read from a distance, so it’s not reducing clarity.

Set the Mood

Depending on the company that you’re designing for, your website creation choices can have a massive impact on the emotional resonance that the brand has with its audience. Hand-drawn elements allow websites to often take on a more playful tone. They can give any project a touch of innocence and friendliness that’s hard to accomplish elsewhere.

A child-like aesthetic with bright colors and bulky fonts combines with hand-drawn elements on the Le Puzz website. This is an excellent example of how web designers can use hand-drawn elements to convey a mood of creativity and fun.

Animated Elements

Finally, if you want to combine the unique nuances of hand-drawn design with the modern components of what’s possible in the digital world today, why not add some animation. Animated elements combined with illustrations can help to bring a website to life.

In the Kinetic.com website, the animated illustrated components help to highlight the punk-rock nature of the fanzine. It’s essential to ensure that you don’t go too over-the-top with your animations here. Remember that too many animations can quickly slow down a website and harm user-friendliness.

Finishing Thoughts on Hand-Drawn Elements

Hand-drawn elements have a lot to offer to the web-design world.

Even if you’re not the best artist yourself, you can still simulate hand-drawn components in your web design by using the right tools and capabilities online.

Although these features won’t fit well into every environment, they can be perfect for businesses that want to show their human side in today’s highly digitized world. Hand-drawn components, perhaps more than any other web design feature, showcase the innocence and creativity of the artists that often exist behind portfolio pages and startup brands.

Could you experiment with hand-drawn design in your next project?

Source

The post How to Use Hand-Drawn Elements in Web Design first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

7 Common Usability Testing Mistakes (And How to Avoid Them)

February 4th, 2022 No comments

The goal of usability testing is straightforward: get volunteers to try the app, obtain statistical data from the findings, and determine how the app can be upgraded.

Usability testing does not always imply that you will complete the product correctly. Occasionally, mistakes occur along the procedure, affecting the test results.

In this article, we’ll go through seven frequent mistakes made during usability testing and how to avoid them.

1. Failing to set a decisive business goal

One of the most common missteps is neglecting to establish a clear business goal for the usability program. Instead, you need to consider why you’re testing in the first place. That is the first step to ensure that the testing will produce the best results for your company to improve the product in the future.

Identifying your company goal will establish the tone for the entire usability testing process, but if you don’t know what it is, the test will be aimless. As a result, there is a risk that the activities and demographics will be incorrect, which results in losing time and resources.

By being specific about what you want to obtain from the testing, you may avoid making the first problem. Posing a pragmatic question, like “Will the information minimize calls to our customer support service?” will boost your test results significantly. The more specific the question, the better the outcome.

2. Choosing the wrong activities

Creating the activities for users to do is the foundation of any usability testing program, but how can you determine whether you’re doing it correctly? To minimize your expenses and time, you should highlight the significant issues. For example, see if the tasks are aligned with the test’s goal, and adjust them according to the company’s standard.

Where do you think there needs to be more explanation on the site, spots where you feel there could already be trouble? These are the locations where you should concentrate your efforts to ensure that people finish the task on your website. The correct attitude for the usability initiative will be set by assuring that the tasks will address those questions.

3. Recruiting the wrong users

Another common blunder is failing to gather the appropriate participants for the study. Moreover, you should establish demographics for usability testing since you want a true reflection of your subjects. That way, you can get the most accurate replies. And that is why, while creating a user test, you should match the demographic profile of users to the demographic profile of the individuals who will really visit your site.

Suppose you have a website for saving accounts and your testers are adolescents or people in their early twenties. Will they provide the most relevant feedback? Probably not.

Instead, you should choose adults between the age of 30 and 40 who are more likely to be your target audience.

Obtaining the most accurate answer from your target audience provides excellent input that can be included in a new website design or converted into an A/B test to improve conversion rates.

4. Lacking a dedicated staff

We frequently find a lack of time and resources dedicated to usability testing, leading to the testing’s true potential not being realized. In addition, it might be challenging to find the time to analyze feedback accurately and transform it into precise results. As a result, issues highlighted on your site may go unnoticed.

You must thoroughly examine the recordings of your study to ensure that you’ve found all relevant discoveries. That can include analyzing what users do on your website, how they navigate, where they click, and so on. Unfortunately, it requires a lot of time to observe and analyze this data simply. That is why it’s occasionally best to consider usability testing programs so that you can have a team of dedicated UX researchers perform the tests and get the most remarkable results for your company. It might also be worth it to consider outsourcing those services.

5. Not thinking about ways to deliver results

A usability test can generate a plethora of data, but if the individuals who make design choices are unaware of the results, the test is a loss. Therefore, it’s important to get the data to the design team. Creating test reports is one way that many usability specialists try to overcome this challenge. Such statements seek to simplify the testing and observations into a single document.

The majority of reports are never reviewed. The very few who do read usually generate more questions than solutions. In addition, writing a high-quality report that adequately expresses every part of the test demands exceptional writing and composing skills. Sadly, most usability specialists do not have access to these writing resources.

The most excellent communication tactics include having review sessions soon after each test, forming an email discussion group to analyze the test and multiple interpretations, and doing interactive workshops to evaluate the design.

6. Not putting possible solutions to the test

Prepare a preliminary sketch of how you plan to use the data before you start your usability test. For example, if your examination reveals that the design of your website is complex for users, you should prepare a solution as soon as the testing is completed.

The issue is deciding which approach is the best to adopt. You can’t know what solution will work just on the original test, which identified a problem. So you have to do the test once more, this time with a functioning solution.

The answer to this dilemma is to organize a round of testing to confirm any yet-to-be-discovered possible solutions. You should do this well before you realize what the issues are going to be. Then, of course, you can simply cancel the evaluation if you don’t have any problems.

7. Conducting tests to validate your ideas

Confirmation bias is a human trait that causes us to gravitate toward particular views. In usability testing, individuals forget to be objective and design the entire test around their preferences.

You’re undermining the objective of usability testing if you use it to validate ideas. The goal of the test is to see and analyze how people engage with the product. It’s not about living up to your own ambitions.

When performing usability testing, you must be honest and neutral. Maintain an open attitude and be willing to let data speak on its own. However, when it comes to analyzing the outcomes, make it a group operation.

Conclusion

For any company, usability testing is a significant time and resource commitment. Therefore, it is vital to have a clear grasp of what you want to gain out of it. By providing proper time and resources to the program, you can prevent the most typical missteps and ensure a successful usability testing project.

The post 7 Common Usability Testing Mistakes (And How to Avoid Them) appeared first on noupe.

Categories: Others Tags:

7 Common Usability Testing Mistakes (And How to Avoid Them)

February 4th, 2022 No comments

The goal of usability testing is straightforward: get volunteers to try the app, obtain statistical data from the findings, and determine how the app can be upgraded.

Usability testing does not always imply that you will complete the product correctly. Occasionally, mistakes occur along the procedure, affecting the test results.

In this article, we’ll go through seven frequent mistakes made during usability testing and how to avoid them.

1. Failing to set a decisive business goal

2. Choosing the wrong activities

3. Recruiting the wrong users

Suppose you have a website for saving accounts and your testers are adolescents or people in their early twenties. Will they provide the most relevant feedback? Probably not.

Instead, you should choose adults between the age of 30 and 40 who are more likely to be your target audience.

Obtaining the most accurate answer from your target audience provides excellent input that can be included in a new website design or converted into an A/B test to improve conversion rates.

4. Lacking a dedicated staff

5. Not thinking about ways to deliver results

6. Not putting possible solutions to the test

7. Conducting tests to validate your ideas

Confirmation bias is a human trait that causes us to gravitate toward particular views. In usability testing, individuals forget to be objective and design the entire test around their preferences.

Conclusion

The post 7 Common Usability Testing Mistakes (And How to Avoid Them) appeared first on noupe.

Categories: Others Tags:

Newer Entries Older Entries

Archive

A custom dialog example

Live demo

A dialog class

The initial template to replace JavaScript dialogs

Checking for support

DOM node references

Button attributes

The “Cancel” button

Polyfilling unsupported browsers

Keyboard navigation

Displaying the

Hiding the

Where to :focus?

Adding alert, confirm, and prompt

alert() is normally triggered like this:

confirm() is normally triggered like this:

prompt() is normally triggered like this:

We ought to test this

Async/Await

Cross-browser styling

A custom dialog example

Live demo

Different gradient apps with different color spaces

Different gradient apps with different color spaces

Slide templates

HTML templates

Base styles

Demo slide template

Live-editing functionality

Code highlighting

Slide motion with CSS scroll snap

Slide numbers

Small viewport styles

Final slide deck

What Is Influencer Marketing?

Why Is Influencer Marketing Effective for B2B?

5 Ways Influencer Marketing Can Work for B2B

Partner With an Influencer in Your Niche

Leverage the Power of Social Media

Create Branded Content with Influencers

Give Away Your Service to An Influencer and Have Them Review It

Have an Influencer Conduct an Interview

1. Crafty Signs

2. Epicene Collection

3. Kingsad

4. Lucius

5. Manju

6. Midnight Sans

7. Nagel

8. Painless

9. Recipient

10. Sea Angel

11. Smack Boom

12. Stoner Sport

13. Stormland

14. Tellumo

15. Yamet Kudasi

The Value of Hand-Drawn Graphics in Web Design

The Value of Hand-Drawn Features in Web Design

Tips for Using Hand Drawn Elements in Web Design

Create Separation

Engage Your Audience

Highlight Headers with Typography

Set the Mood

Animated Elements

Finishing Thoughts on Hand-Drawn Elements

1. Failing to set a decisive business goal

2. Choosing the wrong activities

3. Recruiting the wrong users

4. Lacking a dedicated staff

5. Not thinking about ways to deliver results

6. Not putting possible solutions to the test

7. Conducting tests to validate your ideas

Conclusion

1. Failing to set a decisive business goal

2. Choosing the wrong activities

3. Recruiting the wrong users

4. Lacking a dedicated staff

5. Not thinking about ways to deliver results

Where to `:focus`?

`alert()` is normally triggered like this:

`confirm()` is normally triggered like this:

`prompt()` is normally triggered like this: