In practice, this tends to result in the offering of both dark and light modes. But it’s not just for cosmetic purposes. Contrast plays a huge role in accessibility. For instance, some users with visual impairment will find a dark color scheme easier to read.

Designers are also taking a user’s system preferences into account. Some websites will now detect whether a user’s operating system is set to use a dark or light color scheme – then serve up the appropriate styles.

Still, it’s never a good idea to force users into a particular contrast mode. That’s why it’s important to provide a way to toggle between them. And that functionality is our focus for today.

Here are eight unique CSS and JavaScript code snippets for switching between dark and light modes.

Light, Dark or Black Theme by Håvard Brynjulfsen

This settings panel provides three distinct color modes and is beautifully designed. The transition between modes is smooth, allowing for less-jarring changes. The menu uses HTML radio buttons that have been styled into a toggle switch. It’s simple, attractive, and functional.

See the Pen Light / Dark / Black Theme by Håvard Brynjulfsen

Easy Dark Mode with SASS by Kaio Almeida

A simple checkbox powers this contrast mode toggle. From there, JavaScript is used to add a data-theme attribute to the page’s HTML tag. SASS then looks for the attribute’s value and styles the content accordingly.

See the Pen Easy Dark Mode with SASS by Kaio Almeida

Light or Dark Mode by Álex

Why not have some fun with the concept of switching contrast modes? This snippet features SVG images and animation to create a unique day-to-night toggle. Note that while it visually conveys the message, it may benefit from some accessibility enhancements before being put into a production environment.

See the Pen Light / Dark Mode by Álex

CSS Theme Switcher by Michelle Barker

Several snippets in this collection use JavaScript – but CSS is capable of handling the task alone. This example not only looks good but also implements an accessible HTML form to power the mode switch. When you create functionality that everyone can use, it’s a win-win situation.

See the Pen CSS Theme Switcher by Michelle Barker

GitHub Dark Mode Toggle by Chintu Yadav Sara

While this oversized toggle maintains its white background throughout, it does change icons along with the page’s contrast mode. Also, note that the various background shapes turn into bright neon colors while in dark mode. This adds both fun and context to the presentation.

See the Pen GitHub Dark Mode Toggle by Chintu Yadav Sara

Persistent Dark Mode by Brian Haferkamp

If you’re looking for simplicity, this color mode button will do the job. No fancy icons (although you can certainly add them in) or wild animation. Just a single click and some smooth CSS transitions. In addition, there’s a handy bit of JavaScript that will save the user’s preference in local storage.

See the Pen Persistent Dark Mode by Brian Haferkamp

Basic Vue Reactivity by CodePen

As we’re seeing more JavaScript-driven UIs these days, it’s only fitting that we have such an example. Here, a Vue component lets users switch contrast modes via a simple checkbox. This one has plenty of potential for dressing up via CSS.

See the Pen Basic Vue Reactivity by CodePen

Dark Mode by Airen

For projects that could use a bit more creativity, this swinging-lightbulb toggle should provide plenty of inspiration. To keep things accessible, the bulb image is placed inside an HTML button element. Animation is provided through CSS. It’s a great way to spice up a portfolio or blog.

See the Pen Dark Mode by Airen

Come to the Dark Mode (Or Light – It’s Your Choice)

Adding color contrast modes to your website makes sense in several scenarios. It allows designers to offer users their choice of aesthetic while also making content more accessible.

As the snippets above demonstrate, there is no shortage of ways to implement this feature. CSS allows for near-limitless styling options, while JavaScript can provide key functionality where needed.

The post 8 CSS & JavaScript Snippets for Switching Between Dark & Light Modes appeared first on Speckyboy Design Magazine.

A client may be pleased with themselves and happy to get their own way. But at what cost? The ensuing results aren’t always pretty. Crowded layouts, inaccessible design elements, and a general sloppiness can seriously harm the user experience (UX).

For example, consider a client who meddles in the design details of their eCommerce website. Leaving UX decisions regarding product layouts, calls-to-action, and hero areas to a non-designer could be disastrous for sales. And yet, any potential fallout may land squarely on your shoulders. Fair? I think not.

Therefore, it’s up to us to prevent such silliness from happening in the first place. Let’s explore some ways to keep clients at a safe distance from UX.

Define the Stakes

User experience is a critical factor for every website. Yet, clients aren’t always fully aware of what’s at stake. As is often the case, it’s up to web designers to provide some background.

It’s worth taking the time to talk about the importance of accessibility and ease of use. How the design of each element within a page needs to be measured against these factors. Oh, and the massive roles that performance and mobile compatibility play as well.

Then there’s the matter of personal preference. Clients often (and unwittingly) put their own opinions above the needs of the average user. Sometimes, implementing their preference is a detriment to everyone else.

The importance of UX and its contributing factors should be brought up from the very start. When clients are informed, they’ll be more likely to follow your lead.

Welcome Feedback, but Set Boundaries

How does a client go from providing useful feedback to taking over a designer’s job? It’s often subtle and can happen quicker than you think.

To be sure, some people insist on having control of a given situation. They may be just as likely to stand over the plumber fixing their leaky pipes as they are to pester a web designer.

In other cases, the mere fact that a client is paying good money for your services gives them a certain sense of entitlement. And although they may be well-meaning, it can lead to overstepping boundaries.

The dilemma is that getting a client’s feedback is necessary for a successful outcome. But it can also be fertile ground for such a takeover. So, how do you prevent it from happening?

The key is in setting clear guidelines. For example, defining goals for a particular item and asking for feedback based on those parameters.

Consider the hero area of a home page. Let’s say you’ve built something beautiful and need client approval. You might approach them by saying something like:

“I’ve set up the hero area, please take a look! Here is what we were hoping to achieve:

• Introduce branding elements, including the logo, colors and fonts;
• Encourage users to subscribe to the mailing list;
• Mention the 20% off discount for new subscribers;
• Keep the entire area accessible, easy-to-read and concise;

What do you think?”

The example above isn’t all-encompassing. But it puts the stated goals into a client’s mind. This helps you to narrow the scope of their feedback and (hopefully) avoid anything that distracts from the desired outcome.

Put UX Back Into the Hands of Experts

Don’t get me wrong – clients should absolutely be involved in the design process. It’s their brand, after all. And things usually turn out best with their input.

But the heavy lifting of UX should be done by experts like you. Your job is to turn a client’s vision into something that is highly usable. It’s about establishing a brand while helping users get to where they want to go.

If all goes well, they’ll take the path to conversion – whether that means sales, contact, or a subscription. That’s simply too important to leave to client whims.

Instead, educate and work with your clients in an effort to drive home UX best practices. Provide them with parameters to work within. The result will be a website that benefits its owner and users alike.

The post How to Stop Design Clients Making Too Many UX Decisions appeared first on Speckyboy Design Magazine.

Not that these files are in any way vital. It’s just that you see them everywhere. Their continued presence is both understandable – and a bit baffling.

PDFs can be viewed on any platform or device. Native browser support makes using these files a no-brainer over proprietary options like Microsoft Word.

And they’re also quite flexible. It’s possible to embed anything from multimedia to interactive forms inside a document. Plus, they retain formatting. Fonts, colors, and layout are consistent – no matter how you view the file.

It’s not all sunshine and rainbows, though. PDF files can run into accessibility issues. And some files can be quite large – eating up precious bandwidth.

Perhaps the biggest drawback of PDF is in how we use it. Maybe it’s laziness or a lack of forethought. But in many instances, PDFs aren’t necessary.

So, where do PDFs fit in? Let’s explore when uploading a PDF to your website does (and doesn’t) make sense.

The Role of PDFs on Early Websites

The primary reasons we use PDF can be traced to the early web. We didn’t have the advanced CSS layout techniques of today. Browsers were ill-equipped for much beyond a single-column page. And web typography was severely limited.

Thus, PDF provided a more polished look than HTML. Users could also expect more consistent results when printing these files. So, even when weighed against slow connection speeds, the format made sense.

To some degree, PDFs represented the web’s future potential. The ability to create multi-column layouts that mimic print. Large images and multimedia presentations took center stage. Fonts that added personality and worked on every screen.

At the time, the format gave designers the advantages of utility and vanity. PDF could do things that a web page couldn’t. That made it a popular choice – even if it wasn’t always the right one.

The web has evolved, however. The advantages of using PDF aren’t quite as clear. CSS and HTML have matched (and maybe surpassed) many of PDF’s core capabilities.

Are PDFs a ‘Lazy’ Way to Share Content?

PDF files also add a layer of convenience for web designers. That can be both a good and bad thing.

Tools such as Adobe Acrobat make it easy to convert files to the format. And content management systems (CMS) like WordPress make uploading and media management a cinch. Thus, it’s tempting to use PDF even when it’s not necessary.

For example, let’s say a client sends us a Word document. It has some complex formatting. And perhaps we don’t feel like trying to clean up an HTML export of the text. In this case, converting the document to PDF is simply easier.

Or maybe that client sends us a file that’s already a PDF. Exporting to HTML has improved over the years. But it can still be a hassle. Once again, it’s easier to upload the file rather than tidy up a mess.

It’s difficult to blame anyone for using the easiest solution. But there’s a cost:

• It forces the user to make an extra click to access the file;
• The file may or may not be easily accessible to screen readers or other assistive technology;
• PDF files tend to be difficult to read on mobile devices;
• The file size may be significantly larger than HTML;
• Its content may not be as readily indexed by search engines;

Each of these factors is enough to give us pause. Convenience is valuable – but not at the expense of usability.

When It Makes Sense To Use PDF

All of this isn’t to say that PDFs don’t have a place. There are still scenarios when it makes sense to use them:

• Documents designed to be printed: Items like press kits and product manuals have traditionally used PDF. This is particularly useful when those documents are meant to be printed.
• Forms that shouldn’t be submitted online: Sometimes you don’t want users to submit a form online. For example, one that contains sensitive personal information. Medical and legal documents come to mind. In this case, the user is asked to print the form and submit it offline.
• As an alternative to HTML content: A PDF can be a handy way for users to take content with them. Consider a news article or real estate listing. Some users may prefer to download a copy rather than bookmark the HTML version. It’s also reasonable for content that is only available for a limited time.
• ‘Official’ documents: Some organizations have strict rules regarding documents. They may require users to download only the original version. With that, HTML equivalents might not be acceptable. Tax and other government-related forms are possible examples here.

This isn’t an exhaustive list. But it does show that the format still offers some benefits. Much depends on context, however.

It’s important to consider why PDF is (or isn’t) a viable option. What impact does it have on users? Does it serve the best interests of the website?

If it’s a matter of mere convenience for web designers – that’s not enough. Using PDF should result in a net positive for everyone involved. Short of that, HTML will likely be the more appropriate choice.

We Should Rethink Our Usage of PDF

Old habits are hard to break. And years of uploading PDF files have become standard practice for many of us. But it’s time to rethink this strategy.

Modern web technologies can handle virtually every function a PDF can. In some areas, like mobile usability, CSS and HTML even outshine the venerable file format.

In short, there are now more reasons to use HTML and fewer for using PDF. So, the next time you receive a lengthy Word document from a client – think about what format makes the most sense.

You may find yourself using that PDF creation software less often. That’s probably a good thing for the web and its users.

The post Why Do We Still Use PDF Files on the Web? appeared first on Speckyboy Design Magazine.

Quite often, we find what we’re looking for by studying other websites. And there’s certainly nothing wrong with that. Design communities such as Awwwards and Behance offer plenty of worthy examples. The very best of these websites is something we can learn from and aspire to.

But it can also be beneficial to explore other forms of design. Websites may be the most relevant, but they certainly aren’t the only creations that can inspire us.

Take classic video games, for example. Sure, they may not be much to look at in terms of graphics. Those pale by today’s standards.

But they do have something to say about usability and intuitive design. And those are lessons that web designers can take to heart.

Press Play for Hours of Fun

Some of my fondest childhood memories were made in the arcade. For a small-town kid, the arcade was a place to explore the world (along with a few outer galaxies).

By dropping my quarter into a game’s slot, I could be anything and everything. A pilot, racecar driver, athlete, or commando. The only limits were the number of coins in my mother’s purse (or those she was willing to part with, at least).

Much to the chagrin of dear old mom, I could turn just a few of those quarters into a whole lot of playing time. I can still recall her walking up to me in the middle of an intense game, tapping my shoulder and asking when I was going to be done.

My response? “Aw, can’t dinner wait? I’m winning!”

This brings a smile to my face – but also a thought. How was I able to make those coins last for so long? I wasn’t a particularly skilled player. For sure, there were other kids who stretched their minuscule allowances even further.

What was the secret to my hours-long gaming sessions? Maybe it had something to do with how those games were designed…

The Challenges of Arcade Game Design

One can imagine the challenges faced by game designers – especially in an era when technology wasn’t so advanced. Chief among them was creating a game that anyone can reasonably master within a few minutes.

This was vital in a fast-paced arcade environment. The machine not only had to grab a potential player’s attention, but it also had to quickly educate them in the quest to create a loyal customer.

Regardless of the game’s premise, there were a common set of usability concerns to think about:

• Instructions for play had to be minimal. They were either printed in tiny fonts directly on the machine or displayed on the screen. Either way, designers couldn’t expect players to spend a lot of time reading. Therefore, only the basics could be covered.
• Controller options were limited. In many cases, a couple of buttons and joysticks were the main instruments. Steering wheels, pedals, and trackballs were also possibilities. Designers had to work within these limitations without making things too complex.
• The game needed to guide players. Since there were no detailed instruction manuals or online resources, the game had to lead users in the right direction. This was often done through the demo mode that was displayed before players inserted a coin. It helped attract people to the game and show them how it was played. In-game helpers like arrows or other visual cues also played a role.

These could be monumental challenges for game designers. But the most enduring games seem to be the ones that got it right.

One shining example is the longtime favorite PAC-MAN. There’s no big secret as to why it has endeared itself to gamers for over 40 years.

By watching the game’s demo mode, a player could gain a clear understanding of what it was all about. The dead-simple joystick control required very little physical skill.

Within a couple of minutes, you could find your way around the maze, elude a few ghosts, and conquer that first level. Even as subsequent levels became harder, it always left you wanting more.

That sounds a little bit like what web designers strive to accomplish, no?

What Do Websites and Video Games Have in Common?

Perhaps websites and old-school video games are a few lightyears apart in terms of technology. But many of their end goals are strikingly similar.

In both cases, designers have very little time to make a first impression. If a website doesn’t provide users with an immediate path forward, it’s likely “game over.”

Games drew attention with flashing screens and loud noises. That was necessary for a busy, competitive environment. Websites have to be a bit more subtle. But the desired result is the same – to entice users to stick around and keep coming back.

And, just as with classic games, a simple UI tends to work better on the web. A website that is too hard to navigate or fails to meet accessibility standards will not become a fan favorite.

The worst games tended to be the most overwhelming to play. The same can be said for poorly designed websites. No one wants to waste their time and money on something that isn’t enjoyable to use.

Then there’s the challenge of educating users on completing specific tasks. In the world of web design, visual cues like onboarding UIs and microinteractions are the name of the game.

Learn from the Classics

Back when I first became a web user, I experienced feelings of awe and wonder. Never being one to pick up on the obvious, it took me a few years to realize when and where I’d felt that way before.

Just as the arcade could easily transport me into a scene from Star Wars, the web took me to all kinds of places I’d never been. Once again, it felt like the universe was at my fingertips.

And now, in the same spirit of game designers from back in the day, being a web designer means guiding users. It’s about building an interface that takes people where they want to go.

The details of the mission may be different. But the goal is still to get users on to that next level.

The post Want UX Inspiration? Look To Classic Video Games appeared first on Speckyboy Design Magazine.

Sometimes these elements can be afterthoughts. Or put into place for marketing or analytical purposes. But they will drive users both crazy and away from your website.

Overdramatic? Maybe. But it’s a stark reality. Regardless of how brilliant your design and content may be, a bad UX sticks with users. And unless they have a compelling reason to come back, they probably won’t. You can’t blame them. Who needs the bother?

Let’s take a moment to outline some of these annoying practices. Sadly, they’re prevalent across the web. But that doesn’t mean we have to partake in them.

Modal Windows That Change Your Scroll Position

Modals are everywhere. It seems like everyone is vying for our attention by putting pop-up windows in our faces.

The practice has become so commonplace that it’s easy to ignore. Users can simply click and rid themselves of the interruption. No harm done.

But there is one implementation that is harder to justify. And it may not even be intentional.

Imagine visiting a page and beginning to scroll down. Everything’s going great until a modal window appears – and resets your scroll position to the top of the screen.

This puts users right back where they started. And not everyone will have the patience to restart their journey.

Whether this effect is due to buggy JavaScript or by design, it’s not ideal for UX. Regardless, it’s worth testing modal features to ensure that they’re as minimally invasive as possible.

Requiring Extra Clicks To See Full Content

For news-oriented websites, it’s standard practice to display an index of articles. A user can find an item of interest and click to access it. Content management systems (CMS) like WordPress make this easy to implement.

And that’s usually the end of the process. Users can view the chosen content and decide what comes next. Except it doesn’t work that way on every site.

Some websites have added an extra step. You’ll only get a partial view of the content – maybe a paragraph or two. At some point along the way, you’ll be asked to click a button to reveal the rest of the article.

If the content is behind a paywall and requires a login, that’s an understandable step. But otherwise, it’s preventing users from accessing the very item they wanted to see.

Whatever the benefits of this strategy, happy users are not among them. Users should not have to click twice to view content.

Third-party Features That Slow Page Load

Modern websites are capable of loading content and functionality from third-party sources. Connecting to social media APIs, for example, is a widespread practice. The same can be said for analytics, remotely-hosted fonts, and various software-as-a-service (SaSS) providers.

These features can be problematic, however. First, there are potential privacy issues. Users are becoming more aware of what they share and who they share it with. Some may be turned off by the idea of allowing Facebook, etc. to track their movements.

Page load times are also a concern. Even if your web host performs well, pages can still be slowed to a crawl by these third parties. They may prevent users from navigating your website.

Thankfully there are ways around this issue. Fonts can be stored locally. And some plugins cache social media feeds for faster loading. Locally-hosted analytical apps are also available.

Implementing features from third parties is fine. But it should be done in a way that minimizes the inconvenience to users.

Multimedia That Scrolls With the User

Video presentations are often placed at the top of a page. This makes it easy for users to find and watch. But if they scroll past the video, what does that say about their intent?

Far too often, these videos are configured to travel along with the user. As a user scrolls, the video shrinks and tucks into a corner. In some cases, it completely disregards user intent and is set to automatically play.

This is particularly frustrating for those hoping to read the associated content. Having moving images in the field of view, even if they’re off to the side, can be a distraction.

And mobile users are in worse shape. The unwanted video takes precious screen real estate away. This makes it more difficult to focus and read.

Is Your Website Frustrating Users?

When it comes to poor UX, the items above merely scratch the surface. But they’re prime examples of well-intentioned features gone wrong.

There are often legitimate reasons to put them into place. And the occasional feature may end up being more annoying than you realize. Still, it’s worth weighing the benefits and drawbacks.

Anything that gets in the way of a user’s ability to access your content is a risk. Push them too far and you may end up missing out on conversions. And who can afford that?

Conducting UX testing is a great way to catch these annoyances before they cost you. But it’s not necessarily within every budget.

In that case, take a closer look at how your website works. If you find items that aren’t user-friendly, take action to improve them. It may be the difference between a loyal customer and one that got away.

The post Little Things That Hamper the User Experience appeared first on Speckyboy Design Magazine.

While the result is so recognizable, achieving a simple and complete user experience in web design is one of the toughest tasks faced by designers and developers.

The overabundance of things, ideas, and content over the past several years has led to a movement toward simplicity and minimalism.

Legal jargon is being traded-in for lay terms. Writers now strive to deliver concise concepts rather than flowery prose. Homeowners trade in their roomy ranches for tiny, efficient houses. Even chefs may reduce their menu offerings to pure and simple flavor profiles.

People are overexposed to so much stuff today that the concept of simplicity stands out as elegant, refined, and enviable.

In web design, too, the concept of simplicity is enjoying a resurgence. People spend more time interacting with devices and online, so they increasingly crave an experience that is psychologically comfortable (intuitive) and visually calming or straightforward.

Simplicity has never been so popular or so difficult to attain as it is today.

Defining Simple Web Design

Think about a ballet dancer, a racecar driver, or a sushi chef. When you sit to watch a professional performance, everything appears fluid, understandable, and simple.

If you were to try to re-create Swan Lake, the Indy 500, or your favorite hand roll, you would quickly see just how much work goes into the final product. Simple, user-friendly, and elegant web design is the same as any other professional performance.

A finished product that easily moves a user through the customer journey creates an internal feeling of user confidence, and driving conversions requires hours of research, professional collaboration, and optimization.

Are three CTAs on a page too many? Will an additional picture add to or distract from the purpose of the page? How will the color scheme make the average user feel when they arrive? These questions and dozens more drive the creation of a perfectly simple website.

Simple web design relies heavily on psychological understanding. Designers and developers who understand a user’s motivations, digital competence, and thought processes can create a web design that feels familiar, easy to use, and action-inspiring.

Prepd

Elements of Simple Web Design

Simple web design isn’t boring, bare-bones, or unattractive. They take the best parts of a website and condense them into the most powerful and streamlined format possible.

Whether creating an eCommerce site or an informational blog, design simplicity represents thoroughness, beauty, and understanding.

Some of the most important design considerations used to develop simplicity include:

Customer Journey Simplification

Every website exists to elicit some response or action from readers. Understanding the customer/site visitor journey serves as the basis for every web design element.

The first goal of website creation is to minimize or simplify the path from awareness to conversion as much as possible.

Back-end Optimization

What appears in the user interface matters, but what happens behind the scenes affects every aspect of the user experience.

Well-executed coding impacts SEO, loading speeds, site navigation and usability, and the accuracy of any real-time update/analytics software plug-ins.

Structural Development

The navigational hierarchy and layout of each page will contribute to a site visitor’s first impressions.

Grid, full-page navigation, minimalistic, split-screen, and other layout configurations can all contribute to a simple web design. The key to a simple design is marrying the right layout with the right navigation styles, fonts, content, and interactions.

A Note on Minimalism & Simplicity

Some people misguidedly equate simplicity with minimalism. In reality, minimalism is always simple, but simple web design is only sometimes minimalistic.

Minimalism encourages designers to choose a few design elements to emphasize. The movement values contrast and whitespace in an extreme way.

Simple web design, on the other hand, only refers to a website’s ability to create a streamlined, comfortable, and attractive user experience. A graphic-heavy website, such as Pinterest, is simple but not minimalistic.

3kvc.com

Attention to Detail

The portion of a photo used in the design, the texture of an icon, and the contrast of font sizes among titles, headings, and copy all affect the finished product.

For a website to achieve a successful and simple design, designers must consider how each decision factors into the usability and user experience of the finished product.

An Understanding of Mainstream Practices

Websites should not feel like carbon copies of competitor sites, but industry best practices create a valuable level of consistency every designer should consider.

Commonly used navigational menus, copy fonts, and site structures contribute to a level of user comfort and understanding from site to site.

Branding Consistency

Some designers work hard to perfect a website’s homepage and neglect to use the same level of care on subsequent pages. While the homepage deserves a fair amount of work, the design theme, brand, and layout should look and feel complementary to the homepage.

Leaving even one outdated logo on an old blog page, choosing the wrong color scheme, and failing to use consistent font types and sizes throughout the site can create a confusing site experience.

Interface Recall

A simple web design is memorable. After one visit, a site visitor should remember the site’s form and function on subsequent visits.

Interface recall is particularly important for sites that offer booking services, such as travel agencies, delivery services, and professional services.

Ultimately, simple websites offer familiarity and intuitiveness. They create a knowable platform brands can use to engage with site visitors and add increasing levels of creativity and innovation. Any brand can create a simple and effective website with these elements in place.

waaark

Factors That Can Complicate the Search for Website Simplicity

Many design elements lend themselves well to simple web design. When designers start to combine elements in new, startling, or unintuitive ways, users may not have the same feeling toward the design.

Web designers and developers trying to make their mark in the world can complicate or oversimplify a website’s form and function. Some of the most common mistakes designers make when trying to achieve simplicity include:

Taking Minimalism to the Extreme

A minimalistic design should appear striking and memorable – not boring or oversimplified. Balance is the key to achieving both minimalism and simplicity in web design.

Ultra-minimalism takes things very close to the edge, but doesn’t quite cross over.

Forgetting the basics

While graphics, site layout, and structure contribute to a first impression, basic information availability can make or break the design.

Strategic calls-to-action, complete contact information, and valuable instructions directly support the customer journey. A designer forgets these elements at the site’s peril.

Auto-Play Visuals

Eliminating control over content is the wrong kind of design simplification. Any automatically occurring and intrusive visual can detract from the user experience.

Either keep visuals to a minimum or give users more control over the videos, displays, and other interactive content displayed.

Too Much Information Consolidation

While simple web pages are easily digestible, they can also create navigation hurdles for the user.

If the topic or discussion warrants a longer block of text or requires several images, focus on accessibility over simplicity. Avoid making users flip through slideshows or click to new landing pages for every subheading.

Website simplification is more about creating a straight line from point A (awareness) to point B (conversion) and less about making point A look nice.

Typographical Errors

The evergreen content on a site should not contain any errors. Simplicity does not mean basic and thrown together at the last minute.

An obvious error will distract users from the main purpose of a site and could undo all of the hard work a designer spends on graphics optimization and layout configuration.

Conclusion

Recognizing elegant simplicity in web design is easy. The easy flow, accessible information, and gentle nudges along the customer journey inspire user confidence in a brand. Creating elegant simplicity requires detailed knowledge of site visitor behaviors, brand messaging, and design best practices.

Improperly placed popup calls-to-action, offset page copy, or confusing navigational cues can all lead to a poor user experience and erase the notion of effective simplicity.

The elements of simple web design will only grow more important as users crave personalization, intuitiveness, and accessibility.

Simple, user-experience-optimized web designs build brand credibility and encourage conversions. Use the core concepts of simplicity to move your own website projects closer to a place of simple elegance and user-friendliness over time.

The post The Complexity of Simplicity in Web Design appeared first on Speckyboy Design Magazine.

While this is challenging for all designers, it’s especially so for solo freelancers and small agencies. Why? Because we often don’t have the budget to conduct real user testing. If you work on a lot of smaller projects, you might have to venture an educated guess or two when it comes to building a great UX. That can lead to some underperforming features.

Plus, there can also be times when our ego gets in the way. The more experience and success you attain as a designer, the easier it is to think that you know it all. This too can result in being out of step with what everyday users expect.

It’s not-so-ironic that I place myself in both of the above groups. Much of my career has been spent working with smaller clients who generally don’t budget for any extras. And, there was a time when I thought I really did have it all figured out (turns out I didn’t).

As such, I’ve tried to keep an open mind when it comes to the usability of my work. Here are a few things I’ve learned (and continue to learn) about designing with users in mind.

Always Choose the Simplest Path

It’s easy to get carried away with design. Sometimes we implement features because they’re part of a hot new trend or they help us show off our great skills. It’s also quite possible to, no matter how noble our intention, completely overthink the design process.

I think it’s a common occurrence to start of with a basic idea that, on its own, works well enough. But then we start layering on effects in an effort make things “perfect” in our eyes. What we don’t realize at the time is that we may actually be making this feature harder for users to digest.

For example, tweaking text colors until they look amazing could inadvertently degrade accessibility. Or a slick animation in a navigation bar might cause chaos for those using an older browser. Then there is that quest to preserve whitespace, sometimes at the expense of hiding important information.

Even talented designers are capable of taking a good thing and wrecking it. Therefore, it’s worthwhile to keep simplicity in mind. Fancy effects are great, but they should only be used if they actually enhance the user experience. In other words, they call attention to the right things.

The key is in thinking about what it is we want a user to do. What actions do we expect them to take? From there, it’s about creating something that makes carrying out those actions as obvious and painless as possible.

Get Clients on Board

User-centric design doesn’t always come easily. Sometimes, you have to fight for it. Or, at least plead your case.

Clients have been known to share their honest opinions about the designs we create for them. The trouble is that they, like us, are prone to having the wrong priorities.

We’ve all had experiences where a client insists on a feature being implemented in a certain way or with a specific placement. Sometimes, they hit the nail right on the head. Other times, the result is something that pleases them, yet makes the site more difficult to use.

The easiest thing is to defer to your client in this situation, but it’s not the right thing. This is where you’ll need to use your expert voice in a friendly way.

Explain your concerns as to why you would recommend doing something differently. For example, if the goal of the website is to get users to contact your client, show them the barriers that are getting in the way. Perhaps the call-to-action isn’t obvious enough or maybe contact information is too hard to find.

Quite often, clients don’t see things through the eyes of the everyday user. But once they do, they are usually willing to do whatever it takes to increase usability. It’s just a matter of speaking up when you need to.

Consider Your Own User Experience

Odds are that you’ve encountered plenty of good and bad experiences as a user. Just think about the websites you routinely visit (at least, the ones that you didn’t have a hand in building). How easy are they to use? What are the pain points that drive you crazy?

Each site, app or even operating system that you use can serve as a reference point. You can look back at them and say, “I love how that works” or “That made no sense at all.” That can and should play a role in your own projects.

For instance, one of my biggest frustrations is a banking site I visit at tax time. Once logged in, it doesn’t provide a clear path to the particular documents I need to access. I have to click around to various seemingly-unrelated pages before I can find what I’m looking for.

While I generally don’t design for banks, I do work on membership sites. This poor UX reminds me to make account information easier to find.

Of course, as professionals we won’t necessarily see the web the same way others do. But we can still apply our unique experiences in an effort to do better.

Learn and Evolve

Regardless of whether or not we have access to detailed user testing, it’s still possible to improve the usability of our work. Some of it is plain common sense. But it’s also about being in the right frame of mind when putting a site together.

The concept of progressive enhancement should always be at the forefront of what we’re doing. That might mean sacrificing a fancy, portfolio-enhancing effect in exchange for a feature that is easier to use. So be it. That’s what we’re paid to do.

And, even if we can’t perform formal testing, that doesn’t mean we still can’t ask a client, friend or colleague for an honest opinion. While this doesn’t provide the same depth of feedback, it is useful all the same.

Afterwards, we can analyze the results and see how effective our decisions have been. We’ll still make mistakes (even resource-rich companies are far from perfect). The important thing is that we learn from them and always strive for improvement.

The post Staying in Touch with What Users Want appeared first on Speckyboy Design Magazine.

That’s because a visitor typically reacts to what they see in the first few seconds after page load. Anything not visible within that timeframe will likely be missed. Designers and content creators alike have to carefully consider what is included.

While some items will be effective in getting the point across, others will fail. This is what I like to call “wasted” space. Unlike whitespace, the wasted variety takes up valuable screen real estate without adding any real value of its own.

How do you know what’s worthy and what’s not? Let’s take a look at some telltale signs that point to a waste of space.

Large Images That Distract from Your Content

Both designers and website owners alike are big fans of utilizing large photos. Whether they serve as the background to a section of content or the entire page – full-width photos are in fashion.

While this can add some real beauty to your design, the context in which these images are used is important. It’s worth considering how they impact the rest of your content.

For instance, a stunning photograph that fills up the screen may look cool. But, does it serve a specific purpose? Does it provide some context for visitors?

If the image isn’t directly accompanied by content, you’re forcing users to scroll down to look for what they need.  And if the image is too busy, it may further distract from your content. Complex images that serve as a background to text and calls to action could negatively impact legibility as well.

It’s great to have images that stand out. But without purpose, they’re likely taking space away from something more important.

Hero Areas That Lack Actionable Information

A well-crafted hero area will draw a user’s attention. By using a photo, video or contrasting color background, this element naturally separates itself from everything else on the page.

This is why we often utilize hero areas for vital information. Within them, our most important sales pitches and messaging find a place to shine. These are the items that we want to be at the forefront of a visitor’s mind.

Unfortunately, there are times when this element isn’t so informative. The included text may be vague and fail to make a coherent point. The design itself could suffer from the same affliction, with no discernable places to click or actions to take.

No matter how compelling a hero area looks, the content must be every bit as detailed. It needs to provide a simple path for users to follow. In essence, it should include a clear message that motivates the user to do something. That could be contacting you, viewing a pricing page or adding a product to their cart.

Otherwise, the risk is in gaining a user’s attention without giving them anything to do. It’s the web equivalent of a bridge to nowhere.

Long Passages of Uninterrupted Text

A user’s time is precious. They tend to scan content in an effort to find something of interest. Thus, their attention spans aren’t conducive to long passages of text.

The shame of it is that, no matter how great your writing is, users may simply ignore it. In that respect, the content may as well not exist. The result is an expensive, time-consuming waste of space.

But don’t throw your hard work in the trash just yet. There are ways to spruce things up in a manner that is easier-to-digest:

Use Headings

Headings are perhaps the easiest way to break up a long passage of text. With sound use of typography, they instantly stand out to users. This makes it much easier to pick out a relevant section and scan it for more information.

Separate Content via Design Elements

The practice of sectioning off content with the use of design elements has become increasingly popular. It allows designers to create some visual separation and develop a rhythm. The idea is to place separate-but-related portions of text into dedicated containers that look differently. By using multiple background colors or text styles, this content can be both appealing and effective.

Add Smaller Details

It’s often the little things that make a design truly great. And they can be quite useful for helping to break down content into bitesize pieces. Elements such as dividers, images and blockquotes are all great methods to implement.

An Effective Use of Space = A Better User Experience

Design and content strategy are very much intertwined. When one fails, they both suffer the consequences. Therefore, it’s vital to think about both when building a website.

Part of the challenge is in making sound decisions. For instance, you’ll have to decide which elements should be front-and-center. What is it that users need to know right from the start? What can wait or be tossed aside? It’s a competition to determine what belongs and what doesn’t.

In practice, it’s about making the most of the space and time you have to make a good first impression. When users have a clear path to find or do what they want, they’re more likely to stick around.

The post Avoiding Wasted Space on Your Website appeared first on Speckyboy Design Magazine.

This Yin and Yang is a challenge. How do you create a website that looks beautiful while also maintaining peak performance?

Over the years, it seems like the balance has been tilted toward the former. I’ve faced it in my own journey. For example, even though I know that massive image is going to bog down load times, it just looks so good.

But, on the modern web, is any visual enhancement worth implementing if it means taking a significant performance hit? Given the right approach, you shouldn’t have to.

Performance is as Important as Ever

It feels a bit ironic. Hardware continues to evolve in more powerful ways. Even mobile phones have multiple processor cores and tons of memory. Not to mention that broadband has become increasingly widespread.

Yet, we’re still told to eke out every possible millisecond of load time. Why?

It comes down to two reasons: short attention spans and Google. First, users don’t tend to stick around for a slow website to load. They’ll just find whatever they’re looking for elsewhere.

And with Google’s Core Web Vitals now influencing search rankings, well, performance is a pretty big deal. It could be the difference between getting found or forever lost in the nether regions of search engine results.

Plus, the web is no longer a novelty. To think that users will wait around for your fancy intro presentation (#RIP Flash) is unrealistic.

People visit your website for a specific purpose. Therefore, anything that gets in their way is probably not worth implementing.

Modern CSS and JavaScript Techniques Provide Solid Alternatives

As a designer, it’s easy to get into the habit of using bulky media files to enhance the look of a website. This has been the way of doing things for decades. Whether it’s a full-screen image or a video background, these items can be transformative. However, they can also hamper performance.

Thankfully, modern CSS and JavaScript can offer better alternatives. Each has features that can either replace media or make these files easier for browsers to digest.

Visual effects like CSS gradients and blend modes are great examples. They look just as good as anything you can whip up in Photoshop, yet without all the excess bloat.

If you’re looking to add movement, CSS animation and JavaScript libraries such as GSAP can fit the bill. Not only can they produce jaw-dropping looks, but these techniques are also lightning-quick.

In addition, lazy loading offers a nice compromise – at least for media that isn’t within the initial viewport of your page. Elements including images and iframes will only load when needed. This saves on load time while still enabling the use of these assets. Native browser support makes implementation easier than ever.

Smart use of these techniques can help you avoid dragging down performance for the sake of looks. Instead, you’ll achieve a more sustainable balance.

Beauty and Performance Can Coexist

A website is more than just its looks, content, or functionality alone. It’s a cohesive user experience. That means each of these facets must come together to serve users.

In order to effectively do so, a website must also prioritize performance. Years ago, it might have been easier to get away with a great-looking site that was slow to load. Before powerful devices and fast internet, speed wasn’t necessarily a user expectation.

That’s changed dramatically. We now live in an on-demand world, one where everything we need is just a click away. If your website doesn’t deliver on that promise, it’s going to be difficult to build a lasting relationship with visitors.

Web designers need to change along with those expectations. In practice, it requires us to think long and hard about what visual elements we create and how we implement them. Doing things as we’ve always done them may no longer be viable.

Instead, everything must be done with an eye towards optimal performance. It’s a challenge, for sure. The good news is that we have the right tools and technologies to make it happen.

The post Web Designers No Longer Need to Sacrifice Performance for Beauty appeared first on Speckyboy Design Magazine.

But functionality is only part of the package. Many WordPress plugins also come loaded with their own CSS. Sometimes, those styles are quite noticeable on the front end of your website.

Theoretically, it can be a good thing. But some of this CSS is very opinionated. It can look significantly different than the styles you’ve already established on your website. Therefore, the more plugins you add, the more inconsistent your website’s look can become.

The good news is that there are a few different ways to tackle the problem. Today, we’ll introduce you to some techniques for keeping a plugin’s CSS from disrupting your UX.

Override the Plugin’s CSS in Your Theme

The first method for dealing with rogue plugin styling is fairly straightforward. But it does require a bit of patience. It involves finding any specific CSS classes or IDs that aren’t matching up with your site’s UI.

Locating the appropriate CSS requires some knowledge of your web browser’s developer tools. By right-clicking an element on the page and selecting “Inspect” (or “Inspect Element” in Safari), it will display the related HTML markup and CSS.

From there, it takes a little experimentation. For example, sometimes the element you right-clicked isn’t necessarily the one controlling the style. That requires navigating within the inspector’s HTML and clicking on things like parent containers or links.

It helps if you know what you’re looking to change. CSS background-color or font-size properties, for instance, can be easier to spot than some others.

Once you find the correct styles, copy and paste them into your theme’s style.css file. Alternatively, you might also use Additional CSS panel within the WordPress Customize Screen and paste the code there (we’ll discuss other options below). Then, make any desired changes, upload or save.

Hint: You only need to include the CSS properties within a class or ID that you intend to change. Everything else can be omitted.

This technique is handy for situations when there are a small number of styles you’d like to change. However, it can be cumbersome if you want to make wholesale changes.

Dequeue Plugin Styles and Start from Scratch

This method requires a time commitment, along with some intermediate-to-advanced CSS skills. And you may even want to reserve it for situations where a plugin’s styles are really getting in your way.

We’re talking about using the WordPress wp_dequeue_style() function, which removes a previously enqueued stylesheet. This can be used to effectively turn off any stylesheets related to a plugin.

Once you’ve turned off a stylesheet, you can take the plugin’s styles and edit them however you like. It can be a big job, but also a way to ensure that the styles are exactly what you want them to be.

The WordPress Developer Resources site has a great example of how this is done. One of the keys to success here is finding the stylesheet’s registered name. This could be found within the plugin’s code, or you might also find it in the source of a front-end page, labeled as the stylesheet’s ID.

In addition, you’ll need the CSS associated with the plugin. Again, you’ll want to dive into the plugin’s folder to find the files you need. Their contents will need to be copied, pasted into your theme’s style.css and changed to meet your needs.

Still, there are plugins that have a lot of styles. WooCommerce is a prime example. It comes packed with a significant amount of CSS. The styles work well enough, but can sometimes clash with your theme.

If you want to dequeue all or just specific WooCommerce stylesheets, their documentation can guide you through the process.

More Tips and Troubleshooting

Getting a plugin’s CSS to bend to your will can be tricky. Things don’t always work the way you want them to the first time around. With that in mind, here are a few other tips and troubleshooting ideas to consider:

Check Plugin Documentation

In some instances, a plugin’s documentation can provide solid advice for implementing style customizations. In addition to the methods mentioned above, there may be other options – such as back-end settings or plugin-specific theming.

Also, be sure to check out support forums. The odds are that someone has already asked questions regarding custom styles. There may be some valuable information to help you along the way.

Experiment in the Browser’s Developer Tools

We already mentioned how important the browser’s developer tools are to finding the styles you want to override. They are just as crucial to troubleshooting when things don’t work as intended.

For instance, the inspector tool can help you determine where a custom style falls within the cascade. Another style may be taking precedent, or perhaps you’re viewing a cached version of the page.

Even better is that you can edit styles right within the inspector and instantly view the results. This will let you see what a change looks like before you deploy it.

These tools might become your best friend in squashing bugs. Get to know them!

Implement Changes in a Sustainable Way

If you’re going to spend time customizing a plugin’s styles, you’ll want to make sure they are implemented sustainably. That means placing them in a location where they’ll be safe from being erased or inadvertently changed.

Placing styles within your theme’s main stylesheet is OK – provided you know that they won’t be lost after a theme update. Child themes are a great way to protect against this.

To keep things better organized, it might be worthwhile to throw all of your custom styles into a separate stylesheet. This way, you’ll always be able to find those specific styles when you need to make a change.

In addition, keep a close eye on plugin changelogs. Styles do evolve, and what you customize today isn’t guaranteed to work forever.

Give Your WordPress Website a Seamless Look

In general, WordPress plugins are terrific. But it can be a challenge to get their associated styles to fit in with the rest of your website. Still, you can get there with a little bit of digging.

With the help of your web browser’s developer tools, you can locate the CSS classes and IDs you want to change. From there, it’s a matter of applying those changes in a way that works best for your needs.

It takes a keen eye, but the effort can really pay dividends. When every aspect of your website looks and feels consistent, it’s that much easier for visitors to navigate. In addition, content develops a natural flow. The user experience will be all the better because of it.

The post Many Plugins, Many Styles: Creating a Consistent User Experience with WordPress appeared first on Speckyboy Design Magazine.