Why Parcel Has Become My Go-To Bundler for Development

Today we’re gonna talk about application bundlers — tools that simplify our lives as developers. At their core, bundlers pick your code from multiple files and put everything all together in one or more files in a logical order that are compiled and ready for use in a browser. Moreover, through different plugins and loaders, you can uglify the code, bundle up other kinds of assets (like CSS and images), use preprocessors, code-splitting, etc. They manage the development workflow.

There are lots of bundlers out there, like Browserify and webpack. While those are great options, I personally find them difficult to set up. Where do you start? This is especially true for beginners, where a “configuration file” might be a little scary.

That’s why I tend to reach for Parcel. I stumbled upon it accidentally while watching a tutorial on YouTube. The speaker was talking about tips for faster development and he heavily relied on Parcel as part of his workflow. I decided to give it a try myself.

What makes Parcel special

The thing I love the most about this bundler: it doesn’t need any configuration. Literally, none at all! Compare that to webpack where configuration can be strewn across several files all containing tons of code… that you may have picked up from other people’s configurations or inherited from other projects. Sure, configuration is only as complex as you make it, but even a modest workflow requires a set of plugins and options.

We all use different tools to simplify our job. There are things like preprocessors, post-processors, compilers, transpilers, etc. It takes time to set these up, and often a pretty decent amount of it. Wouldn’t you rather spend that time developing?

That’s why Parcel seems a good solution. Want to write your styles in SCSS or LESS? Do it! Want to use the latest JavaScript syntax? Included. Need a server for development? You got it. That’s barely scratching the surface of the large list of other features it supports.

Parcel allows you to simply start developing. That’s the biggest advantage of using it as a bundler — alongside its blazing fast compiling that utilizes multicore processing where other bundlers, including webpack, work off of complex and heavy transforms.

Where using Parcel makes sense

Parcel, like any tool, is not a golden pill that’s designed as a one-size-fits-all solution for everything. It has use cases where it shines most.

I’ve already mentioned how fast it is to get a project up and running. That makes it ideal when working with tight deadlines and prototypes, where time is precious and the goal is to get in the browser as quickly as possible.

That’s not to say it isn’t up to the task of handling complex applications or projects where lots of developers might be touching code. It’s very capable of that. However, I realize that those projects may very well benefit from a hand-rolled workflow.

It’s sort of like the difference between driving a car with an automatic transmission versus a stick shift. Sometimes you need the additional control and sometimes you don’t.

I’ve been working on a commercial multi-page website with a bunch of JavaScript under the hood, and Parcel is working out very well for me. It’s providing my server, it compiles my Sass to CSS, it adds vendor prefixes when needed, and it allows me to use import and export in my JavaScript files out of the box without any configuration. All of this allowed me to get my project up and running with ease.

Let’s create a simple site together using Parcel

Let’s take Parcel for a test drive to see how relatively simple it is to make something with it.

We’re going to build a simple page that uses Sass and a bit of JavaScript. We’ll fetch the current day of the week and a random image from Unsplash Source.

The basic structure

There’s no scaffolding we’re required to use or framework needed to initialize our project. Instead, we’re going to make three files that ought to look super familiar: index.html, style.scss and index.js. You can set that up manually or in Terminal:

mkdir simple-site
cd simple-site
touch index.html && touch style.scss && touch index.js

Let’s sprinkle some boilerplate markup and the basic outline into our HTML file:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.scss"> <title>Parcel Tutorial</title>
</head>
<body> 

Today is:

and the image of the day:

unsplash random image
http://index.js </body> </html>

You may have noticed that I’m pulling in a web font (Lato) from Google, which is totally optional. Otherwise, all we’re doing is linking up the CSS and JavaScript files and dropping in the basic HTML that will display the day of the week and a link from Unsplash that will serve a random image. This is all we really need for our baseline.

Marvel at Parcel’s quick set up!

Let’s run the application using with Parcel as the bundler before we get into styling and scripts. Installing Parcel is like any thing:

npm install -g parcel-bundler
# or
yarn global add parcel-bundler

Let’s also create a package.json file should we need any development dependencies. This is also where Parcel will include anything it needs to work out of the box.

npm init -y
# or
yarn init -y

That’s it! No more configuration! We only need to tell Parcel which file is the entry point for the project so it knows where to point its server. That’s going to be our HTML file:

parcel index.html

If we open the console we’ll see something like this indicating that the server is already running:

Server running at http://localhost:1234

Parcel’s server supports hot reloading and rebuilds the app as change are saved.

Now, heading back to our project folder, we’ll see additional stuff,that Parcel created for us:

What’s important for us here is the dist folder, which contains all our compiled code, including source maps for CSS and JavaScript.

Now all we do is build!

Let’s go to style.scss and see how Parcel handles Sass. I’ve created variables to store some colors and a width for the container that holds our content:

$container-size: 768px;
$bg: #000;
$text: #fff;
$primary-yellow: #f9f929;

Now for a little styling, including some nested rulesets. You can do your own thing, of course, but here’s what I cooked up for demo purposes:

*, *::after, *::before { box-sizing: border-box;
} body { background: $bg; color: $text; font-family: 'Lato', sans-serif; margin: 0; padding: 0;
} .container { margin: 0 auto; max-width: $container-size; text-align: center; h1 { display: inline-block; font-size: 36px; } span { color: $primary-yellow; font-size: 36px; margin-left: 10px; }
}

Once we save, Parcel’s magic is triggered and everything compiles and reloads in the browser for us. No command needed because it’s already watching the files for changes.

This is what we’ve got so far:

Webpage with black background, a heading and an image

The only thing left is to show the current day of the week. We’re going to use imports and exports so we get to see how Parcel allows us to use modern JavaScript.

Let’s create a file called today.js and include a function that reports the current day of the week from an array of days:

export function getDay() { const today = new Date(); const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; return daysArr[today.getDay()];
}

💡 It’s worth a note to remember that the getDay function returns Sunday as the first day of the week.

Notice we’re exporting the getDay function. Let’s go into our index.js file and import it there so it gets included when compiling happens:

import { getDay } from './today';

We can import/export files, because Parcel supports ES6 module syntax right out of the box — again, no configuration needed!

The only thing left is to select the <span> element and pass the value of the getDay function to it:

const day = document.querySelector('.today');
day.innerHTML = getDay();

Let’s see the final result:

Webpage with black background, heading that includes the day of the week, and an image below.

Last thing is to build for production

We’ve created the app, but we want to serve it somewhere — whether it’s your personal server or some zero-configuration deployment like Surge or Now — and we want to serve compiled and minified code.

Here’s the one and only command we need:

parcel build index.js
Terminal output after a successful build.

This gives us all of the production-ready assets for the app. You can read more about Parcel’s product mode for some tips and tricks to get the most from your environment.


I’ve said it several times and I’ll say it again: Parcel is a great tool. It bundles, it compiles, it serves, it pre- and post-processes, it minifies and uglifies, and more. We may have looked at a pretty simple example, but hopefully you now have a decent feel for what Parcel offers and how you might start to use it in your own projects.

I’m interested if you’re already using Parcel and, if so, how you’ve been using it. Have you found it works better for some things more than others? Did you discover some neat trick that makes it even more powerful? Let me know in the comments!

The post Why Parcel Has Become My Go-To Bundler for Development appeared first on CSS-Tricks.

Great Expectations: Using Story Principles To Anticipate What Your User Expects

Great Expectations: Using Story Principles To Anticipate What Your User Expects

Great Expectations: Using Story Principles To Anticipate What Your User Expects

John Rhea

Whether it’s in a novel, the latest box office smash, or when Uncle Elmer mistook a potted cactus for a stress ball, we all love stories. There are stories we love, stories we hate, and stories we wish we’d never experienced. Most of the good stories share structure and principles that can help us create consistent website experiences. Experiences that speak to user expectations and guide them to engage with our sites in a way that benefits both of us.

In this article, we’ll pull out and discuss just a few examples of how thinking about your users’ stories can increase user engagement and satisfaction. We’ll look at deus ex machina, ensemble stories, consistency, and cognitive dissonance, all of which center on audience expectations and how your site is meeting those expectations or not.

We can define a story as the process of solving a problem. Heroes have an issue, and they set out on a quest to solve it. Sometimes that’s epic and expansive like the Lord of the Rings or Star Wars and sometimes it’s small and intimate such as Driving Miss Daisy or Rear Window. At its core, every story is about heroes who have a problem and what they do to solve it. So too are visits to a website.

The user is the hero, coming to your site because they have a problem. They need to buy a tchotchke, hire an agency or find the video game news they like. Your site can solve that problem and thus play an important role in the user’s story.

Deus Ex Machina

It’s a term meaning “god from the machine” that goes back to Greek plays — even though it’s Latin — when a large, movable scaffolding or “machine” would bring out an actor playing a god. In the context of story, it’s often used to describe something that comes out of nowhere to solve a problem. It’s like Zeus showing up at the end of a play and killing the villain. It’s not satisfying to the audience. They’ve watched the tension grow between the hero and the villain and feel cheated when Zeus releases the dramatic tension without solving that tension. They watched a journey that didn’t matter because the character they loved did not affect the ending.

The danger of deus ex machina is most visible in content marketing. You hook the audience with content that’s interesting and applicable but then bring your product/site/whatever in out of nowhere and drop the mic like you won a rap battle. The audience won’t believe your conclusion because you didn’t journey with them to find the solution.

If, however, the author integrates Zeus into the story from the beginning, Zeus will be part of the story and not a convenient plot device. Your solutions must honor the story that’s come before, the problem and the pain your users have experienced. You can then speak to how your product/site/whatever solves that problem and heals that pain.

State Farm recently launched a “Don’t Mess With My Discount!” campaign:

Kim comes in to talk to a State Farm rep who asks about a Drive Safe and Save discount. First, for the sake of the discount, Kim won’t speed up to make a meeting. Next, she makes herself and her child hold it till they can get home driving the speed limit. Last, in the midst of labor, she won’t let her partner speed up to get them to the hospital. (Don’t mess with a pregnant lady or her discount.) Lastly, it cuts back to Kim and the agent.

State Farm’s branding and their signature red color are strong presences in both bookend scenes with the State Farm representative. By the end, when they give you details about their “Drive Safe and Save” discount you know who State Farm is, how they can help you, and what you need to do to get the discount.

It’s not a funny story that’s a State Farm commercial in disguise, but a State Farm commercial that’s funny.

Throughout the ad, we know State Farm’s motivations and don’t feel duped into liking something whose only goal is to separate us from our money. They set the expectation of this story being an ad in the beginning and support that throughout.

Another Approach

Sometimes putting your name upfront in the piece might feel wrong or too self-serving. Another way to get at this is to acknowledge the user’s struggle, the pain the user or customer already feels. If your site doesn’t acknowledge that struggle, then your product/site/whatever seems detached from their reality, a deus ex machina. But if your content recognizes the struggle they’ve been through and how your site can solve their problem, the pitch for deeper engagement with your site will be a natural progression of the user’s story. It will be the answer they’ve been searching for all along.

Take this testimonial from Bizzabo:

Emily Fullmer, Director of Global Events for Greenbook said, We are now able to focus less on tedious operations, and more on creating a memorable and seamless experience for our attendees.
Bizzabo solved a real world problem for Greenbook. (Large preview)

It shows the user where Greenbook was, i.e. mired in tedious tasks, and how Bizzabo helped them get past tedium to do what Greenbook says they do best: make memorable experiences. Bizzabo doesn’t come out of the woodwork to say “I’m awesome” or solve a problem you never had. They have someone attesting to how Bizzabo solved a real problem that this real customer needed to be fixed. If you’re in the market to solve that problem too, Bizzabo might be the place to look.

Ensemble Stories

Some experiences, like some stories, aren’t about a single person. They’re about multiple people. If the story doesn’t give enough attention to each member, that person won’t seem important or like a necessary part of the story. If that person has a role in the ending, we feel cheated or think it’s a deus ex machina event. If any character is left out of a story, it should change the story. It’s the same way with websites. The user is the story’s hero, but she’s rarely the only character. If we ignore the other characters, they won’t feel needed or be interested in our websites.

Sometimes a decision involves multiple people because a single user doesn’t have the authority to decide. For instance, Drupalcon Seattle 2019 has a “Convince Your Boss” page. They showcase the benefits of the conference and provide materials to help you get your boss to agree to send you.

You could also offer a friends-and-family discount that rewards both the sharer and the sharee. (Yes, as of this moment, “sharee” is now a word.) Dropbox does this with their sharing program. If you share their service with someone else and they create an account, you get additional storage space.

Dropbox offers an additional 250 MB of space for every friend you get to join their service.
You get extra space, you get extra space, and you get extra space (when you invite a friend). (Large preview)

But you don’t have to be that explicit about targeting other audiences than the user themselves. In social networks and communities, the audience is both the user and their friends. The site won’t reach a critical mass if you don’t appeal to both. I believe Facebook beat MySpace early on by focusing on the connection between users and thus serving both the user and their friends. MySpace focused on individual expression. To put it another way, Facebook included the user’s friends in their audience while MySpace didn’t.

Serving Diametrically Opposed Heros

Many sites that run on ad revenue also have to think about multiple audiences, both the users they serve and the advertisers who want to reach those users. They are equally important in the story, even if their goals are sometimes at odds. If you push one of these audiences to the side, they’ll feel like they don’t matter. When all you care about is ad revenue, users will flee because you’re not speaking to their story any longer or giving them a good experience. If advertisers can’t get good access to the user then they won’t want to pay you for ads and revenue drops off.

Just about any small market newspaper website will show you what happens when you focus only on advertisers’ desires. Newspaper revenue streams have gone so low they have to push ads hard to stay alive. Take, for instance, the major newspaper from my home state of Delaware, the News Journal. The page skips and stutters as ad content loads. Click on any story and you’ll find a short article surrounded by block after block after block of ad content. Ads are paying the bills but with this kind of user experience, I fear it won’t be for long.

Let me be clear that advertisers and users do not have to be diametrically opposed, it’s just difficult to find a balance that pleases both. Sites often lean towards one or the other and risk tipping the scales too far either way. Including the desires of both audiences in your decisions will help you keep that precarious balance.

One way to do both is to have ads conform to the essence of your website, meaning the thing that makes your site different i.e. the “killer app” or sine qua non of your website. In this way, you get ads that conform to the reason the users are going to the site. Advertisers have to conform to the ad policy, but, if it really hits on the reason users are going to the site, advertisers should get much greater engagement.

On my own site, 8wordstories.com, ads are allowed, but they’re only allowed an image, eight words of copy, and a two-word call to action. Thus when users go to the site to get pithy stories, eight words in length, the advertisements will similarly be pithy and short.

Advertisers and users do not have to be diametrically opposed, it’s just difficult to find a balance that pleases both.

Consistency

The hero doesn’t train as a medieval knight for the first half of the story and then find herself in space for the second half. That drastic shift can make the audience turn on the story for dashing their expectations. They think you did a bait-and-switch, showing them the medieval story they wanted and then switching to a space story they didn’t want.

If you try to hook users with free pie, but you sell tubas, you will get lots of pie lovers and very few tuba lovers. Worse yet is to have the free pie contingent on buying a tuba. The thing they want comes with a commitment or price tag they don’t. This happens a lot with a free e-book when you have to create an account and fill out a lengthy form. For me, that price has often been too high.

Make sure the way you’re hooking the audience is consistent with what you want them to read, do, or buy. If you sell tubas offer a free tuba lesson or polishing cloth. This’ll ensure they want what you provide and they’ll think of you the next time they need to buy a tuba.

That said, it doesn’t mean you can’t offer free pie, but it shouldn’t get them in the door, it should push them over the edge.

Audible gives you a thirty-day free trial plus an audio book to keep even if you don’t stay past the trial. They’re giving you a taste of the product. When you say, “I want more.” You know where to get it.

While not offering a freebie, Dinnerly (and most of the other bazillion meal kit delivery companies) offers a big discount on your first few orders, encouraging new customers to try them out. This can be an especially good model for products or services that have fixed costs with enticing new customers.

Dinnerly offers a discount on each of your first three meal kits.
Hmmm… maybe they should offer free pie. (Large preview)

Cognitive Dissonance

There’s another danger concerning consistency, but this one’s more subtle. If you’re reading a medieval story and the author says the “trebuchet launched a rock straight and true, like a spaceship into orbit.” It might be an appropriate allusion for a modern audience, but it’s anachronistic in a medieval story, a cognitive dissonance. Something doesn’t quite make sense or goes against what they know to be true. In the same way, websites that break the flow of their content can alienate their audience without even meaning to (such as statistics that seem unbelievable or are so specific anyone could achieve them).

112% of people reading this article are physically attractive.

(Here’s lookin’ at you, reader.)

This article is the number one choice by physicians in Ohio who drive Yugos.

(Among other questions, why would a European car driving, Ohioan Doctor read a web user experience article?)

These “statistics” break the flow of the website because they make the user stop and wonder about the website’s reputability. Any time a user is pulled out of the flow of a website, they must decide whether to continue with the website or go watch cat videos.

Recently, I reviewed proposals for a website build at my day job. The developers listed in the proposal gave me pause. One with the title “Lead Senior Developer” had seven years of experience. That seemed low for a “lead, senior” developer, but possible. The next guy was just a “web developer” but had twenty years of experience. Even if that’s all correct, their juxtaposition made them look ridiculous. That cognitive dissonance pulled me out of the flow of the proposal and made me question the firm’s abilities.

Similarly poor quality photos, pixelated graphics, unrelated images, tpyos, mispelllings, weird bolding and anything else that sticks out potato can cause cognitive dissonance and tank a proposal or website (or article). The more often you break the spell of the site, the harder it will be for clients/users to believe you/your product/site/thing are as good as you say. Those cat videos will win every time because they always meet the “lolz” expectation.

Conclusion

Users have many expectations when they come to your site. Placing your users in the context of a story helps you understand those expectations and their motivations. You’ll see what they want and expect, but also what they need. Once you know their needs, you can meet those needs. And, if you’ll pardon my sense of humor, you can both …live happily ever after.

Smashing Editorial (cct, ra, yk, il)
Introducing 15 Best New Portfolios, October 2019

All the signs are that web design is entering a phase of exuberance, with clashing colors, rapidly changing graphics, and dense layouts replacing the minimalism that’s dominated digital design for the last decade. Portfolios are beginning to adopt this maximalist approach, but never fear, for those who aren’t quote ready for full-on retina burn on a Monday in late October, we’ve included a few beautifully minimal sites for you to enjoy.

Hello Monday

Hello Monday’s site is utterly charming, with a delightful animation that I could watch for hours. The work section of the site is a masonry-style vertical grid, which is less easy to browse than you would expect, thanks to the number of projects. The best parts of this site are the little details: I love that they tell you how many days it is until Monday, and the way that hamburger menu slips away as you scroll is super-slick.

Bold

Bold’s portfolio is about sending a powerful message. It’s the website equivalent of huge shoulder pads, and an enormous, solid gold smartphone. The way the border expands from the featured images, giving you the sense of zooming into the project is inspired. It helps to have huge-name clients as social proof, but this site is excellent at inspiring confidence in the designers behind it.

Analog is Heavy

Analog is Heavy is a creative photography practice that works with design studios to hone brand messages with high-quality product photography. Its approach to a portfolio is a vertically aligned grid of images, and that’s it. Targeting design agencies means that they’re speaking to an audience of visually educated professionals, giving Analog is Heavy the freedom to let its work sell itself.

Athletics

Another big agency, with a client list to kill for, Athletics jumps right into fullscreen video case studies of its work for clients like IBM. One trend with many of these portfolios is that work is cherry-picked to be showcased and then less-exciting work is linked to below the initial presentation. In Athletics’ case this means an interesting grid of lower-profile, but equally exciting work.

Brittany Chiang

Brittany Chiang builds things for the web. How’s that for a no-nonsense approach? This great little site feels very app-orientated thanks to the dark-mode color palette and the monospaced typeface. Its a single-pager, which are increasingly rare these days, and the simplicity of it works really well. Brittany has out UXed plenty of dedicated UX designers, by being true to herself.

Shohei Takenaka

As the web drifts towards maximalism, it’s great that there are still calm, simple, minimalist masterpieces to admire. Shohei Takenaka’s site is beautiful, with restraint, attention to detail, and ample whitespace. The subtle underlines on the menu text, and the images protruding into the white space to encourage scrolling, as well as the way the color bands are grouped when you scroll, are all perfect examples of clever UI design.

Aristide Benoist

Aristide Benoist’s portfolio features some beautiful typography. It’s great to see a developer take an interest in the finer points of design. The all-caps sans-serif text is a little too much to cope with in large amounts, but here it works just fine. My favourite part of the site is the transition from thumbnail to case study. Hover over the list of projects and a little flag-like ribbon will appear, click on it and it expands into a full project image, delightful!

WTF Studio

WTF Studio’s portfolio is as in-yer-face as the name suggests. A front for NYC-based creative director Able Parris, the site slaps you in the eyes with color and animation the moment it loads. But scroll down past the anarchic introduction and you’ll find a series of projects for household names presented as individual case studies. It’s exactly what big brands like to see: creativity and safe hands.

Jim Schachterle

Jim Schachterle’s site takes an approach that we don’t normally see: he’s opted for a dark green background. That simple choice, alongside the carefully paired project shots make for a sophisticated, and distinct style. Unfortunately the choice of typeface doesn’t work in places, at 12px the detail in the design is lost altogether, swapping it out for a simpler sans-serif whenever the font-size was under 18pt would have been a better choice.

Swwim

Perhaps it’s the chilly Northern climate at this time of year, but this Saint-Tropez looking site for Swwim warms my heart. The rounded sans-serif is an interesting choice — most designers would aim for sharp lines to emphasize precision. I adore the logotype, and its frivolity is echoed throughout the site in section titles. The less-subtle animation feels a little forced, but the wave motion is enticing, and brand-appropriate.

Hadrien Mongouachon

Hadrien Mongouachon is a freelance developer, so it makes perfect sense for him to demo his skills front and center on his site. He’s opted for a variation of the highly-trendy liquid effect, and it works really well. I’m not convinced by the sideways type — it only works in print because you can tilt the page — and the usability is a little compromised by the click-hold action. Once you’re accustomed to the site, it’s fun to traverse.

Butchershop

Butchershop is another design agency relying heavily on a video reel to sell its brand work. What’s really interesting about this site, is all the things it does “wrong”: the logo mark is positioned top right instead of top left, the title of its homepage is “Home”. It keeps breaking with received wisdom, so either they know something we don’t, or they didn’t get the memo about UX being a thing — you decide which.

Nikolas Type

It’s rare that we get to enjoy a purely type-based portfolio, because design work is visual, but this minimal showcase is Nikolas Wrobel’s Type Foundry, Nikolas Type. Click through to the product pages and you can edit the preview text. Thanks to the foundry being a small independent, it’s able to show some lovely samples that bring the type to life, something that larger foundries often fail to do.

Jam3

It seems video (not static images) are now a must for any portfolio site. Agencies want companies to see real-world experiences, and understand what the working relationship is like. Jam3 is no exception, but scroll past the looping video and you’ll find a rigorously organized set of projects. The menu isn’t easy to locate, but I do like agencies opening up about their approach, and culture. Plus there’s a cool bubble effect hovering over the menu items.

New Land

There’s a tendency among motion graphics and video firms to be slightly mysterious about who they are, and what they do — perhaps it comes from the high-concepts of advertising. New Land’s target audience probably do know who it is, because this is the kind of company that you don’t hire without some prior-knowledge. Interestingly the site is geared around tablet and mobile preferred interactions, as if intended to be passed around a meeting.

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Popular Design News of the Week: October 14, 2019 – October 20, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Visually Distorted – When Symmetrical UI Looks all Wrong

 

What I Learned from 6 Months Leading a Design System

 

10 Small Design Mistakes We Still Make

 

14 Layout Design Trends

 

Culrs Mac App

 

Color Mixer – A Simple Tool that Helps You Mix Two or More Colors

 

The Teletype Text Element Lives On… at Least on this Site

 

2019 Design Tools Survey

 

Why Does Modern Design all Look the Same (and Should It?)

 

How Ultra-Thin Lines in Web Design Can Create an Impact

 

CSS Circles

 

Debunking Color Contrast Accessibility Myths

 

Adobe Rolls Out Revamped Creative Cloud Desktop App

 

16 Hours to Launch — a Breakdown of How I Designed, Built and Launched a Product Over a Weekend

 

We’re not Designing for Screens

 

Why Consistent Writing Makes You a Better Designer

 

What Makes a Great Design Leader?

 

8 Essential Principles of Good Business Card Design

 

The Freelance Life

 

Practicing Ethical Design

 

When GoFundMe Gets Ugly

 

How to Interview Designers

 

Chill Out, Work Smarter & Enjoy the Coffee – Freelancing with Aron Leah

 

How Frontend Developers Can Empower Designer’s Work

 

Flash is Responsible for the Internet’s Most Creative Era

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Options for Hosting Your Own Non-JavaScript-Based Analytics

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used (including on this site), probably due to it’s ease of integration, feature-richness, and the fact that it’s free (until you need to jump up to the enterprise tier which is some crazy six-figure jump).

I don’t take any particular issue with Google Analytics. In fact I quite like it, especially as I’ve learned more about customizing it, like we’ve done here on CSS-Tricks as well as on CodePen.

But there are other options. In particular, I wanted to look at some other options where:

I didn’t find a sea of options to look at. The classic one I always think of in this category is Shaun Inman’s Mint, but Mint isn’t taking new customers anymore. Maybe I’m not looking in all the right places, and perhaps you can help with that. Please chime in with a comment if you know of more options — especially ones you have experience with.

Fathom Analytics

This is one Dave Rupert uses on his personal site and has written about. They have a paid hosted version, which is still focused on privacy in the sense that it does not track or store user data. But they also have a free self-hosted version you can run on your own. Actual data collection is done via a JavaScript snippet you put into your site.

https://platform.twitter.com/widgets.js

Ackee

This is based on Node.js and can only be self-hosted. Actual data collection is done with a JavaScript snippet you put into the site.

Matomo On-Premise

Matomo Cloud is their hosted version, and On-Premisis is the self-hosted version. The actual data collection is done via a JavaScript snippet you put into the site.

https://platform.twitter.com/widgets.js

GoAccess

GoAccess is notable because it’s the first in the list that is a “web log analyzer” which means it looks at access logs that your web server creates rather than relying on JavaScript reporting from the client side. Theoretically, this should be more accurate since client-side JavaScript can be blocked. GoAccess generates reporting that can be viewed in the terminal, as well as browser-based charts and graphs.

https://platform.twitter.com/widgets.js

Netlify Analytics

Netlify Analytics isn’t self-hosted in that you install it yourself on servers you rent. A big point of using Netlify is that it prevents you from dealing with your own servers. The analytics are server-log based rather than JavaScript which can be desirable as they are likely more accurate and don’t impact performance.

Web hosts are uniquely qualified to offer analytics to their users as they configure their own logging and such. For example, I also have analytics on this site through Flywheel, without installing anything, because they can analyze the traffic going through their servers. We wrote up an overview of the service when it was released.

AWStats

AWStats is the oldest analytics tool on the block. When I started out on the web, all the web hosting providers touted AWStats dashboards as part of their offerings. It runs on Perl, and like the last two services above, it gets data from server logs.

It ain’t pretty but it’s free, open-source, and has the stability of being a software project nearly 20 years old.

The post Options for Hosting Your Own Non-JavaScript-Based Analytics appeared first on CSS-Tricks.

Laying the Foundations

Here’s a new book by Andrew Couldwell all about design systems and I’m looking forward to reading the book because it looks like his experience will offer a bunch of insightful thoughts and advice.

A spread from Laying the Foundations

From the book’s description:

This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.

System design is not a scary thing — this book aims to dispel that myth. It covers what design systems are, why they are important, and how to get stakeholder buy-in to create one. It introduces you to a simple model, and two very different approaches to creating a design system. What’s unique about this book is its focus on the importance of brand in design systems and creating documentation. It’s a comprehensive, practical guide that’s simple to follow and easy on the eye.

Direct Link to ArticlePermalink

The post Laying the Foundations appeared first on CSS-Tricks.

Smashing Monthly Roundup: Community Resources And Favorite Posts

Smashing Monthly Roundup: Community Resources And Favorite Posts

Smashing Monthly Roundup: Community Resources And Favorite Posts

The Smashing Editorial

This is the first monthly update that the Smashing team will be publishing, to highlight some of the things we have enjoyed reading over the past month. Many of the included posts are sourced from the most popular links from our Smashing Newsletter. If you don’t get our newsletter yet, then sign up here to receive carefully curated links from the team every two weeks.

SmashingConf News

We’ve just wrapped up our final SmashingConf of the year in New York. Videos of the event will be on their way soon, but we have already published a write-up and all of the video from our Freiburg event held in September. You can find all of those in our post “SmashingConf Freiburg 2019”.

Smashing San FranciscoAlso, we’ve announced the dates for SmashingConf 2020! Would you like to join us in San Francisco, Freiburg, New York, or our new city of Austin? If so, get your tickets now at super early-bird prices, and keep an eye out for line-up announcements very soon.

We publish a new article every day, and so if you’re not subscribed to our RSS feed or follow us on social media, you may miss out on some brilliant articles! Here are some that our readers seemed to enjoy and recommend further:

  • How To Use Breadcrumbs On A PWA” by Suzanne Scacca
    If you’re worried that your PWA is going to be difficult to navigate without some guidance, put breadcrumbs to work. In this article, Suzanne explains just how.
  • Design Systems Are About Relationships” by Ryan DeBeasi
    Design systems can improve usability, but they can also limit creativity or fall out of sync with actual products. Let’s explore how designers and developers can create more robust design systems by building a culture of collaboration.
  • A Guide To New And Experimental CSS DevTools In Firefox” by Victoria Wang
    Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article, Victoria explains seven tools in detail.
  • Editorial Design Patterns With CSS Grid And Named Columns” by Rachel Andrew
    By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! So, without wanting to make this monthly update too long either, we’re shining the spotlight on the following projects:

HTML Email

Can I Email…?

We all know and love caniuse.com. Unfortunately, if you wanted to test support for web standards in HTML Email, it wasn’t really easy. Until now. Inspired by the successful concept, Can I Email lets you check support for more than 50 HTML and CSS features in 25 email clients, and since the site only launched last month, more is already in the planning.

(Can I email…? launched by Rémi Parmentier and the team at Tilt Studio

Made for and by the email geeks community, the data that fuels the project is available on GitHub and anyone can contribute to it. A nice detail: the Email Client Support Scoreboard which is included ranks email clients based on how they support the features. A useful little helper for anyone who’s wrangling HTML email.

Email Design Inspiration

Standing out from the flood of emails that reach our inboxes every day is hard, not only for promotional campaigns but also for transactional emails and newsletters. So how about some inspiration from how others manage to spark curiosity and interest to save their emails from ending up in the junk-mail folder as a victim on the quest to inbox zero?

Email Love by Rob Hope
Email Love by Rob Hope

Curated by Rob Hope, Email Love showcases well-crafted emails that you can turn to for fresh ideas — a look inside the code of each email is included, of course. Exciting discoveries guaranteed!

Fonts

Tools To Circumvent Web Font Pitfalls

Web fonts are easy to implement, but they can have a significant impact on a site’s performance, too. To help you speed up the time to first meaningful paint, Peter Müller built Subfont. The command-line tool analyzes your page to generate the most optimal web font subsets and inject them into your page. Subfont currently supports Google fonts as well as local fonts.

Font Style Matcher by Monica Dinculescu

Speaking of web fonts: To prevent flash of unstyled text from causing layout shifts, you might want to consider choosing your fallback font in relation to your web font’s x-heights and widths. The better they match, the less likely your layout will shift once the web font is loaded.

Monica Dinculescu came up with Font Style Matcher to help find just that perfect fallback font. Before you opt for a fallback font, you might also want to check how well it is supported across different operating systems to not run into issues. Three small but mighty tools to circumvent some of the most common web font pitfalls.

A Tiny Guide To Variable Color Fonts

“The tech is new, the adventure is big!” If you look at the experiments which Arthur Reinders Folmer of Typearture did with variable color fonts, this quote truly hits the mark. Arthur uses variable color fonts to create animations that are not only awe-inspiring eye candy but also explore the full potential of the font technology.

Variable color fonts: How do they work?
Variable Color Fonts: How Do They Work?” by Arthur Reinders Folmer

They might allow little customization compared to SVGs, but variable color fonts are easier to implement and they offer a lot of room for creative adventures, too — using input from the microphone, camera, or gyroscope to adjust the variables and animate the illustrations, for example. Sounds exciting? Arthur put together a little guide in which he dives deeper into the tech behind his experiments. A fantastic overview of what’s possible with variable color fonts today.

Performance

Automating Image Compression

The transfer size of requested images has grown by 52% on desktop and 82% on mobile within the last year — with over half of the median page weight accounting for imagery. These are figures that once again make clear how crucial it is that images are optimized before they hit production. Now, wouldn’t it be handy if you could automate the compression step?

Calibre’s new GitHub Action image-actions
Calibre’s new GitHub Action image-actions

Well, the folks at Calibre asked themselves the same question and built a GitHub Action that does exactly that: it automatically optimizes the images in your pull request — without any quality loss thanks to mozjpeg and libvips, so that no image accidentally skips compression. A real timesaver.

Accessibility

Accessibility Support

There are many different ways that assistive technologies interact with browsers and code. Since it’s still not possible to fully automate screen readers and voice control softwares, we are left with having to do manual tests. And that’s where a11ysupport.io comes into play.

a11ysupport - Accessibility Support
Accessibility Support by Michael Fairchild

Originally created by Michael Fairchild, this community-driven website aims to help inform developers about what is accessibility supported. It’s a project that is active and contributions are always welcome, so start testing away!

Button Contrast Checker

Do your buttons have enough contrast? The Button Contrast Checker built by the folks at Aditus helps you find out. Enter your domain and the tool tests if the buttons on the site are compliant with WCAG 2.1.

Button Contrast Checker
Button Contrast CheckerButton Contrast Checker by Aditus

To cater for realistic results, the checker does not only test the default state of the buttons but also takes hover and focus states as well as the adjacent background into account. A nice detail: Each time you scan a page, the results are stored in a unique URL which you can share with your team. A precious little helper.

Learning To Code

Taking Your Coding Skills To The Next Level

CSS animation, Grid, Flexbox… The web is evolving at such a fast pace that there’s always something new to learn. And, well, what better occasion could there be to finally dive into the topic you’ve been wanting to tackle for so long as with a fun little game?

Flexbox Zombies
Flexbox Zombies by Dave Geddes

If you’ve always wanted to conquer deep space — and learn the basics of object animation in CSS along the way — the CSS Animation course by HTML Academy has some exciting tasks for you to solve. To help your CSS Grid skills grow and blossom, there’s Grid Garden where you use CSS to grow a carrot garden.

If zombies are more up your alley, try Flexbox Zombies. It’ll give you the expertise you need to survive the living deads — all thanks to your coding skills! Or try guiding a friendly little frog to its lily pad with Flexbox in Flexbox Froggy to finally get to grips with the Flexbox concept. Another cool Flexbox learning game that shouldn’t be left unmentioned is Flexbox Defense. Last but not least, if you’re struggling with CSS selectors, there’s CSS Diner to teach you how to select elements. Now, who said learning can’t be fun?

How To Write Better JavaScript

JavaScript is one of the most popular programming languages, and even after more than 20 years since it was born, it is constantly evolving. But how can you get better at it?

Practical Ways To Write Better JavaScript
Practical Ways To Write Better JavaScript” by Ryland Goldstein

Ryland Goldstein shares some of the top methods he uses to write better JavaScript — by using TypeScript to improve team communication and make refactoring easier or linting your code and enforcing a style, for example. As Ryland points out, it’s a continuous process, so take things one step at a time, and before you know it, you’ll be a JavaScript ace.

Learn Regex With Crosswords

If you’ve got a sweet spot for riddles and logic puzzles, then Regex Crossword is for you. Regex Crossword is a crossword puzzle game where the clues are defined using regular expressions — who said regex can’t be fun?

Hamlet puzzle
Regex Cross­word by Ole Michelsen and Maria Hagsten

There are different difficulty levels for you to start to cut your teeth on an easy set of crosswords to learn the basics or put your skills to the test as the puzzles get bigger and more complex. A puzzle generator is also included, so if you feel like making up your own puzzles for others to unravel, there’s nothing to hold you back.

And, The Rest!

Tips To Master Your Next Tech Job Interview

The job-hunting process can be intimidating, especially if you’re just about to get your career started. To help you tackle the challenge well, Yangshun Tay put together the Tech Interview Handbook.

Tech Interview Handbook
Tech Interview Handbook by Yangshun Tay

This free resource takes you through the entire process; from working on your resume to negotiating with the employer once the interview has ended, while curated practice questions get you fit for both the technical and behavioral questions that might pop up along the way. A good read, not only for prospective web professionals.

Behind The Scenes Of Design Teams

While many companies are driven by features and technology, over the last years it’s rare to find debates about the importance of design. It’s reflected in publicly announced case studies, design systems, large scale design overhauls, and most recently in dedicated pages for design teams — be it Uber, Google, Spotify, Medium, Dropbox, Slack, Amazon or AirBnB.

Behind The Scenes Of Design Teams
Image credit: Intercom

Recently, Intercom has announced Intercom.Design, a resource dedicated to its design teams, products, processes and public case studies, including internal UI recommendations and expectations from different product and content designer levels. Wonderful sources of inspiration to improve your design team and explore behind the scenes of how products are designed and built. (Thanks for the tip, Kostya Gorskiy!)

Royalty-Free AI-Generated Faces

100,000 photos of faces of different age, gender, and ethnicity. What doesn’t sound like anything groundbreaking, actually is, if the faces don’t exist but are products of artificial intelligence.

Generated Photos
Generated Photos by Generated Media, Inc.

The Generated Photos project did exactly that. With the help of AI, a team of 20 AI and photography professionals generated this impressive number of high-quality faces that you can download and use in your projects for free (for non-commercial purposes). But the plans go even further: the aim is to build an API that enables anyone to use artificial intelligence to generate interesting, diverse faces for their projects, mockups, and presentations — without bothering about copyright and distribution rights questions. Will this be the end of conventional stock photography?

Monochromatic Color Palettes Made Easy

If you’ve ever tried to generate a consistent monochromatic color palette, you know that this can be a boring task. After he once again messed around with infinite copy-paste commands to create a nice palette, Dimitris Raptis decided to change that. His solution: CopyPalette.

CopyPalette
CopyPalette by Dimitris Raptis

CopyPalette lets you create SVG palettes with ease. All you need to do is select a base color, the contrast ratio of the shades, and the number of color variations you’d like to have, and the tool generates a perfectly-balanced color palette that you can copy and paste into your favorite design tool. A true timesaver.

The Art Of Symbols

Since more than 40,000 years, humans have been using symbols to communicate complex ideas. And as designers, we still do so today.

Art of Symbols by Emotive Brand agency
Art of Symbols” by Emotive Brand agency

Art of Symbols, a 100-day project by the design team at Emotive Brand, set out to explore how ancient symbols inform contemporary brand design. After all, a lot of those symbols which are part of our vocabulary as designers today, already existed a long time ago, as early as in rock paintings and engravings even. If you’re curious to learn more about their origins and meanings and are up for some beautiful eye candy, this project will keep you busy for a while.

Smarter Patterns For Designing With AI

The power of artificial intelligence is huge, but with it also come ethical challenges and a lot of responsibility. Responsibility for the user who might be confused and scared by AI if a clear concept is lacking, who might want to choose the amount of AI they interact with, and who need to be protected against harmful practices.

Smarter Patterns by Myplanet
Smarter Patterns by Myplanet

Based on research of how AI is being used and understood today, the software studio Myplanet put together Smarter Patterns, a library to start a discussion about these topics and help designers tackle the challenges of AI in interface design. The resource currently features 28 patterns that empower designers to create meaningful AI experiences.

Instant Offline Access With Dash

If you’re one of those folks who simply cannot sleep on a plane and wished there was just a super-productive way to get some work done instead, you’re probably always on the lookout for tools that’ll get you through those flights even with spotty WiFi. Well, search no more — we’ve stumbled upon a pretty useful one!

Dash for macOS and iOS
Dash for macOS and iOS

In case you haven’t heard of it yet, Dash is a free and open-source API documentation browser that gives your iPad and iPhone instant offline access to 200+ API documentation sets and 100+ cheatsheets. Folks such as Sarah Drasner use it especially on the day before a long trip; all you need to do is download all the docs you need, and you’re all set! You can even generate your own docsets or request docsets to be included. Nifty!

A Collection Of Personal Sites

With the Internet ingrained in our day-to-day lives, what’s the best way to voice your own ideas, thoughts, and feelings? A personal site, of course! And because there are so many of them out there, Andy Bell decided to keep a collection of some so that folks can discover each other’s work and even receive updates from their RSS feeds.

Personal Sites by Andy Bell
Personal Sites by Andy Bell

If you’d like your site to join the collection, you’ll find simple instructions on GitHub that’ll appear in the list once your request has been approved. What a great way to find folks who share your interests and learn new ways of how to develop and design websites!


From Smashing With Love

A month can be a long time to stay on top of things, so please do subscribe to our bi-weekly newsletter if you still haven’t. Each and every issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!

You can also follow us on Twitter, Facebook and LinkedIn — always feel free to reach out and share your projects with us! We love hearing from you!

Keep up the brilliant work, everyone! You’re smashing!

Smashing Editorial (vf, ra, cm, il)
JAMstack Tools and The Spectrum of Classification

With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts.

I think those classifications are handy, and help conversations along. But there is a point where nuance is necessary and these classification buckets get a little leaky.

Note, these charts are just intended to paint a spectrum, not to be a comprehensive list of services.

Headless CMSs

A Headless CMS is a CMS that provides an admin area for creating and editing content, but offers no front-end to build the website from. All the content is accessed via APIs.

Imagine WordPress, which has an admin area, but it also has themes from which you build the website from on the server-side, with all kinds of PHP functions for you to use the content data. All that theming stuff is the “head”. So a headless CMS would be like WordPress with just the admin area. And indeed you can use it that way, as it offers APIs.

There is even more nuance here, as there are services that offer an admin area, but don’t actually store the data for you. Plus there is CMSs that are hosted for you, and CMSs where you have to bring your own hosting. Let’s have a peak.

ServiceHeadless?HostingNotes
ContentfulYesCloudA classic headless CMS
SanityJSON data structure, accessed via APIs, custom admin area is self-hosted
CockpitSelfComes with admin UI
Strapi
KeystoneJSAll code, not even an admin UI
WordPressSorta – Usually used with headSelf or CloudHas a head, but you don’t have to use it, you choose to only use APIs to access content if you wish.
DrupalSelf
CraftCMSSelfSpecifically has a headless mode and GraphQL API. Craft Cloud will bring a cloud-hosted headless varient
NetlifyCMSSorta – Doesn’t actually store content, just helps edit it.GUI for Git-hosted Markdown
ForestryCloud
JoomlaNoSelfA classic headed CMS
SquarespaceCloudSite builder, meant to build hosted/headed sites
Wix

Static Site Hosts

This is tricky to talk about because literally, any web host will host static files, and probably do an OK job of it. I think it’s most useful to consider hosts that only do static hosting on purpose because it means they can optimize for that situation do other useful things.

ServiceNotes
NetlifyThe gold standard in static file hosts right now. Developer conviences galore.
Cloudflare Workers SitesCDN-first static file hosting alongside a cloud functions service.
Firebase HostingFirebase is a whole suite of sub-products, but the hosting in particular is static and on a CDN.
GitHub PagesStatic file host, but will also run Jekyll and other actions. Is not a CDN.
NeocitiesStatic file host with online editor and community.
S3Raw file storage. Can be configured to be a web host. Not a CDN unless you put CloudFront in front of it.
BluehostNot really a static file host.
MediaTemple
Hostgator

Sometimes you’ll see people trying to use stuff like Dropbox or Google Drive to do static file hosting (for a website), but I’ve found these services generally ultimately don’t like that and prevent the use for that. If it works today, fine, but I wouldn’t count on any of them long term.

Static Site Generators

You would think this category would be straightforward, without much spectrum. A static site generator takes input and makes statically generated pages that can render without, say, needing to hit a database. But even here there is a spectrum.

The language the generator is in kinda matters. It affects speed. It affects installability on different local platforms. It affects your ability to write code to extend it and hack on it.

But perhaps more importantly, not all static site generators are only static site generators. Some can be run on the server as well, weirdly enough. And there are some that kinda look like static site generators, but are more correctly classified as flat-file CMSs.

SoftwareLangNotes
JekyllRubyOne of the originals in this generation of static site generator.
HugoGoKnown for speed.
11tyNodeProcesses 11 different template languages out of the box.
GatsbyReactGatsby is truly a static site generator, but generally, the sites “hydrate” into SPAs, but remain static (nothing server-rendered). Big ecosystem of plugins to help with connecting data sources, handling images, etc.
NextNext can do static site generation, but it can also run live in Node and do server-side rendering on the fly (“Isomorphic JavaScript”).
NuxtVueNuxt is the spirtiual companion to Next but in Vue. It also can either be staticly generator or run isomorphicly.
KirbyPHPKirby runs from static files (no database), but isn’t really a static site as the pages are rendered by PHP.
StatamicStatamic is similar to Kirby in that static files are used for data but the page themselves are rendered by PHP.
PerchJust an example of a CMS that keeps data in a database and isn’t trying to be a static site generator at all.

The post JAMstack Tools and The Spectrum of Classification appeared first on CSS-Tricks.

Weekly Platform News: CSS column-span Property, ADA applies to Websites, Auto-generated Image Descriptions

In this week’s roundup: multi-column layouts gain wide support, the ADA means more A11y for retailers, and Google is doing something about all the empty image alt attributes in the wild.

The CSS column-span property will soon be widely supported

The CSS column-span property, which has been supported in Chrome and Safari since 2010 (and IE since 2012), is finally coming to Firefox in version 71 (in December).

This feature enables elements that span across all columns in a multiple-column layout. In the following demo, the headings span across both columns.

article { column-count: 2;
} h2 { column-span: all;
}

See the Pen
Demo of CSS column-span: all
by Šime Vidas (@simevidas)
on CodePen.

(via Ting-Yu Lin)

The Americans with Disabilities Act applies to websites

In the United States, the Americans with Disabilities Act (ADA) applies to websites, which means that people can sue retailers if their websites are not accessible.

Domino’s Pizza’s appeal was recently turned down by the Supreme Court, so the lawsuit against them for failing to make their website accessible to screen reader users will now resume in district court.

Guillermo Robles, who is blind, filed suit in Los Angeles three years ago and complained he had been unable to order a pizza online because the Domino’s website lacked the software that would allow him to communicate. He cited the ADA, which guarantees to people with a disability “full and equal enjoyment of the goods and services … of any place of public accommodations.”

(via David G. Savage)

Google announces automatically generated image descriptions for Chrome

When used with the VoiceOver screen reader, Chrome can now automatically generate image descriptions for images that do not have proper alt text (<img alt> attribute). Google has already created more than 10 million image descriptions, but they are not meant to replace alt text written by humans.

Image descriptions automatically generated by a computer aren’t as good as those written by a human who can include additional context, but they can be accurate and helpful.

This new accessibility feature, called “Accessibility Image Descriptions,” may not be enabled by default in your version of Chrome, but you can enable it manually on the chrome://flags page.

(via Dominic Mazzoni)

More news…

Read even more news in my weekly Sunday issue that can be delivered to you via email every Monday morning.

More News →

The post Weekly Platform News: CSS column-span Property, ADA applies to Websites, Auto-generated Image Descriptions appeared first on CSS-Tricks.

How to Use Proven Industry Data to Guide Your Clients

As a web designer, you may be starting with little to no data of your own. It’s not until a website has launched (or relaunched) that you can start gathering real analytics on its performance. Even then, it can take awhile to draw any meaningful insights from it.

So, in many cases, what web designers are working with before and while they design a new website is industry data: audience insights; competitive research; keyword analysis; Google announcements; marketing surveys and reports.

For someone who builds websites day in and day out, it makes sense to watch industry insights closely. For your clients, though, it might not

For someone who builds websites day in and day out, it makes sense to watch industry insights closely. For your clients, though, it might not.

That’s because they come from a place where they make business decisions based on internal data — data about their audience, their location, their product, etc. They might use industry analytics as benchmarks, but not to drive something as important as their company’s direction.

Let’s take a look at why this issue might arise and how you can overcome it by showing how analytics from a website paired with industry data is the best solution for designing a website.

What if Your Client’s Analytics Conflict with Industry Data?

In 2015, Google announced that mobile searches had surpassed those on desktop. The news had everyone talking and eventually gave rise to trends like mobile-first, micro-moments, and voice UIs.

In the web design space, there was no direction to go in but mobile-first. That didn’t mean that desktop users were completely forgotten; it just meant that mobile needed to take a front seat when designing the user experience.

But let’s say you’re approached by a client who needs a redesign. They keep hammering home that they don’t want you to put too much effort into mobile since their analytics show that less than 9% of their traffic comes from mobile devices. The previous designer didn’t bother with mobile, so you shouldn’t either.

While it would be nice to give a definitive response to this, there are two possible reasons why their mobile traffic is so low:

  1. They’re targeting an audience that isn’t heavy on mobile users to begin with;
  2. The website was designed for desktop and so it doesn’t rank well for searches performed on mobile.

Now, you don’t want to brush your client off. Analytics are clearly important to your client, right? So what you need to do instead is broach the matter with facts.

Presenting Your Client with the Facts

There are a number of ways you can use hard facts to convince your clients that the direction you want to take their website is the right one.

1. Use Proof from Google

Mobile-first indexing officially became the way Google indexes and ranks all new websites in 2019. Even if your client believes that their audience primarily comes from desktop, it’s still important to play by Google’s rules in search if they want traffic from it.

If you really want to drive this point home, you could run their website through Google’s Mobile-friendly Test:

Seeing a result like the one the Yale School of Art gets would certainly help you strengthen your argument:

2. Use Proof from Their Own Google Analytics

While your client’s traffic mostly comes from desktop, it might be the previous designer’s choice to favor desktop that could be the reason for the low mobile numbers. If the website isn’t mobile responsive, let alone mobile-first, it’s not going to rank well.

That said, there might be more to the story than just, “We only get 8% of our traffic from mobile, so ignore it.”

Take your client to their Google Analytics and dig deeper into the Mobile tab.

You need to get them to focus on more telling analytics, like the bounce rate and average time on site.

Even if mobile traffic is lower (which you’ve already explained might be because the UI was designed for desktop) those users might be the ones that more favorably respond to the content on the site. And that’s ultimately what’s important here. They need visitors to look through the site and convert, not bounce away from it.

If you can use their own data to make the point that mobile visitors are a more worthwhile bunch to go after, it would make the decision-making process much easier.

3. Use Real Proof from Other Websites

Don’t forget to show them proof outside of Google.

Do you have case studies from clients you can share with them? If not, try to find examples from other designers or agencies to make your point. Make sure the websites are similar to theirs in terms of audience or goals, so they can see the correlation between the changes they made and what you’re proposing.

You can show them how:

  • A redesign from desktop to mobile didn’t just affect traffic, but conversions, too;
  • A move from mobile to PWA improved customer retention on an already well-performing site;
  • An adjustment of their SEO strategy increased visibility with mobile users and demonstrated that they were a worthwhile segment to target.

The Bottom Line

You want to paint this as a decision that’s in their best interest, not as something that’s going to cost them more money or that might compromise the amount of visitors they currently get.

A move to mobile (or any other data-backed change you’re proposing) will only help your client in the long run. Just make sure you show them that it’s the potent combination of on-site analytics and industry data that should drive their (and your) design decisions.

 

Featured image via DepositPhotos.

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google