All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even improve or customize them and collaborate with the original designer. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.

Using these fonts and the Google web font API is quick and easy once you know what you’re doing.

You have to drop a little bit of code in each HTML file that will use the font(s). It looks something like this (be sure to refer to the Google web fonts site for the latest code):

<link href='http://fonts.googleapis.com/css?family=Telex' rel='stylesheet' type='text/css'>

Then you have to put some code in your CSS file whenever you want to use the given font in a declaration. That would look something like this:

font-family: 'Telex', Arial, Verdana, sans-serif;

Again, be sure to use the code from Google’s site, not necessarily the code above in case it changes in the future.

Another thing you can do is download these fonts and install them to your machine so you can use them in Photoshop, Fireworks, etc.

The way the interface works for downloading, you just add one or more fonts to your “collection” by clicking the “Add to Collection” link beside each font in the list. Then you can hit “Download your Collection” to download the selected fonts as a .zip file.

Because of all the possible directions you can go, it’s important to have a clear understanding of what you want your website to accomplish, so you can make informed decisions about what to include and not include in your web presence.

When making decisions regarding your website, the answer almost always starts with these two words: It depends.

It depends on what you’re trying to communicate. It depends on who you’re trying to communicate to. It depends what technology your users prefer. It depends what you can afford. It depends how the site will be maintained.

I could go on and on with sentences like these. The reason this answer comes up over and over is because there are practically zero tools or techniques that end up being the right choice independent of anything else. Each one is right for a particular task, for a particular situation, for a particular person or group of people, and so on.

And all those particulars ultimately flow from the objectives of your website. What are you trying to accomplish? What’s the point of making the thing in the first place?

When you don’t know your website’s objectives, it’s impossible to know whether any decision makes sense. When you do know your website’s objectives, it’s still a challenge to make the best decisions, but at least you have a chance to succeed without relying on blind luck and chance.

What’s interesting is the direction this trend is going. It’s always been important to think about website objectives, but with the shiny new digital options expanding all the time, it’s likely to get even more important over the next few years.

I thought I’d write up a little bit of what I’ve learned just in case it might be helpful to anyone else. To start, I want to look at the very first steps in building a Shopify theme.

As with learning anything new in web work, the first thing I needed to do when I started working in Shopify was to get the lay of the land. That would eventually include learning about Liquid, Shopify’s theming language, but before getting into that, I had to get my head around the file structure of what comprises a Shopify theme.

Basically, a Shopify theme consists of three folders:

• Assets folder
• Layout folder
• Templates folder

Understanding what these folders and the files in them control is where it all starts when you get ready to build your first Shopify theme, so let’s get to it.

Assets folder

The assets folder is where you put all your theme images and CSS files. Theme images do not include the product images for your online store. All those images are uploaded through the Admin panel. Theme images would include page backgrounds, logos, banner images — basically any images that are used in the theme itself.

Layout folder

The layout folder contains only one file — a very important file called theme.liquid. On the Shopify Wiki, this file is referred to as the theme template. This is where you define sort of the frame that will surround the content for each page on your Shopify store. I’m sure there are a lot of ways you could approach theme.liquid, but the way I’ve done it so far is to use this page to set up a header and a footer that I want to appear across the whole store environment. So what goes between the header and the footer? This line of code:

{{ content_for_layout }}

That one line of code calls in what we might call the guts of the different pages on a Shopify store. On a product page, {{ content_for_layout }} will bring in the code you want to use on the product page. On a blog article page, {{ content_for_layout }} will bring in the code you want to use on a blog article page — and so on. So where do you write the code for product pages, blog pages, collection pages, etc.? That’s where the templates folder comes into play.

Templates folder

The templates folder has a number of files in it. You don’t have to use all of them but some of them are product.liquid, blog.liquid, article.liquid, collection.liquid, and cart.liquid.

The code you write in these files determines what will show up in the spot where (( content_for_liquid )) is placed in the theme.liquid file as discussed above. The names are fairly self-explanatory: blog.liquid defines the blog index page, article.liquid defines a single blog article, cart.liquid defines what a user sees when they view the shopping cart, etc.

As the title of this post implies, I’m just trying to provide a simple overview of how the three folders of a Shopify theme are organized. There’s much more detailed information about these folders and Shopify themes in general on the Shopify Theme Guide page of the Shopify Wiki.

We discussed the home page for quite a while, and it was easily one of the most productive conversations I’ve ever had about a home page of a website. The cool thing is we barely talked about the look of the page at all.

We were talking about what content needed to be, and we determined that the prime real estate on the page had to be dedicated to accomplishing 2 particular goals. Not coincidentally, these 2 goals were also the goals of the website as a whole.

In other words, we knew the overall goals of the website were A and B, so we needed to determine what we could do right up front on the home page to communicate the ideas that were at the heart of those goals. Eventually we got into talking about particular tools and techniques: “Maybe we should put an image slider here. What if we do some large text here?” And so on.

We figured out how to organize the page, what to display, where to display it, and how to display it. We eventually talked about the look too. And when we did, the ideas came fairly easily, because they flowed naturally from what we were trying to get across with the content on the page.

Most people come into a website design project way more concerned with how the home page will look than what it needs to accomplish. In fact, I’ve seen plenty of cases where people hardly cared about other parts of the site as long as the home page looked good.

I can see where they’re coming from. Home pages are important, to say the least, and the client in the above conversation ended up with a nice looking one. But beyond the aesthetics, I think he ended up with a really effective home page because he talked to his web designer about what the page should accomplish, not just what it should look like.

Will it be successful? Will it crush Facebook or kill Twitter? I don’t know. My hunch is that people who really like Facebook will still prefer Facebook and people who love Twitter will still prefer Twitter, but I haven’t used Google+ yet and I’m not that into making predictions.

It’s hard to play fortune teller when it comes to the social media landscape. MySpace used to be huge, but it sold the other day for “only” $35 million. If that sounds like a lot of money, consider this paragraph from The Guardian:

Rupert Murdoch’s News Corporation bought Myspace in 2005 for $580m. In 2006 Google signed a $900m deal to sell ads on Myspace; by 2007 it had 300m registered users and was being valued at $12bn. But the social network was subsequently crushed by Facebook, which launched a year after Myspace.

With that history, $35 million sounds like a joke. (You can find a more complete history of MySpace’s valuation in this article from The Atlantic.)

With the social media world being so fluid, it’s important to have your website (the stuff at your domain name, like www.goodwebwork.com) as your home base. That way you can do what you need to do with all the third-party social media sites but always have a place where people can find you year after year. That’s your website. It’s still useful. Maybe more than ever.

Whatever words are chosen, they aren’t the real words, and for that reason it can be difficult to get a realistic feel for the design of the website while using dummy text. The same goes for images. A low resolution placeholder photograph or a gray rectangle can show you the layout of a website, but it’s not the same as seeing the website.

Some people say you should never use dummy text, because real content is too important to your design decisions. I believe this to a certain extent, but using dummy text is often necessary for practical reasons. Whether it’s a lack of resources or a situation that just can’t be changed, there are plenty of times when getting the real text and photos prior to starting visual design work just doesn’t happen.

Those who do need to use dummy text often find that when a design is being invented around all those unreal words and images, there might come a point where things just get stuck. This is often characterized by the designer making tweak after tweak while the client repeatedly responds with some variation of “Hmm, yeah, that’s still not quite right. Something is missing.”

Bingo. Something is definitely missing.

When things get stuck like this, it almost always means you’ve reached the point where you have to start bringing in real content. Otherwise it’s like trying to judge a movie with real actors but no real scenery and no real script.

The difference between a placeholder photograph and the real one can be huge. And when you bring in the real content, you might find the dimensions need to be a little different, or a lot different, or that certain messages demand to be placed differently than you envisioned before the words were real.

Anytime it’s possible to have all of your content up front, you should. If that’s not possible, just keep in mind that getting stuck in the placeholder phase doesn’t mean it’s time to quit or find a new web designer. It probably just means it’s time to get serious about your content so you and your designer can figure out what this website is really going to be. That’s when the real design happens anyway.

Generally speaking, this is not a good thing.

The web does change a lot, but part of the trick of building a good website is building something that can evolve, adapt, and shift once it’s up and running. It’s hard to put a finger on how long a redesign should last, because so much depends on the specific situation, but if you can make one last 3 or 4 years, with ongoing tweaks along the way, that probably means you and your web designer did a good job planning and building.

Sometimes you can even make a design last longer than that. If you do, and the site is meeting all your needs, don’t freak out about the look being stale and automatically assume you need to “breathe new life into it” — whatever that means.

If it’s been awhile and what the site needs to do has changed since launch, you might need not need a redesign so much as a realign. For more on that, check out Cameron Moll’s article Good Designers Redesign, Great Designers Realign. The article is almost 6 years old now, but it’s still relevant and useful.

One reason redesigning a website every year tends to be a bad thing is because it probably means you aren’t getting the benefit of having a solid web presence and implementing a plan to use that website to support your business day in day out. Redesigning all the time means you’re constantly stopping and starting, never gaining any momentum. Instead of spending time and money to build a site and get some return on the investment, you end up in a constant cycle of throwing money at new logos and looks without ever getting any payoff.

In this example, both parties are talking about a simple 5-page website, but they’re thinking of 2 very different projects with 2 very different end results.

It’s not about one or the other of these parties being right or wrong. It’s just a miscommunication. That happens, and sometimes it can’t be avoided, but better communication on the front end can help both the client and the designer get the same picture in their heads right from the start.

Here is a quick (and non-exhaustive) list of questions to think through whenever you get ready to begin a web design project. Answering these questions can help you clarify what you are looking for from a designer.

You might even want to send these questions and your answers to a prospective web designer when you contact him/her for an estimate. You’re certainly welcome to do this (although not required to) when you request an estimate from me.

The first question on this list is really the most important one, but after that they are in no particular order:

• What do you want the website / web presence to accomplish?
• What are the 3 most important outcomes you would want to occur when people visit the site?
• Are there different types of audiences the site is aimed at or just one audience in particular? What are the audiences?
• What does your business do?
• Do you currently have a website? If so, can you send a link to it?
• If you do currently have a website, in what ways is it failing to accomplish your goals?
• How would you describe the feel or tone you want to the website to convey?
• Can you send links to any sites that you feel have the type of look and feel that you would like the website to have?
• Will the website need a blog?
• Will you, as the client, need to be able to make updates to the content of the website on your own? If so, how extensive will those changes be and how often will they need to happen? Which content will need to be updated? All of it or just certain parts?
• If you do not need to be able to update the site, is that because the information will rarely/never change or because you want to pay the web designer (via hourly fees or retainer) to do updates on an ongoing basis?
• Do you already have photography for the site? Will you be asking the web designer to procure photos for the website? If so, what kind of photographs?
• Do you need a logo designed for the website or do you already have one?
• What types of information will need to be conveyed on the website? Company history? Description of services? A way to get in touch? Photos and bios of all company employees? Will describing the services take 3 or 4 paragraphs total or are there 40 different services you offer with each requiring 700 words?
• Do you want customers to be able to purchase products on the website? In other words, do you want an e-commerce or online store component of the website?

Again, this list is not exhaustive, but I hope these questions help you as a small business owner do 2 things before you really get rolling with a web design project: 1) slow down and give serious thought to your business’s website needs and goals 2) help you communicate those needs to a web designer.

Better communication almost always leads to better work, and it usually makes the whole website design process more efficient, which can often save money.

Instead, focus on what your business needs to get done in the real world, and choose what you do on the web in order of which things make the most difference in accomplishing your goals.

This might mean using a mix of social media tools that supplements your website and forms your web presence. But in terms of your website itself, it’s important to keep in mind that it’s just one website.

You might see all kinds of cool things on other websites that you want to incorporate into your site, and you can definitely combine the best of those into what you’re doing, but some things will prove to be mutually exclusive and you’ll have to make choices. Sometimes doing A means you can’t do B. Sometimes doing A means you don’t have to do B. And so on.

There’s nothing wrong with having to choose. It just means you need to think about each decision and pick A or B based on what’s right for your site, not how cool it looks on somebody else’s site.

It’s common for a web design client to see something on another business’s website and say to his designer, “How come we aren’t doing this on my site?” It’s a good question to ask, but it’s also a good question to answer. The designer might reply and say, “well, we’re doing this other thing that accomplishes the same goal, and the reason we chose that route was because this method was better for our purposes based on X, Y, and Z.”

You have one website to work on, and the goal is to make it the best website possible for accomplishing your goals. Comparing it to other sites that may not be aiming toward the same goals can often send you down the wrong road. Understanding this allows you to focus on what you’re doing instead of getting distracted by every single thing that happens everywhere on the web.

None of this is to say you shouldn’t stay informed about things you could do to make your site better. And it’s not to say you should just build a site and let it sit there gathering dust and never make improvements. Plenty of new things are relevant, and any number of variables inside or outside your business can change in ways that require your website to evolve. But it’s one website, and its evolution should be based on serving the needs of one business — yours.

I happen to agree with the reasoning behind his decision, but what I want to draw attention to for web design clients and other non web geeks is that Chris took the time to think about this stuff and decided to go against what seems to be the conventional wisdom.

If you’re an experienced web designer or developer, you might say it’s obvious that we have to think through these things. Seasoned veterans know this kind of thoughtful decision-making is as much a part of design as creating images in Photoshop or toiling over CSS, HTML, PHP, and all the other acronyms.

But for a beginner or a web design client, it might seem risky or just wrong to do something different from what “everybody else is doing.”

In some cases, doing what everybody else is doing makes a lot of sense. When 99.9% of websites have their banner linking back to the site’s home page, that becomes a convention. Users start to expect it, and there’s no particular disadvantage to doing it, so that might be a good convention to follow.

But sometimes what everybody else is doing doesn’t make sense for you and your web presence. Sometimes it doesn’t make sense for anybody’s website, and people just haven’t realized it yet.

This is bound to be confusing for somebody just getting started with web design work. Here we are saying that sometimes you should do a certain thing because everyone else does it, while at other times, it’s best to find your own way, no matter how far off the beaten path it leads.

So how do you tell the difference? Here are a few ways I’ve found helpful.

Question the answers

Let’s go back to Chris’s article for a second to grab an example. Why would somebody use sharing buttons on a website? One answer Chris cites is “to remind people to share.” When you come across an answer like that, you can just accept it and say “Oh…right…yeah.” Or, you can question it, which would go something like this:

“Well, OK, but I wonder…do people really need to be reminded to share? Don’t most people who use social media have Facebook and/or Twitter open all day? If people like to share stuff so much, then wouldn’t it follow that they don’t need to be reminded to do it? And if they don’t like to do it, wouldn’t I be kind of a pushy jerk to try to make them do what they don’t want to do?”

You might find fault with my specific line of questioning, and that’s fine. The point isn’t what questions I’m asking. In some ways, the point isn’t even which questions you ask. The point is to take time to ask any questions, to think rather than just following the line even if you don’t know where it’s going.

Don’t forget the downsides

One thing that seems to happen a lot on the web is that we look at the pros and ignore the cons. I’m not exactly sure why that is, but I suspect one reason is that a lot of web tools are “free.” When something appears to provide a benefit and doesn’t cost money, it’s easy to say, “well, it may help or it may not but it couldn’t hurt.”

But sometimes there is a disadvantage and the only reason we don’t see it is because we don’t bother to look.

Sharing buttons are probably a great example of this. I suspect plenty of people have uttered the phrase “well, it couldn’t hurt” when adding sharing buttons to a site, but Chris’s article lists at least 5 downsides to using them. Again, the point isn’t what you think about sharing buttons. It’s that fueling all our decisions with the upsides and never considering the downsides is kind of unrealistic. Heck, if downsides didn’t matter, I’d eat a slab of ribs and a quart of ice cream for lunch at least twice a week.

Do what works for you

Finally, once you decide a particular web idea makes sense in general, it’s worthwhile to consider the specifics of your business and your web presence to determine whether the idea will be a good fit for your situation. There might be something particular about your product or your audience that causes something to be totally wrong for you when it’s right on for everybody else, or vice versa.

It takes a while, but if you give some real thought to each decision that comes up in running your web presence, eventually you’ll develop a feel for which things are best practices and which things are trends you’re better off bucking. This will allow you to get ahead every now and then instead of always being late to the party. More importantly, you’ll be able to build a web presence that accomplishes your goals, not everybody else’s.