It doesn’t always work that way out of the box, though. We are becoming more dependent on site-building tools. As such, we rely on them to do things the right way.

These tools aim to simplify the design and build processes. Some do it very well. But there’s a side effect: They take control of the output. And there’s no guarantee that they’ll employ best practices.

It’s an issue as old as the WYSIWYG editor. The difference is that it’s harder to override any problematic code.

There are some less-than-great tools on the market. Site builders that are outdated or deeply flawed. But even a great tool can get in the way. None of them are perfect.

Let’s look at a few scenarios when a tool hinders your ability to follow best practices. In addition, we’ll show you some ways to get around these issues.

How Site Builder Tools Can Impact Accessibility

It’s never a good idea to assume your website is accessible. Doing so is a risk. You might have created a poor user experience. At worst, the site may not be compliant with the law.

Site builder tools can make accessibility issues less obvious. For example, they may not warn you if you choose an inaccessible color scheme. Subtle color differences could make a big difference.

They might also produce code that isn’t semantic. That makes it harder for screen readers to interpret your content.

There’s also the implementation of special effects. You might add intense animations that are harmful to some users. The tool won’t always tell you the potential consequences. Thus, it’s up to you to use it responsibly.

Accessibility testing is the only way to know – regardless of how you built the site.

Included Features Aren’t Always the Best Option

Site builders often include advanced features. Elements like sliders, modal windows, and media players come to mind. These items are essential for some projects.

Their inclusion doesn’t speak to quality, though. The tool may produce inefficient or buggy code. The result is poor performance.

There’s also a chance of a conflict with other software like themes or plugins. And there’s no guarantee of browser compatibility.

There’s a high level of convenience with these features. You don’t have to search for a plugin that does x, y, and z – it’s already there. However, they’re not always the best fit for the job.

WordPress page builder plugins are an example. The one you use may come with a forms module. Awesome! But does it do everything you need? Are the forms accessible?

It’s worth doing an honest assessment of these items. Look at what they do. Run performance benchmarks. Monitor your browser console for errors. That will help you determine if it’s worth using.

If not, there are plenty of other options. You don’t always have to settle. And moving to a different solution could offer better results.

The Potential for Becoming Locked In

Sure, a site builder may claim to offer everything under the sun. But will it grow along with your needs? How portable is your site’s content?

You’ll want to know the answers sooner rather than later. Otherwise, you might be stuck with a tool that can’t keep up with you. And moving on can be a tedious process.

That happens with WordPress. A page builder plugin may no longer meet your needs. Or you might want to switch to the native Block Editor.

Making a change is possible. But it’s not always easy. Page builders often have different ways of outputting code. Thus, you might be left to reformat content piece by piece. The WordPress Data Liberation project aims to help with this.

The challenge is a bit different with proprietary systems. Not all of them offer third-party plugins. And some make it hard to move your site to a new provider.

Either way, it isn’t easy to rid yourself of monolithic tools. A modular approach is more efficient. It’s easier to swap elements or add new ones.

Site Builders Are Great – Just Be Realistic

There’s so much to consider when building a website. That’s why site builders are popular. They aim to provide an all-in-one experience. And there’s a lot to like about them.

But there are also some drawbacks. It doesn’t mean you should avoid them altogether, though. Consider the pros and cons before committing.

Look for reputable tools that have a history of stability. Review their features and determine how they fit into your project. Ideally, you’ll find one that will serve you well into the future.

It’s also a good idea to set realistic expectations. A site builder can’t possibly cover every use case. There are times when you’ll need to go outside the box.

With WordPress, that means finding a separate plugin to perform the function you want. On other systems, you may need to write custom code.

The goal should be a website that looks and functions how you want. It should also be flexible enough to accommodate growth. Tools play a significant role.

Keep that in mind throughout the process. It may save you a headache or two along the way.

The post When Website Builder Tools Get in the Way of Best Practices appeared first on Speckyboy Design Magazine.

That often leaves us with some form of technical debt. It could be a WordPress theme that isn’t compatible with the latest version of PHP. Or a hacked-together layout that won’t adapt to future needs. The worst case is software that is no longer supported.

It will impact every website sooner or later. There are ways to manage or even prevent it, though.

So, how do you keep technical debt from becoming a nightmare? Let’s review a few tips for minimizing the impact.

Build with Sustainability in Mind

The first step is to reduce the chances for technical debt to take hold. In practice, it’s about building with sustainability in mind.

There are several things you can do. For one, use tools that are popular and well-maintained. It’s not a guarantee of smooth sailing. It does increase the chances of future viability, though.

Let’s use WordPress as an example. The content management system (CMS) has existed for over 20 years. It is continually updated. A large ecosystem of themes and plugins is also thriving.

Perhaps there’s another CMS that catches your eye. It hit the market only recently – there aren’t many users yet.

There’s nothing wrong with this new CMS. But is it sustainable? Only time will tell. Therefore, it may not be the best long-term solution. Using it comes with some level of risk.

Best practices also guard against technical debt. Use the latest standards when writing code. Don’t rely on CSS hacks to build layouts. Comment your code and take detailed notes.

The idea is to think about the present and future. That could save you some headaches down the road.

Perform Regular Audits of Your Website

The status of your stack can change in an instant. Thus, it’s a good idea to perform regular audits.

A website audit should cover both hardware and software. On the hardware side, make sure your web hosting is still viable. Check your site’s performance and resource usage. The results should tell you if you need to upgrade.

You’ll also want to look closely at the software you’re using. Start with the server’s OS. Move on to versions of PHP, MySQL, or whatever you have in place. These items are crucial to your site’s well-being.

From there, it’s time to look at your CMS, themes, and plugins. Also, review any software dependencies – JavaScript libraries are a good example.

Look for outdated items. Are updates available? Is it still actively maintained?

This process will help you identify potential problems. From there, you can take action.

So, how often should you audit your site? A yearly review is fine for small websites. Large and mission-critical sites would benefit from biannual or quarterly inspections.

Use Change as an Opportunity

Perhaps you found an item or two that needs addressing. That’s OK – change is inevitable!

The good news is that change also presents an opportunity. You can reassess how your website is working. There is a chance to build a more stable foundation for the future.

In some cases, you may have to swap one item for another. For example, maybe a WordPress plugin you use has been abandoned.

Now is the time to find a replacement that will offer better longevity. It’s also possible that you no longer need what the old plugin offers. That’s one way to reduce technical debt.

You might also need to modernize your code. We often do this when dealing with PHP compatibility issues.

It’s not only a chance to use the latest version of PHP. You can also look for ways to improve functionality and security. After all, reviewing the code you wrote years ago can show how far you’ve come. There’s a chance to build it better and stronger.

You can do more than bring your website up to date. You can also make forward-thinking changes. The hope is that you can lessen the technical debt you have today – and for the future.

Take Control of Your Site’s Technical Debt

Every website will deal with technical debt. That’s part of its lifecycle.

The difference is in how much debt you’ll face. Critical thinking early in the site-building process can reduce your burden. To that end, always search for the most stable and functional solution.

Changes will come eventually. That’s an opportunity to recalibrate your approach. You can review what works and what doesn’t. The lessons you learn will come in handy as your site evolves.

The key is to think about each step you take. Consider how it will impact your site today, tomorrow, and a year from now.

You probably won’t eliminate the need for change. However, you can learn how to make change more manageable.

The post How to Manage Your Website’s Technical Debt appeared first on Speckyboy Design Magazine.

Freelancers and small agencies deal with a range of non-design and coding issues. We become the first person our clients contact when they have a question. It happens – even when we aren’t directly involved with the subject matter.

• “I just received this message from Google. What does it mean?“
• “Why can’t I receive email from my website?“
• “My website was hacked. Help!“

Yes, we are the catch-all technical support representatives. No matter the problem, web designers are the solution. That’s what some clients think, at least.

We’re often the link between clients and technology. And perhaps we shouldn’t try to tackle every problem. But it wouldn’t hurt to brush up on a few non-design technologies.

With that in mind, here are a few areas that web designers should study. You know, just in case.

SEO & Site Indexing Basics

Search engine optimization (SEO) is a niche unto itself. Some professionals specialize in making sure websites are indexed and rank well.

That doesn’t stop clients from asking their web designer, though. Site owners want to rank highly in Google search results. And they are often in the dark about how to do it.

To that end, it’s worth learning the basics of SEO. Even if the subject makes your skin crawl.

You’ll be able to explain the hows and whys to clients. That will help them make more informed decisions about content. They may decide to jump in feet first with an SEO professional.

Clients will ask you about SEO. A little background knowledge makes you look smart!

SEO Resources

• Advanced Technical SEO: A Complete Guide by Search Engine Journal
• It’s Time to Get Back to the Basics of SEO by Eric Karkovack
• SEO Basics by Yoast
• The Beginner’s Guide to SEO by Moz

DNS & Email Delivery

Launching or moving a website often includes changing a domain’s DNS settings. These settings ensure that the site directs users to the right place.

DNS is much more than that, though. There are also settings for configuring email as well. That has become a hot topic these days.

Email providers are increasingly requiring domain owners to verify their properties. Domains without DKIM, DMARC, or SPF records may have email delivery issues. For example, Gmail blocks email from unauthenticated domains.

What does this have to do with web design? Well, websites with contact forms can fall victim to these issues. The same goes for eCommerce websites. An unauthenticated domain means clients and users will miss these emails.

Now is the time to learn how DNS works. You’ll want to pay special attention to email. Clients without an IT department may need your help ensuring smooth email delivery.

DNS & Email Resources

• About SPF records by Google Workspace
• What is a DNS DKIM record? by Cloudflare
• What Is DMARC? by Proofpoint
• What is Email Deliverability? Best Tips & Practices by Lindsay Kolowich Cox

Security for Websites and Beyond

We live in an age of online insecurity. Malicious actors don’t take a minute off. Instead, they continue to wreak havoc.

Sure, we talk about web security quite a bit. And we try our best to build a virtual mote around websites. But websites are still being compromised.

We’re learning that security goes deeper than installing updates or tweaking .htaccess files. The fitness of a user’s device also plays a role.

Stolen session cookies are a prime example. Hackers can grab them off of a compromised device. A “bulletproof” website is no match for a phone with an info stealer installed. They can waltz right in and do whatever they want.

Understanding how device security impacts the web is crucial. It’s something that can benefit us and our clients. After all, a single weak link can break the chain.

Website Security Resources

• 5 Things to Tell Your Clients About WordPress Security by Eric Karkovack
• How to Scan WordPress for Malware in 4 Easy Steps by Jeremy Holcombe
• Introduction to WordPress Security by Wordfence
• Security on the Web by MDN
• Seven Important Security Headers for Your Website by Jeff Starr

Command Line Tools

Some of us cringe at the mere thought of using a command line tool. Hasn’t that stuff gone the way of the dinosaur?

Nothing could be further from the truth. Command line tools like WordPress CLI remain popular. Why is that? It’s all about power and efficiency.

The command line doesn’t have the overhead of a graphical user interface (GUI). Thus, it handles bulk operations faster. For example, you can perform a search-and-replace operation on a database more quickly.

You can also do a lot of behind-the-scenes work with your web server. The command line may be the only way to run specific tasks.

It’s worth brushing up on command-line operations. They are a huge time saver in the right circumstances.

Command Line Resources

• Linux Commands Cheat Sheet by Linux Training Academy
• Master the Linux ‘SSH’ Command: A Comprehensive Guide by Peter Hou
• The Linux command line for beginners by Ubuntu
• WordPress CLI Handbook by WordPress

Become a More Well-Rounded Web Designer

The skills above are all adjacent to web design. And the need for this knowledge is growing.

Perhaps that has always been the case with SEO. Meanwhile, security and DNS seem to be just about mandatory these days.

Working with clients means you inevitably will face questions about these subjects. Freelancers and small agencies don’t always have an expert within reach. So, it’s up to us to find answers.

The command line is more about adding another tool to your toolbox. The improved efficiency will benefit you. And the result is better service for your clients.

Web designers tend to be specialists. We focus on the front-end or back-end. But the more we know, the more well-rounded we become.

It’s one way to stay on the cutting edge of the industry for years to come.

The post Those Non-Design Technologies Web Designers Need to Know appeared first on Speckyboy Design Magazine.

We tend to look back to these days with some cringe. Yes, the design and technology of that era were lacking. And there were very few standards to speak of. But there were also plenty of positives.

I’m biased – my web design journey began in this era. Therefore, I have a lot of nostalgia. I’ve written about it a time or 10.

But there are things I miss about those days. Practices and ideas that defined the enthusiasm of the time. Things that have long since faded.

As such, here are some parts of the early web I’d like to see come back – even if only for a day!

The Absence of Big Data

So-called big data wasn’t prevalent in the 90s. Google would plant those seeds in the decade. However, the web was yet to be controlled by trackers and algorithms.

Perhaps we didn’t have the same level of personalization. So what? The side benefit was a lack of manipulation.

We still saw this in the early days of Facebook and Twitter. Remember when your feeds were all in real time? It provided a sense of witnessing things as they happened.

Early search engines had similar perks. You were likely served the same results as someone on the other side of the world. Less convenient? Sure. But also less intrusive.

What we see now is ultimately controlled by companies. We don’t necessarily see the best search results. We see whatever Google’s algorithm deems appropriate.

Social media companies make it harder to view your feeds in chronological order. And advertisements are a little too personal, in my opinion.

It’s easy to understand why things have changed. Manipulating users is a profitable business. Plus, advertisers want to target specific audiences.

Still, I miss the days when the web had more randomness. Stumbling upon something new seems like a lost art.

The Simplicity of Website Design & Structure

“Things were simpler back then.” That’s a common refrain when adults talk about their childhood. I think it also applies to web design and structure.

There’s a good reason for that simplicity. HTML was basic. CSS didn’t even exist for part of this time. And there was only so much we could do with the day’s technology.

I can’t deny the prevalence of poor design. Web design was new. We were all amateurs in a sense. I played a role in making the place a bit unruly!

Even so, the limitations were often a good thing. The dangers of overcomplicating things became apparent. Designers eventually learned that simplicity was better for everyone.

On the other hand, we had very few standards or best practices. Things like performance, security, and accessibility received little consideration.

Today, we tend to overcomplicate things as a default. We use heavy content management systems (CMS) for brochure sites. We make a mess of security. And we use DIY tools without much thought about portability or ownership.

Perhaps the good parts of modern design can stay. But how about a resurgence of simplicity?

The Impact of the Solo Entrepreneur

Entrepreneurship is still possible on the web. It’s the idea that an individual can make an impact with their creativity. That could be a product, service, or even great content.

I think it has become harder for individuals to succeed, though. There are too many mountains to climb.

Those algorithms make it harder to gain visibility. And there are so many people (and bots) competing for attention.

Not to say it was easy back in the day. But originality tended to shine through. Oddities like the Million Dollar Homepage are a prime example.

Early bloggers also had an opportunity to find a core audience. They built niche online communities dedicated to a shared interest.

Tools like WordPress make it easier to self-publish content. But reaching people has become a full-time job. Creators must often rely on sponsors and product placement to gain traction.

It used to be possible for content to spread organically. Search engines weren’t prioritizing big sites over small ones. Thus, anyone had a shot to be seen by potential followers.

What started as a side gig could turn into something more. That’s still possible in theory.

YouTube and TikTok are the flavors of the minute for this. But they are walled gardens. Doing something similar on an open platform is daunting.

The Freedom to Create and Connect

I love to think of the early web as uncharted territory. We couldn’t look to the past when populating this new medium. So, we made it up as we went along.

There were positives and negatives about this. Even then, some used the web for nefarious purposes. But they seemed like dark corners that were avoidable.

The bigger picture was all about freedom. Anyone could create and publish content. And the web would be a vehicle to make positive connections with others.

There was talk of the great potential it held for society. People without a voice suddenly gained one.

The biggest impediment at the time was access to technology. But that could be resolved through cheaper devices and widespread internet. The sky was the limit.

I believed in the web as a change agent. And that the world would be better for these newfound connections.

We haven’t quite gotten there. Repressive regimes have stifled free speech. Bot farms spread misinformation and create division. Large corporations make the rules with little oversight.

The web didn’t become a whole new world. It instead became a reflection of the one we already had.

Say it isn’t so, Tim Berners-Lee.

Letting the Past Guide Us

Here’s the good news: We now have a past era to look to. We can use it as a guide when building the web’s future.

I don’t expect Google, Facebook, or Twitter/X to change their ways. Not without the mandate of a governing body. But we also don’t have to follow their lead.

Those of us who build and publish can keep the ideals of the early web alive. Think of them as small pockets of resistance.

How do we do it? We can start by embracing open tools and platforms. Use a browser that focuses on user privacy. Publish with a CMS that gives you ownership. Support decentralized systems like the Fediverse.

Most of all, pass these lessons to the next generation. They haven’t experienced a truly open web. Show them why it’s worth having.

Perhaps the web was bound to be changed for the worse. But we can still use our little corner of it as a beacon of light.

The post Aspects of the Early Web I’d Like to See Come Back appeared first on Speckyboy Design Magazine.

All jokes aside, client needs won’t always sync with your schedule. And we’ll guess that you don’t want to answer panicked emails during dinner. So, what’s the solution?

Providing clients with resources can help. You can create content that can be accessed whenever they have a question. It’s handy and saves everyone time.

Clients will also learn to help themselves. They’ll feel more confident when working with their website.

Does that sound like paradise? Keep reading for ideas on helping clients – even when you’re not around.

Help Clients Resolve Common Issues

Do you find yourself answering the same questions again and again? That’s because clients often run into similar roadblocks.

You may notice this when building multiple websites with the same content management system (CMS). Or when using the same themes and plugins. Patterns emerge. You’ll discover the pain points clients face.

It’s worth keeping track of these issues. From there, you can write documentation that clients can reference.

You can start small. Even a FAQ (frequently asked questions) page can do the trick. That’s fine if demand is low and the questions are simple.

If your needs change, you might consider building a dedicated support site. For example, a knowledgebase that lets clients browse various topics. It’s something you can add to as needed.

Hint: Be sure to use a system that is easy to maintain. That way, you’ll be more likely to keep your documentation updated.

Use Video to Demonstrate Tasks

Video is a powerful tool. A well-made presentation can take the guesswork out of a tutorial. Users can see exactly how to perform a given task.

Thankfully, it’s easier than ever to create video tutorials. A wide range of tools are available. And you don’t need to spend a fortune to get started.

At a minimum, you’ll need a microphone and a screen capture app. That will allow you to narrate as you perform tasks on the screen. You’re all set if your device already has a microphone. And there are free screen capture apps available.

What about quality? Well, it depends on your audience. You certainly don’t need a pro-level production for a quick tutorial. You should be fine as long as the audio and video are clear.

You may want to kick things up a notch if you plan to make them publicly available. Anything you want to promote should look professional. In that case, you might want to invest in attractive video templates.

Otherwise, a 30-second video can often outshine a text-based tutorial. Clients will appreciate your effort and likely learn more in the process.

The Potential of AI in Customer Support

Companies are integrating artificial intelligence (AI) into all sorts of tools. Customer support is no exception. So, how does that impact web designers?

We’re already seeing AI deployed in chatbot applications. That allows users to ask questions in plain language. The bot provides an answer.

That part isn’t new. Similar tools have been around for years. However, they haven’t always been very accurate. The user experience has also been less-than-stellar.

AI has the potential to produce better results. A model trained on your documentation could give more accurate answers. It might transform a chatbot from a dreaded interaction to a positive one.

It’s worth noting that these solutions depend on the quality of your documentation. The more thorough your content, the higher the quality of the results.

We might also use AI within a CMS like WordPress. The tool could provide support based on what the user is doing. Users could resolve issues without having to leave their site. It might be a game-changer.

We’re in the early days of AI. Thus, it will be interesting to see how it evolves regarding support.

Add an Extra Hand to Better Serve Clients

Modern websites can do more than ever. And client expectations have increased as well. That means more support requests.

The reality is that we can’t be there to respond at all hours of the day. So, providing helpful resources is one way to resolve common issues.

The self-serve ideas above could reduce the time you spend helping clients. That’s time you can dedicate to more profitable areas of your business.

You’ll also avoid the stress of dealing with these issues after hours. An extra evening or two of relaxation is worth the investment.

Take time to review your support workflow. Then, create content to help clients help themselves. You’ll be glad you did!

The post How to Help Your Web Design Clients Without Being There appeared first on Speckyboy Design Magazine.

So, what exactly is a Bento layout? Think of it as a puzzle. Different-sized containers fit together to create a seamless look. Inspired by Japanese culture, it’s popping up all over the web.

There’s good reason for Bento’s growing popularity. You can use these layouts in a multitude of ways. Everything from listing blog posts to product features is possible. They’re also perfect for dashboard screens.

We should also mention the role that the evolution of CSS has played. Both CSS Grid and Flexbox make these layouts easier to build. No hacks or workarounds are necessary!

With that, here’s a look at 8 beautiful Bento grid layouts.

Complex Bento CSS Grid Layout

CSS Grid packs a lot of power into a tiny bit of code. For example, this complex grid layout requires only 43 lines of CSS. The layout is both efficient and naturally responsive. Therefore, you won’t have to play around with media queries.

See the Pen Complex Bento Layout

Bento-Style Responsive Dashboard

Here’s a gorgeous dashboard layout that benefits from Bento. The layout offers a great way to display relevant content. Everything is neatly organized and easy to follow. The use of photography and color makes this example stand out.

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan

Bento Design Concept Layout

This page layout is a different take on the Bento aesthetic. There’s a sidebar featuring in-page navigation. Clicking a button expands it. Meanwhile, the content container maintains a consistent height.

See the Pen bento design concept by Abhishek Bhardwaj

Bento-Box-V1.0.1

Bento layouts also benefit from minimalism. This layout features fewer bells and whistles. Notice the use of white space and legible typography. The animated charts catch your eye without being overwhelming.

See the Pen Bento-Box-V1.0.1 by Gwenaël Guiraud

Sticky Bento on Scroll

This “sticky” presentation adds special effects to the mix. Watch how certain elements stick as you scroll. The idea is that you can go beyond static grids. Bento can be fun, too!

See the Pen Sticky Bento on Scroll ✨ by Jhey

Bento Grid Using CSS Flexbox

Let’s check out another fun example using Flexbox. This grid has a neon look and includes cool hover effects. Bonus points here for maintaining legibility and responsiveness.

See the Pen bento grid – challenge (Chrome +111) by EaterUsr

Card-Based Layout with Gradient Borders

Here’s an example for those wanting to stand out from the crowd. This card-based layout features animated borders, “wipe” effects, and beautiful hover styling. The layout remains clean – even with all those goodies.

See the Pen Cards (gradient border) by Dan

CSS Grid & :has() Grid Layouts

We can achieve a lot with the CSS :has() pseudo-class. This example uses it to adjust the layout as boxes are added and subtracted. Watch as the layout maintains perfect symmetry throughout.

See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle

Use Bento Grids to Keep Your Layout Nice and Tidy

The idea of using Bento aesthetics in web design isn’t new. However, older CSS layout techniques made them difficult to build. That’s no longer the case.

Perhaps the best part is that modern CSS does all the dirty work. We don’t need to compute complex calculations. CSS Grid and Flexbox can do this for us.

That leaves us free to experiment. The examples above demonstrate what is possible. And you can get as creative as you like.

Want to see more Bento grid examples? Check out our CodePen collection!

The post 8 CSS Snippets for Creating Bento Grid Layouts appeared first on Speckyboy Design Magazine.

These items ensure that users can access a website. But that’s only half of the battle. Our content also has to be easy to understand. Yet the subject seems to fly under the radar of web designers. Perhaps that’s because accessible content is more subjective. How do we know what passes muster?

There is no magic formula. But there are tried-and-true practices that will help you write accessible web content. And it’s something you can share with clients. With the help of an expert, we’ve put together some dos and don’ts. Let’s get started!

An Expert’s View of Accessible Web Content

Amber Hinds has seen all manner of accessibility mistakes. As founder and CEO of Equalize Digital, she and her team have a laser focus on the subject. That made her a natural choice for advice on the connection between content and accessibility.

We asked Amber about common accessibility issues. And she also provided some great tips for testing and talking to your clients about it.

What traits make content accessible to all users?

Content accessibility is less about things like focus states or HTML semantics and more about paying attention to the readability and structure of the content and being thoughtful about word choice. The most accessible content has a reading level below 9th grade and is clear and concise.

Adding headings throughout the content to break up long sections of text makes it more “skimmable” for all users. But it also enables people who are blind to jump to sections that interest them because screen readers allow people to use headings to navigate a page. Including HTML lists or data tables is another way to make content easier to consume.

Clarity of language and word choice also applies to link anchor text. You should be able to tell solely from the link text where the link is going. Just having meaningful links can go a long way in helping all people move quickly through your website and find the things they are looking for.

What are some common content accessibility mistakes you’ve seen?

When we audit websites, these are common mistakes that I see repeatedly:

• Headings not marked up as headings (people using bold paragraphs instead of an actual heading element) – usually, this is because they don’t like the styles their theme is applying to the headings.
• Headings were used out of order rather than in outline format (typically for the same reason as above – the H2 was too big, so they used H4s instead).
• Missing or incorrect alternative text on images.
• Meaningless links like “click here,” “visit the website,” or “read more.”
• Naked links that show the full URL without anchor text.
• Content that should be in a bulleted list, not formatted into a list.
• Videos missing transcripts and accurate captions.
• Videos that rely on sight to understand but without a written or audio description for people who are blind.

Are there any content types or formats we should avoid?

One thing I always ask people to rethink is PDFs. PDFs, whether menus for a restaurant or e-book lead magnets, are almost always in-accessible unless effort has been put in to make them accessible.

PDFs are designed for print – they’re not mobile responsive and particularly challenging for screen reader users. It is much easier for a screen reader user to access content on a web page than they can in a typical PDF. So, if you can put the content on a web page rather than in a PDF, that’s best for accessibility.

On web pages, more straightforward content layouts are better than “fancier” ways of displaying content, such as carousels, accordions, or tabs.

That’s not to say that you can’t have carousels, accordions, or tabs on an accessible website. But in WordPress, there are a lot of plugins that add this functionality where the plugin developer has failed to consider accessibility, and they are completely inoperable if you don’t have a mouse.

So if you do add these elements to your content, make sure to test them and ensure you can interact with them with only your keyboard.

Other content formats that can be troubling are video, animated GIFs, or audio that auto-plays, unless you have a pause button that allows users to stop it. Parallax and similar animations can cause nausea or dizziness, and rapid blinking can trigger seizures in people with photosensitive epilepsy.

Is there anything content writers can or should be doing to test for accessibility? For example, are there any helpful tools or guidelines?

Our plugin, Equalize Digital Accessibility Checker, scans websites for common accessibility problems and puts reports on the post-edit screen.

It functions much like an SEO plugin does – alerting about problems or areas of improvement so content writers can improve accessibility as they write before hitting publish. We have a free version of the plugin that scans unlimited posts and pages, and the pro version provides full site reports.

Outside of WordPress, there are some free browser extensions that are really handy for testing and can be used by people with any technical ability. WAVE is a popular testing tool that will show accessibility problems on any web page. This is comprehensive, like Accessibility Checker, it’s just built in the browser rather than in WordPress.

HeadingsMap is a Chrome and Firefox extension I really like that shows heading structure and alerts if headings are used in the incorrect order.

How should web designers approach this topic with clients?

We start discussing accessibility early in conversations with clients before even writing a proposal. Over the past few years, we have found that bringing it up early has helped us to stand out.

During the sales process, my partner Chris will ask prospective clients questions about where they operate and their funding. “Do you have offices in California or New York? What about Ontario? Europe? Do you get federal grants or funding?”

Then he follows up their answers with an explanation that he wants to have a well-rounded idea of what accessibility and privacy laws might apply to them.

Many clients may have started to think about privacy laws, but accessibility will be new to them, and so that opens the door for them to have conversations about accessibility laws in various areas. They will frequently follow up in a later conversation and tell Chris they were impressed that he is so thorough because no one else they spoke with even mentioned accessibility.

In many ways, this is really about positioning. It’s a way to show that you’re an expert who stays abreast of changes in the industry and is going to be on top of things so the client doesn’t have to worry about it.

From the perspective of selling clients on the investment, outside of discussing accessibility laws or lawsuits, we talk a lot about considering accessibility in how we design and build as being a major part of the overall user experience. Improving search engine optimization, performance, and conversions once people are on the site. Accessibility is a marker of quality.

Accessible Content Is a Win for Everyone

The great thing about accessible web content is that it benefits everyone. And you don’t need to sacrifice quality. When users can read and understand your content, your chances for success improve.

Keeping this in mind during the content creation process is critical. All content should go through multiple revisions. Clarity and simplicity should be the ultimate goals.

Our thanks to Amber Hinds for sharing her insights! You can connect with her on Twitter and Equalize Digital’s website.

The post What You Need To Know About Accessible Web Content appeared first on Speckyboy Design Magazine.

For example, I take my routine to the next level. I start each morning the same way: I turn on my computer and open the apps I need – all in the same order. Maybe I’m a bit obsessed?

But this behavior goes further. It also applies to the way I build websites. There are certain styles and layouts that I’m comfortable with.

Don’t get me wrong – I do like some variation in how things look. But I also have a preferred way of working. Thus, I become unnerved when someone asks me to change.

There’s both a level of fear and frustration when leaving one’s comfort zone. But it can be a more rewarding experience than our brains will allow us to believe.

Let’s explore why projects outside of our sweet spot can cause such discomfort. Along the way, we’ll discuss some things we can do to meet these challenges with enthusiasm (or cautious optimism, at least).

Finding Your Design Happy Place

Success breeds complacency. That’s why, in the world of sports, it’s incredibly hard to win multiple championships in a row. Maintaining that same level of intensity is difficult.

In web design, successfully completing a project makes us feel great. But it can also result in becoming formulaic in how we do things.

Our process may evolve in some areas. But overall, we do what has led to positive outcomes in the past. It’s a natural reaction.

This approach is also great for efficiency. Especially when we have multiple projects to manage. Repeating these steps allows us to get more done in less time.

That is, until someone comes along and disrupts our happy little pattern.

Thanks for Ruining a Good Thing

Has a client ever asked you to create something that isn’t your style? It can throw you off your game.

I’ve been in this situation before. A client wants a unique layout for their site. Hearing this makes me feel a bit insecure. They were well within their right to ask. But I immediately felt like I was going to fail.

What was I so afraid of? They’re asking me to go beyond my comfort zone. Since I haven’t built this type of site before, how can I possibly succeed? Maybe this project will destroy my confidence. What if I disappoint my client?

This is an irrational way to approach the situation. I’ve been at this for long enough to where I should know better. But, like it or not, that’s usually my first reaction when life takes me to unexpected places. I don’t count it as one of my strengths.

Take a Deep Breath & Come To Reality

The biggest hurdle in these situations is taking the first step. Maybe it’s the fear of failure or the sense that you aren’t good enough. But it seems that the longer you avoid doing uncomfortable things, the worse you feel.

The solution is to get to work. Eliminate any distractions and spend some quiet time with your project. You may find that a decent idea can grow into something better. Pretty soon, you’ll be on your way to a successful outcome.

Problem-solving is a part of design that doesn’t always come naturally. When you’re handed the same problem over and over, you solve it the same way. But when handed a more unfamiliar riddle, you might be unsure of the answer. Uncertainty is uncomfortable, after all.

For me, the initial panic usually gives way to laughter. I wonder why I ever worried in the first place. Practicing patience and allowing myself room to experiment often leads to positive results.

With that in mind, here’s what I’m going to tell myself the next time I face a similar project. Maybe it will help you, too.

• You’re Not Being Punished – Being uncomfortable can be the worst feeling. It’s as if a curse has been put on me. I know that’s not the case (at least, I don’t think it is). But it’s important to remember that this is just another challenge in a life full of them. Others have been through far worse.
• You Might Fail Initially – Your first idea may not be the best one – but that’s OK. You have to start somewhere. Design is a process. And it’s particularly tough when you’re swimming in uncharted waters.
• You’ll Get It – Eventually – Working a different way often requires some trial and error. It also takes a bit more time. Patience and persistence are keys. If you keep working, you’ll end up with the right answer.
• The Experience Will Make You Better – Oftentimes, the best way to combat being uncomfortable with a project is to force yourself to do it. The reward is that you’ll feel more confident about having taken it on. You’ll also be able to lean on this experience when facing future challenges. That’s good because another one is always just around the corner.

It’s All Part of the Job

When you think about it, web design (and life) would be pretty boring if we did things the same way every time. Still, going outside your comfort zone is hard.

Your initial reaction may be to run as fast and far away as possible. But that leads to complacency and stagnation. Neither trait is good for your career.

It turns out that the key to dealing with these situations is to work through your fears and preconceived notions. Along the way, you’ll find that your design skills are much more flexible than you might have thought.

The post Taking Trips Outside of Your Design Comfort Zone appeared first on Speckyboy Design Magazine.

Designers don’t always get to make that decision, though. Clients often provide images for their websites. And they may insist on using a particular image, even if it’s of poor quality.

But there’s still a chance to get the best results. It’s all about understanding the role photography plays in web design. Educating clients (and ourselves) can make a difference.

With that in mind, here are some tips for choosing the best photos for your website.

The Image Subject Should Be Relevant to Your Website

First and foremost, a photo should reflect the subject of your content. It’s not an exact science, however. Thus, there’s room for interpretation.

The easiest solution is to hire a professional photographer. They can provide a perfect match for your needs.

But that’s also beyond the budget of many organizations. That leads to the inevitable use of stock photos.

Stock photography may not always hit the nail on the head. But you can still use it to convey a message. That may mean using a more generic image.

For instance, let’s say that you’ve written about the benefits of hiring a piano tuner. Perhaps you don’t have any images of someone tuning a piano. But the odds are that you can find photos of a piano. Better yet, an image that focuses on its internal parts.

The goal is to find images that keep the user focused on your subject. Perfection isn’t required. But don’t stray too far from the content’s messaging.

Think About Color and Post-Processing Effects

Tools ranging from Adobe Photoshop to CSS allow us to tweak an image’s color composition. We can change the hue and saturation. Or even convert the image to black-and-white.

But it’s important to consider which colors make the most sense for your project. The branding of your website is a big factor. As is the mood you’re hoping to create.

For instance, a full-color photo on a dark background can make a bold statement. But black and white might be perfect if subtlety is your goal.

Post-processing effects should also be considered. Not every image will be a good candidate for the specific look you want to create.

Let’s say you’re applying a color overlay to a series of header images. You’ll want to be sure that the photos look consistent when the effect is applied. If an image looks out of place, it may not be the best fit for this use.

Image Size and Orientation Matters

The images you choose will likely be cropped before they are added to your website. Even with broadband connections and 4k monitors, gigantic images (with equally large download sizes) aren’t user-friendly.

Therefore, it’s important to consider how you plan to use a specific image. What impact will cropping have on it? This is where an image’s size and orientation come into play.

Consider a background image placed within a hero area. This is typically a wide, landscape-oriented photograph. Attempting to stretch a portrait-oriented photo into this spot is not advisable. It will likely lead to undesirable results.

Pixel size is also important. It’s best to choose images that are larger than you need. This allows you to crop the image to suit. Enlarging a small image generally leads to poor display quality. With that in mind, look for an image that will fit your desired use.

And don’t forget mobile devices! You may need to adjust an image for small screens. That could include displaying it in a different orientation.

About Your Client’s ‘Terrible’ Photo

We alluded to situations where a client insists on using a photo (a.k.a. the “wrong” one). It’s easy to dismiss it as a bad idea. But we should be cognizant of both their feelings and thought processes.

Discussing the matter with them will help you gain insight. Start by politely stating any concerns you have. Maybe the sizing won’t work. Or the quality just isn’t up-to-snuff. Regardless, it’s best to get your thoughts out in the open.

Also, try to find out why they chose the image. It may be the best photo they have available. On the other hand, it may hold some sentimental value.

From there, you can offer them some options. Things like adding effects or making it part of a collage could help.

Clients are usually flexible when it comes to images. Plus, they need to know that you’re working in their best interest. That way, they’ll be more likely to meet you in the middle.

Therefore, don’t interpret their initial request as a final answer. There’s likely some room for compromise.

Better Photos = Better Website

A nearly infinite number of images are available at our fingertips. It’s easy to just grab one and put it to use. But is it the right one for the job?

It takes effort to find the best photos. Consider your site’s subject matter, color scheme, and sizing requirements. That will help narrow your search. From there, it’s all about experimenting with different options and determining the best fit.

It’s also important to communicate with clients about their ideas. Work with them to make the most of the opportunity.

Photography can truly make your website stand out. Therefore, take your time and choose wisely!

The post A Quick Guide to Great Website Photography appeared first on Speckyboy Design Magazine.

Many professionals do this by listening to web design podcasts regularly. This can be done while completing work or in spare time. Regardless, podcasts make it possible to expand your knowledge without giving up copious amounts of personal time in the pursuit.

And we’ve made it even easier for you here. This collection is a compilation of some of our favorite web design podcasts. Each of these is well worth a listen.

Responsive Web Design

Responsive Web Design is a podcast hosted by Karen McGrane and Ethan Marcotte that consists of interviewing web designers who have completed re-designs of websites to make them responsive.

Developer Tea

The Developer Tea podcast focuses on helping developers figure out how they want to move forward in their careers. It currently has over 13 million downloads and is hosted by Jonathan Cutrell, the co-founder of Spec.

The Big Web Show

Another great podcast to check out is The Big Web Show. This podcast regularly has guests on to discuss web design and technology, content, typography, and more. It’s hosted by Jeffrey Zeldman and covers all things web.

The Gently Mad

The Gently Mad, or TGM for short, is a podcast that discusses finding meaning in your life. But it also covers entrepreneurship and running a business online.

Front End Happy Hour

Front End Happy Hour is a podcast that talks about front-end design and development. It regularly has panelists from Netflix, Twitch, Airbnb, and other companies.

Style Guide Podcast

The Style Guide Podcast is hosted by Anna Debenham and Brad Frost and covers design on the web with a particular emphasis on style guides, pattern libraries, and UI.

Code Newbie Podcast

If you want to learn more about the coding side of things, The Code Newbie Podcast features interviews with people who code for a living. Gather insights, tips, and tricks from their experiences and stories.

CTRL+CLICK CAST

You’ll also want to check out CTRL+CLICK CAST. This podcast is for web designers and developers and covers all ways of running a web design agency or working as a freelancer in the industry. It’s hosted by Lea Alcantara and Emily Lewis.

Design Life Podcast

The Design Life Podcast features stories about living as a designer and how to achieve work-life balance. It also discusses the various side gigs and projects of these two female hosts.

The Web Ahead

The Web Ahead is a podcast about the internet and focuses primarily on technology and techniques for working with it online.

Boagworld Podcast

Last on our list is the Boagworld Podcast. Hosted by Paul Boag and Marcus Lillingtonare, the podcast covers web design topics in a fun way that’s engaging to newbies and professionals.

Learn More with These Web Design Podcasts

When you’re a professional web designer, the learning never stops, and these podcasts make it much easier to achieve that end.

Check out some of the podcasts we’ve listed here. Hopefully a few are added to your regular rotation.

The post Our 10 Favorite Web Design Podcasts appeared first on Speckyboy Design Magazine.