Learn Web Design on Speckyboy Design Magazine https://speckyboy.com/topic/learn-web-design/ Resources & Inspiration for Creatives Wed, 05 Feb 2025 09:03:39 +0000 en-US hourly 1 https://speckyboy.com/wp-content/uploads/2024/03/cropped-sdm-favicon-32x32.png Learn Web Design on Speckyboy Design Magazine https://speckyboy.com/topic/learn-web-design/ 32 32 What Should New & Inexperienced Designers Be Learning? https://speckyboy.com/new-inexperienced-designers-be-learning/ https://speckyboy.com/new-inexperienced-designers-be-learning/#comments Sat, 23 Nov 2024 17:28:08 +0000 http://speckyboy.com/?p=47956 Today I’m speaking to those just getting started in design. Maybe you just graduated from design school, or you’ve read through all the fundamental lessons offered here and on other...

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

]]>
Today I’m speaking to those just getting started in design. Maybe you just graduated from design school, or you’ve read through all the fundamental lessons offered here and on other design blogs, and you feel you’re ready to start taking on clients.

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.

Proportion and Composition from the apple logo ratio

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.

Complete set of Desktop publishing graphic symbol utilities showing color theory for Inexperienced Designers

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.

Rules Of Typography for Inexperienced Designers

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.)

Asset Libraries for designers toolbox vector image


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.

]]>
https://speckyboy.com/new-inexperienced-designers-be-learning/feed/ 13
Tips for Taking Event Registrations on Your Website https://speckyboy.com/taking-event-registrations-on-your-website/ https://speckyboy.com/taking-event-registrations-on-your-website/#respond Sat, 09 Nov 2024 07:58:13 +0000 https://speckyboy.com/?p=143152 Online event registration has become a popular feature in web design. But, before you start taking online registrations, read our tips for choosing the right tool.

The post Tips for Taking Event Registrations on Your Website appeared first on Speckyboy Design Magazine.

]]>
Online event registration has become an increasingly popular feature. It offers a high level of convenience for both users and site owners. And this type of functionality is available to just about anyone with a website.

If you’re a web designer, the odds are that client requests for event registration capabilities have increased in recent years. Organizations were already abandoning traditional methods – and a global pandemic only served to accelerate the trend.

And there is a plethora of options for implementation. From niche WordPress plugins to third-party event services, plenty of providers have populated this space. There’s something for every need and budget.

Still, not every method will fit your needs. That’s why it’s important to map out the entire process—from user registration and data handling to what happens after the event.

So, before taking online event registrations, read our tips for choosing the right tool.

The Type and Frequency of Your Events

One thing you’ll find when working with clients is that no two are alike. This is particularly so when talking about events. Each organization has unique preferences and policies.

Therefore, you’ll want to ask plenty of questions. Find out what events look like for them. For example, try to determine:

  • The number of events held per year.
  • Type of events (virtual or in-person).
  • How many attendees are expected for each event.
  • Where events take place (physical venues or online meeting platforms).
  • What costs registrants will pay.

The type and frequency of events play a vital role. Consider a client who hosts a single yearly conference. Their needs may be quite different from those of someone who runs monthly meetups.

Clients with multiple events could benefit from a registration system tied to a calendar. This would allow users to browse events in chronological order. Displaying upcoming events can become an integral, easy-to-implement part of the site’s home page.

In-person and virtual events tend to have some key differences as well. Using a remote meeting platform such as Zoom means distributing a link to registrants. But wouldn’t it be nice to use a registration system that ties in directly with the platform? That would add a layer of convenience for users and site administrators.

Events taking place in person should include as much venue information as possible. The facility’s address, phone number, and website URL come to mind. Bonus points for systems that include a map and link to driving directions or other modes of transport.

Find out as much as you can about your client's event needs

Think About User Data Collection

It’s a safe bet that most event registration systems will collect basic contact information (name, email address). And data such as mailing addresses and phone numbers will be required for compatibility with online payment gateways.

But data needs can go well beyond those essentials. Depending upon the organization, any of the following may be necessary:

  • Membership ID.
  • Food preferences.
  • Accessibility needs.
  • T-shirt size.
  • Company/organization name.
  • Conference session choices.
  • Opt-in to receive emails or print materials.
  • Photo or other document uploads.

And those examples just scratch the surface of what’s possible. There are no hard limits on what types of data can be collected.

Thus, you’ll want to ensure that the event registration app can accommodate these needs. Some tools provide a selection of form fields that can be customized. The ability to set required fields also comes in handy.

It’s also important how you access the collected data. Ideally, there will be a web-based UI for viewing registrations. Options for exporting and sharing that data in various formats add even more flexibility.

Lastly, think about how registration data might tie in with services you’re already using. For example, the email opt-in could connect with a provider such as Mailchimp. This bit of automation will make maintenance that much easier.

 Not all event registration tools have the same data collection capabilities

Communicating before and after the Event

Staying in touch with registrants before and after an event is crucial. It provides the latest information and helpful reminders, and it encourages user feedback throughout the process.

Again, any functionality that ties into your existing communication tools can simplify this task. At the very least, an option for targeting the registrants of a specific event will suffice.

It’s also worth noting that communication goes beyond sending an email. Your website can also serve as an important hub. It can host event info and allow registrants to change their reservations.

Not every event app is suited for this type of use. However, you might employ a shopping cart or membership plugin to fill in the gaps.

That’s one advantage of using WordPress or a similar content management system (CMS). It’s easy to add related functionality that enhances event registration. Users are empowered to do more, while site owners have more options to manage events and registrants.

 Look for ways to communicate with attendees, including the tools you're already using

Choose the Right Online Event Registration Platform

When accepting online event registrations, the goal is to implement a process that is easy and intuitive for users. On the flip side, it also needs to conform to clients’ needs. It should offer flexibility when collecting data and administering registrations.

Perhaps the biggest hurdle in achieving this is choosing the right platform. With so many options, it can be difficult to narrow them down.

However, it all starts with understanding the project’s needs. Once you know the type and frequency of events, along with the data and communication requirements, you’ll have a clearer picture of how things should work. From there, you’ll be able to determine which platform makes the most sense.

And the experience you’ll gain is valuable. It will greatly help as you work on similar projects in the future.

The post Tips for Taking Event Registrations on Your Website appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/taking-event-registrations-on-your-website/feed/ 0
Getting Answers to Your Web Development Questions https://speckyboy.com/web-development-questions/ https://speckyboy.com/web-development-questions/#respond Thu, 07 Nov 2024 09:29:24 +0000 https://speckyboy.com/?p=109516 Regardless of our education, experience or skill level, every one of us will run into a situation where we could use some help. It might be a bit of code...

The post Getting Answers to Your Web Development Questions appeared first on Speckyboy Design Magazine.

]]>
Regardless of our education, experience or skill level, every one of us will run into a situation where we could use some help. It might be a bit of code we can’t get quite right or even some confusion as to the best approach for a particular task.

This is where the web design community shines like no other. There are any number of channels where we can get help from others who are willing to share what they know. Everything from official knowledgebases, general support forums to social media affords us an opportunity to help and be helped.

But, to get the most out of the experience, there are some best practices and niceties to consider. So, before you ask for help, keep the following in mind:

First, Try to Help Yourself

If you don’t know the answer off the top of your head, it’s best to at least do a little research before reaching out to others. Odds are that someone out there has either written a blog post on the topic or has asked a similar question in a forum. You may just find the answer, or at least get part of the way there.

Even if you don’t find exactly what you’re looking for, hopefully you now have some useful background information. So, when you do ask a question, you can provide a little more context on what you’ve seen elsewhere.

This practice is also just good etiquette. Sometimes the answer is virtually right in front of you (especially if there is official documentation available). In those cases, it saves you (and those helping you) some unnecessary back-and-forth. Plus, folks like to see that you at least made an effort to solve an issue on your own.

Person typing on a keyboard.

Be Specific

So, maybe you couldn’t find the answer out there and really do need to ask a question. That’s okay – it’s why support exists in the first place. You’ll just want to be prepared to explain exactly what it is you’re looking for.

For instance, think of how many times have you viewed a support forum where a poster has proclaimed “It’s broken!” That statement alone may be accurate, but it’s also incredibly unhelpful in explaining the problem.

The more relevant detail you can provide, the better. So, we can take our previous example and change it to something like: “I’m having an issue when trying to save a post in WordPress. I write the post, then click the publish button. In the middle of the publishing process, I’m logged out of the back end.”

Of course, we could go on and expand things even further by mentioning any recent software upgrades, the type of server we’re using and so on. The idea is to better explain what you were doing, what you expected to happen (versus what actually took place) and any pertinent details.

And that last bit is also important. Before you include something in a description like the one above, think about whether or not it really is relevant to the issue at hand. Sometimes the answer will be “no”. If later on it becomes clear that you should have included a specific item, you can always add it in after the fact.

Follow up on Your Question, Even If It Has Been Resolved

Sometimes, it can seem like a good idea to post a question in multiple communities and hope for an answer. The more experts who view it, the better chance you have of getting some usable information. One downside of this strategy is that it can be difficult to keep track of each and every post (it’s wise to opt-in to a reply notification system, if the support community offers one).

Failing to keep up with these posts can cause several problems. First, you may actually miss out on someone who has a follow up question for you. In addition, abandoned posts can hurt your reputation. Leave too many of these and others may not be so willing to help you with future requests.

This is something that many of us (including yours truly) have been guilty of at one time or another. And no, it won’t (probably not) lead to the crumbling of society. But again, it’s a time waster for everyone involved.

If you do happen to find an answer, it would be a nice gesture to either delete your post or add information about what you learned. This is doubly sweet because it could help someone else down the line.

Woman typing on a laptop computer.

Have Realistic Expectations

It’s no fun to be in a situation where you either can’t figure out a problem or, worse yet, something’s truly broken. That being said, your expectations should be realistic.

For instance, if you’re using a free community such as Stack Overflow, realize that the people answering questions are volunteering their time. The same goes when seeking help for a free WordPress plugin. As such, be as understanding as possible if you don’t get a reply right away or if someone really can’t help you.

Paid support, on the other hand, is a different deal. Support for web hosting or commercial software should be fast and helpful. Still, that doesn’t necessarily mean that they’ll resolve every issue. Check out any support policies to find out what is and isn’t included.

And, perhaps most importantly, don’t expect anyone to write lengthy snippets of code for you. That’s an awful lot to ask, even for professional-level support. Quite often, you may be handed a piece of code that is a sort of generic and will need some further work on your part. That should at least provide you with a great starting point.

Man pointing at a smart phone.

You Get What You Give

The overarching themes here are being a good person and communicating clearly. We all have different skills and strengths. So, don’t feel embarrassed if you don’t know a particular term or concept. It’s less about what you know, and more about how you approach the situation.

If you’re being polite and genuinely making an effort to communicate, others will take notice. As a result, you’re more likely to get helpful responses to your question. The key is in remembering that, on the other side of that screen, is a person just like you.

So, the next time you reach out for a helping hand, take a moment and think about the best way to word your question. From there, treat others the way you want to be treated. Hopefully, you get the answers you’re after and help to make the web a friendlier place.

The post Getting Answers to Your Web Development Questions appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/web-development-questions/feed/ 0
How to Accept Your Limitations as a Web Designer https://speckyboy.com/accepting-your-limitations/ https://speckyboy.com/accepting-your-limitations/#respond Wed, 06 Nov 2024 08:08:12 +0000 https://speckyboy.com/?p=113012 As web designers, every one of us has limitations. So, how do we learn to accept it? How can we still thrive as designers and developers?

The post How to Accept Your Limitations as a Web Designer appeared first on Speckyboy Design Magazine.

]]>
With the overwhelming number of tools, libraries, and technologies out there, it’s impossible to know everything. Yet web designers place a great deal of pressure on themselves to keep up. It can lead to a feeling of being burned out and hopelessly behind.

The truth is that there is only so much you can know. After all, you have clients to serve and a limited amount of time for learning. Thus, we must focus on what’s most relevant to our job.

This is one of the hardest things to accept. We’re often bombarded with messages about the things that we should know. If not, we may not measure up to our peers.

Each of us has limitations. So, how do we learn to accept them? How can we still thrive as designers and developers? Let’s examine the pressures of keeping up and the realities of this industry.

The Trouble With Forcing Yourself To Learn

Raise your hand if you’ve ever been in this situation. You’re working on a project, and your client requests a new feature (never mind the scope creep for the moment). The feature requires a skill you aren’t so adept at – let’s say it’s writing some custom PHP.

Sure, you have some experience with the language. But you’ve never taken on something of this magnitude. You’re a little bit wary but agree to do it.

You’re hoping to learn as you go. And maybe you pick up on some of the concepts involved. But you quickly realize that you are running into some roadblocks.

You’re spending precious time and resources trying to piece things together from tutorials and support sites. Meanwhile, a deadline is approaching. This is not a good feeling.

 Immediately becoming proficient in a new skill is often unrealistic.

Adopting a Better Approach To Learning

This scenario has likely happened to most of us at one time or another. At first glance, it may seem like lacking a certain skill is the culprit. But that’s not the whole story.

Sure, it would be nice to have a Jedi-like mastery of the language. But it’s not in our repertoire just yet. And by refusing to accept this, we put ourselves (and our client) in a tough spot.

We often put things into the same context as sports or action movies. You know, the brave soul who takes a hit but comes back stronger. However, web design is neither of those things.

Learning a complicated skill on demand isn’t easy or realistic. Star athletes and action heroes can afford to spend copious amounts of time and money on improving. We don’t have this luxury.

So, while attempting to improvise sounds noble, it’s also counter-productive. Instead, there are more effective ways to approach the situation:

Explain the Situation to Your Client

When it comes to client relations, honesty is the best policy. As such, having a frank discussion about your limitations can be a bit freeing. Plus, it sets a realistic level of expectation.

For the most part, clients will appreciate this information. It helps them understand what’s possible and adjust their budget accordingly.

Make a Plan

The job still needs to be done. Thus, it’s important to have a plan for how it will be implemented.

This could mean delaying the project’s launch. The advantage here is that you’ll have enough time to work through any potential roadblocks.

Or it might require hiring an expert to help. That will save you the trouble of doing everything yourself. Plus, you’ll be able to focus on the other items on your to-do list.

Follow Through With a Solution

Clients are usually focused on the result. Therefore, the path we take to achieve a goal isn’t as important. But working with them to find a solution is a key part of the process.

The conversation can be difficult. But by showing you have their best interests in mind, things can come together nicely.

The lesson here is that having personal limitations doesn’t necessarily hurt the project. By acknowledging your limits, you can create a plan that works for everyone. That’s a valuable skill in itself.

Having an honest conversation with clients can lead to better outcomes.

It’s All About Perspective

The web design industry often sees limitations as a character flaw. It’s as if not having a particular skill should disqualify you from getting an opportunity.

Both freelancers and agencies tend to perpetuate this myth by promising the world. The whole “we can do it all” narrative is great for marketing, but little else.

The reality is far different. Accepting what we don’t know is the first step towards breaking free of these impossible standards.

We can still create great outcomes for clients. Meanwhile, we can continue to learn at a comfortable pace.

From there, we start to treat learning as a journey – not a race.

The post How to Accept Your Limitations as a Web Designer appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/accepting-your-limitations/feed/ 0
How New Web Designers Can Level Up https://speckyboy.com/new-web-designers-can-level-up/ https://speckyboy.com/new-web-designers-can-level-up/#respond Thu, 31 Oct 2024 08:38:35 +0000 https://speckyboy.com/?p=143066 If you're looking to build a web career that is successful and sustainable, we're here to help! Here are some tips to help get you up and running.

The post How New Web Designers Can Level Up appeared first on Speckyboy Design Magazine.

]]>
Starting your career as a web designer is an exciting experience. There is a whole world of possibilities available. Thanks to a massive number of learning opportunities, it may seem like the sky’s the limit.

Growth takes time, however. Short of releasing an instantly popular (and lucrative) product, you’ll have to put in a lot of work to level up. That means taking on smaller projects and lower pay until you become an established designer.

Part of the challenge is in choosing the right tools and technologies. Some offer a more future-friendly path than others. Pick the wrong one, and you may find yourself starting over from square one.

If you’re looking to build a career that is both successful and sustainable, we’re here to help! Here are some tips to help you hit the ground running.

Learn How Things Work Behind the Scenes

The no-code era of web design has arrived – to a point. DIY website builders and even WordPress have jumped on the bandwagon. The idea is to get websites launched faster and with less hassle.

Those are positive steps. But the downside is that you may miss out on the finer details of web design and development. If a feature doesn’t look or work the way you expect, it helps to have some idea of what’s happening beneath that WYSIWYG interface.

To get the most out of these tools, learn how to code. Dig into CSS, JavaScript, PHP, and other relevant languages. This will provide you with the foundation you need to build fully-custom websites.

You don’t have to learn it all at once. It’s perfectly reasonable to pick up knowledge as you go. As you gain experience, you’ll also have a better idea of how to troubleshoot and make these advanced tools work for you.

There is a great temptation to work within the limitation of no-code site builders. But by doing so, you’ll also limit yourself.

When you understand the fundamentals of web design, you'll be better equipped to build custom websites.

Find Projects That Challenge You

The variety of project types available to web designers runs the gamut. Everything from single-page calls to action to enterprise behemoths is out there.

As a beginner, it’s worth experiencing as many of them as possible. Whether you’re a project lead or a worker bee isn’t the most important factor. The value is in going through the build and design processes.

The most valuable projects are often the ones that provide the most significant challenges. They test your knowledge and inspire you to learn something new.

That could be something big like a programming language. But it can also lead to discovering little tweaks that improve your workflow. These are skills that you can take with you – helping you become a true expert in your craft.

Realistically speaking, we all have bills to pay. Sometimes that means taking on projects that aren’t very challenging. That’s fine in the short term. But if you want to move up, look for projects that will push you forward.

Challenging projects enable you to learn new skills.

Don’t Be Afraid to Fail

The longer you’re a part of the web design industry, the more likely it is that you’ll experience some failures. And while it might not be much fun, it’s an important part of growing as a professional.

Some projects simply don’t work out. Or a tool you invested in could go belly-up. A prospective client may dangle a project in front of you – only to waste your time in the end.

On the bright side, each of these scenarios is a learning experience. Looking back on them can help prepare you for the future. And they may save you from making a similar mistake, or trusting the wrong person, the next time around.

We all want to celebrate our successes. But it may take some trial and error to get there. With that, don’t let the fear of failure stop you from pursuing the career you want.

This doesn’t give you a free license to be reckless. However, it can be liberating to understand that there will be ups and downs along the way.

Failure is a part of running a business. It can also be a learning opportunity.

No One Starts at the Top

We’ll go out on a limb and guess that you’re both smart and talented! That’s a great combination and one that can take you far in any career you choose.

But it’s also worth remembering that none of us start at the top. It’s especially the case in web design, where finding a consistent level of success can take years. That’s not meant to discourage you – just think of it as a friendly reminder.

The single biggest thing you can do to level up is demonstrate a willingness to learn. Familiarize yourself with code and the technical aspects of your work. Attach yourself to projects that will challenge you to expand your horizons.

Sure, there will be setbacks. But they’re also a great source of knowledge. Use them to your advantage as you move through your career.

Starting in web design is both exhilarating and difficult. But it’s quite possible to get to where you want to go.

The post How New Web Designers Can Level Up appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/new-web-designers-can-level-up/feed/ 0
How to Target Design Elements with the CSS :not Pseudo-Class https://speckyboy.com/target-design-elements-css-not-pseudo-class/ https://speckyboy.com/target-design-elements-css-not-pseudo-class/#respond Wed, 30 Oct 2024 20:43:33 +0000 https://speckyboy.com/?p=128513 :not allows you to target elements that do not match a list of provided selectors. The result is more control over niche design features.

The post How to Target Design Elements with the CSS :not Pseudo-Class appeared first on Speckyboy Design Magazine.

]]>
Consistency is good practice in all areas of web design. On the front end, it makes for a better user experience. Under the hood, maintenance becomes more efficient.

Yet there are times when a specific part of a design doesn’t quite fit the mold. It may be a one-off design feature that is utilized on a single page or area of a site. For example, home pages often include elements that don’t carry over to secondary pages. Individual blog posts might also require a certain formatting of their own.

The trouble is that the HTML markup may be same throughout the website. Think of a WordPress theme that has the same structure for every page. How can you target only specific instances of an element?

This is where the CSS :not pseudo-class comes in handy. It allows you to target elements that do not match a list of provided selectors. The result is more fine-grain control over those niche design features.

Let’s take a look at a few scenarios that demonstrate the power of :not.

Full-Width Content on the Home Page

In our first example, let’s consider a home page that is going to use full-width content. Perhaps it has a lot of content and a wide layout would take advantage of large screens. However, that’s the only place we want to add this style for now.

We’ll also assume that we’re adding a CSS class of .home somewhere on the page, while secondary pages get their own class of .secondary-page.

The goal is to adjust the width of the #content element only for pages that don’t include the .home class.

This allows us to implement full-width content on the home page, while keeping it at 66% wide everywhere else. So, even if a page has a class other than .secondary-content, that rule still holds true.

Here’s how it looks in practice:

See the Pen CSS :not – Full-width content for a home page by Eric Karkovack (@karks88)
on CodePen.

Remove Text Decoration on Hyperlinks Outside the Content Area

Underlining hyperlinks is helpful for accessibility. However, there may be places within a website where you don’t necessarily want this visual enhancement. Navigation bars and even footers might eschew underlined links altogether.

In this scenario, we’ll underline links – but only within the #content element. Every other area of our fictional page will forego them.

To accomplish this, we’ll look for child elements of the .container element, which wraps around the entirety of the page. Links that are not within the #content element will have a style of text-decoration: none;.

See the Pen
CSS :not – Underline links within #content
by Eric Karkovack

Change a Text Heading Style When Inside of a Multi-Column Layout

Typography styles are often adjusted for different types of page layouts. You might want to use different font sizes and margins, for example, within a multi-column layout as opposed to a single-column page.

Large text headings could be especially overwhelming when used in smaller spaces. With this example, we’ll adjust <h2> elements to better fit in these situations.

Specifically, the CSS we’ve written assumes that any <h2> elements that aren’t within in a container using the .single_column class should be made smaller. In addition, we’ve changed the color and a few other properties.

See the Pen CSS :not – Different heading styles for multi-column layouts by Eric Karkovack

:not a Bad Way to Control Your CSS

Part of the beauty of CSS is in its flexibility. There are often a number of ways to accomplish a given goal. This allows web designers to work more efficiently than ever.

The :not pseudo-class is yet another helpful tool. You may have looked at the scenarios above and thought of other techniques for doing the very same thing. And there are indeed times when you might want to take a different approach.

But in many cases, :not can increase efficiency. It saves us from individually targeting multiple selectors that require similar styling. And, as previously mentioned, it’s great for those one-off design elements that we want to stand out. Browser support is also very strong.

It should be noted that :not does have some limitations. Also, it requires a bit of background on how the CSS cascade works. Therefore, writing an effective piece of code can take a few tries.

Still, it’s worth learning. Once you get the syntax down, you might be surprised at how truly useful this functionality is.

The post How to Target Design Elements with the CSS :not Pseudo-Class appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/target-design-elements-css-not-pseudo-class/feed/ 0
The Importance of Keeping Up with the Latest CSS Techniques https://speckyboy.com/keeping-up-latest-css-techniques/ https://speckyboy.com/keeping-up-latest-css-techniques/#respond Wed, 30 Oct 2024 11:32:37 +0000 https://speckyboy.com/?p=143487 Even if your current solutions work adequately, there are still reasons to invest in learning the latest CSS techniques.

The post The Importance of Keeping Up with the Latest CSS Techniques appeared first on Speckyboy Design Magazine.

]]>
It’s no secret that web design evolves at a rapid pace. Not only do the trends change, but so do the tools and technologies we use. We’re constantly under pressure to keep up.

That’s why I find my workflow a bit ironic. Yes, I realize change is a part of the profession. And yet I tend to stick with a familiar approach to each challenge.

Nowhere is this more apparent than when it comes to using CSS. It seems like every few years, some revolutionary new feature gets a lot of attention. And while I find it interesting, I’m usually not an early adopter.

Perhaps there’s no harm – provided the techniques I use work as intended. But inevitably, a project comes along that pushes my existing knowledge to the limits. And it’s usually then, after a period of frustration, that I finally dig in and learn something new.

If you’ve ever found yourself in a similar situation, this article is for you. Together, we’ll look at why it’s important to keep up with the latest CSS techniques. And even if your current solutions work adequately, there are still reasons to invest in learning.

New Features Are Often Easier to Maintain

Using older CSS features to create a complex layout traditionally has meant resorting to hacks. That’s not always a bad thing, as it can be a great way to learn the inner workings of the language.

The downside is that cobbling together a layout using CSS floats and clearfixes is neither stable nor elegant. There are no guarantees that these techniques will hold up over time. If your content needs change, for example, you might find that the layout simply breaks.

It’s worth noting that floats and clearfixes came about at a time when CSS didn’t have a simple method for creating multicolumn layouts. Back then, these were among the few acceptable solutions.

However, the additions of both Flexbox and CSS Grid have been game-changers. They’re designed specifically for these types of layouts and have some degree of responsiveness built in. In addition, they typically require less code than those old-school hacks.

Taken together, this should result in code that is much easier to maintain over the long term.

New CSS layout techniques often require less code.

Use of Legacy Browsers Is Plummeting

Among the primary reasons not to adopt modern CSS has been spotty support in legacy browsers. If you needed to cater to those using the likes of Internet Explorer or outdated versions of Safari, you’d be forgiven for not jumping on the latest features.

Fallback solutions were possible, but they might also be a hack in their own right. They were also one more piece of code to maintain.

This wasn’t a huge problem for visual effects like border-radius, where the browser just ignores what it doesn’t understand. But approximating newfangled layouts in old browsers could be very challenging. It often kept me from wanting to implement a feature such as CSS Grid.

But usage for these technological fossils has become minuscule. Internet Explorer has been (partially) retired by Microsoft and is in use by less than half a percent of users. Similar numbers have been reported for legacy versions of Safari as well.

That’s not to say offering a solid fallback isn’t helpful. But the data shows that we no longer need to hold back on implementing new features, either.

Compatibility with the likes of Internet Explorer is less of a concern.

More CSS Knowledge = More Versatility

Then there’s the old problem of trying to fit a square peg into a round hole. There are numerous style and layout challenges out there, and they all require unique solutions.

CSS is part of what moves the web forward. That’s reflected in what we see every day. In addition, our clients have also picked up on these shifts in presentation. They now expect us to deliver that same level of quality.

Achieving modern design with old-school CSS isn’t very efficient. Not when there are new approaches that streamline the process. By clinging to the past, we’re making more work for ourselves in the long run. It may also limit our growth potential.

Thus, it stands to reason that the more tools we have in our toolbox, the more versatile designers we become. This frees us to experiment and go beyond the same old looks.

In time, this will benefit both our portfolios and clients. What’s not to like?

Expand Your CSS Superpowers

To be clear, we don’t have to use every new CSS feature immediately after it’s released. There is always a lag in browser support. And some items may not be relevant to our niche.

Still, it’s worth keeping an eye on new developments and becoming familiar with how they work. It’s something that will stay in the back of your mind. When you need it, you’ll have a handy point of reference.

It might also save you from the frustration that comes from using older techniques to solve modern challenges. This is something I continue to wrestle with. Hopefully, this article provides the necessary motivation for all of us!

The post The Importance of Keeping Up with the Latest CSS Techniques appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/keeping-up-latest-css-techniques/feed/ 0
What You Need To Know About Accessible Web Content https://speckyboy.com/accessible-web-content/ https://speckyboy.com/accessible-web-content/#respond Sat, 26 Oct 2024 06:01:18 +0000 https://speckyboy.com/?p=151251 Discover how to make web content accessible to everyone, enhancing user experience and inclusivity.

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

]]>
The term “accessibility” brings a few related concepts to mind. Design-related features like color contrast and legibility are prime examples. And we can’t forget about adding ALT attributes to images.

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.

Photo of Amber Hinds

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.

]]>
https://speckyboy.com/accessible-web-content/feed/ 0
Taking Trips Outside of Your Design Comfort Zone https://speckyboy.com/design-comfort-zone/ https://speckyboy.com/design-comfort-zone/#respond Fri, 25 Oct 2024 09:20:40 +0000 https://speckyboy.com/?p=98675 We explore why projects outside of our sweet spot can cause such discomfort and discuss those things we can do to meet these challenges with enthusiasm.

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

]]>
Humans crave comfort, familiarity, and routine. It applies to our work and life.

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.

Web designers may want to stick to a comfortable routine.

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.

A challenging project can be stressful.

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.

Taking the first step can help you get past an uncomfortable project.

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.

]]>
https://speckyboy.com/design-comfort-zone/feed/ 0
How to Educate Clients About the Value of Your Services as a Designer https://speckyboy.com/educating-clients-true-value-services-designer/ https://speckyboy.com/educating-clients-true-value-services-designer/#comments Wed, 23 Oct 2024 21:23:54 +0000 https://speckyboy.com/?p=75818 Understand how to communicate the true value of your design services to clients, enhancing appreciation and compensation.

The post How to Educate Clients About the Value of Your Services as a Designer appeared first on Speckyboy Design Magazine.

]]>
Okay, freelance designers. Stop me if you’ve heard this one: you’re working on a project for a client, and all of a sudden there’s a discrepancy with your payment. Perhaps it’s because of scope creep, or maybe the client just went over budget for some reason.

Either way, you’ve been informed that you will not be getting the full amount agreed upon in your contract, and the client is asking you to be “flexible” on the exact amount they initially agreed to. You’re already several dozen hours into the project – to back out now would cost you more than it would to simply accept the lesser amount being offered.

What do you do? Do you simply agree to take what you are offered? Do you keep this client as a repeat client in hopes that things will improve with the next project?

Why do clients think they can rack up charges with designers and attempt to weasel their way out of paying the full amount? More importantly, why do designers let them? Even more importantly, how do you, as a designer, identify trends common to this type of client behavior, so that you can avoid them completely in the future?

Culture of Service

The key to avoiding situations where you might be called upon to be “flexible” with your fees is educating your clients about the true value of your services as a designer.

If your client falls asleep in a taxi and the taxi driver drives past their house and up the street for five more miles, he’s going to charge your client for those five miles, despite the fact that he or she didn’t “mean” to fall asleep. And your client would expect to pay it, as well.

Design is a service, just like being shuttled about in a taxi cab is a service. I’m always surprised – not at the number of clients who don’t understand this, but at the number of designers who also fail to make this connection.

You aren’t creating some esoteric work of art that is completely subjective in value and which your clients should feel apprehensive about paying you for. You are providing a service that will help them improve the functionality of their brand, whether that’s through a website, an identity system, a brochure, poster, CD cover, flyer, or anything else you design.

Yes, it’s creative work, but ‘creative’ doesn’t equal ‘exempt from standard pay agreements.’ The only way clients will get this thought out of their heads is if designers get it out of their heads first.

No With the Flow

This is going to come off sounding a bit like a rant, but the frequency with which clients avoid paying designers the fees they initially agreed upon is very unsettling to me. Some people simply “go with the flow,” accepting that some clients are going to be unreasonable about things and that there’s nothing you, as a designer, can do about it.

But why is that? Why should designers simply be expected to be ‘flexible’ when it comes to payment? I’m just going to come out and say it: there’s something really wrong with the nature of this industry that people can get away with thinking this kind of thing is normal. It’s not normal; in any other industry, it would be called theft, and making a fuss about it could be construed as attempted extortion, if you mess with the wrong kind of litigious service provider. You get a service, you pay your money.

If a client is unhappy with the service you’ve provided, that’s another issue. Designers should always be willing to work with a client if something isn’t right and do their best to make the client happy. But clients trying to get out of paying altogether, or trying to sweep hours, days, weeks, months of work under the rug with some absurd plea about ‘flexibility’ is just wrong, and it has got to stop.

The only way freelance designers are ever going to earn any kind of respect for themselves in the industry at large is if they collectively start educating clients about the true value of their services.

When All Else Fails, Become a Psychic

So, after saying all this, you might be wondering whether I’m to going answer my own question. Should you, in fact, stand your ground when re-negotiating the terms of your prior agreement with a client?

It’s easy to stand back from a distance and proclaim “of course you should! It’s only right, after all.” But the reality of the situation is not always so simple. Perhaps it’s a huge client who’s causing you trouble – the biggest client of your career so far. Is it worth it to argue and possibly get yourself blacklisted by other clients in the same industry?

Ideally, you’d be armed with an iron-clad contract and a lawyer at all times, but we all know that sometimes things are less than ideal. Sometimes your client will force you to reword your contract before they agree to work with you, and you have no choice but to comply if you wish to get paid at all. And well, lawyers can get expensive.

So what do you do? I won’t pretend that I know the answer to this very old, very persistent problem. What I will say is that it’s entirely possible to drastically reduce your likelihood of finding yourself in these types of situations in the future, by positioning yourself in a more high-level position within your niche industry.

Knowing what makes your clients tick, and how best to serve the markets they serve will make you a much more highly valued service provider, which in turn will drastically reduce your chances of being taken advantage of.

There’s something very strange that happens when people are confronted with a designer who can seemingly read their minds – they show you a level of respect and trust that you would have thought they’d have shown only to their spouses, friends, or cat. It’s a very fascinating thing to watch.

Designers aren’t too keen on most clients assuming that they’re mind-readers, but if you make it part of your job to study the habits of your client base, as well as your clients’ customers, users, audience, or other markets, you can arm yourself with this near-psychic ability relatively easily.

The post How to Educate Clients About the Value of Your Services as a Designer appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/educating-clients-true-value-services-designer/feed/ 1