Archive

Archive for July, 2020

10 modern layouts in 1 line of CSS

July 31st, 2020 No comments

Una doing an amazing job of showing just how (dare I say it?) easy CSS layout has gotten. There is plenty to learn, but what you learn makes sense, and once you have, it’s quite empowering.

The demos are all together here.

Direct Link to ArticlePermalink


The post 10 modern layouts in 1 line of CSS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

A Look at What’s New in Chrome DevTools in 2020

July 31st, 2020 No comments
Screenshot of DevTools open on a CSS-Tricks page. The Lighthouse panel is open showing a best practices score of 100 out of 100.

I’m excited to share some of the newer features in Chrome DevTools with you. There’s a brief introduction below, and then we’ll cover many of the new DevTools features. We’ll also look at what’s happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest collection of DevTools tips you’ll find online!

It’s a good idea to find out what’s changed in DevTools because it’s constantly evolving and new features are specifically designed to help and improve our development and debugging experience.

Let’s jump into the latest and greatest. While the public stable version of Chrome does have most of these features, I’m using Chrome Canary as I like to stay on the bleeding edge.

Lighthouse

Lighthouse is an open source tool for auditing web pages, typically around performance, SEO, accessibility and such. For a while now, Lighthouse has been bundled as part of DevTools meaning you can find it in a panel named… Lighthouse!

Well done, Mr. Coyier. ?

I really like Lighthouse because it’s one of easiest parts of DevTools to use. Click “Generate report” and you immediately get human-readable notes for your webpage, such as:

Document uses legible font sizes 100% legible text

Or:

Avoid an excessive DOM size (1,189 elements)

Almost every single audit links to developer documentation that explains how the audit may fail, and what you can do to improve it.

The best way to get started with Lighthouse is to run audits on your own websites:

  1. Open up DevTools and navigate to the Lighthouse panel when you are on one of your sites
  2. Select the items you want to audit (Best practices is a good starting point)
  3. Click Generate report
  4. Click on any passed/failed audits to investigate the findings

Even though Lighthouse has been part of DevTools for a while now (since 2017!), it still deserves a significant mention because of the user-facing features it continues to ship, such as:

  • An audit that checks that anchor elements resolve to their URLs (Fun fact: I worked on this!)
  • An audit that checks whether the Largest Contentful Paint metic is fast enough
  • An audit to warn you of unused JavaScript

A better “Inspect Element”

This is a subtle and, in some ways, very small feature, but it can have profound effects on how we treat web accessibility.

Here’s how it works. When you use Inspect Element — what is arguably the most common use of DevTools — you now get a tooltip with additional information on accessibility.

Screenshot showing DevTools open on a CSS-Tricks page. An element is highlighted on the page and a tooltip with a white background is above it providing information on the element's color, font, contrast, name, role, and whether it is keyboard-focusable.
Accessibility is baked right in!

The reason I say this can have a profound impact is because DevTools has had accessibility features for quite some time now, but how many of us actually use them? Including this information on a commonly used feature like Inspect Element will gives it a lot more visibility and makes it a lot more accessible.

The tooltip includes:

  • the contrast ratio of the text (how well, or how poorly, does the foreground text contrast with the background color)
  • the text representation
  • the ARIA role
  • whether or not the inspected element is keyboard-focusable

To try this out, right-click (or Cmd + Shift + C) on an element and select Inspect to view it in DevTools.

I made a 14-minute video on Accessibility debugging with Chrome DevTools which covers some of this in more detail.

Emulate vision deficiencies

Exactly as it says on the tin, you can use Chrome DevTools to emulate vision impairments. For example, we can view a site through the lens of blurred vision.

Screenshot of DevTools open on a CSS-Tricks page. The Rendering panel is open and the blurred vision option is selected. The CSS-Tricks page is blurry and difficult to read.
That’s a challenge to read!

How can you do this in DevTools? Like this:

  1. Open DevTools (right click and “Inspect” or Cmd + Shift + C).
  2. Open the DevTools Command menu (Cmd + Shift + P on Mac, Ctrl + Shift + P on Windows).
  3. Select Show Rendering in the Command menu.
  4. Select a deficiency in the Rendering pane.

We used blurred vision as an example, but DevTools has other options, including: protanopia, deuteranopia, tritanopia, and achromatopsia.

Like with any tool of this nature, it’s designed to be a complement to our (hopefully) existing accessibility skills. In other words, it’s not instructional, but rather, influential on the designs and user experiences we create.

Here are a couple of extra resources on low vision accessibility and emulation:

Get timing on performance

The Performance Panel in DevTools can sometimes look like a confusing mish-mash of shapes and colors.

This update to it is great because it does a better job surfacing meaningful performance metrics.

Screenshot of DevTools with the Performance panel open. A chart showing the timeline of page rendering is above a row of Timings, including DCL, FP, FCP, L, and LCP. Below that is a summary that provides a time range for the selected timing.

What we want to look at are those extra timing rectangles shown in the “Timings” in the Performance Panel recording. This highlights:

  • DOMContentLoaded: The event which triggers when the initial HTML loads
  • First Paint: When the browser first paints pixels to the screen
  • First Contentful Paint: The point at which the browser draws content from the DOM which indicates to the user that content is loading
  • Onload: When the page and all of its resources have finished loading
  • Largest Contentful Paint: The largest image or text element, which is rendered in the viewport

As a bonus, if you find the Largest Contentful Paint event in a Performance Panel recording, you can click on it to get additional information.

Nice work, CSS-Tricks! The Largest Contentful Paint happens early on in the page load.

While there is a lot of golden information here, the “Related Node” is potentially the most useful item because it specifies exactly which element contributed to the LCP event.

To try this feature out:

  1. Open up DevTools and navigate to the Performance panel
  2. Click “Start profiling and reload page”
  3. Observe the timing metrics in the Timings section of a recording
  4. Click the individual metrics to see what additional information you get

Monitor performance

If you want to quickly get started using DevTools to analyze performance and you’ve already tried Lighthouse, then I recommend the Performance Monitor feature. This is sort of like having WebPageTest.org right at your fingertips with things like CPU usage.

Screenshot of DevTools with the Performance Monitor pane open. Four timeline charts are stacked vertically, starting with CPU Usage,followed by JavaScript Heap Size, DOM Nodes, and JavaScript Event Listeners.

Here’s how to access it:

  1. Open DevTools
  2. Open up the Command menu (Cmd + Shift + P on Mac, Ctrl + Shift + P on Windows)
  3. Select “Show performance monitor” from the Command menu
  4. Interact and navigate around the website
  5. Observe the results

The Performance Monitor can give you interesting metrics, however, unlike Lighthouse, it’s for you to figure out how to interpret them and take action. No suggestions are provided. It’s up to you to study that CPU usage chart and ask whether something like 90% is an acceptable level for your site (it probably isn’t).

The Performance Monitor has an interactive legend, where you can toggle metrics on and off, such as:

  • CPU usage
  • JS heap size
  • DOM Nodes
  • JS event listeners
  • Documents
  • Document Frames
  • Layouts / sec
  • Style recalcs / sec

CSS overview and local overrides

CSS-Tricks has already covered these features, so go and check them out!

  • CSS Overview: A handy DevTools panel that gives a bunch of interesting stats on the CSS your page is using
  • Local Overrides: A powerful feature that lets you override production websites with your local resources, so you can easily preview changes

So, what about DevTool in other browsers?

I’m sure you noticed that I’ve been using Chrome throughout this article. It’s the browser I use personally. That said, it’s worth considering that:

  • Firefox DevTools is looking pretty great right now
  • With Microsoft Edge extending from Chromium, it too will benefit from these DevTools features
  • As evident on the Safari Technology Preview Release Notes (search for Web Inspector on that page), Safari DevTools has come a long way

In other words, keep an eye out because this is a quickly evolving space!

Conclusion

We covered a lot in a short amount of space!

  • Lighthouse: A panel that provides tips and suggestions for performance, accessibility, SEO and best practices.
  • Inspect Element: An enhancement to the Inspect Element feature that provides accessibility information to the Inspect Element tooltip
  • Emulate vision deficiencies: A feature in the Rendering Pane to view a page through the lens of low vision.
  • Performance Panel Timings: Additional metrics in the Performance panel recording, showing user-orientated stats, like Largest Contentful Paint
  • Performance Monitor – A real-time visualization of performance metrics for the current website, such as CPU usage and DOM size

Please check out my mailing list, Dev Tips, if you want to stay keep up with the latest updates and get over 200 web development tips! I also have a premium video course over at ModernDevTools.com. And, I tend to post loads of bonus web development resources on Twitter.


The post A Look at What’s New in Chrome DevTools in 2020 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Is Change Positive for Web Designers?

July 31st, 2020 No comments

As a web designer, you’re constantly being bombarded with messages that tell you to acquire new skills, try new tools, and keep on hustling.

But if you’re constantly changing things up, does it do the opposite of what you originally set out to do? In other words, if you always have to start over, is it possible to ever really achieve anything?

I think it ultimately depends on why you’re making the change.

When Change Is the Right Move for Web Designers

One of the reasons I despise New Year’s resolutions is because it’s change for the sake of change:

It’s a new year, so it’s time to get all hyped up about this one thing I need to change about myself!

There’s a reason why so many resolutions fail by February. When you force a change, it’s really hard to stay invested in it, especially if it’s something you’ve chosen to do because everyone else has.

Change should be driven by necessity.

That said, when it comes time to make changes as a web designer, is it ever really necessary? Or are you learning new skills, trying new tools, or switching up your client list simply because it’s what you believe you have to do?

It’s important to be open to change, but you should only invest your time, money, or effort when it’s the absolute right move for you. Here are some ways you’ll know when that’s the case:

Learn New Skills To…

…Round Out the Basics

If you’re a new designer and there are gaps in your education and training (and I don’t mean formally, just in general), then there’s no reason to hesitate in spending time to acquire those skills.

This doesn’t just go for basic skills as a web designer or as a coder. This also goes for skills you need to become a successful freelancer.

…Add Evergreen Skills to Future-Proof Your Position

As you move up in your career, you’ll eventually find other skills worth learning. Just make sure they’ll help you move the needle.

The best way to do that is to focus on acquiring evergreen skills that’ll always be useful to you, no matter what stage you’re at in your career or how the design landscape changes. They should also go beyond the average skill set of a designer, so they help you stand out further from the pack.

… Create a Better Situation for Yourself

The web is constantly evolving, which means that your responsibilities and skills as a web designer will have to change in order to adapt. Whenever one of these shake-ups occurs, you should either be ready to master the needed skill right away or, better yet, have been working on it beforehand.

Take, Google’s mobile-first indexing, for instance. It announced it was going to be making this shift years before website rankings were impacted. Designers had plenty of time to not only learn what was needed to design for the mobile-first web, but to get all their existing clients’ sites in shape for it.

Adopt New Tools When…

…Your Existing Ones Are Slowing You Down

If you’re doing a lot of things from-scratch (like writing emails to clients or creating contracts), that’s a good sign your toolbox needs some improvement.

As a web designer, you should be focused on creating, not on the tedious details involved in running a business or communicating with clients. That’s just not a good use of your time. A lot of this stuff can easily be automated with tools and templates.

…You’re Turning Down Business

In some cases, it’s the right thing to say “no” to prospective clients — like when they’re a bad fit or can’t afford your rates. However, there are other times when you desperately want to be able to say “yes”, but you don’t have the capacity for the job or you’re unable to cover the full scope of what they need.

This is where new tools come in handy. For instance, let’s say you’ve been approached by a ecommerce company that not only wants you to build a new store, but also needs it fully optimized for search (it’s not the first time this has happened either). Rather than turn something like that down, you may find that the addition of an SEO tool to your toolbox is all you need to be able to say “yes”.

…You Have Extra Room in Your Budget

Obviously, you don’t want to throw away money on a bunch of tools simply because a ton of people are talking about them. But you’ll eventually get to a point where the tools that served you well in the first year of business need to be replaced.

If you get to a point where you have extra time to experiment and there’s room in your budget for upgraded tools, go ahead and assess what you currently have and test out replacement solutions that will help you work better, faster, and smarter.

Look for New Business Opportunities If…

…You’re Not Doing Well

“Well” here is subjective. For instance:

  • If you’re not doing well financially, you probably need to look for more clients;
  • If you’re not doing well in terms of how you get along with clients, you should explore a niche that’s a better fit;
  • If you’re not happy with your job because burnout and stress have overtaken your life, then you might consider exploring other avenues of work.

When something has been amiss for awhile, the last thing you should do is lean into it and hope it gets better.

…The Web is Changing

Notice a trend here? Each of these changes (skills, tools, and now business opportunities) is often driven by the fact that the web is always changing. And as the web changes, you have to be ready to evolve.

In terms of business opportunities, what you’ll realistically need to do is look for new kinds of design work as technologies make your job obsolete. Take website builders like Wix or Shopify, for example. As business owners and entrepreneurs take it upon themselves to build their own websites, more and more web designers will need to find other kinds of clients and jobs to take on.

…You Want to Diversify Your Income

This is something many web designers are doing already as they’ve discovered how beneficial it is to have predictable recurring revenue streams.

But even if you’ve already found one way to diversify and stabilize your income (like by offering website maintenance services), you may become interested in exploring other opportunities along the way. If you have the capacity to pursue them, then go for it.

Is Change a Good Idea?

As you can see, change can be a very good thing for a web designer, their business, and their clients. However, there should be a very good reason for the change and you need to prepare yourself for how it’s going to impact what you’re doing now before implementing it. No amount of change can happen without some level of sacrifice.

Featured image via Unsplash.

Source

Categories: Designing, Others Tags:

A Lightweight Masonry Solution

July 31st, 2020 No comments
Screenshot showing the masonry flag being enabled according to the instructions above.

Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how this new proposed CSS feature works.

Support is obviously limited to Firefox for now (and, even there, only behind a flag), but it still offered me enough of a starting point for a JavaScript implementation that would cover browsers that currently lack support.

The way Firefox implements masonry in CSS is by setting either grid-template-rows (as in the example) or grid-template-columns to a value of masonry.

My approach was to use this for supporting browsers (which, again, means just Firefox for now) and create a JavaScript fallback for the rest. Let’s look at how this works using the particular case of an image grid.

First, enable the flag

In order to do this, we go to about:config in Firefox and search for “masonry.” This brings up the layout.css.grid-template-masonry-value.enabled flag, which we enable by double clicking its value from false (the default) to true.

Making sure we can test this feature.

Let’s start with some markup

The HTML structure looks something like this:

<section class="grid--masonry">
  <img src="black_cat.jpg" alt="black cat" />
  <!-- more such images following -->
</section>

Now, let’s apply some styles

The first thing we do is make the top-level element a CSS grid container. Next, we define a maximum width for our images, let’s say 10em. We also want these images to shrink to whatever space is available for the grid’s content-box if the viewport becomes too narrow to accommodate for a single 10em column grid, so the value we actually set is Min(10em, 100%). Since responsivity is important these days, we don’t bother with a fixed number of columns, but instead auto-fit as many columns of this width as we can:

$w: Min(10em, 100%);

.grid--masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, $w);
	
  > * { width: $w; }
}

Note that we’ve used Min() and not min() in order to avoid a Sass conflict.

CodePen Embed Fallback

Well, that’s a grid!

Not a very pretty one though, so let’s force its content to be in the middle horizontally, then add a grid-gap and padding that are both equal to a spacing value ($s). We also set a background to make it easier on the eyes.

$s: .5em;

/* masonry grid styles */
.grid--masonry {
  /* same styles as before */
  justify-content: center;
  grid-gap: $s;
  padding: $s
}

/* prettifying styles */
html { background: #555 }
CodePen Embed Fallback

Having prettified the grid a bit, we turn to doing the same for the grid items, which are the images. Let’s apply a filter so they all look a bit more uniform, while giving a little additional flair with slightly rounded corners and a box-shadow.

img {
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(#000, .7);
  filter: sepia(1);
}
CodePen Embed Fallback

The only thing we need to do now for browsers that support masonry is to declare it:

.grid--masonry {
  /* same styles as before */
  grid-template-rows: masonry;
}

While this won’t work in most browsers, it produces the desired result in Firefox with the flag enabled as explained earlier.

Screenshot showing the masonry result in Firefox alongside DevTools where we can see what's under the hood.
grid-template-rows: masonry working in Firefox with the flag enabled (Demo).

But what about the other browsers? That’s where we need a…

JavaScript fallback

In order to be economical with the JavaScript the browser has to run, we first check if there are any .grid--masonry elements on that page and whether the browser has understood and applied the masonry value for grid-template-rows. Note that this is a generic approach that assumes we may have multiple such grids on a page.

let grids = [...document.querySelectorAll('.grid--masonry')];

if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
  console.log('boo, masonry not supported 😭')
}
else console.log('yay, do nothing!')
Screenshot showing how Firefox with the flag enabled as explained above logs 'yay, do nothing!', while other browsers log 'boo, masonry not supported'.
Support test (live).

If the new masonry feature is not supported, we then get the row-gap and the grid items for every masonry grid, then set a number of columns (which is initially 0 for each grid).

let grids = [...document.querySelectorAll('.grid--masonry')];

if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
  grids = grids.map(grid => ({
    _el: grid, 
    gap: parseFloat(getComputedStyle(grid).gridRowGap), 
    items: [...grid.childNodes].filter(c => c.nodeType === 1), 
    ncol: 0
  }));
  
  grids.forEach(grid => console.log(`grid items: ${grid.items.length}; grid gap: ${grid.gap}px`))
}

Note that we need to make sure the child nodes are element nodes (which means they have a nodeType of 1). Otherwise, we can end up with text nodes consisting of carriage returns in the array of items.

Screenshot showing the number of items and the row-gap logged in the console.
Checking we got the correct number of items and gap (live).

Before proceeding further, we have to ensure the page has loaded and the elements aren’t still moving around. Once we’ve handled that, we take each grid and read its current number of columns. If this is different from the value we already have, then we update the old value and rearrange the grid items.

if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
  grids = grids.map(/* same as before */);
	
  function layout() {
    grids.forEach(grid => {
      /* get the post-resize/ load number of columns */
      let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length;

      if(grid.ncol !== ncol) {
        grid.ncol = ncol;
        console.log('rearrange grid items')
      }
    });
  }
	
  addEventListener('load', e => {		
    layout(); /* initial load */
    addEventListener('resize', layout, false)
  }, false);
}

Note that calling the layout() function is something we need to do both on the initial load and on resize.

Screenshot showing the message we get when relayout is necessry.
When we need to rearrange grid items (live).

To rearrange the grid items, the first step is to remove the top margin on all of them (this may have been set to a non-zero value to achieve the masonry effect before the current resize).

If the viewport is narrow enough that we only have one column, we’re done!

Otherwise, we skip the first ncol items and we loop through the rest. For each item considered, we compute the position of the bottom edge of the item above and the current position of its top edge. This allows us to compute how much we need to move it vertically such that its top edge is one grid gap below the bottom edge of the item above.

/* if the number of columns has changed */
if(grid.ncol !== ncol) {
  /* update number of columns */
  grid.ncol = ncol;

  /* revert to initial positioning, no margin */
  grid.items.forEach(c => c.style.removeProperty('margin-top'));

  /* if we have more than one column */
  if(grid.ncol > 1) {
    grid.items.slice(ncol).forEach((c, i) => {
      let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */, 
          curr_ini = c.getBoundingClientRect().top /* top edge of current item */;
						
      c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`
    })
  }
}

We now have a working, cross-browser solution!

CodePen Embed Fallback

A couple of minor improvements

A more realistic structure

In a real world scenario, we’re more likely to have each image wrapped in a link to its full size so that the big image opens in a lightbox (or we navigate to it as a fallback).

<section class='grid--masonry'>
  <a href='black_cat_large.jpg'>
    <img src='black_cat_small.jpg' alt='black cat'/>
  </a>
  <!-- and so on, more thumbnails following the first -->
</section>

This means we also need to alter the CSS a bit. While we don’t need to explicitly set a width on the grid items anymore — as they’re now links — we do need to set align-self: start on them because, unlike images, they stretch to cover the entire row height by default, which will throw off our algorithm.

.grid--masonry > * { align-self: start; }

img {
  display: block; /* avoid weird extra space at the bottom */
  width: 100%;
  /* same styles as before */
}
CodePen Embed Fallback

Making the first element stretch across the grid

We can also make the first item stretch horizontally across the entire grid (which means we should probably also limit its height and make sure the image doesn’t overflow or get distorted):

.grid--masonry > :first-child {
  grid-column: 1/ -1;
  max-height: 29vh;
}

img {
  max-height: inherit;
  object-fit: cover;
  /* same styles as before */
}

We also need to exclude this stretched item by adding another filter criterion when we get the list of grid items:

grids = grids.map(grid => ({
  _el: grid, 
  gap: parseFloat(getComputedStyle(grid).gridRowGap), 
  items: [...grid.childNodes].filter(c => 
    c.nodeType === 1 && 
    +getComputedStyle(c).gridColumnEnd !== -1
  ), 
  ncol: 0
}));
CodePen Embed Fallback

Handling grid items with variable aspect ratios

Let’s say we want to use this solution for something like a blog. We keep the exact same JS and almost the exact same masonry-specific CSS – we only change the maximum width a column may have and drop the max-height restriction for the first item.

As it can be seen from the demo below, our solution also works perfectly in this case where we have a grid of blog posts:

CodePen Embed Fallback

You can also resize the viewport to see how it behaves in this case.

However, if we want the width of the columns to be somewhat flexible, for example, something like this:

$w: minmax(Min(20em, 100%), 1fr)

Then we have a problem on resize:

The changing width of the grid items combined with the fact that the text content is different for each means that when a certain threshold is crossed, we may get a different number of text lines for a grid item (thus changing the height), but not for the others. And if the number of columns doesn’t change, then the vertical offsets don’t get recomputed and we end up with either overlaps or bigger gaps.

In order to fix this, we need to also recompute the offsets whenever at least one item’s height changes for the current grid. This means we need to also need to test if more than zero items of the current grid have changed their height. And then we need to reset this value at the end of the if block so that we don’t rearrange the items needlessly next time around.

if(grid.ncol !== ncol || grid.mod) {
  /* same as before */
  grid.mod = 0
}

Alright, but how do we change this grid.mod value? My first idea was to use a ResizeObserver:

if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
  let o = new ResizeObserver(entries => {
    entries.forEach(entry => {
      grids.find(grid => grid._el === entry.target.parentElement).mod = 1
    });
  });
  
  /* same as before */
  
  addEventListener('load', e => {
    /* same as before */
    grids.forEach(grid => { grid.items.forEach(c => o.observe(c)) })
  }, false)
}

This does the job of rearranging the grid items when necessary even if the number of grid columns doesn’t change. But it also makes even having that if condition pointless!

This is because it changes grid.mod to 1 whenever the height or the width of at least one item changes. The height of an item changes due to the text reflow, caused by the width changing. But the change in width happens every time we resize the viewport and doesn’t necessarily trigger a change in height.

This is why I eventually decided on storing the previous item heights and checking whether they have changed on resize to determine whether grid.mod remains 0 or not:

function layout() {
  grids.forEach(grid => {
    grid.items.forEach(c => {
      let new_h = c.getBoundingClientRect().height;
				
      if(new_h !== +c.dataset.h) {
        c.dataset.h = new_h;
        grid.mod++
      }
    });
			
    /* same as before */
  })
}
CodePen Embed Fallback

That’s it! We now have a nice lightweight solution. The minified JavaScript is under 800 bytes, while the strictly masonry-related styles are under 300 bytes.

But, but, but…

What about browser support?

Well, @supports just so happens to have better browser support than any of the newer CSS features used here, so we can put the nice stuff inside it and have a basic, non-masonry grid for non-supporting browsers. This version works all the way back to IE9.

Screenshot showing the IE grid.
The result in Internet Explorer

It may not look the same, but it looks decent and it’s perfectly functional. Supporting a browser doesn’t mean replicating all the visual candy for it. It means the page works and doesn’t look broken or horrible.

What about the no JavaScript case?

Well, we can apply the fancy styles only if the root element has a js class which we add via JavaScript! Otherwise, we get a basic grid where all the items have the same size.

Screenshot showing the no JS grid.
The no JavaScript result (Demo).

The post A Lightweight Masonry Solution appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Making Memories To Last (August 2020 Wallpapers Edition)

July 31st, 2020 No comments
We're All The Same

Making Memories To Last (August 2020 Wallpapers Edition)

Making Memories To Last (August 2020 Wallpapers Edition)

Cosima Mielke

2020-07-31T08:00:00+00:00
2020-08-01T05:07:51+00:00

Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for new and unique artworks on a regular basis, we started our monthly wallpapers challenge more than nine years ago, and from the early days on to today, artists and designers from all across the globe have accepted the challenge and submitted their designs to it. It wasn’t any different this time around, of course.

In this post, you’ll find their wallpapers for August 2020. All of them are available in versions with and without a calendar — to help you count down the days to a big deadline (or a few days off, maybe?) or continue to use your favorite even after the month has ended. You decide. A big thank-you to everyone who shared their designs with us — we sincerely appreciate it!

As a little bonus goodie, we also added some “oldies” at the end of this post, timeless wallpaper treasures that we rediscovered way down in our archives and that are just too good to gather dust. Now there’s only one question left to be answered: Which one will accompany you through the new month?

  • All images can be clicked on and lead to the preview of the wallpaper,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit your wallpaper

Did you know that you could get featured in one of our upcoming wallpapers posts, too? We are always looking for creative talent, so if you have an idea for a wallpaper for September, please don’t hesitate to submit it. We’d love to see what you’ll come up with. Join in! ?

We’re All The Same

Designed by LibraFire from Serbia.

Women’s Equality Day

“Women’s Equality Day is a US celebration of the prohibition denying voting rights on the basis of sex. It’s a celebration of those trailblazers and suffragists who faught for their right to vote. So this 26th of August let’s honor them for the vitally important change they brought about back in 1920.” — Designed by Ever Increasing Circles from the United Kingdom.

August Days

“August is the month when we get sunburnt doing agricultural works, hike across the wild and untamed forests, and explore the depths of sun-kissed oceans and seas. The wind is mild and warm, the nights are filled with chatter, smiles, and music. August days are scattered around everywhere, and we try to catch and use up each and every one of them until summer gets lost in the face of murky autumn. In August, we chase laughs, sunsets, and memories.” — Designed by PopArt Studio from Serbia.

August Days

Live In The Moment

“My dog Sami inspired me for this one. He lives in the moment and enjoys every second with a big smile on his face. I wish we could learn to enjoy life like he does! Happy August everyone!” — Designed by Westie Vibes from Portugal.

Live In The Moment

In A Sunbeam

“A lot of summer activities and holiday travels had to be canceled this month, but our pets don’t know that – they’re perfectly happy to lie around at home and soak up the sun. I wanted to make some calming art that would channel that energy, to help people recharge between all the stressors you have to face these days.” — Designed by Erin Ptah from the United States.

In A Sunbeam

Creating Buzz

Designed by Ricardo Gimenes from Sweden.

Creating Buzz

August And A Half

“Somewhere it’s summer, somewhere else it’s winter time.” — Designed by Dan Di from Italy.

August And A Half

Remembering The Freedom Struggle

“Freedom is the highest value. August tells the tales of sacrifices and courage of a nation that fought its way through a very difficult path for independence.” — Designed by AufaitUX from India.

Remembering The Freedom Struggle

Oldies But Goodies

A crackling fire, a well-deserved nap on a hot summer day, a cornfield glowing golden in the midday sun — a lot of things have inspired the design community to create an August wallpaper in the last few years. Here are some favorites from our archives. (Please note that these designs don’t come with a calendar.)

Colorful Summer

“‘Always keep mint on your windowsill in August, to ensure that the buzzing flies will stay outside where they belong. Don’t think summer is over, even when roses droop and turn brown and the stars shift position in the sky. Never presume August is a safe or reliable time of the year.’ (Alice Hoffman)” — Designed by Lívi from Hungary.

Colorful Summer

Smoky Mountain Bigfoot Conference

“Headed towards Smoky Mountain Bigfoot Conference this summer? Oh, they say it’s gonna be a big one! Get yourself out there well-prepared, armed with patience and ready to have loads of fun with fellow Bigfoot researchers. Looking forward to those campsite nights under the starry sky, with electrifying energy of expectations filling up the air? Lucky you!” — Designed by Pop Art Studio from Serbia.

Smoky Mountain Bigfoot Conference

Childhood Memories

Designed by Francesco Paratici from Australia.

Monthly Quality Desktop Wallpaper - August 2012
  • preview
  • without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Handwritten August

“I love typograhy handwritten style.” — Designed by Chalermkiat Oncharoen from Thailand.

Handwritten August

Bee Happy!

“August means that fall is just around the corner, so I designed this wallpaper to remind everyone to ‘bee happy’ even though summer is almost over. Sweeter things are ahead!” — Designed by Emily Haines from the United States.

Bee Happy!

Estonian Summer Sun

“This is a moment from Southern Estonia that shows amazing summer nights.” Designed by Erkki Pung / Sviiter from Estonia.

Estonian Summer Sun

Coffee Break Time

Designed by Ricardo Gimenes from Sweden.

Coffee Break Time

Purple Haze

“Meet Lucy: she lives in California, loves summer and sunbathing at the beach. This is our Jimi Hendrix Experience tribute. Have a lovely summer!” — Designed by PopArt Web Design from Serbia.

Purple Haze

Psst, It’s Camping Time…

“August is one of my favorite months, when the nights are long and deep and crackling fire makes you think of many things at once and nothing at all at the same time. It’s about heat and cold which allow you to touch the eternity for a few moments.” — Designed by Igor Izhik from Canada.

Psst, It's Camping Time...

Hello Again

“In Melbourne it is the last month of quite a cool winter so we are looking forward to some warmer days to come.” — Designed by Tazi from Australia.

Hello Again

Liqiu And Orange Daylily Season

“Liqiu signifies the beginning of autumn in East Asian cultures. After entering the Liqiu, the mountains in Eastern Taiwan’s East Rift Valley are covered in a sea of golden flowers, very beautiful. The production season for high-mountain daylilies is in August. Chihke Mountain, in Yuli Township, and Sixty-Stone Mountain, in Fuli Township, which are both located in Hualien County, are two of the country’s three high-mountain daylily production areas.” — Designed by Hong, Zi-Qing from Taiwan.

Liqiu And Orange Daylily Season

Summer Nap

Designed by Dorvan Davoudi from Canada.

Summer Nap

Happy Janmashtami

“Janmashtami, the day that Lord Krishna was born, is an important Hindu Festival which is celebrated worldwide. The idea was to create the Lord Krishna’s flute-playing persona, in a minimalist design form.” — Designed by Damn Perfect from Jaipur, India.

Happy Janmashtami

A Bloom Of Jellyfish

“I love going to aquariums – the colors, patterns and array of blue hues attract the nature lover in me while still appeasing my design eye. One of the highlights is always the jellyfish tanks. They usually have some kind of light show in them, which makes the jellyfish fade from an intense magenta to a deep purple – and it literally tickles me pink. On a recent trip to uShaka Marine World, we discovered that the collective noun for jellyfish is a bloom and, well, it was love-at-first-collective-noun all over again. I’ve used some intense colours to warm up your desktop and hopefully transport you into the depths of your own aquarium.” — Designed by Wonderland Collective from South Africa.

A Bloom Of Jellyfish

Saturn Among The Stars

“This summer I have a telescope. Every night I look to the sky and I look into the stars. Fortunately, I can see Saturn.” — Designed by Verónica Valenzuela from Spain.

Saturn Among The Stars

Colorstrike

Designed by Andr?? Presser from Germany.

Monthly Quality Desktop Wallpaper - August 2012

I Love Summer

“I love the summer nights and the sounds of the sea, the crickets, the music of some nice party.” — Designed by Maria Karapaunova from Bulgaria.

I Love Summer

Smashing Newsletter

Every second week, we send out useful front-end & UX techniques. Subscribe and get Smart Interface Design Checklists PDF in your inbox.


Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.

Categories: Others Tags:

Spotting a Trend

July 30th, 2020 No comments

There are tons of smokin’ hot websites out there, with an equal or greater number of talented designers and developers who make them. The web is awesome like that and encourages that sort of creativity.

Even so, it amazes me that certain traits find their way into things. I mean, it makes sense. Many of us use the same UI frameworks and take cues from sites we admire. But every once in a while, my eye starts catching wind of the zeitgeist and commonalities that come with it.

The latest one? Blobby shapes. It’s a fun flourish that adds a little panache, especially for flat designs that need a splash of color or an interesting focal point that leads the eye from one place to anther. I’m sure you’ve seen it. I spent one week collecting screenshots of websites I came across that use it. I certainly wan’t looking for examples; they just sort of popped up in my normal browsing.

I’m sorry if it seems like I’m calling out people because that’s my intention. I actually love the concept — so much, in fact, that I’m considering it on a project! Some of the examples in that gallery are flat-out gorgeous.

After spotting these blobby shapes a number of times, I’ve started to notice some considerations to take into account when use them. Things like:

  • Watch for contrast when text sits on top of a blob. There are plenty of cases where the document background is white and the blob is dark. If text runs through them, it’s going to be tough to find a font color that satisfies WCAG’s 2.1 AA standard for legibility.
  • Tread lightly when mixing and matching colors. One hot pink blob behind a card component ain’t a big deal, but throw in yellow, orange, and other bright colors that sit alongside it… the design starts to distract from the content. Plus, a vibrant rainbow of blobby shapes can raise accessibility concerns. A flourish is just that: a nice touch that’s subtle but impactful.
  • Blobs are good for more than color. Some of the most interesting instances I’ve seen cut images into interesting shapes. It’s cool that we can embed an image directly in SVG and then mask it with a path.
  • Blobs are also good for more than backgrounds. Did you catch that screenshot from Topcoder’s site? They’re using it for tabs which is super funky and cool.

All of this has me thinking about how the websites of today will be looked at by the developers of tomorrow. Remember way back, like 15 years ago, when many sites adopted Apple’s use of reflective imagery? I probably still have some Photoshop muscle memory from replicating that effect so many times.

Photo of three iPhone 3 models next to one another. The first shows the home screen, the other two show the back, one in black and one in white. All three phones sport a reflection beneath them.
Notice the skeuomorphic icons — that was popular too!

Skeuomorphism, bevels, animated GIF backgrounds, long shadows, heroes, gradients, bokeh backgrounds… all of these and many other visual treatments have had their day in the sun. Perhaps blobs will join that club at some point. Perhaps they’ll come back in style after that. Who knows! I just find it interesting to reflect on the things that have inspired us over the last three decades and imagine how the things we do today will be seen through the long lens of time.

It’d be awesome to see other instances of blobby shapes — share ’em if you’ve got ’em!


The post Spotting a Trend appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

SVG Title vs. HTML Title Attribute

July 30th, 2020 No comments
Screenshot of standard text saying I'm a div with a title. A light gray tooltip is floating above the text next to the cursor that says The Title.

You know the title attribute? I can do this:

<div title="The Title">
  I'm a div with a `title`
</div>

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…

Which, uh, I guess is something. I sometimes use it for things like putting an expanded date or time on an element that uses shorthand for it. It’s a tiny bit of UX helpfulness reserved exclusively for sighted mouse users.

But it’s not particularly useful, as I understand it. Ire Aderinokun dug into how it’s used for the element (a commonly cited example) and found that it’s not-so-great alone. She suggests a JavaScript-enhanced pattern. She also mentions that JAWS has a setting for announcing titles in there, so that’s interesting (although it sounds like it’s off by default).

I honestly just don’t know how useful title is for screen readers, but it’s certainly going to be nuanced.

I did just learn something about titles though… this doesn’t work:

<!-- Incorrect usage -->
<svg title="Checkout">
</svg>

If you hover over that element, you won’t get a title display. You have to do it like this:

<!-- Correct usage -->
<svg>
  <title>Checkout</title>
  
  <!-- More detail -->
  <desc>A shopping cart icon with baguettes and broccoli in the cart.</desc>
</svg>

Which, interestingly, Firefox 79 just started supporting.

When you use title like that, the hoverable area to reveal the title popup is the entire rectangle of the .

I was looking at all this because I got an interesting email from someone who was in a situation where the title popup only seemed to come up when hovering over the “filled in” pixels of an SVG, and not where transparent pixels were. Weird, I thought. I couldn’t replicate in my testing either.

Turns out there is a situation like this. You can apply a </code> within a <code></code> element, then the title only applies to those pixels that come in via the <code></code>.</p> <div>CodePen Embed Fallback</div> <p>If you remove the “white part” title, you’ll see the “black part” only comes up over the black pixels. Seems to be consistent across browsers. Just something to watch out for if that’s how you apply titles. </p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/svg-title-vs-html-title-attribute/">SVG Title vs. HTML Title Attribute</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="https://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="https://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3412878"> <h2><a class="title" href="https://www.webmastersgallery.com/2020/07/30/6-web-design-concepts-proven-to-increase-conversions/" rel="bookmark">6 Web Design Concepts Proven To Increase Conversions</a></h2> <div class="info"> <span class="date">July 30th, 2020</span> <span class="author"><a href="https://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="https://www.webmastersgallery.com/2020/07/30/6-web-design-concepts-proven-to-increase-conversions/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://webdesignledger.com/6-web-design-concepts-proven-to-increase-conversions/"><img src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/659e9591-image2.png" alt=""></a></div> <p><span>Every business owner wants more conversions. </span></p> <p><a target="_blank" href="https://webdesignledger.com/5-design-hacks-guaranteed-put-conversions-fire/"><span>More conversions</span></a><span> equal more sales, and more sales mean exponential business growth. </span>But netting those conversions can prove challenging, especially if your website is not in the best shape.</p> <p><span>This is where web design plays a major role. </span></p> <p><span>The web design concepts you utilize directly impacts growth and how many of those coveted conversions your business racks up.</span></p> <p><span>Let’s say your SEO is on point, but conversions are lacking. </span><span>Yes, optimization is a must-do for your website. </span></p> <p><span>Unfortunately, if you’re not converting site visitors, all is for not. </span></p> <p><span>From New York to Houston, a </span><a target="_blank" href="https://www.ewrdigital.com/what-we-do/web-design-and-development"><span>web design agency</span></a><span> could be useful to fix that conversion problem. </span><span>But you can certainly develop a web design plan starting today. </span></p> <p><span>This is why we compiled the following 6 web design concepts proven to increase conversions.</span></p> <p><span> Let’s dive in!</span></p> <h2><strong>1. Grab Attention In 8 Seconds Or Less</strong></h2> <p><span>The human attention span has been compared to that of goldfish. </span></p> <p><span>This may be a myth, but there is no denying that online consumers have a very short attention span.</span></p> <p><span> To ensure you lead potential customers down the path toward conversions, you need to grab their attention fast.</span></p> <p><span>The 8-second rule is a web design concept that can help you increase conversions. </span></p> <p><span>This small window of opportunity is critical, so make it count, because you are on the clock.</span></p> <p><span>For example, you can employ creative imagery to grab attention, like this example from </span><a target="_blank" href="https://mailchimp.com/"><span>Mailchimp</span></a><span>:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/ce59d002-image7.png" alt="" width="1034" height="409"></p> <p><span>This artistic image has little to do with email marketing, the core of Mailchimp’s business. However, it is so unique, it catches the site visitor’s eye quickly.</span></p> <p><span>Other web design assets for grabbing attention in under 8 seconds include:</span></p> <ul> <li><span>Large signup and CTA buttons</span></li> <li><span>Power words and clever terms that are engaging</span></li> <li><span>Video and other interactive content</span></li> <li><span>Hover effect on buttons and links</span></li> <li><span>Animated transitions in sections</span></li> <li><span>Pop-ups that add value to the site visitor</span></li> <li><span>Big benefit headlines that are concise</span></li> </ul> <p><span>Web design is not solely about making Google happy. A clever design that grabs attention quickly can have a serious positive impact on your conversion rate.</span></p> <h2><strong>2. Encompass Speed And Increase Conversions</strong></h2> <p><span>“Most industries are highly competitive, and to gain a competitive advantage in your market, you need to have a fast website. This is a search optimization (SEO) essential that is tethered to web design.</span></p> <p><span>This is especially so for image search and compatibility with Google’s spiders. If images & design are slow to render, Google views that as an unfavorable compared to your competitors in a particular SERP” says Matt Bertram, co-host of </span><a target="_blank" href="https://www.bestseopodcast.com/"><span>BestSEOPodcast</span></a><span>. </span></p> <p><span>Let’s face it: A consumer’s attention span is pretty low. But not as low as his or her patience level. Did you know that a one-second delay in page loading can decrease your conversion rates by 7 percent?</span></p> <p><span>Is your website fast enough to keep potential customers on-page and off your competitors’ pages? To find out, you can utilize a few different speed check platforms, such as </span><a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/"><span>Google PageSpeed Insights</span></a><span>:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/832c444f-image9.png" alt="" width="718" height="188"></p> <p><a target="_blank" href="https://tools.pingdom.com/"><span>Pingdom</span></a><span> is another good site speed platform you can use to get insight on just how fast your website is, on desktop and mobile, as well as info on what you can do to fix poor page load time.</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/446ff6e8-image8.png" alt="" width="1047" height="429"></p> <h2><strong>3. The “Rule Of Thirds” Is Also A Web Design Concept</strong></h2> <p><span>The Rule of Thirds is a very important photography concept that can also be used in web design.</span></p> <p><span> What is the Rule of Thirds exactly? </span></p> <p><span>This web design concept divides a screen by thirds horizontally and vertically. </span></p> <p><span>The intersections created by this division become very important strategic points.</span></p> <p><span>The Rule of Thirds looks like this for web design:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/0e7ca7db-image11.png" alt="" width="1269" height="588"></p> <p><span>You can see that the intersecting lines are more enticing to the eyes. This could be why the Apple web design team placed the iPhone image directly in the middle of the bottom horizontal line. </span></p> <p><span>The price point also sits strategically between the two top intersection points, just above the horizontal line:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/787a9337-image10.png" alt="" width="1269" height="588"></p> <p><span>The Rule of Thirds can help you design each section of your website with strategic focal points in mind. You can place CTAs on these intersection points, key </span><a target="_blank" href="https://webdesignledger.com/10-social-media-marketing-ideas-for-your-business/"><span>marketing messages</span></a><span>, product images, and more.</span></p> <h2><strong>4. Maximize Conversions With Powerful Color Design</strong></h2> <p><span>Color remains an essential part of quality web design, especially when it comes to increasing conversions. But choosing the right color scheme for your website, and subsequently, your brand can prove a bit difficult.</span></p> <p><span>There are a ton of colors to choose from, but you should consider employing a bit of color psychology. That’s right, consumers are more motivated to buy from a website based on the color scheme used.</span></p> <p><span>Here’s a color wheel you can use:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/659e9591-image2.png" alt="" width="594" height="562"></p> <p><span>Most consumers don’t even know that color played a role in the purchase. For example, a HealthTech website will need to convey trust, empathy, and security on their website to increase conversions. The colors used could be:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/dbb684a7-image1.png" alt="" width="594" height="562"></p> <p><span>Using this color psychology, a website in the HealthTech industry can convey confidence to buy or signup quickly using a subconscious psychological connection.</span></p> <p><span>However, do not just pick a few colors and start developing your website. Quality web design using color means utilizing the power of contrast as well. </span></p> <p><span>Contrast will ensure headlines, CTAs, and text standout against your primary brand colors.</span></p> <p><span>Contrast looks like this in web design:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/0f423a7e-image4.png" alt="" width="751" height="422"></p> <p><span>You can see how HubSpot used contrast and a mixup of their primary brand colors to create a visually aesthetic website that also serves up a psychological connection.</span></p> <h2><strong>5. Employ The Law Of Similarity (Gestalt Principle)</strong></h2> <p><span>The Law of Similarity, Gestalt Principle, is another web design concept worth employing to increase conversions. </span></p> <p><span>How? </span><span>The Law of Similarity states that the human eye groups similar objects, which enables the human brain to make sense and organize what we see.</span></p> <p><span>This is important for web design since websites have multiple aspects. By grouping together these aspects using the Law of Similarity, site visitors can easily and quickly process website information and make a purchasing decision.</span></p> <p><span>For example, you can group testimonials with CTA buttons to drive more conversions. Here’s how this looks on a website using the Law of Similarity:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/b40271d4-image3.png" alt="" width="1083" height="364"></p> <p><span>You also serve up a powerful user experience when using the Law of Similarity as a web design concept. By having main aspects of your site grouped, like headline, paragraph text, and CTA, information is much easier to process for the visitor.</span></p> <h2><strong>6. Increase Conversions By Using Real People In Images</strong></h2> <p><span>To make your business more familiar, it is essential to put real people front and center. </span></p> <p><span>Most consumers can tell a stock image from a unique one, so having the people of your business front and center on your website can make the difference between conversion, or lost customer.</span></p> <p><span>This supports the current shift in marketing messaging for brands. In fact, a study found that </span><a target="_blank" href="https://us.epsilon.com/pressroom/new-epsilon-research-indicates-80-of-consumers-are-more-likely-to-make-a-purchase-when-brands-offer-personalized-experiences"><span>80 percent of consumers</span></a><span> are more likely to make a purchase from a business that provides a personalized touch. Images of you and your team can achieve this.</span></p> <p><span>A good example small businesses can draw from is this image from </span><a target="_blank" href="https://paradiseservices.biz/"><span>Paradise Service Technologies</span></a><span>:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/6cb5d3b3-image6.png" alt="" width="920" height="304"></p> <p><span>You can see the people that represent this small business. Having a personalized, real-life touch within your web design is paramount. </span></p> <p><span>Videos are also exceptional for delivering these personalized moments consumers demand in today’s overly competitive market. The same website that served up the team image employed video content as well:</span></p> <p><img loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/5f2eb394-image5.png" alt="" width="916" height="303"></p> <h2><strong>Are You Using Web Design Concepts To Increase Conversions?</strong></h2> <p><span>Creating a website for your business is more than simply putting optimized text and images together. </span></p> <p><span>You need to add that human element in order to net the conversions you want and need for growth and success.</span></p> <p><span>The above 6 web design concepts can prove useful while revamping your website. You may choose a few to implement, or maybe even all. </span></p> <p><span>Combining every web design concept, and more you find online can ensure that conversion rate continues to rise. Happy designing!</span></p> <p>Read More at <a target="_blank" rel="nofollow" href="https://webdesignledger.com/6-web-design-concepts-proven-to-increase-conversions/">6 Web Design Concepts Proven To Increase Conversions</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="https://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="https://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3403407"> <h2><a class="title" href="https://www.webmastersgallery.com/2020/07/30/getting-the-most-out-of-variable-fonts-on-google-fonts/" rel="bookmark">Getting the Most Out of Variable Fonts on Google Fonts</a></h2> <div class="info"> <span class="date">July 30th, 2020</span> <span class="author"><a href="https://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="https://www.webmastersgallery.com/2020/07/30/getting-the-most-out-of-variable-fonts-on-google-fonts/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/"><img src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-10.png?resize=1024%2C695&ssl=1" alt=""></a></div> <p>I have spent the past several years working (alongside a bunch of super talented people) on a font family called <a target="_blank" href="https://www.recursive.design/">Recursive Sans & Mono</a>, and it just launched officially on Google Fonts!</p> <p>Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google Fonts (but you will get a lot more flexibility & performance if you read further!)</p> <pre><code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code></pre> <p><span></span></p> <figure><figcaption>Recursive is made for code, websites, apps, and more.</figcaption></figure> <div> <div> <figure><img src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-11.png?resize=1024%2C1024&ssl=1" alt=""><figcaption>Recursive Mono has both Linear and Casual styles for different “voices” in code, along with cursive italics if you want them — plus a wider weight range for monospaced display typography.</figcaption></figure> </div> <div> <figure><img src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-12.png?resize=1024%2C1024&ssl=1" alt=""><figcaption>Recursive Sans is proportional, but unlike most proportional fonts, letters maintain the same width across styles for more flexibility in UI interactions and layout.</figcaption></figure> </div> </div> <p>I started Recursive as a thesis project for a type design masters program at <a target="_blank" href="http://typemedia.org/">KABK TypeMedia</a>, and when I launched my type foundry, <a target="_blank" href="https://www.arrowtype.com/">Arrow Type</a>, I was subsequently commissioned by Google Fonts to finish and release Recursive as an open-source, OFL font.</p> <p>You can see Recursive and learn more about it what it can do at <a target="_blank" href="https://www.recursive.design/">recursive.design</a>. </p> <p>Recursive is made to be a flexible type family for both websites and code, where its main purpose is to give developers and designers some fun & useful type to play with, combining fresh aesthetics with the latest in font tech.</p> <p>First, a necessary definition: <a target="_blank" href="https://variablefonts.io/"><em>variable fonts</em></a> are font files that fit a range of styles inside one file, usually in a way that allows the font user to select a style from a fluid range of styles. These stylistic ranges are called <em>variable axes, </em>and can be parameters, like font weight, font width, optical size, font slant, or more creative things. In the case of Recursive, you can control the “Monospacedness” (from <em>Mono</em> to <em>Sans</em>) and “Casualness” (between a normal, <em>linear</em> style and a brushy, <em>casual</em> style). Each type family may have one or more of its own axes and, like many features of type, variable axes are another design consideration for font designers.</p> <p>You may have seen that <a target="_blank" href="https://css-tricks.com/google-fonts-variable-fonts/">Google Fonts has started adding variable fonts</a> to its vast collection. You may have read about <a target="_blank" href="https://css-tricks.com/guides/opentype-variable-fonts/">some of the awesome things variable fonts can do</a>. But, you may not realize that many of the variable fonts coming to Google Fonts (including Recursive) have <em>a lot</em> more stylistic range than you can get from the default Google Fonts front end.</p> <p>Because Google Fonts has a huge range of users — many of them new to web development — it is understandable that they’re keeping things simple by only showing the “weight” axis for variable fonts. But, for fonts like Recursive, this simplification actually leaves out a bunch of options. On the Recursive page, Google Fonts shows visitors eight styles, plus one axis. However, Recursive actually has 64 preset styles (also called <em>named instances</em>), and a total of five variable axes you can adjust (which account for a slew of more potential custom styles).</p> <p>Recursive can be divided into what I think of as one of four “subfamilies.” The part shown by Google Fonts is the simplest, proportional (sans-serif) version. The four Recursive subfamilies each have a range of weights, plus Italics, and can be categorized as:</p> <ul> <li><strong>Sans Linear:</strong> A proportional, “normal”-looking sans-serif font. This is what gets shown on the Google Fonts website.</li> <li><strong>Sans Casual:</strong> A proportional “brush casual” font</li> <li><strong>Mono Linear:</strong> A monospace “normal” font</li> <li><strong>Mono Casual:</strong> A monospace “brush casual” font</li> </ul> <p>This is probably better to visualize than to describe in words. Here are two tables (one for Sans, the other for Mono) showing the 64 named instances:</p> <div> <div> <figure><img src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-13.png?resize=1024%2C1024&ssl=1" alt=""></figure> </div> <div> <figure><img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-14.png?resize=1024%2C1024&ssl=1" alt=""></figure> </div> </div> <p>But again, the main Google Fonts interface only provides access to eight of those styles, plus the Weight axis:</p> <figure><img src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-15.png?resize=1024%2C1021&ssl=1" alt=""><figcaption>Recursive has 64 preset styles — and many more using when using custom axis settings — but Google Fonts only shows eight of the preset styles, and just the Weight axis of the five available variable axes.</figcaption></figure> <p>Not many variable fonts today have more than a Weight axis, so this is an understandable UX choice in some sense. Still, I hope they add a little more flexibility in the future. As a font designer & type fan, seeing the current weight-only approach feels more like an artificial flattening than true simplification — sort of like if Google Maps were to “simplify” maps by excluding every road that wasn’t a highway.</p> <p>Luckily, you can still access the full potential of variable fonts hosted by Google Fonts: meet the <a target="_blank" href="https://developers.google.com/fonts/docs/css2">Google Fonts CSS API, version 2</a>. Let’s take a look at how you can use this to get more out of Recursive.</p> <p>But first, it is helpful to know a few things about how variable fonts work.</p> <h3>How variable fonts work, and why it matters</h3> <p>If you’ve ever worked with photos on the web then you know that you should never serve a 9,000-pixel JPEG file when a smaller version will do. Usually, you can shrink a photo down using compression to save bandwidth when users download it.</p> <p>There are similar considerations for font files. You can often reduce the size of a font dramatically by <a target="_blank" href="https://css-tricks.com/three-techniques-performant-custom-font-usage/">subsetting the characters</a> included in it (a bit like cropping pixels to just leave the area you need). You can further compress the file by converting it into a <a target="_blank" href="https://github.com/google/woff2">WOFF2</a> file (which is a bit like running a raster image file though an optimizer tool like <a target="_blank" href="https://imageoptim.com/mac">imageOptim</a>). Vendors that host fonts, like Google Fonts, will often do these things for you automatically.</p> <p>Now, think of a video file. If you only need to show the first 10 seconds of a 60-second video, you could trim the last 50 seconds to have a much small video file. </p> <p>Variable fonts are a bit like video files: they have one or more ranges of information (variable axes), and those can often either be trimmed down or “pinned” to a certain location, which helps to reduce file size. </p> <p>Of course, variable fonts are nothing like video files. Fonts record each letter shape in vectors, (similar to SVGs store shape information). Variable fonts have multiple “source locations” which are like keyframes in an animation. To go between styles, the control points that make up letters are mathematically interpolated between their different source locations (also called <em>deltas</em>). A font may have many sets of deltas (at least one per variable axis, but sometimes more). To trim a variable font, then, you must trim out unneeded deltas.</p> <p>As a specific example, the Casual axis in Recursive takes letterforms from “Linear” to “Casual” by interpolating vector control points between two extremes: basically, a normal drawing and a brushy drawing. The ampersand glyph animation below shows the mechanics in action: control points draw rounded corners at one extreme and shift to squared corners on the other end.</p> <figure> <div> </div> </figure> <p>Generally, each added axis doubles the number of drawings that must exist to make a variable font work. Sometimes the number is more or less – Recursive’s Weight axis requires 3 locations (tripling the number of drawings), while its Cursive axis doesn’t require extra locations at all, but actually just activates different alternate glyphs that already exist at each location. But, the general math is: if you only use opt into fewer axes of a variable font, you will usually get a smaller file.</p> <p>When using the Google Fonts API, you are actually <em>opting into </em>each axis. This way, instead of starting with a big file and whittling it down, you get to pick and choose the parts you want.</p> <h3>Variable axis tags</h3> <p>If you’re going to use the Google Fonts API, you first need to know about font axes abbreviations so you can use them yourself.</p> <p>Variable font axes have abbreviations in the form of four-letter “tags.” These are lowercase for industry-standard axes and uppercase for axes invented by individual type designers (also called “custom” or “private” axes). </p> <p>There are currently five standard axes a font can include: </p> <ul> <li><code>wght</code> – Weight, to control lightness and boldness</li> <li><code>wdth</code> – Width, to control overall letter width</li> <li><code>opsz</code> – Optical Size, to control adjustments to design for better readability at various sizes</li> <li><code>ital</code> – Italic, generally to switch between separate upright/italic designs</li> <li><code>slnt</code> – Slant, generally to control upright-to-slanted designs with intermediate values available</li> </ul> <p>Custom axes can be almost anything. Recursive includes three of them — Monospace (<code>MONO</code>), Casual (<code>CASL</code>), and Cursive (<code>CRSV</code>) — plus two standard axes, <code>wght</code> and <code>slnt</code>.</p> <h3>Google Fonts API basics</h3> <p>When you configure a font embed from the Google Fonts interface, it gives you a bit of HTML or CSS which includes a URL, and this ultimately calls in a CSS document that includes one or more <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code>@font-face</code> rules</a>. This includes things like font names as well as links to font files on Google servers.</p> <p>This URL is actually a way of calling the Google Fonts API, and has a lot more power than you might realize. It has a few basic parts: </p> <ol> <li>The main URL, specifying the API (<code>https://fonts.googleapis.com/css2</code>)</li> <li>Details about the fonts you are requesting in one or more <code>family</code> parameters</li> <li>A <a target="_blank" href="https://css-tricks.com/almanac/properties/f/font-display/"><code>font-display</code></a> property setting in a <code>display</code> parameter</li> </ol> <p>As an example, let’s say we want the regular weight of Recursive (in the <em>Sans Linear</em> subfamily). Here’s the URL we would use with our CSS <code>@import</code>:</p> <pre><code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code></pre> <p>Or we can link it up in the <code></code> of our HTML:</p> <pre><code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code></pre> <p>Once that’s in place, we can start applying the font in CSS:</p> <pre><code>body { font-family: 'Recursive', sans-serif; }</code></pre> <p>There is a default value for each axis:</p> <ul> <li><code>MONO</code> 0 (Sans/proportional)</li> <li><code>CASL</code> 0 (Linear/normal)</li> <li><code>wght</code> 400 (Regular)</li> <li><code>slnt</code> 0 (upright)</li> <li><code>CRSV</code> 0 (Roman/non-cursive lowercase)</li> </ul> <h3>Choose your adventure: styles or axes</h3> <p>The Google Fonts API gives you two ways to request portions of variable fonts:</p> <ol> <li>Listing axes and the specific non-default values you want from them</li> <li>listing axes and the ranges you want from them</li> </ol> <h3>Getting specific font styles</h3> <p>Font styles are requested by adding parameters to the Google Fonts URL. To keep the defaults on all axes but use get a Casual style, you could make the query <code>Recursive:CASL@1</code> (this will serve <em>Recursive Sans Casual Regular</em>). To make that Recursive Mono Casual Regular, specify two axes before the <code>@</code> and then their respective values (but remember, custom axes have uppercase tags):</p> <pre><code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code></pre> <p>To request both Regular and Bold, you would simply update the family call to <code>Recursive:wght@400;700</code>, adding the <code>wght</code> axis and specific values on it:</p> <pre><code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code></pre> <p>A very helpful thing about Google Fonts is that you can request a bunch of individual styles from the API, and wherever possible, it will actually serve variable fonts that cover all of those requested styles, rather than separate font files for each style. This is true even when you are requesting specific locations, rather than variable axis ranges — if they can serve a smaller font file for your API request, they probably will.</p> <p>As variable fonts can be trimmed more flexibility and efficiently in the future, the files served for given API requests will likely get smarter over time. So, for production sites, it may be best to request exactly the styles you need.</p> <p>Where it gets interesting, however, is that you <em>can</em> also request variable axes. That allows you to retain a lot of design flexibility without changing your font requests every time you want to use a new style.</p> <h3>Getting a full variable font with the Google Fonts API</h3> <p>The Google Fonts API seeks to make fonts smaller by having users opt into only the styles and axes they want. But, to get the full benefits of variable fonts (more design flexibility in fewer files), you should use one or more axes. So, instead of requesting single styles with <code>Recursive:wght@400;700</code>, you can instead request that full <em>range</em> with <code>Recursive:wght@400..700</code> (changing from the <code>;</code> to <code>..</code> to indicate a range), or even extending to the full Recursive weight range with <code>Recursive:wght@300..1000</code> (which adds very little file size, but a whole lot of extra design <em>oomph</em>).</p> <p>You can add additional axes by listing them alphabetically (with lowercase standard axes first, then uppercase custom axes) before the @, then specifying their values or ranges after that in the same order. For instance, to add the MONO axis <em>and</em> the wght axis, you could use <code>Recursive:wght,MONO@300..1000,0..1</code> as the font query.</p> <p>Or, to get the full variable font, you could use the following URL:</p> <pre><code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap</code></pre> <p>Of course, you still need to put that into an HTML link, like this:</p> <pre><code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code></pre> <h3>Customizing it further to balance flexibility and filesize </h3> <p>While it can be tempting to use every single axis of a variable font, it’s worth remembering that each additional axis adds to the overall files ize. So, if you really don’t expect to use an axis, it makes sense to leave it off. You can always add it later.</p> <p>Let’s say you want Recursive’s Mono Casual styles in a range of weights,. You could use Recursive:wght,CASL,MONO@300..1000,1,1 like this:</p> <pre><code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code></pre> <p>You can, of course, add multiple font families to an API call with additional <code>family</code> parameters. Just be sure that the fonts are alphabetized by family name.</p> <pre><code><link href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code></pre> <h3>Using variable fonts</h3> <p>The standard axes can all be controlled with existing CSS properties. For instance, if you have a variable font with a weight range, you can specify a specific weight with <code>font-weight: 425;</code>. A specific Slant can be requested with <code>font-style: oblique 9deg;</code>. All axes can be controlled with <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings"><code>font-variation-settings</code></a>. So, if you want a Mono Casual very-heavy style of Recursive (assuming you have called the full family as shown above), you could use the following CSS:</p> <pre><code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code></pre> <p>Something good to know: <code>font-variation-settings</code> is much nicer to <a target="_blank" href="https://pixelambacht.nl/2019/fixing-variable-font-inheritance/">use along with CSS custom properties</a>. </p> <p>Another useful thing to know is that, while you <em>should</em> be able to activate slant with <code>font-style: italic;</code> or <code>font-style: oblique Xdeg;</code>, browser support for this is inconsistent (at least at the time of this writing), so it is useful to utilize <code>font-variation-settings</code> for the Slant axis, as well.</p> <p>You can read more specifics about designing with variable fonts at <a target="_blank" href="https://variablefonts.io/about-variable-fonts/">VariableFonts.io</a> and in the excellent <a target="_blank" href="https://css-tricks.com/guides/opentype-variable-fonts/">collection of CSS-Tricks articles on variable fonts</a>.</p> <h3>Nerdy notes on the performance of variable fonts</h3> <p>If you were to using all 64 preset styles of Recursive as separate WOFF2 files (with their full, non-subset character set), it would be total of about 6.4 MB. By contrast, you could have that much stylistic range (and everything in between) at just 537 KB. Of course, that is a slightly absurd comparison — you would almost never actually use 64 styles on a single web page, especially not with their full character sets (and if you do, you should use subsets and <a target="_blank" href="https://css-tricks.com/almanac/properties/u/unicode-range/">unicode-range</a>).</p> <p>A better comparison is Recursive with one axis range versus styles within that axis range. In my testing, a Recursive WOFF2 file that’s subset to the “Google Fonts Latin Basic” character set (including only characters to cover English and western European languages), including the full 300–1000 Weight range (and all other axes “pinned” to their default values) is 60 KB. Meanwhile, a single style with the same subset is 25 KB. So, if you use just three weights of Recursive, you can save about 15 KB by using the variable font instead of individual files.</p> <p>The full variable font as a subset WOFF2 clocks in at 281 KB which is kind of a lot for a font, but not so much if you compare it to the weight of a big JPEG image. So, if you assume that individual styles are about 25 KB, if you plan to use more than 11 styles, you would be better off using the variable font.</p> <p>This kind of math is mostly an academic exercise for two big reasons:</p> <ol> <li>Variable fonts aren’t just about file size.The much bigger advantage is that they allow you to <em>just design</em>, picking the exact font weights (or other styles) that you want. Is a font looking a little too light? Bump up the <code>font-weight</code> a bit, say from <code>400</code> to <code>425</code>!</li> <li>More importantly (as explained earlier), if you request variable font styles or axes from Google Fonts, they take care of the heavy lifting for you, sending whatever fonts they deem the most performant and useful based on your API request and the browsers visitors access your site from.</li> </ol> <p>So, you don’t really need to go downloading fonts that the Google Fonts API returns to compare their file sizes. Still, it’s worth understanding the general tradeoffs so you can best decide when to opt into the variable axes and when to limit yourself to a couple of styles.</p> <h3>What’s next?</h3> <p>Fire up <a target="_blank" href="http://codepen.io/">CodePen</a> and give the API a try! For CodePen, you will probably want to use the CSS <code>@import</code> syntax, like this in the CSS panel:</p> <pre><code>@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,wght@0..1,0..1,0..1,-15..0,300..1000&display=swap');</code></pre> <p>It is apparently better to use the HTML link syntax to avoid blocking parallel downloads of other resources. In CodePen, you’d crack open the Pen settings, select HTML, then drop the <code></code> in the HTML head settings.</p> <figure><img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/image-17.png?resize=1024%2C792&ssl=1" alt=""></figure> <p>Or, hey, you can just fork my CodePen and experiment there:</p> <div>CodePen Embed Fallback</div> <h4><strong>Take an API configuration shortcut</strong></h4> <p>If you are want to skip the complexity of figuring out exact API calls and looking to opt into variable axes of Recursive and make semi-advanced API calls, I have put together a simple configuration tool on the <a target="_blank" href="https://www.recursive.design/">Recursive minisite</a> (click the “Get Recursive” button). This allows you to quickly select pinned styles or variable ranges that you want to use, and even gives estimates for the resulting file size. But, this only exposes some of the API’s functionality, and you can get more specific if you want. It’s my attempt to get people using the most stylistic range in the smallest files, taking into account the current limitations of <a target="_blank" href="https://github.com/fonttools/fonttools/blob/master/Lib/fontTools/varLib/instancer.py">variable font instancing</a>.</p> <h4>Use Recursive for code</h4> <p>Also, Recursive is actually designed first as a font to use for code. You can use it on CodePen via your account settings. Better yet, you can download and use <a target="_blank" href="https://github.com/arrowtype/recursive/releases">the latest Recursive release from GitHub</a> and set it up in any code editor.</p> <h4>Explore more fonts!</h4> <p>The Google Fonts API doc helpfully includes <a target="_blank" href="https://developers.google.com/fonts/docs/css2#list_of_variable_fonts">a (partial) list of variable fonts</a> along with details on their available axis ranges. Some of my favorites with axes beyond just Weight are Crimson Pro (<code>ital</code>, <code>wght</code>), Work Sans (<code>ital</code>, <code>wght</code>), Encode Sans (<code>wdth</code>, <code>wght</code>), and Inter (<code>slnt</code>, <code>wght</code>). You can also filter Google Fonts to <a target="_blank" href="https://fonts.google.com/?vfonly">show only variable fonts</a>, though most of these results have only a Weight axis (still cool and useful, but don’t need custom URL configuration).</p> <p>Some more amazing variable fonts are coming to Google Fonts. Some that I am especially looking forward to are:</p> <ul> <li><a target="_blank" href="https://github.com/undercasetype/Fraunces">Fraunces</a>: “A display, “Old Style” soft-serif typeface inspired by the mannerisms of early 20th century typefaces such as <a target="_blank" href="http://fontreviewjournal.com/windsor/">Windsor</a>, Souvenir, and the Cooper Series”</li> <li><a target="_blank" href="https://github.com/TypeNetwork/Roboto-Flex">Roboto Flex</a>: Like Roboto, but withan extensive ranges of Weight, Width, and Optical Size</li> <li><a target="_blank" href="https://github.com/agyeiarcher/Crispy-VF">Crispy</a>: A creative, angular, super-flexible variable display font</li> <li><a target="_blank" href="https://github.com/tphinney/science-gothic">Science Gothic</a>: A squarish sans “based closely on Bank Gothic, a typeface from the early 1930s—but a lowercase, design axes, and language coverage have been added”</li> </ul> <p>And yes, you can absolutely download and self-host these fonts if you want to use them on projects today. But <a target="_blank" href="https://twitter.com/googlefonts">stay tuned to Google Fonts</a> for more awesomely-flexible typefaces to come!</p> <p>Of course, the world of type is <em>much</em> bigger than open-source fonts. There are a bunch of incredible type foundries working on exciting, boundary-pushing fonts, and many of them are also exploring new & exciting territory in variable fonts. Many tend to take other approaches to licensing, but for the right project, a good typeface can be an extremely good value (I’m obviously biased, but for a simple argument, just look at how much typography strengthens brands like Apple, Stripe, Google, IBM, Figma, Slack, and so many more). If you want to feast your eyes on more possibilities and you don’t already know these names, definitely check out <a target="_blank" href="https://djr.com/" rel="noreferrer noopener">DJR</a>, <a target="_blank" href="https://ohnotype.co/" rel="noreferrer noopener">OHno</a>, <a target="_blank" href="https://www.grillitype.com/" rel="noreferrer noopener">Grilli</a>, <a target="_blank" href="https://xyztype.com/" rel="noreferrer noopener">XYZ</a>, <a target="_blank" href="http://www.abcdinamo.com/" rel="noreferrer noopener">Dinamo</a>, <a target="_blank" href="https://www.typotheque.com/" rel="noreferrer noopener">Typotheque</a>, <a target="_blank" href="http://www.underware.nl/" rel="noreferrer noopener">Underware</a>, <a target="_blank" href="http://boldmonday.com/" rel="noreferrer noopener">Bold Monday</a>, and the many very-fun WIP projects on <a target="_blank" href="https://www.futurefonts.xyz/" rel="noreferrer noopener">Future Fonts</a>. (I’ve left out a bunch of other amazing foundries, but each of these has done stuff I particularly love, and this isn’t <a target="_blank" href="https://typefoundry.directory/" rel="noreferrer noopener">a directory of type foundries</a>.)</p> <p>Finally, some shameless plugs for myself: if you’d like to support me and my work beyond Recursive, please consider checking out my WIP versatile sans-serif <a target="_blank" href="https://www.futurefonts.xyz/arrowtype/name-sans">Name Sans</a>, signing up for <a target="_blank" href="https://www.arrowtype.com/">my</a> <a target="_blank" href="https://www.arrowtype.com/">(very) infrequent newsletter</a>, and <a target="_blank" href="https://www.instagram.com/arrowtype/">giving me a follow on Instagram</a>.</p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/">Getting the Most Out of Variable Fonts on Google Fonts</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="https://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="https://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3407418"> <h2><a class="title" href="https://www.webmastersgallery.com/2020/07/30/the-renaissance-of-no-code-for-web-designers/" rel="bookmark">The Renaissance Of No-Code For Web Designers</a></h2> <div class="info"> <span class="date">July 30th, 2020</span> <span class="author"></span> <span class="comments"><a href="https://www.webmastersgallery.com/2020/07/30/the-renaissance-of-no-code-for-web-designers/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/jIRsJktLeX8/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/73a2316f-0633-4523-b3dc-3b23bc97fe47/stone-block-example.jpg" alt="Block of stone"></a></div> <p> <title>The Renaissance Of No-Code For Web Designers

The Renaissance Of No-Code For Web Designers

Uri Paz

2020-07-30T13:00:00+00:00
2020-08-01T05:07:51+00:00

The word Renaissance — which means “rebirth” in French — was given to a tremendous period of philosophical and artistic achievements that began in the 14th century.

During this time, there were a wide range of developments, including:

  • Use of oil paints, rather than tempera, which made the painting process easier.
  • Use of fabric, rather than wooden boards, which reduced the expenses of painting.
  • Translation of classical texts in architecture, anatomy, philosophy, and more, making knowledge more accessible to the general public.

These developments and more made the Renaissance one of the most productive artistic eras in history, dramatically reducing the creative barrier and attracting a large audience rather than just a small group of elites.

Block of stone

‘Every block of stone has a statue inside it, and it is the task of the sculptor to discover it.’?—?Michelangelo. Some people see a block of stone, while other people see a source of creation. The tools available to us at any given time can bring out our maximum potential. (Large preview)

Just like the Renaissance era, today’s web design field is exploring its potential through no-code development platforms (NCDPs). These tools allow non-programmers to create application software through graphical user interfaces and configuration, instead of traditional computer programming.

The Designer/Developer Mental Model

A realistic collage featuring a 3D sculpture holding lightning in his left hand and light bulbs his right hand

Taken from ‘The Singularity Is Here: Human 2.0‘ by Amit Maman. Part of his final project at Shenkar College of Engineering and Design, Maman created this triptych to show his vision of the singularity and the turning point in human history that it represents. His work is inspired by principles from the Renaissance era. (Large preview)

In 2000, usability expert Jakob Nielsen introduced “Jakob’s Law,” the idea that users develop mental models of the products they interact with based on their previous experience. The more users can focus on their goal without challenging this mental model, the easier it is for them to achieve that goal.

“CSS is closer to painting than Python.”
—?Chris Coyier, co-founder at CodePen

Design and development skills are rooted in different types of thinking and require different types of tools. While designers use WYSIWYG editors like Figma, Sketch, and Photoshop to place elements on the canvas, developers work with IDEs like VSCode, Webstorm, and Brackets. In order to remain productive, designers and developers need to be able to make changes and receive instant feedback, according to their mental model.

So, using drag and drop builders may actually interfere with developers who want to debug fast, but working only with a text editor may be inappropriate for designers who want to test composition.

Designers And Code

Many designers understand the functional differences between a mockup and a working product. In order to understand the possibilities of the medium, where to draw the boundaries and how to deal with the constraints, many designers are willing to “get their hands dirty” when it comes to learning code — but they have difficulties.

One of the main reasons designers are not coders is because there is a large gap between the designer’s mental model and the conceptual model of many code editors. Design and development take two very different modes of thought. This mismatch leads to a difficult and frustrating learning curve for designers that they might not be able to overcome.

Code Abstraction

A realistic collage featuring a 3D sculpture smashing water

(Large preview)

Abstraction is a core concept of computer science. Languages, frameworks, and libraries are built on different abstraction layers of complexity to facilitate, optimize, and guarantee productivity.

“Visual programming tools abstract code away from the creator, making them significantly more accessible. The real magic of these tools, however, is how they integrate all of the underlying layers of software into end products, providing useful functionality through modular components that can be harnessed through intuitive visual interfaces.”
— Jeremy Q. Ho, No Code is New Programming

When working with abstraction layers, there are tools such as Editor X and Studio for websites/web applications, Draftbit and Kodika for mobile apps, and Modulz for design systems, which enable a visual representation of code, in addition to code capabilities.

By adopting a familiar visual medium, the learning curve becomes easier for designers.

If Chris Wanstrath the co-founder and former CEO of GitHub said, “the future of coding is no coding at all,” then surely no-code is a legitimate way to develop — despite the perception that these tools don’t offer the flexibility to write your own code, line by line.

Indeed, we see that interest in the term “nocode” is growing:

A screenshot of Google Trends

Search for the term ‘nocode’ in the last 5 years on Google Trends. (Large preview)

Difference Between Imperative And Declarative Programming

In order to understand the development of no-code tools for designers, you need to know the distinction between two types of programming:

  1. Imperative Programming
    Deconstruct the result into a sequence of imperatives, i.e. explicit control flow. For example: JavaScript, Python, C ++.
  2. Declarative Programming
    Declare the result, i.e. implicit control flow. For example: SQL, HTML, CSS.

Declarative languages are often domain-specific languages, or DSL, which means they’re used for a specific purpose, in a specific domain.

For example, SQL is DSL for working with databases, HTML is DSL for adding semantic structure and meaning to content on a web page, and CSS is DSL for adding style.

“There are too many variables to consider. The point of CSS is to make it so you don’t have to worry about them all. Define some constraints. Let the language work out the details.”
— Keith J. Grant, Resilient, Declarative, Contextual

Imperative programming sets specific, step-by-step instructions to the browser to get the desired result, while declarative programming states the desired result and the browser does the work by itself.

The Middle Ages

The effort to create a visual interface tool for web design development started in the 1990s through groundbreaking attempts like InContext Spider, Netscape Navigator Gold, Microsoft FrontPage, and of course, Dreamweaver.

A screenshot of Dreamweaver MX

Dreamweaver MX, Foundation Dreamweaver MX. (Large preview)

During this period, the common terminology included: visual HTML authoring tool, WYSIWYG web page compositor, or simply HTML editor. The term “no-code” was popular in the 1990s — but for a different reason. In 1996, the American rock band Pearl Jam released their fourth studio album, No Code.

These no-code tools dramatically reduced the creative barrier and attracted a large audience, the Internet wasn’t ready for these types of tools at the time.

This effort was limited for the following reasons:

1. Layout

When the inventor of the World Wide Web Tim Berners-Lee launched his creation in 1989, he didn’t offer a way to design a website.

This came along in October 1994, after a series of suggestions on how to design the Internet by different people — including one from Håkon Wium Lie — who proposed an idea that attracted everyone’s attention. Lie believed in a declarative style that would allow browsers to handle the processing — it was called Cascading Style Sheets, or simply CSS.

“CSS stood out because it was simple, especially compared to some of its earliest competitors.”
— Jason Hoffman, A Look Back at the History of CSS

For a long time after, CSS provided design solutions for a single object — but it didn’t give an adequate response to the relationship between the objects.

Methods to address this were effectively hacks, and they weren’t able to handle a great deal of complexity. As sites evolved from simple documents to complex applications, web layouts became difficult to assemble. Instead of using a style in a declarative way as Lie designed, web developers were forced to use imperative programming.

A grid system based on the rules of Swiss designer Josef Müller-Brockmann that was customary in print from the 1940s seems like a distant dream when considering anything related to the Web.

Three posters by Josef Muller-Brockmann

Posters by Josef Muller-Brockmann. (Large preview)

Because of these layout limitations, no-code platforms were forced to add an abstract layer to perform backstage calculations. This layer causes a range of problems, including losing the semantic value of the objects, performance issues, bulky code, a complex learning curve, unscalability, and accessibility issues.

2. Browser Alignment

In the early days, browser makers were the ones who decided how to build the Internet. This led to the Web becoming a manipulative commodity. Competition between browsers led to unique “design features”. This forced the need to rebuild the same site several times, so it could be accessed from multiple browsers.

“Developers in the 90s would often have to make three or four versions of every website they built, so that it would be compatible with each of the browsers available at the time.”
— Amy Dickens, Web Standards: The What, The Why, And The How

To offset the need to build websites that fit specific browsers, the World Wide Web Consortium (WC3) community was established at MIT in 1994. The WC3 is an international community working to develop functional, accessible and cross-compatible web standards.

When the standards were introduced, browser makers were encouraged to stick to one way of doing things — thus preventing several versions of the same site from being built. Despite WC3’s recommendations, it took a long time for browsers to meet the same standards.

Due to a lack of alignment between the browsers (Internet Explorer, I’m looking at you), CSS for a time was stuck and no new capabilities were added. Once a declarative language doesn’t support something, it requires you to lean on all kinds of imperative hacks in order to achieve that goal.

3. Data Binding

In the early years of the Web, sites were developed as a collection of static pages with no semantic meaning. When Web 2.0 arrived, it received the description “the web as a platform,” which led to a significant change — pages had dynamic content, which affected the connection to the data, and of course the semantic meaning.

“Sites in the 1990s were usually either brochure-ware (static HTML pages with insipid content) or they were interactive in a flashy, animated, JavaScript kind of way.”
— Joshua Porter, Web 2.0 for Designers

Indeed, connecting to data using a no-code approach has existed for a long time — but the user experience was difficult. Additionally, the transition to semantic marking so content could be detected in no-code tools was difficult because of the mixing between declarative and imperative programming.

No-code tools didn’t mesh with those core tasks.

A realistic collage featuring a 3D holding Old TV with glitch screen

(Large preview)

Proto-Renaissance

On June 29, 2007, the nature of the Internet was changed dramatically. This was the day when Steve Jobs introduced the iPhone — a combination of mobile phone and media player that connected to the Internet and enabled multi-touch navigation.

When the iPhone was introduced in 2007, it was a turning point for web design. All of a sudden web designers lost control of the canvas on which we designed websites. Previously, websites only had to work on monitor screens, which varied in size, but not all that much. How were we supposed to make our websites work on these tiny little screens?
— Clarissa Peterson, Learning Responsive Web Design

This created new challenges for web design development. Mainly, how to build a site that can be used on multiple types of devices. Many “hack” approaches to layout design simply fell apart — they caused more problems than they solved.

Everything needed to be reevaluated.

The No-Code Renaissance

A pair of statues floating in the air as they hug each other

(Large preview)

Browsers supporting WC3 standards (Chrome and Firefox ) have huge market share today, which has pushed more browsers to support the standards. The fact that all of the browsers support the same standard, enable alignment in the building of sites and ensure these capabilities would continue to work as standards and browsers evolve.

Methods such as media query, flexbox and grid — which are natively available in the browsers for layout design — have paved the way for flexible layouts, even when element sizes are dynamic.

“When CSS Grid shipped in March 2017, our toolbox reached a tipping point. At last we have technology powerful enough to let us really get creative with layout. We can use the power of graphic design to convey meaning through our use of layout—creating unique layouts for each project, each section, each type of content, each page.”
— Rachel Andrew, The New CSS Layout

In this way, HTML became cleaner and it was able to achieve its original purpose: a semantic description of the content.

Finally, thanks to alignment between the browsers and new capabilities, no-code tools are backed by powerful, uniform technology. These changes created a clearer distinction between declarative and imperative. New possibilities were created to solve old problems.

“Simplicity is the ultimate sophistication.”
— Leonardo da Vinci

The Effect Of No-code On Designers

A screenshot of Editor X in edit mode

Editor X | David’s photo by Igor Ferreira on Unsplash. (Large preview)

The developments of the Internet over the years has led to a situation where the abstraction between design and code is constantly improving. This has implications for the way web designers plan and implement their designs.

1. Design Planning

While popular design tools use static content for dynamic web design, no-code tools allow designers to work with the web’s own materials.

“Photoshop is the most effective way to show your clients what their website will never look like.”
— Stephen Hay, author of Responsive Design Workflow

If we have a complex design with different states, micro-interactions, animations and responsive breakpoints —?by using no-code tools we can work in a more tangible way.

Additionally, the development of the web enables no-code tools to clearly separate content from the design (which allows designers to visually manage real content). Reflecting the dynamic content in the design (e.g. text, images, videos, and audio), gives designers a clearer understanding of how it will appear.

The advantage of working in the no-code workspace is that interactions appear immediately. This allows designers to quickly test their design choices and see if they work.

2. Design Implementation

After investing in design perfection, designers should explain the visual and conceptual decisions to developers through prototypes. Prototypes not only take time in terms of preparation, but their design is also often implemented incorrectly due to misinterpretations.

With no-code tools, designers are able to place objects on their display and handle their visibility and behavior with ease and speed. In other words, they can design the end result without depending on anyone else.

To use myself as an example, when the Coronavirus pandemic hit, I worked with a small team on a project to help connect young volunteers to isolated seniors. In just three days, myself and another designer built the website and connected user registration data to a database, while the team’s developer worked to integrate data from the site into a separate mobile app.

The Effect Of No-code On Developers

Will no-code tools completely replace developers? The short answer: No. The significant change is in the way designers and developers can work together to create websites.

In addition to the development of CSS, Javascript has also evolved in parallel and perhaps even more. The idea that frontend developers need to control all the abilities makes no sense. And yet, the development of no-code over the years has enabled designers to build their own designs.

It’s a win-win situation, in which? developers can focus on developing logic, and designers have more control over the user experience and styling.

The Effort Is Not Yet Complete

I don’t want to leave you with the impression that designers have complete freedom to design with no-code tools. There are still some missing style capabilities that CSS has not yet solved, and these still require imperative development.

Unlike in the Middle Ages, where art was considered as handicraft without a theoretical basis, Renaissance developments changed the status of the artist — who was suddenly considered a polymath.

No-code tools remove bottlenecks, which allows designers to gain more ownership, influence, and control over the experiences they design.

We’ve come a long way from the days when designers weren’t able to bring their designs to life. As the Internet evolves, browsers align, capabilities are added and the accessibility of technology becomes easier — designers are faced with new opportunities to create, think, and change their status with no-code tools.

The no-code movement not only affects how things are done, but by who.

Credits: Yoav Avrahami and Jeremy Hoover contributed to this article.

Further Reading on SmashingMag:

(fb, ra, yk, il)

Categories: Others Tags: