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.

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.

However, the benefits of keeping up with the latest CSS developments are significant. Mastering new techniques and staying current with best practices can help you create stunning, responsive websites that perform well and provide an exceptional user experience.

Fortunately, we’re here to lend a hand. We’ve compiled a comprehensive collection of CSS-related cheatsheets and learning resources that cover a wide range of CSS topics. Whether you’re looking to improve your layout skills, enhance your typography, or learn how to use advanced CSS features like animations and transitions, we’ve got you covered.

These resources will provide you with a solid foundation of CSS skills that you can build upon and expand over time.

CSS Basics

Learning the fundamentals of CSS will help you move on to more advanced use. Here are some places where you can discover how CSS works, what different properties do, and how to put it all together.

Responsive Design with CSS

The hows and whys of responsive design should be embedded into every designer’s brain. Make sure your site looks great on any device.

CSS for Layouts

Beyond styling various design elements, CSS is the preferred way to create awesome page layouts. Gain useful information regarding CSS Grid, Flexbox, and more.

CSS Grid

Flexbox

General CSS Layout Information

CSS Animation & Effects

Create transitions, transform objects and bring powerful (and lightweight) animation to your site.

CSS and Accessibility

CSS plays a vital role in accessibility. Learn the techniques that will help to ensure everyone can use and navigate your website.

CSS Preprocessors

Preprocessors such as Sass and Less are a great way to keep your styles efficiently organized – especially on large, complex websites.

General Preprocessor Information

Less

Sass

Styled for Success

For web designers, CSS is a vital skill. It touches just about everything we do. So it’s worthwhile to learn as much as we can and take advantage of new additions.

The post 50 Cheatsheets & References Guides for CSS appeared first on Speckyboy Design Magazine.

And while JavaScript is still very useful in these scenarios – it’s no longer a requirement. These days much can be accomplished with a combination of HTML and CSS. Each standard has been extended to include features that were once exclusive to other languages.

This evolution brings several benefits. First, it greatly reduces the complexity of building these elements. You don’t need to load external libraries or worry about mastering JavaScript syntax. In turn, that also boosts performance and ensures browser compatibility.

Sound interesting? Today, we’ll show you a handful of common interactive elements that you can build with nothing but HTML and CSS.

Accordion UIs

Accordions have long been built with an assist from JavaScript. The jQuery UI library even includes the element. This simplified the creation and styling processes, but it’s not the most performant code.

Especially when you consider that HTML now has the details and summary tags built in. With some basic markup and styling, it’s possible to create an attractive and functional UI. It’s also compatible with all major browsers.

It’s worth mentioning that this method doesn’t offer the full range of special effects. As MDN notes:

Unfortunately, at this time there’s no built-in way to animate the transition between open and closed.

Minus that caveat, this is very much a viable alternative to loading a JavaScript library.

Below is a basic example of what can be done with just a few lines of HTML and CSS.

A Simple HTML Accordion Using <details>

See the Pen A Simple HTML Accordion Using <details> by Eric Karkovack

Advanced Navigation Menus

Crafting navigation that works across browsers and devices used to be quite a challenge. Particularly when creating multi-level or mega menus. Advanced features often required fallbacks to keep things working on legacy browsers.

And that’s not even taking small screens into account. An entirely separate menu may need to be implemented to ensure ease of use on mobile devices.

Thankfully, there’s been much progress in this area. By combining the HTML nav tag, unordered lists, and CSS, we can support the full spectrum of devices. Not only can they look just as good as the JavaScript-heavy menus of the past, but they can also perform more efficiently.

Responsive Mega Menu & Dropdown Menu Using Only HTML & CSS

See the Pen Responsive Mega Menu and Dropdown Menu using only HTML & CSS by Muhammad Fadzrin Madu

Games

Web-based games have been around for a long time – dating back to the days of (gulp!) Flash. And even after that platform’s demise, the process of building them was still complex.

Creating smooth animations, processing mathematical calculations, and allowing for user input have traditionally required advanced scripting and library usage. But that’s not necessarily the case anymore.

Now, CSS can be combined with the likes of HTML canvas, SVG, and other goodies to create some surprisingly-powerful results. While you won’t mistake these pure CSS games for the cutting-edge titles playing on your console, they’re impressive nonetheless.

At the very least, they make for compelling time-wasters!

Pure CSS Ghost Bustin’ Game with CSS Variables

See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey

Media Players

Much like games, multimedia on the web was once browser-plugin territory. Some of that was due to proprietary formats, as vendors vied to gain market share for their codecs. Content providers (and thus, designers) were forced to choose one or more formats to make available to users. And users needed to have the right software installed to play the media. It was a mess.

But even as formats such as MP4 became open standards, playback remained complex. However, a shift to HTML5 put much of the functionality burden on browsers. The video and audio elements make use of a built-in media player with a variety of optional features.

And while JavaScript is still recommended for a more customized UI, it’s no longer a necessity. Some basic styling can be accomplished with CSS. Plus, browser compatibility for the native elements is robust.

HTML5 Audio CSS Style

See the Pen HTML5 Audio CSS style by Dani Castaños

Building the Basics and Beyond

Advancements in CSS and HTML have done wonders for pushing the web forward. No longer do we need to resort to massive code libraries or overly-complicated processes to deliver basic interactivity. These natively-supported staples are more than capable of doing the job.

That’s good news, as web designers need to account for an ever-growing array of devices. Elements such as navigation and media players that simply work without the need for third-party libraries are crucial to that cause.

Sure, JavaScript and the like are still there to take things to the next level. But it’s now possible to build the basics without them.

The post 8 CSS Snippets for Creating Interactive Web Elements appeared first on Speckyboy Design Magazine.

Or maybe you have a couple of projects under your belt and you’re looking for more detailed advice as to what path you should be taking to propel your career to the next level.

Today we’re going to go over some of the most important things inexperienced designers need to master, and what I wish I had paid more attention to when I was just starting out.

Proportion and Composition

You may think you have this down, but, if you’ve been working for less than 5 years, I’m pretty sure you don’t know as much as you think you do. Read up on composition fundamentals and practice them in your spare time.

Yes, that means cracking open those boring books you might have been assigned in school, or taking a trip down to the library and checking out some solid titles that will provide you with the information you need.

Color Theory

Same as above. Don’t just copy other people’s color schemes without understanding why and how they arrived at their color choices. Colors have a myriad of different meanings and associations attached to them, both by the designer and by the viewers. Just because you think a certain color scheme conveys ‘innovative technology’ doesn’t mean that everyone will feel that way.

Your client and users might see ‘kid’s dentist’ instead – which is why it’s a good idea to do as much research and testing as you can before choosing a color scheme. A signature color palette is as good as a brand for a designer. Choose yours wisely.

The Rules Of Typography

You need to have a solid understanding of type in order to succeed as a designer. This is non-negotiable. Don’t just leave typography up to professional type designers. Sometimes you will be asked to customize letterforms to suit a particular client’s brand image.

If you don’t know what type weight, spacing, or kerning mean, and if you can’t tell the difference between an x-height and a counter, it’s time to learn. Luckily, there are tons of free resources online that can help you learn the basics, and the more you practice, the more adept you can become at giving clients the type treatments they need.

Become a Photoshop/Illustrator Expert

I don’t mean just enough to get by or to finish the small projects you do for your clients. I mean knowing these programs (or whichever ones you use) like the back of your own hand. Even the weird, obscure stuff nobody knows about.

There are plenty of books and online courses to help you gain mastery of your tools. The more intimately you know your software, the more clients will come to trust you with more complex work, and the more they will recommend you to their colleagues who are looking for high-level designers.

Asset Libraries

Design takes time – at least if you’re doing it right. You need to develop your idea, and try variations of it in order to get to just the solution that works for you and your client. But that doesn’t mean you can’t speed up some parts of the process.

You can develop a backlog of fonts, vector images, and templates to make your work go by faster. This will take time as well, but the key is knowing what is worth curating and what should be discarded.

For example, if your font library has thousands of typefaces in it, and none of them are organized or grouped in a helpful way, it can be more detrimental to your productivity than not having enough typefaces. (And yes, I’m speaking from experience.)

I’m always a fan of learning the fundamentals, as the more solid your foundation in design, the more easily you can adapt to whatever new trend or demand comes along. Even if you’re an experienced designer, there are always new things to learn about design.

The post What Should New & Inexperienced Designers Be Learning? appeared first on Speckyboy Design Magazine.

Those of us building websites for smaller organizations were often left with less-than-ideal solutions. A lack of available resources made it all the more challenging. We were forced to settle for the likes of clipart (yikes) or low-quality images culled from stock CDs. Short of creating your own artwork, it wasn’t easy to craft a top-notch visual experience.

How things have changed. These days, stock photography is available from all corners of the web. You’ll find everything from completely free images all the way to high-end premium options.

Still, the mere existence of these images doesn’t necessarily translate to great design. It still takes a keen eye and smart implementation to find success.

Today, we’ll look at the impact stock photography has had on web design. We’ll cover both the good and the bad, along with some tips for finding the right images for your projects.

Bringing Visual Experiences to the Masses

Perhaps the biggest benefit of using stock photography on a website is the ability to create a highly visual presentation. Long passages of uninterrupted text are often frowned upon. They’re more likely to turn users off than captivate them. Adding some photography to the mix helps to break things up into bite-sized pieces.

In theory, this also enables a page that’s light on content to appear more substantial. Before the widespread use of stock images, it wasn’t easy to dress up a page that consisted of only a paragraph or two. Images can help provide a more professional and detail-oriented look.

The other big advancement is that these images make it easier to convey a message. That might take the form of an infographic that simplifies a complex idea. But it could also be a photo that sets the mood or an icon that makes user interaction more intuitive.

In this way, stock photography has brought the potential for a great visual experience to the masses. Now, even small and low-budget websites have an opportunity to stand out.

The Limitations of Stock Photos

In an age where we have access to just about every piece of recorded media, there are still limitations. For example, just because your music app has millions of songs doesn’t mean it includes all of your favorites.

Stock photography has similar constraints. The available images don’t always fit your exact needs. The size, format, and subject matter aren’t always a perfect match. There are occasions when web designers will have to settle for “good enough.”

There are a few factors that can further cloud the picture, so to speak:

Budget

Cost doesn’t necessarily correlate with quality. It’s possible to find some outstanding photos for free. But free resources don’t always have the greatest variety of images, either. Therefore, the lower your budget, the less choice you have.

Being Fenced-in By Membership Sites

A growing number of stock photo membership websites are popping up. You pay a monthly or yearly fee in exchange for access to photographs. If you find a number of images that you can use in a project, it’s often a good value.

Yet this type of deal can also be quite limiting. For designers who spend the bulk of their asset budget on a membership, you’re pretty much stuck with what they have to offer. Suppose their selection doesn’t fit your specific needs, too bad. You may have to find another resource for more relevant images or settle for what’s available.

Lack of Originality

While there are tons of stock photos available, it seems like a good chunk of what’s out there has become cliché. Photographers and service providers are attempting to cover common subjects and broad use cases. This has led to a certain sameness across various photo resources.

And there’s the rub of stock photography. It can’t possibly serve each website’s unique needs. There are only so many ways, for instance, to photograph two people shaking hands.

Copyright Confusion

One thing that hasn’t really changed over the years is copyright confusion. Back in the day, designers and website owners often grabbed images from other sites and posted them. They did so without a thought as to their usage restrictions. A steady stream of violation letters from copyright trolls put an end to that.

But licensing can still be difficult to understand – even from reputable stock photography resources. There are cases where images are for editorial use only. There have also been restrictions as to maximum image resolution for online posting. Figuring out how and where an image can be used may scare some people away altogether.

Finding the Right Stock Photography for Your Projects

Sometimes finding the right photos for your website is a bit like locating a needle in a haystack. What you need (or something close to it) likely exists, but you might have to dig through several resources before finding it. Situations that require client approval of images make things all the more difficult.

And while there are no guarantees that you’ll find the perfect match, there are some basic things you can do to better your chances. Here are a few techniques to employ when searching for the best stock photos:

Identify Your Favorite Resources

It’s helpful to have various stock photography websites that you trust. Some of these resources might cater to a specific niche and will come in handy on occasion. Others will have a broader focus and be great for your day-to-day needs.

The key is to avoid reliance on a single resource. Instead, find a handful of places that have quality images, clear usage terms, and different styles. This provides both you and your clients with a solid number of image options.

Think About Your Image Needs Ahead of Time

Each website project has its own unique needs when it comes to photography. They include factors such as a photo’s subject, color, size and any enhancements you may want to make. Having a general outline of these items should make your search easier.

Ideally, knowing this information will allow you to choose the best fit from your list of photo resources – right from the start. This (hopefully) means less searching and a more efficient process.

Be Flexible

Having a rigid definition of what you’re looking for can sometimes backfire. Even the best stock photo websites are unlikely to have images that are identical to what you envisioned. Therefore, it pays to keep an open mind.

Don’t be afraid to experiment with images that aren’t 100% aligned with your initial plan. Choose a few that look interesting and see how they work with your design. In some cases, the results may be even better than anticipated.

Stock Photography Is a Tool: Use It Wisely

Few design assets have the ability to transform a website quite like great photography. It can take a run-of-the-mill design and turn it into something with character and context. Stock photography, in particular, has brought this visual potential to everyone.

However, best practices still apply. Just like anything else, stock photos can be misused and abused. The result might well be a bloated website that’s too image-heavy. In addition, the wrong types of images can lead to a generic look that fails to stand out.

While it’s wonderful to have so many photographic resources, it’s up to designers to make the best use of them. For this reason, it’s good to think of stock photography as just another tool for us to utilize – not something to build a website around or save it from mediocrity.

Despite those caveats, stock photography has made a positive impact on web design. Frankly, it’s hard to imagine building a compelling website without it.

The post The Good & Bad of Stock Photography appeared first on Speckyboy Design Magazine.

And, seeing as how so many of us reap rewards from the web design community, it’s only natural to want to give something back. However, finding a way to do so isn’t always so clear-cut. Maybe you have a desire to do something positive, but what should that be?

Thankfully, there are a number of different avenues you can take. It’s just a matter of finding a way to contribute that is the best fit for both your skills and personality.

That’s where we come in! Let’s look at some things you can do to help out your fellow web designers (and maybe make the world a better place in the process).

Lend a Hand in Support Forums

When a web designer runs into a roadblock while working on a project, where do they turn? Quite often, it’s a support forum such as Stack Overflow. Or it may be something a bit more niche, such as the WordPress.org support forums.

These communities are great for getting even the toughest questions answered. Whether it’s a sticky situation with CSS or perplexing PHP, odds are you have been helped by an answer found in one of these resources somewhere along the line.

That is reason enough to pitch in and pay it forward. If you happen to see a fellow developer who has an unanswered query that’s in your area of expertise, feel free to offer a helping hand. Just be sure to respect any community guidelines that are in place.

Even if you don’t have the exact answer, it’s still possible to point someone in the right direction. That alone can lift a huge weight off of their shoulders when problem-solving.

Contribute to an Open-Source Project

Open-source tools are a boon to web designers – and maybe to mankind as a whole. Just the idea of people collaborating on a project that benefits all is inspiring (we’re getting a bit misty-eyed just thinking about it).

These projects run the gamut from large applications like WordPress all the way to tiny CSS frameworks. It seems like there is something to help with virtually every aspect of building or maintaining a website.

The thing is, many of these ventures rely solely on dedicated volunteers. They need people who can contribute code, test out bug fixes, write documentation and handle support. The bigger the app, the greater the need.

If there’s a particular open-source project that you enjoy, why not offer up your talents? Even a small commitment of your time can be a big help in keeping things moving forward.

Create and Share Your Own Resources

Whether your specialty is in code or design, you have something positive to offer the web design community. If you’re feeling especially generous, you might even share something of your own creation.

This can take a number of forms. It could be in building your own open-source app. Or perhaps you let your inner-artist shine by releasing a free UI kit or set of custom icons. If you’re a coder, adding tutorials to your blog or snippets to your GitHub profile can serve as a valuable resource for others as well. Business advice is also a well-received contribution.

You don’t have to necessarily be an expert or commit to something that’s going to take up all of your free time. The point is more about offering up items, however small, that other web designers can benefit from. The fact that it reflects your particular talents makes it all the more meaningful.

Become a Mentor to Other Web Designers

There’s an old adage that says, “each one, teach one”. The idea is that taking the time to teach someone can lead to great things. And, if enough of us participate, the community as a whole will reap the rewards.

That certainly applies when it comes to mentorship. By taking another web designer under your wing, you can help them reach their potential. They, in turn, can do the same for someone else.

Again, you don’t have to be the world’s foremost expert on web design. Sometimes, being a mentor is more about being a good listener. Find out what your mentee’s goals are and offer tidbits of advice where you can.

Of course, this kind of relationship will likely cover things like code or design techniques. But it might also include the experience of dealing with clients, learning new skills or discussing ideas.

Giving a little bit of your time and knowledge can make a difference in someone’s life and career. Plus, it also provides you with a warm and fuzzy feeling. It’s a win-win situation!

Promote Best Practices and Ethics

You may not realize it, but if you’re promoting best practices and ethical behavior – you’re benefitting the entire web design community.

For example, touting the virtues of accessibility and standards-based code on social media does two things: It spreads the good word about these subjects and it can help to convince web designers to adopt them.

Then there’s the way you serve clients. It’s a matter of both putting best practices into action and treating clients in an ethical manner. By doing so, you are helping the industry build and maintain a great reputation.

In the grand scheme of things, these are little steps. But, over time, they add up to something substantial.

Giving Back Is Its Own Reward

We hope that the ideas above have inspired you to give your time and skills to make the web design community a better place. And, if you’re already contributing in some way, hopefully they’ve reinforced why you’re doing so.

Of course, these are but a few potential options. The web is a great big place and there is no shortage of room for innovation. You may find a different way to share your creativity and unique experiences.

It’s a safe bet that each one of us has benefitted from the kindness, generosity and wealth of resources this community has to offer. So, let’s all pitch in and keep it going, shall we?

The post 5 Ways You Can Contribute to the Web Design Community appeared first on Speckyboy Design Magazine.

How many times have you needed to accomplish something and realized that you’ve written a piece of code that would be a perfect fit? Then, how often was that same snippet almost impossible to find?

This is a common challenge for web designers. That’s why writing some basic project documentation can prove to be beneficial. By putting such a system in place, you’ll have an easy way to go and find that time-saving snippet.

Whether you’re working on a new project or looking through some past ones, here are some tips for documenting what you’ve done.

Comment Your Code

This one seems a bit obvious, but it’s no less important. As we write code, it makes sense to add appropriate comments about exactly what it does.

Common practice includes writing a short narrative above each new function to explain its purpose and relevance. Beyond that, adding notes at other key places within those functions allow us (and others reviewing our code) to gain a better understanding of how everything is put together.

And this practice isn’t just for complex languages like PHP or JavaScript. It’s also perfect for CSS. Pointing out specific styles and where they are being used is great for finding exactly what you need.

It often feels like half of the battle is just remembering why each line is there and what it’s supposed to do. Commenting can take a lot of that ambiguity away.

Create a Journal for Each Project

Depending on your personality, the mention of the word “journal” may be either incredibly scary or oddly comforting. Either way, there’s great value in the practice.

In this case, we’re talking about a document that serves as a future project resource. Should the website break or require a new feature, this would be a place that you can reference for details on how things were configured.

Open up a word processing document or go all out and create a Wiki on your local install. It can be as detailed (or not) as you like. There are no hard and fast rules here.

For example, our design and development techniques tend to evolve. The approach you took a few years ago may not resemble what you’re doing today. Thus, it’s important to put various elements of the process into writing.

Plus, even when using common systems and libraries, each website is a separate entity. Not sure where to start? Look at what makes the site different from others.

Make note of special templates you created, specific code snippets, or styles. If you set up a unique server configuration, that’s also a great thing to document.

Maintain a Code Snippet Library

There’s no need to reinvent the wheel when it comes to code. Much of what we write is infinitely reusable. Even if it doesn’t fully fit in with the needs of your new project, the right snippet can serve as a solid starting point for further customization.

Organizing disparate bits of code, however, can be a challenge. You could just copy and paste useful pieces into a document and retrieve them as needed. But for those who write a lot of code, this might get out of hand rather quickly.

A GitHub repository could be a reasonable solution. It would allow you to categorize things and establish version control. You can even sync a repository with another service so that you can use or access it in different ways.

Regardless of how you put a snippet library together, you’ll want to develop some sort of system for tagging, categorizing, or otherwise labeling each snippet. For instance, you might want to add things like the coding language used, purpose, relevant application (such as WordPress), or library (React, Vue, Bootstrap). This will make finding what you need a much smoother process.

An Encyclopedia of Your Work

Web designers love to build portfolios to show off their work. But keeping track of projects internally is also a worthwhile endeavor. It can help you troubleshoot and build upon existing websites while providing solutions for new ones as well.

You can use any or all of the above techniques to get things organized. The best part is that you can customize things the way you see fit. Whether that’s through voracious notetaking or simple reminders, it will help you better understand the what, where, when, and why of your web projects.

The post Best Practices for Documenting Web Design Work appeared first on Speckyboy Design Magazine.