Eleventy Love

Been seeing a lot of Eleventy action lately. It’s a smaller player in the world of static site generators, but I think it’s got huge potential because of how simple it is, yet does about anything you’d need it to do. It’s Just JavaScript™.

The post Eleventy Love appeared first on CSS-Tricks.

Thinking Through Styling Options for Web Components

Where do you put styles in web components?

I’m assuming that we’re using the Shadow DOM here as, to me, that’s one of the big draws of a web component: a platform thing that is a uniquely powerful thing the platform can do. So this is about defining styles for a web component in a don’t-leak-out way, and less so a way to get global styles to leak in (although that’s very interesting as well, which can be done via custom properties which we’ll look at later in the article).

If you’re building the template inside the JavaScript — which is nice because of template literals and how we can sprinkle our data into the template nicely — you need access to those styles in JavaScript.

const template = ` <style>${styles}</style> <div class="${class}"> <h2>${title}</h2> ${content} </div>
`;

Where does that style variable come from? Maybe also a template literal?

const style = ` :host { background: white; } h2 { font: 900 1.5rem/1.1 -system-ui, sans-serif; }
`;

I guess that’s fine, but it makes for a big messy block of code just dunked somewhere in the class where you’re trying to build this web component.

Another way is to <template> the template and make a <style> block part of it.

<template id="card-template"> <style> :host { background: white; } h2 { font: 900 1.5rem/1.1 -system-ui, sans-serif; } </style> <div id="card-hook"> <h2 id="title-hook"></h2> <p id="desc-hook"></p> </div>
</template>

I can see the appeal with this because it keeps HTML in HTML. What I don’t love about it is that you have to do a bunch of manual shadowRoot.querySelector("#title-hook").innerHTML = myData.title; work in order to flesh out that template. That doesn’t feel like a convenient template. I also don’t love that you need to just chuck this template somewhere in your HTML. Where? I dunno. Just chuck it in there. Chuck it.

The CSS is moved out of the JavaScript too, but it just moved from one awkward location to another.

If we wanted to keep the CSS in a CSS file, we can sorta do that like this:

<template id="card-template"> <style> @import "/css/components/card.css"; </style> <div id="card-hook"> <h2 id="title-hook"></h2> <p id="desc-hook"></p> </div>
</template>

(The use of <link rel="import" type="css" href=""> is deprecated, apparently.)

Now we have @import which is an extra HTTP Request, and notorious for being a performance hit. An article by Steven Lambert says it clocked in at half a second slower. Not ideal. I don’t suppose it would be much better to do this instead:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); fetch('/css/components/card.css') .then(response => response.text()) .then(data => { let node = document.createElement('style'); node.innerHTML = data; document.body.appendChild(node); }); } // ...
}

Seems like that would potentially be a Flash-of-Unstyled-Web-Component? I guess I should get off my butt and test it.

Now that I’m digging into this again, it seems like ::part has gotten some steam (explainer). So I can do…

const template = ` <div part="card"> <h2>${title}</h2> ${content} </div>
`;

…then write styles in a global stylesheet that only apply inside that Shadow DOM, like:

my-card::part(card) { background: black; color: white;
}

…which has a smidge of browser support, but maybe not enough?

These “part” selectors can only touch the exact element it’s connected to. You’d have to do all your styling by applying a part name to every single DOM node and then styling each entirely on its own. That’s no fun, particularly because the appeal of the Shadow DOM is this isolated styling environment in which we’re supposed to be able to write looser CSS selectors and not be worried our h2 { } style is going to leak all over the place.

Looks like if native CSS modules becomes a thing, that will be the most helpful thing that could happen.

import styles from './styles.css'; class MyElement extends HTMLElement { constructor() { this.attachShadow({mode: open}); this.shadowRoot.adoptedStyleSheets = [styles]; }
}

I’m not sure, however, if this is any sort of performance boost. Seems like it would be a wash between this and @import. I have to say I prefer the clarity and syntax with native CSS modules. It’s nice to be writing JavaScript when working with JavaScript.

Constructable Stylesheets also look helpful for sharing a stylesheet across multiple components. But the CSS modules approach looks like it could also do that since the stylesheet has already become a variable at that point.

The post Thinking Through Styling Options for Web Components appeared first on CSS-Tricks.

Can Best Practice Replace Design Research?

Heart-warming or not, co-creation with a client—the utopian ideal of shared vision—has its drawbacks. There are only so many times you can hear the words “brand strategy” before actually chewing your own face off. In the age of WordPress, Drupal and, dare I say it, Wix, it’s never been more tempting to pay lip-service to research and consultation. Instead of building a principles framework from scratch, why not roll out something from a template in a fraction of the time?

Well, in fact, there probably are situations where a simple WordPress-type approach will work really well. The trick is knowing when.

What Is “Best Practice” Anyway?

Well, exactly.

Even if you slept through design school, or didn’t go at all, you probably know the fundamentals already. And it’s true. If you stick to first principles, you won’t go far wrong. Here are some examples:

  • Color and Contrast: 2-3 colors maximum, use contrast to highlight important elements;
  • White Space: Use plenty of it, be consistent with proportions above and below;
  • Layout: Symmetric Grid. Err…Always. Work ‘above the fold’;
  • Typography: No more than 2-3 typefaces;
  • Logo: Long, top left, always;
  • Compexity vs Simplicity: Look for balance and visual interest;
  • Visual Hierarchy: Use color, contrast, size and complexity to highlight important elements;
  • Consistency: With all of the above, whatever you decide, be consistent;
  • And so on…

One size, though, doesn’t fit all. By bending and even breaking the rules sometimes, you’ll create designs that stand out and, more importantly, meet the real requirements of the brief.

The One Unbreakable Rule

It’s pretty hard to find a “Best Practice” that really works in every situation, but here’s one:

No matter what you’re doing, make sure you know why you’re doing it.

And, just in case you were wondering, “err…because it looks pretty?” and “because it’s easier than what I probably ought to do instead…” aren’t really reasons.

There are clearly situations where a client—whatever they may think—is best served by a simple off-the-shelf approach. Particularly if their budget is more Scrooge than Soros. The thing is, you probably still need to go through a research process to find out whether that’s the case or not.

When And How To Go Off Piste

Before or just after accepting the job, you’ll likely need to do some research with the client. This process should focus on (you guessed it) brand strategy.

Ideally, in the first instance, you’ll build a design principles framework. Whatever decisions you make after that (whether you’re going to stick to the rules or break them) should be justified with reference to the framework.

Here are some examples of situations where you might consider deviating from “best practice”:

You Want to Send a Particular Message

Take this site for a children’s fitness company, for example.

It clearly breaks all the rules about color and typeface, and a few more besides, but overall gives a sense of vibrance and playfulness, which of course is ideal for this market.

You Want to Draw Attention to Something

By ignoring the imperative to “work above the fold” and putting product and logo front and centre, candle manufacturer Waxxy draws the eye directly to their “product centred” philosophy and creates a sense of light and space:

Natale’s Clothing uses additional fonts and a broken grid layout to emphasise content and create a sense of being “out of the ordinary”.

You Want to Keep Things Clean

Legend has it, if you “put everything on the homepage” it’s good for SEO and easier for users. These days, though, there’s often a lot of information, and we prefer to have more space, even if it means a bit more browsing.

If you visit Toke’s site here, you’ll see that they break the animation taboo in a subtle and effective way as well.

These are just a few examples, there are many more. In each case the key questions to ask are:

  1. How does it meet the brief?
  2. How does it help brand strategy?

When To Stick To The Script

A big consideration here will likely be the client’s budget. With the best will in the world, you’re going to struggle to create a logo, design a custom typeface, and build a multi-page site from scratch on $800. If that’s what the client’s asking for, and can’t understand the limitations, maybe consider saying no!

If, on the other hand, there’s scope to negotiate, where budgets are small and, in situations where, for example, the client has a small number of products and/or services, a single page WordPress site will often be exactly what they need. Here it’s not a question of “doing the bare minimum” but rather “not doing too much”. Even so, there will probably be bespoke elements that you can change to better fit the strategy.

Another important moment to check yourself, is whenever you’re not sure if an idea works. If you can’t justify a decision with reference to your design principles framework—or at least with reference to the client’s brand strategy—then it’s probably best to err on the side of caution.

Research or Best Practice?

In a word, both.

There are definitely situations where a “first principles” approach will be exactly what the client needs. Particularly if their budget is small and their needs are simple. Even in this case, though, a great designer will take the time to understand (or help to develop) the brand strategy, and add whatever tweaks are necessary. Each client and each brand is unique, and a designer’s job, if you think about it, is to reflect just that.

When using a bespoke approach, breaking with convention can, as we’ve seen, produce interesting and stylish results. It’s important, though, that each decision makes sense, and can be linked back to the brand strategy. If it can’t, it probably shouldn’t be in the design.

And whatever you do, don’t chew your face off.

 

Featured image via Unsplash.

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;}

The Deal with the Section Element

Two articles published the exact same day:

  1. Bruce Lawson on Smashing Magazine: Why You Should Choose HTML5 <article> Over <section>
  2. Adam Laki on Pine: The Difference Between <section> and <div> Element

They are comparing slightly different things, but they both involve the <section> element.

I find it pretty clear when you reach for a <div>: When you want that element to be essentially meaningless. You’re only using it for styling purposes.

I always think of RSS when I think of <article>: Would this little bit of stuff make sense as an entry (which doesn’t necessarily need to be the entire content of the article)? If yes, use <article>; if not, don’t.

Bruce has a go-to answer:

[…] think of <article> not just as a newspaper article, or a blog post, but as an article of clothing — a discrete entity that can be reused in another context. So your trousers are an article, and you can wear them with a different outfit; your shirt is an article, and can be worn with different trousers; your knee-length patent leather stiletto boots are an article.

More importantly, it has some actual functionality. Bruce mentions that Apple WatchOS specifically uses it to find content on pages.

But <section> is more nebulous. At one point, you were supposed to think of sections as places where your <h1><h6> headings would reset, but that never came to fruition because it required a thing called “HTML5 Outlining” which zero browsers support.

So should we use <section> it at all? According to Bruce, sometimes! Smashing Magazine’s design for articles has a summary at the beginning of the article. Visually, that’s fairly clear, but less-so for screen reader users. The solution was wrapping the summary in an element with an aria-label to make that clear. But you aren’t supposed to use aria-label unless that element also has a role. You could apply a role to a <div>, but <section> already has a good default role, so:

<section aria-label="quick summary"> Summary text
</section>

Adam’s article (sorry, Adam) is very vague on the points.

The main difference comes from the semantic. If you have a part in your site or application which has its logic you need to use the <section> tag to declare it…

… use <section> when it is logically correct to make a part of your site or app readable to the assistive technology. It is an excellent approach if you keep in mind the screen readers.

So you get a role="region" automatically for sections, but I’m not sure that does anything for screen readers, sans the label. In a quick test (Chrome for desktop with VoiceOver enabled), a <section> without an aria-label just wasn’t there in the Landmarks section of the Web Rotor, but it showed up once it had an aria-label.

Point is: don’t just use <section> and assume you’re doing something good for accessibility. Its purpose is pretty limited and only useful for establishing landmarks. Even then, you aren’t helping that much. Leonie Watson in the comments:

When the choice is between a visually hidden heading and a section element with an accessible name there are a couple of things to consider before deciding which approach is the right one.

When a section element has an accessible name it becomes a navigable landmark element, so a screen reader user can use their screen reader’s shortcut key for navigating from one to the next – just like they can do with headings.

According to the most recent WebAIM screen reader user survey though, 68% of screen reader users prefer to navigate by headings compared to 2.9% who prefer landmarks.

So from a strict accessibility point of view, you could probably drop the heading, but from a usability point of view you really want to keep the heading – at least until more screen reader users express a preference for using landmarks to navigate content.

The post The Deal with the Section Element appeared first on CSS-Tricks.

A Trick That Makes Drawing SVG Lines Way Easier

When drawing lines with SVG, you often have a <path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that you that it’s initially hidden. Then you animate the stroke-offset back to 0 so you can watch it “draw” the shape.

Figuring out the length of the path is the trick, which fortunately you can do in JavaScript by selecting the path and doing pathEl.getTotalLength(). It’ll probably be some weird decimal. A smidge unfortunate we can’t get that in CSS, but c’est la vie.

Here’s the trick!

You don’t have to measure the length of the path, because you can set it.

So you do like:

<path d="M66.039,133.545 ... " pathLength="1" />

That doesn’t do anything by itself (as far as I know). It’s not like that only draws part of the path — it still draws the whole thing like as if you did nothing, only now the “math” of the path length is based on a value of 1.

Now we can set the stroke-dasharray to 1, and animate the offset in CSS!

.path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 5s linear alternate infinite;
} @keyframes dash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; }
}

Which works:

See the Pen
Basic Example of SVG Line Drawing, Backward and Forward
by Chris Coyier (@chriscoyier)
on CodePen.

High five to Adam Haskell who emailed me about this a few months back.


Hey, speaking of SVG line drawing: Lemonade made a landing page for their 2019 charity that uses scroll-triggered SVG line drawing up and down the entire page. They did a behind-the-scenes look at it, which I always appreciate.

animated GIF of line drawing on Lemonade page - as page scrolls down a teddy bear shape is drawn

The post A Trick That Makes Drawing SVG Lines Way Easier appeared first on CSS-Tricks.

Understand Your Users with Positionstack

One of the best things about the Internet is that it (mostly) doesn’t care where you are. The person you’re interacting with might be in Rio or Rhode Island, Bahrain or Birmingham. The Internet opens up the world.

But opening up the world doesn’t mean removing it. The geographic independence loved by users can be a real headache for businesses, because nearly all businesses are constrained by geography. For business, having an accurate picture of where your users are means understanding them, understanding your relationship to them, and can mean the difference between an enviable user experience, and a PR disaster.

Geocoding grants you Sherlock Holmes-like powers of deduction

One option for understanding a user’s location is Geolocation, which allows you to locate a user via their IP address; it’s not perfect because IP addresses are tricky things. Arguably a better option, thanks largely to the accuracy of the starting data, is Geocoding. Greater reliability than Geolocation makes Geocoding a more useful option for UX designers.

Geocoding grants you Sherlock Holmes-like powers of deduction, to seek out rich data about your users. But where do you start? One of the best ways is to integrate your site or app with positionstack.

What Are The Benefits of Geocoding?

It’s awesome that you can sell your band’s T-shirt to a fan in Vietnam, or ship a used car part to a mechanic in Siberia, but until 3D printing gets a lot more sophisticated there needs to be a way to move objects from Point A, to Point B; step 1 in that process is figuring out exactly where Points A and B are.

Shipping goods, with all the automatically calculated costs, isn’t the only reason you may want to know someone’s location. For example, it’s good manners to present prices in the local currency, or direct customers to a support line that speaks their language. And unfortunately, there are legal issues to consider: national and international bans exist on trading with some nations, accepting certain orders from some users could land you in hot water.

The key to a great user experience is gathering data about your users and then acting on it

One of the best features of a Geocode API like positionstack is that once your user has disclosed their location you can make an educated-guess at a whole lot more, from their probable first language, to their marketing preferences, and even the time they’re likely to come home from the office.

Imagine you’re offering a callback service on your website. Geocoding not only ensures you can pre-fill the international dialling code in the callback form, but it tells you the user’s timezone—essential if you don’t want to wake them up with a 4am sales pitch.

A user’s location also affects their outlook on the world. Go visit a major international company like Apple, Nike, or Pepsi, change your location on their site, and compare how brands with millions of research dollars pitch their wares differently in North America, France, Indonesia, or New Zealand. The key to a great user experience is gathering data about your users and then acting on it.

Why Choose positionstack?

With just a user’s physical address you can determine dozens of different characteristics that allow you to naturalize your site or app for users. Based on an address—even a partial address—positionstack can determine the user’s currency, dialling code, even their hours of daylight.

One of the best features of positionstack is its ability to translate an address into a latitude and longitude, then plot that position on a map that you can easily embed on your site. Nothing builds a connection like showing a user a place they recognize; it builds confidence, increases conversions, and ultimately means higher profits for you.

And that’s not all. positionstack enables both forward, and reverse geocoding. That means as well as finding a global position from an address, it can also find an address from a latitude and longitude. You can even perform batch queries (multiple searches) allowing you to narrow down addresses from an approximate location.

a super-reliable infrastructure, handling over a billion requests per day, with a typical response time of less than 100 milliseconds

As you can probably guess, any Geocoding API is only as useful as the data that underpins it. positionstack is run by apilayer, one of the most trusted names in APIs. It boasts a super-reliable infrastructure, handling over a billion requests per day, with a typical response time of less than 100 milliseconds. positionstack’s API is built on a database of more than two billion global locations, sourced from high-quality data sources, and it’s updated on a daily basis.

positionstack is also exceptionally easy to integrate into a site or app. There are code examples provided in PHP, Python, Nodejs, Go, Ruby, and jQuery—you can even use the service with vanilla JavaScript. Data is returned in XML, JSON, or GeoJSON formats.

Perhaps the most appealing feature of positionstack is that it’s completely free for use up to 10,000 API requests per month. So if you’re running a small site, or just getting started, you can make use of professional-grade data at zero cost. Once you’ve grown large enough to need it, premium subscriptions start at just $9.99 per month.

Head over to positionstack.com today, to get started with Geocoding for free.

 

[– This is a sponsored post on behalf of positionstack –]

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;}

Animate Text on Scroll

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.

That demo is here:

See the Pen
Selfie Crawl
by Chris Coyier (@chriscoyier)
on CodePen.

@keyframers covered it much nicer than I did and made this video. (Seriously, it’s so clear and concise — it’s a great watch.)

I particularly like how quick’n’easy creating, exporting, optimizing, and integrating the actual SVG codes in their demonstration.

Their final demo:

See the Pen
SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers
by @keyframers (@keyframers)
on CodePen.

The post Animate Text on Scroll appeared first on CSS-Tricks.

How Many Types of X Acronym Are There? And Does It Matter?

One of the problems with coining a term like “user experience” or its acronym counterpart “UX” is that it opens up the floodgates for other trendy experience-related acronyms to enter the web design lexicon.

CX, DX, EX, HX, JX, PX, UX, (U)XD…

Is all of this really necessary though?

While I don’t think you need to go adding EX or JX to your vocabulary anytime soon, it’s still a good idea to educate yourself on what these X acronyms mean and how to use them to your advantage in business.

The X’s of Web Design and Marketing

The two most common experience acronyms in web design and marketing are UX and CX. What you may be surprised to learn, however, is that the “X” in these acronyms doesn’t always stand for “experience” nor does it always pertain to the end customer.

Let’s review what each of the X acronyms means and then we’ll talk about which ones you actually need to worry about and use.

Customer Experience (CX)

CX refers to the quality of interactions a customer has with a brand, from the very first encounter to their very last. As such, customer experience is the most important of all the X’s to monitor, measure, and maintain.

Think about all of the places where the CX could go off the rails:

  • A broken form on the website dissuades them from trying to connect with a brand;
  • A support representative fails to respond in a timely fashion, leaving the user feeling helpless;
  • The customer makes a purchase every month for two years, but has noticed a degradation in quality over time.

This is why it’s so important for businesses to have a game plan from Day 1 — especially one that ensures a consistent delivery of products and services throughout the lifetime of a customer relationship. Any misstep in CX could cost a brand a customer’s business and loyalty.

Digital Transformation (DX)

DX refers to a technological evolution within a company. Although it’s not a term you commonly hear thrown around, it’s happening around us all the time.

If you’ve ever made a digital shift within your own business (say, from one OS to another or from a manual process to one that’s automated), you know what far-reaching effects it can have. Your time, money, and sometimes even your clients can be impacted by the change if you don’t prepare for it in advance.

Imagine what happens when it’s not just a sole business owner or freelancer who’s affected by a digital transformation.

Emotional Experience (EX)

There are two ways in which “EX” may be used in design or marketing. This is one way.

Think of emotional experience as a subset of user experience. Instead of focusing on developing a clear set of steps that take a user through their journey, EX design and marketing focus on the elements that evoke strong emotions: Powerful color palettes; Nostalgic images; Messages of urgency.

Any time you build something with the intent of pulling on someone’s emotions, that’s emotional experience design — and it’s a really common thing we do today, even if we don’t all go referring to it as EX.

Employee Experience (EX)

This is the second use of EX you may encounter, though it’s not very likely unless you’re working in a digital agency environment. Even then, this is the kind of term that only corporate might use.

While it might not be a commonplace phrase, the concept is a good one to flesh out, whether you work in a team atmosphere or you have aspirations of hiring your own team someday. All employee experience really refers to is how team members feel about and respond to a work environment and their organization as a whole.

Essentially, EX is UX for an internal organization. And by researching what employees want, collecting feedback on how they feel, and reviewing data on their productivity and job satisfaction, companies can effectively improve the employee experience — which should have a trickle-down effect to CX.

Human Experience (HX)

I’ve heard it said that HX is all about taking UX and CX to a new level.

Even though they’re both meant to create a more pleasing end user experience, the belief is that there’s still too much focus on the technology instead of the humans we should be serving. That it’s only when we stop focusing on how technology can attract and convert and please more customers that we can fulfill the real purpose of a company.

While honesty, transparency, and ethics are the kind of ideals every brand should strive for, it’s not always realistic to prioritize them what with how difficult it is to convince users to convert. There’s just too much information competing for their attention right now. So, while it’s nice to think about being able to market and sell a company to human beings instead of generalizing them as “users” or “customers”, that’s just not feasible for newer and smaller companies.

That said, I think HX is still a worthwhile concept to keep in mind. While you might not be able to do much with it now, it can certainly be a game-changing differentiator once a brand has long been established.

Job Transformation (JX)

JX and DX go hand-in-hand.

Basically, as companies adopt more and more digital solutions, and those solutions become more complex (thanks in part to AI), jobs are going to change. So, rather than hire IT specialists who can manage on-site hardware and software, businesses will be looking for AI specialists and cloud service providers who can help them make the most of their all-digital operation.

Partner Experience (PX)

PX may refer to one of two things. For this one, the partner in the experience could be a business partner, product supplier, SaaS provider, etc. Basically, any third party who you have a relationship with.

As far as web design and marketing goes, PX can affect you in a number of ways.

For example, if you were to manage web hosting on behalf of your clients. You notice that their site’s gone offline, so you reach out to the customer support representative from the web hosting company, but they’re either non-responsive or have no clue what the heck is going on. Who do you think your client is going to be upset with? No matter how much you try to pass the buck, you’re the one who’s set yourself up as the go-between, so it’s going to fall on you.

Now, let’s say you’re a solo web designer and want to partner with a copywriter since clients keep asking for help in that area. In that case, PX could affect you in a similar fashion. If the writer were to fall short in their duties (or vice versa), not only would your relationship with them be compromised, but the relationship between you and the client would as well.

Bottom line: the relationships you have with partners and suppliers plays a critical role in your success, so you do need to spend time focusing on those experiences.

Public Experience (PX)

PX, in this instance, is more likely to be used by agencies that specialize in branding and market research. That’s because this one has to do with how a brand is perceived by society. And all of the other acronyms contribute to it.

For instance:

  • An employee believes they were unfairly fired and puts the company on blast on Facebook. It gets picked up by a major news source and the story goes viral.
  • A website is hacked the day before Black Friday, leaving thousands of users without a place to buy all of the gifts they were hoping to get on sale that holiday season.
  • A company releases a new app which parents are calling for a ban on because it reinforces unhealthy stereotypes.

From the product itself to how the company engages with the public, there are many ways in which the PX may be affected. While each of the contributors — including you the web designer — have to be cognizant of how their choices and actions may affect the public image of a brand, it’s more likely the branding team will need to worry about PX.

User Experience (UX)

You’re probably already familiar with UX. This is the term we use to describe how a user (visitor) feels as they walk through a website or app. And how each step they take and each interaction they make, adds up to an overall experience.

In order to “create” a user experience, designers, developers, writers, and marketers need to be able to step inside the shoes of their users and build a journey tailor-made for them. I’ll explain in more detail how that happens in the next point.

(User) Experience Design (UXD)

The subject of user experience design is a common one discussed here. Just recently, the following UXD topics have been explored:

UXD is a discipline that requires a lot of research, attention to detail, and testing. And the end result is a website or app that’s highly usable, accessible, and enjoyable. That’s because every element, step, and interaction has been carefully thought through. And not only that, the experience is constantly reevaluated, tested, and updated to continually serve the end user.

As far as you’re concerned, I’d say that UX/UXD is the most important acronym for you to concern yourself with.

Wrap-Up

The fact of the matter is, there’s a lot of value in accepting the underlying principles of these acronyms. However, I’m not sure we need to make “designer speak” sound any more complicated than it already is.

After all, your clients don’t want to hear you talk about how DX is affecting the way we build the UX of websites. They want real speak. They want to know what exactly you’re going to do for them; not spend extra time asking you to elaborate on what all of that design jargon means.

Plus, if you do get caught up in all of these “experiences”, you might not get anything done. What I’d suggest is to focus on the ones that matter:

UX — even if you’re not an official UX designer by trade — is incredibly important.

CX is another must, though the only CX you can fully control is your own. You’ll have to trust that the clients you work for will deliver the rest on their end.

I also think DX is a good one to keep in the corner of your mind.

Technological advancements aren’t going to stop anytime soon and you’re working in a field where the tools you use and the tech that affects your business are constantly changing. So, while you might not talk about “DX”, you do need to accept that it’s going to have a profound effect on how you work, how you develop processes, and what you’re able to do for clients.

Like I said earlier, the underlying concepts of each of these X acronyms are valid and do hold some value for you as a web designer. As you work on growing your business — by adding more services, hiring employees, upgrading your tech — it would serve you well to keep these in mind to ensure you maintain a positive experience across the board.

 

Featured image via Unsplash.

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