Google Fonts are a tremendous addition to any designer’s arsenal, providing a basic library of typefaces that cover most requirements. But if you’ve ever tried to add them to a WordPress theme you’ll know what kind of hacking is involved.

Fortunately, web designer Eric Alli has recognized the issue and released a great plugin for WordPress that will allow anyone to utilize Google’s font library.

Google Typography is a free solution, and the best thing about it is that it’s incredibly simple to use. Once you’ve installed, just navigate to the Appearance > Typography settings page, click Add New to add a new type style and customize your text via the live preview. Once you’ve set up your font, all you have to do is enter the CSS selector to apply it to and click Save; that’s it, your font choice is now being used live on your site.

What’s more Alli has included a register_typography function to enable theme developers to quickly add Google fonts to themes. It makes adding a font as simple as this:

if(function_exists('register_typography')) { 
  register_typography(array(
    'page_titles' => array(
      'preview_text' => 'Page Titles',
      'preview_color' => 'light',
      'font_family' => 'Lato',
      'font_variant' => '300',
      'font_size' => '45px',
      'font_color' => '#252525',
      'css_selectors' => '.page_title'
    )
  }
}

There are obvious omissions: there are no line-height, or tracking settings for example, which are vital for body text and display text respectively; however, the plugin is only at version 1.0 and hopefully more will be added over time.

I’d encourage anyone to download the Google Typography plugin and give it a try, it’s a simple, intuitive way of adding Google fonts to WordPress sites; easy to use but fantastically flexible.

What I love about the web design community is that for everyone who rehashes someone else’s product to make a quick buck, there’s someone else who releases something really useful, free of charge. Eric Alli’s Google Typography is a case in point, and it makes the web just a little bit better.

Have you used Google Typography yet? What options do you wish were included? Let us know in the comments.

3 Amazing TipoType Fonts – only $17!

Whenever I meet with a new client for the first time, I always tell them this: It’s not important that you like the design I’m going to make for you.

It’s always humorous to see the client’s reaction to this statement. Most look inquisitive, others look downright baffled.

I then expound on my initial statement: "It’s a bonus if you like it, but the main objectives are that your business needs are met and that your customers like it."

In almost all cases, they go along with this logic.

A few clients, however, will still have a personal need to like the finished product for themselves. But the smartest and most awesome types of clients get the concept, and I prefer to work with them. Why? Because they approach the design project with their business foot forward rather than let their personal tastes and biases control the process.

Personally, I approach each design project by looking at the needs of the users and the client first — so it only makes sense that I would expect the same from my clients.

The key difference between clients that need to love your work themselves versus those that go about the process in a much less personal manner all depends on who is paying the bills.

Where’s The Project Money Coming From?

Nine times out of ten, when a client is paying you out of pocket, they’re going to be much more hands-on throughout the process. Examples of clients that may be in this situation are startup entrepreneurs bootstrapping their company, who may have a powerful and very personal attachment to their business. It’s only human nature. They’re paying for it — or more specifically, they’re paying you for it — so they may want very fine control over the outcome. They may make the process too personal, because by the very nature of the situation, it is very personal.

I absolutely understand that situation. But the problem I see is this: The more a client takes the project personally, the less objective they become, and the more they tend to exert their own personal tastes towards dictating the direction the project takes.

On the flipside, clients who are merely overseeing the project on behalf of a large company aren’t paying for it themselves.

They will also have a compelling desire for the project to turn out successfully, but they tend to make it much less personal, and much more about what is good for their company.

Of course, those are all vast generalizations, but in my experience they tend to be true for the most part.

Making Your Clients Understand the Concept

Whether your client is a big multinational company or a fledging startup business, it’s your duty to make them see the forest rather than the trees when they are caught up in their own personal preferences.

If you’re designing a new website for a client — and you have done your due diligence at the beginning — you have probably asked many questions relating to their customer base and business needs, and are producing the website accordingly.

So what happens when you have done your job correctly and have created the perfect website that will connect with and engage their target market, but your client still doesn’t like it?

Ask Why

Ask them to point out specific parts of the design they don’t like. Then ask the client why they don’t like those parts of the design.

Then, ask the client if the parts they don’t like fail to fulfill the objectives of the project or if it helps achieve the objectives.

Often if you can get them to admit that although they might not like something, that it still matches with the objectives of the project, you will have a much easier time convincing them to go your way.

Ask for Examples

If you can get your client to point to examples of solutions that they like better, one of two things can happen. Maybe their solution is actually a better one. If not, collect your thoughts and explain why your solution is better for the job.

Point to Facts

If your client is adamant about adding an audio loop or splash screen on their homepage, send them references and resources that show why those are horrible ideas. Point to facts that show how these things affect user experience and usability.

If they want an overly complex logo, show them examples of successful logos in their industry, and point out what commonalities they all share (typically, good logos are simple and created using vector illustration software).

And if you can’t point to facts, then consider the alternative that the point of contention is debatable.

Know When to Give In

Having said all of that, there will come a time when it’s best to just give the client what they want.

Many designers will have a different point of view on that statement I’ve just made.

But in my experience, if I have a client that is firmly digging in their heels on an issue, I state my case, and leave the ball in their court.

As the saying goes, you have to pick your battles. Good design is definitely worth fighting for; and as for the rest, they don’t matter in the broader scheme of things.

Final Thoughts

While most of my clients have hired me for my years of experience and my body of work, some of them trust in these credentials more than others.

I always prefer to work with business people rather than people paying out-of-pocket, because they understand the end game in a much purer way.

While I love the situation where my clients love the finished product, it’s never my goal. If the project doesn’t hit home with their customers and business objectives, I can’t chalk it down as a success.

Related Content

• How to Fire Bad Clients
• 6 Things You Shouldn’t Tolerate in Projects
• 6 Tips for Effectively Dealing with Client Demands
• Related categories: Project Management and Productivity

Lead image source: "Workers at computers at the Huichon Machine Tool Factory in Huichon, Chagang Province"

About the Author

Wes McDowell is the Principal and Creative Director for The Deep End, a web design firm in Los Angeles. In addition to client work, he’s authored several books for freelance designers and co-hosts a popular graphic design podcast called "The Deeply Graphic DesignCast." Follow Wes on Google+.

The post Your Clients Don’t Have to Like Your Work appeared first on Six Revisions.

Let’s start with an observation: I love me some frameworks. As an alternative to completely reinventing the wheel, or styling a button from scratch, again, it’s hard to beat having an all-in-one solution to your basic HTML/CSS/JavaScript needs.

The problem is, well, it’s what I said right up there. Frameworks really aren’t an all-in-one solution are they? For all that we’ve made them modular and easy to customize, sometimes they just don’t have what we need.

It’s impossible to include every possible HTML snippet, element style, or javascript function one could possibly need. But then, that can also be a good thing.

A framework might have a lot of things we just don’t need. Some of my most frustrating work ever involved manually searching through Bootstrap’s massive CSS files to change some small bit of code that was wreaking havoc on my design.

Just take Bootstrap’s navigation bar component for example. It’s great, it works flawlessly, and it looks good. But if you try to change the way it looks in any big way, you have to change a whole lot of styles, and it takes a while to find them all. If it’s just a horizontal list of links at the top of the page that you want, it might be easier to code a new one from scratch.

But hey, the more popular frameworks out there, Bootstrap in particular, have a lot of customization tools, right? Yes, and that’s a great thing, but the default options don’t give you quite enough room to work.

Simply put, if your focus is on creativity, a massive framework is probably not the way to go. Sure, you can hack it, but that will take a lot of time.

One more problem that I’ve run into: JavaScript incompatibilities. As a guy who isn’t really a programmer, this was painful. 

Specifically, there was this one time when I tried to integrate a couple of jQuery plugins into a design based on Foundation. This isn’t a deal breaker all on its own, but it’s more time spent debugging.

Of course, this was some time last year. I honestly don’t know what would happen if I tried the same thing with the new versions of the same framework and plugins, but it is still something to consider.

In summary, there are times when frameworks simply aren’t the answer. This is where the toolkit comes in, and you should have one.

So what is a toolkit, and how is it different from a framework?

A toolkit, in the context of this article, is a self-collected and curated set of tools, snippets, plugins, and resources that allow you to code your projects that much faster. People will often find these resources over time and become attached to them. It’s a personal thing, and you really have to make your own.

Similarities

• Toolkits and frameworks are both largely made up of code designed to help you get started.
• Their job is to make your life easier, but they can’t and shouldn’t do all of the work for you.
• They both need to be maintained and updated to reflect the latest technologies in play. 

Differences

• Toolkits don’t make any design or structural assumptions, frameworks often do.
• Toolkits are usually made up of things that come from entirely different sources.
• It’s not just code, toolkits can include software, bookmarked links, and so on.
• Toolkits usually don’t have any “default files”, leaving you to pick and choose.

So when should I use which?

The advantage of a toolkit over a framework is its sheer versatility. As stated before, in projects where you intend to push the boundaries design-wise, a framework is often just too cumbersome.

That same quality is also the framework’s downfall in small-to-medium size projects. Are you building a promotional landing page? A one-page website? A simple blog? Then a framework is probably just unnecessary. You’re better off starting from scratch, and making every detail of the project yours. 

I’d go so far as to say — this is just my opinion — that most content-driven websites don’t need a fully-fledged framework. The exception would be for massive sites, like ars technica for example. For something that big you should use a framework, but you should probably develop it from scratch yourself to meet the website’s exact needs.

Where frameworks like Bootstrap and Foundation truly shine is in web application development and app-driven websites. It is in these projects that the relatively rigid constraints come in handy, instead of slowing you down.

How to make your own toolkit.

Making your own toolkit is a question of time, patience, and experience. I mean, sure, you could just go and do a search for “web design resources”. You’d get thousands upon thousands of hits, and in a couple of hours you could download more bits of code than you could ever possibly use.

But that is not a toolkit. That is a library that you’re never going to touch, because sorting through it would take far too long. We’re busy people, so I’ve taken a more organic approach to this: when I encounter a problem, I Google it.

Snippets are often too long to memorize, so if I find myself repeatedly searching for the same thing, I add it to my toolkit. The same goes for software: if it’s something you know you’re going to use a lot, you add it.

That’s not to say that you should never set aside time to just experiment with some new “toys”… you should. If you hear about a particular resource that could change the way you work for the better, by all means check it out. But remember that toolkits are better kept relatively small. You should focus on keeping only what you require to meet the needs that you encounter regularly.

My toolkit

Again, I’ll reiterate that toolkits are something you have to make yourself, to meet your own needs. Still, I’m going to list the things in my toolkit to give you a better idea of what to look for as you create your own.

A CSS pre-processor

CSS pre-processors like LESS and SASS do two things:  

1. They extend CSS basic functionality with variables, mixins, nested selectors, etc.
2. They make coding CSS faster.

If you haven’t already tried coding CSS with a pre-processor, I urge you to do so now. Right now. I’ll wait.

Bookmarks

A well-organized list of bookmarks can be greatly beneficial when you need something that you can’t save on your local hard drive. I bookmark things like CSS3 generators, sprite generators, color scheme creators, and other tools that help me to quickly accomplish tasks that take just that much longer when you do them by hand.

Semantic.gs: a layout engine

Grid systems are so 2000s. Ever since responsive web design became an actual thing, grid systems have become increasingly complex in order to meet the needs of myriad devices.

And what if you need a custom grid system? You could hit up one of the many online responsive grid system generators, but they’re limited.

The solution comes in the form of semantic.gs. Now, while its own author calls it a grid system, I choose to call it a layout engine, because it’s not one grid. It’s a tool based on CSS pre-processing (you can use it with LESS, SASS, and Stylus), and it allows you to generate any grid you like, fixed-width or responsive, on the fly.

All you have to do is change some numbers in a .less (or SASS, etc) file, and go.

Emmet – formerly known as Zen Coding

Emmet is a collection of plugins that turn abbreviations into full lines of code, in both HTML and CSS.

Basically, it turns this:

div>ul>li*3>a

Into this:

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

How cool is that?

Snippets

Snippets are those little bits of code that you keep using over and over again because they’re just so useful and you love them to bits, and you want to remember them all but youjust can’t.

Any good text editor usually has a way to store and easily retrieve them. Right now, my favorite bunch of snippets would have to be this one for WordPress. WordPress’ template functions and options for functions.php can be difficult to remember, so this is a life saver.

jQuery plugins

As I said before, I’m not a real programmer. So when any kind of advanced animation or UI functionality is required, but not so much to make a framework worth the trouble, I turn to individual plugins.

Some of my favorites are: 

• Scrollto.js: a smooth scrolling script.
• idTabs: for when you need any sort of tabbed UI.
• Supersized: for when you need a whole page slideshow.
• ResponsiveSlides.js: what the name says. It’s a responsive image slider. What more could you want?

It’s never too soon to have your own personal library of useful things.

What tools would you like to see in your toolkit? What resources couldn’t you live without? Let us know in the comments.

Featured image/thumbnail, mathematician’s toolkit image via Marc Kjerland.

3 Amazing TypoType Fonts – only $17!

An analysis of the most highly contested articles on Wikipedia reveals the controversies that appear invariant across languages and cultures

Unlike CSS2, which is a large single specification defining various features, CSS3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS2. In today's article, Rob Gravelle explores the latest and greatest ways to access CSS3 properties and their values.