I’m pretty handy around the house, too. I can do basic plumbing stuff, a little electrical work, I’ve painted entire houses—I’ve even replaced a thousand square-feet-worth of carpet with bamboo flooring—but I know that if my A/C compressor went out, I wouldn’t have a clue what to do. I’d be on the phone in a heartbeat.

So, let me ask you this: Do you get flustered filling out web forms? If I were to give you the server settings to an email account, could you log in to gmail and get it to send and receive from that address? If I told you to clear out the cache in your browser—or on your smartphone—would you have a clue what I’m talking about?

Because how comfortable you are with things like this will tell you a lot about just how you’re going to do with the DIY website approach. It’s not just clicking buttons – you have to know how to configure domains, web hosting, email, plugins, themes, newsletter services, social media accounts… for starters.

If everything I just said made sense to you, great. You’re probably going to be just fine. But if any of this made you run for the hills, then know that trying to build your own website is not going to be a fun little adventure for you, or a stress-free way to save yourself a few bucks.

Pros are pros for a reason.

There’s a reason to pay a designer who’s done this over a hundred times to guide you through the process. Because not only do you not know what you don’t know, you don’t even know to ask about it. But your pro does. And that kind of expertise is worth paying for.

Hey, I get it – we live in a DIY age. YouTube has tutorials on all kinds of stuff. And makers of DIY-based themes, plugins, and services love to tell you how easy it is to “build a site in twenty minutes!” using their handy dandy tools. It’s easy to think you can click a button here and there and come out with a site that’s flawless.

But a mechanic would likely say that replacing your brake pads is a piece of cake. And a contractor would say the same thing about flushing sediment out of your hot water filter or re-grouting bathroom tile.

If you’re already well-steeped in code, or you dabble with web tech on a regular basis (and no, playing Candy Crush on your iPhone doesn’t count), then the prospect of noodling around with HTML & CSS until you get things looking professional might just be fun for you.

Even if you think you are the DIY website type…

Here’s the thing to remember: it’s for your business.

If you fixed up a screen on your house with a little duct tape, that’s not the worst thing in the world.

But how would you feel if you went to your doctor’s office and saw she’d done the same thing with her office window? Would it change how you felt about her as a professional? Appearance does matter.

As a professional, you can’t afford to have a janky website.

What will prospective customers—people who are considering paying you money to solve a problem for them—think when they see your hacked-together, paint-by-numbers website?

Believe me, there are lots of things I’d love to just DIY in my life. But when it comes to business, there are some things worth paying a professional for.

The post Should You DIY Your Website? appeared first on Bright Coconut.

But when do most people think about making their website fast? Once it’s all wrapped up and done, when they find out it’s not as fast as they’d hoped.

The bummer is, while the things you do to speed up your site on the front end benefits your readers, it’s the stuff on the back end that Google cares about.

So, to really make your speed of your site matter—to search engines as well as to the humans who’ll read it—you’ve gotta pay attention to both sides of the equation.

To that end, let’s take a look at the top three factors I see time and again make the biggest difference to your website’s speed.

(Are there more than three? Sure. There’s always more. It’s the internet, after all. But if you handle these, you’ll be 95% of the way there.)

Hosting: Don’t be a sardine

Most people look at one thing when choosing a web hosting company: price.

Bad, bad idea.

Choose a cheap host, and your website performance will suffer, guaranteed.

Why? Because in order to make money, most cheap hosts will overstuff their servers, packing as many accounts on a server as they can, like sardines in a can.

As you can imagine, that hinders performance, slowing down all the sites on that server. Why? Because the systems those sites rely on are fixed, and the “pipes” running in and out are the same size regardless of how much is being asked of them. So, all those sites have to compete to send and receive all their data underneath the same umbrella of resources (cpus, bandwidth, etc.).

However, there are higher quality hosts out there that manage their servers much better. Because WordPress powers a third of the websites on the interwebs, a handful of smart companies have tweaked their servers specifically to the demands of the WordPress environment. Unsurprisingly, they’re called “managed WordPress hosts”, and sites running on them tend to be much, much faster.

Here’s the shocker: in some cases, you can get high-quality, managed WordPress hosting for not much more than cheaper, smushed hosting (that’s what I call it). Awesome, right?

My favorite managed WordPress host and #1 recommendation is Flywheel, hands-down. And they start at $15/month, which is amazing. (And yes, my site is on Flywheel.)

If you can’t swing $15/month,

• if it’s for your business… really? It’s for your business. Drink a couple Americanos instead of Frappucinos, and you’re good.
• if you really need to go budget, try SiteGround. Their shared plans are the best I’ve seen, and they’re the only budget host I recommend.

Now you’ve got a fast host. Good job – you’ve just solved at least 75% of your problems.

Optimizing your Code: Start lean, stay lean.

But all that stuff slows your site down, whether you use it or not.

Instead, my approach is to use a clean theme that only has what you need, and nothing you don’t. If we need to add something, we do. And if we can take something out, we will. For instance, I have certain code snippets I add to every site I build from the get-go that help reduce cruft.

A great example here is web fonts.

Not only do many themes add every option under the sun (and you only end up using two, maybe three at most), but some themes add fonts that get downloaded every time someone loads your site. Unless you or your designer disable those, you’re wasting bandwidth, time, and slowing down other things from loading.

When it comes to plugins, the same principle applies: only add it if you need it, remove it if you don’t.

There are lots of ways to use simple bits of code instead of bloated plugins to achieve the same end result. If you’re not comfortable adding those sorts of things, I bet I know a guy who does…

Optimizing your Content: Squeeeeze…

But let’s say you have a photo of you on your site. Even with amazing caching, which would load faster?

• A photo uploaded straight from your digital camera, which is probably around 5000 pixels wide, weighing in at around 3-4 megabytes?
• The same photo, cropped exactly to the largest dimensions your site requires, and compressed to remove extraneous data that no one ever sees?

No surprise there. Optimized images—both cropped and smushed to get rid of the extra bits— are a fraction of the original image’s file size. We’re talking 50-75% faster, in many cases.

That can reduce loading time from 15 seconds down to less than a second. And that’s just one image.

Repeat that effect site-wide, and… yeah, you get the idea.

Speed: There’s so much you can do

From starting with a fast host to eliminating cruft, reducing file sizes and caching the whole thing, a speedy site is within your reach.

And if you need to speed up your site but don’t think you can handle it yourself, feel free to get in touch.

The post Top Three Website Hacks for Achieving Ludicrous Speed appeared first on Bright Coconut.

• A clear vision?
• Technical know-how?
• Strong coffee?

No surprise cats jumping out of unseen bags, here, but after nearly a decade of building websites for clients full-time, I’d have to say it’s communication. (Good coffee does help, though.)

The best projects I’ve had are the ones where the communication between designer and client(s) is clear and streamlined.

But hey, I’m guessing I’m not preaching to the choir, here – you’re most likely already on board with the idea that communication is important. The only question that remains is, “How to improve it?”

Enter Slack.

After many exhausting projects where we relied on email for all communication, I knew I needed a better alternative.

I tried using collaborative to-do list software, complex project management apps, and at one point I even set up a private forum with dedicated channels for each project. You name it, I tried it.

What I found was that it wasn’t so much the tasks that needed the attention, it was the interaction between me and the people I was working with. To be able to converse freely about the project, rather than just ticking boxes and marking off items on a list, really allowed us to get to the meat of the matter, and create the site they were really looking for.

The Top Three Things I Love About Slack

1. Channels

You know what really sucks about email? Losing things.

It’s too common to get an email with five different actionable items in it, along with three questions, two corrections from last time, and it’s usually bookended with casual banter (because we’re humans after all, not problem-solving machines). Which is great, don’t hold back – but by the time the questions get answered, updates on the action items happen and the banter is returned, you’re looking at a potentially looong email.

Then that email gets returned with a whole new set of items, answers, more questions, and before you know it, you’ve got a huge mess on your hands.

Wait – did you notice you missed one of the items? Because you did. And if you didn’t, chances are they did.

And then days, weeks, or months down the line, you’ve got something itching at you, but you don’t know what it was… oh, right, that thing you forgot. Too bad they forgot it, too, and now it’s left undone.

What’s a person to do?

Stop using email. Let me clarify: email is great for the “getting to know you” phase. But when it’s time to get things done, you need a better system.

Slack has channels to give you the focus you need.

Slack lets you set up different channels – like individually chat rooms – for each aspect of your project, which keeps your conversation tight and focused. For example, all my projects start with channels for Administrative, Design, Content, Front Page (because the front page of a site is usually pretty unique), etc.

One of the great things about this is that if you’re away from the project for a while, it’s easy to drop back in and see what, if anything, has changed, and get caught right back up again.

Keeping conversations on track? Sign me up.

2. Archives FTW

Ever have to search back through your old emails to find a particular nugget? Lame, right? First you’ve gotta sift through all the emails that aren’t from the person you’re looking for, and then scroll through all the replies (which usually quote every message before it… you know the pain.

Slack archives are easy to search, easy to filter, and are all hotlinked to the original conversation, so you can find what you need, fast.

3. Drag it in. Drag it all in.

You know what’s great about file sharing? Nothing. Not the way it’s typically done.

But with Slack, just drag ’em in.

• Got images to share? Drag ’em in, and they’ll upload to Slack.
• Got copy for your pages to share? Drag ’em in. What kind of file are they? Doesn’t matter – it’ll work. But they’re in Google Docs/Dropbox/somewhere else already! Sweet. Drag (or paste) the link in. It’ll work.

And I’m just scratching the surface here

What if you’ve got people on your team who you don’t want to have access to everything, but still need to be in on part of the conversation? You can limit what channels someone belongs to, and they won’t even see the others.

If something would be easier said than typed, and you want to hop on a call with them, you can talk via Slack. It’s built right in. Video chat, too, if that’s your thing. (Personally, I like to stick with voice only – I work from home, and no one wants to see if I’m my pj’s. Who am I kidding, of course I am.)

Slack also integrates with a ton of other services/apps.

• Want to do a conference call? Use Zoom (or GoToMeeting, etc.), and you can start the meeting from right inside Slack.
• Want to get updates from your team on certain action items? In email, that’d kill you – all the replies zinging everywhere? Hurts my head just thinking about it. Instead, integrate with Standuply. Done.
• Want to skip all the document-dragging and use Google Apps, or Dropbox Paper? Those integrates with Slack, too.
• Want to cut loose and have some fun from time to time? Add Giphy, and you can embed sweet gifs with just a keystroke.

via GIPHY

Look, there are so many ways to integrate Slack with other apps, it’s crazy. I tend to only use a few, but that’s because of how I work. Depending on you work, you might end up using a bunch of them.

Slack is so darn awesome, I’ve had a few projects where I transfer ownership the Slack board over to the client at the end of the project so they can start using it with their entire company. It’s just the bees knees.

If you haven’t tried Slack yet, give it a shot.

No, I’m not being paid to say any of this, and no, you’ll find no referral links anywhere (I don’t even know if they have them).

But I’m sold on the awesomeness of Slack, and my guess is you will be, too.

Have fun getting more done (and having more fun).

via GIPHY

The post How Slack Changed My Projects Forever appeared first on Bright Coconut.

What I found when I looked underneath the hood was a valiant first attempt at coming up with a system of managing their typography. They had made each of the standard headings a different size, color, and font so they could pick a heading and be done with it (I'll explain what these "headings" are more in just a sec). Unfortunately, it left a lot of instances where they had to modify those headers with the WordPress post editor — adding colors here, changing sizes there — which ended up making their site inconsistent from page to page. Worse, it was hard to remember what styles were used where, so going forward would bound to be even more tricky.

Not a fun downward spiral.

A quick primer on web typography

I'm going to give you the "nutshell" version here so we're on the same page. Don't worry, I am going to spare you all the technical stuff you don't need to know, and just give you the simple basics. (You can thank me later… I accept chocolate.)

When Google looks at your website, it doesn't care (or cares very little) about what your site looks like when it tries to evaluate what's important. It simply looks at the HTML tags you are using and ranks the content within them based on that hierarchy. (That's a really loose and fast statement, but it'll do for now.)

What that means: Headings on a website use a simple number system: H1, H2, H3, etc. down to H6. The lower the number, the more important Google ranks it.

Okay, egghead, slow down! What are headings?

When you look at this post, what do you see? There's a title up top, a whole bunch of paragraphs, and then in between the paragraphs, you'll seeing little "subheadings" – those are headings. (No need to use the "sub" part. Just headings.)

The most important of those headings is your title. It tells Google (and humans) what the post/page is about.

From there, the other headings give more direction as what's in the paragraphs. And then, there's the paragraph text itself.

Google pays attention to headings because it knows people will use metaphors and descriptive examples in their body text, so it's going to be harder to rely on… but most of the time, the headings are pretty big clues as to what's going on. Signposts, if you will.

But how does Google know what's what, if it's not looking at the pretty colors and sizes?

Google only looks at code, not typography style. What's important is the hierarchy of the headers you use.

How do I know which ones to use?

Google doesn't like it if you use more than one H1 on a page. H1 tells Google, "Hey Googly, this is the most important thing here." That's why it's used for your title (and why it's a good idea to craft strong titles… but that's a post for another day).

Your best bet is to stick to H2, H3, and H4, and that's it. Otherwise, you will make paragraphs, and use block quotes and lists. And that's about it.

But how do I turn text into a heading?

To make headings, you'll want to code them in directly, or use the drop-down selectors in the editor to turn text into headings. If you just make your headings out of regular paragraphs but make them bold (don't say you don't – I see this every day!), that's not giving your readers—or Google—much to go on.

Where the nuance comes in

You could create your content using just the three H-tags I've described, along with paragraph text, and you would be set. But, we are rarely that content, are we?

In most of the designs I have built, there is a serifed font and a sans serif font, multiple colors, and sometimes different font weights as well. So, what happens is that people decide that instead of a typical H3 to introduce a new service, they want to make that H3 a different color than the other H3's. And then over here, they want to use a different font… and over there, something a little bigger or smaller than over here, etc.

And hey – customizing your site is not a bad thing. Where the train goes off the tracks is when there's no typography system in place to handle these kinds of changes.

What (unfortunately) most people do then is they go into the WordPress editor, select the text they want to change, and then use the little fiddly bits in the toolbar to make it the color and font they want.

Is that so wrong?

Hell yes, it is.

The problem there is twofold:

• they may get the color wrong from one page to the next, which makes their site ugly and inconsistent, not to mention confusing…
• and worse, now there is code written into their content which controls things like color, font, weight, etc. These are called "inline styles", and they are little demons that will wreck the look of your site over time.

What's wrong with inline styles?

There are two things horribly wrong with inline styles. First, the chances of introducing inconsistencies into your site increases over time. The more inconsistencies you have in your website, the more likely it is that you will appear unprofessional. And that is no good.

But even if you can dismiss the potential unprofessionalism, there's a worse problem at hand.

Change.

What happens if you want to change fonts, colors – or even your entire theme – in the future? It happens all the time. Heck, I would say it is inevitable.

Are you going to remember where you manually selected individual colors and font families in old blog posts stretching back years? Do you really want to pour through all of your pages and change all those by hand? Of course not. And, as a designer, it's the last thing I want to do either.

Classes to the rescue!

Instead of allowing these types of inconsistencies to creep into your website, you can use specific CSS classes to future proof your content. Here's how:

Let's say you're using two fonts on your website. One is a sans serif, and the other is a serif. If we create a CSS class for you called "serif" and another called "sans", then whenever you want to use the other font from what is normally specified, you simply add that class to that heading (or paragraph, or whatever), and voilà – it changes instantly.

This way, when you want to change fonts on your entire site in the future, or you change your design entirely, all you have to do is change which font the "sans" and "serif" specify, and Boom! Every instance is changed everywhere in your website, instantaneously. No pouring through old content, no leftover inconsistencies.

WYSIWYG "website builders" are NOT the answer, just a different problem

Some people read this kind of post and their eyes glaze over. "I just want to use a WYSIWYG website builder (WYSIWYG = What You See Is What You Get) so I don't have to mess around with css. If I want something in Comic Sans, I just go in and make it Comic Sans. Done."

Yeah, well… some people think letting their friends give them a tattoo is a good idea, too.

Control is important, yes. This entire article is about giving you more control over your website’s typography. But — and it's a big, hefty but — not at the expense of making your life easy.

I don't know if you've ever had a chance to use one of those kinds of interfaces before, but what seems like a huge convenience at the outset often turns into a royal pain in the derriere, because in order to change the way something looks on your site, you have to change every single instance of every single item you want to customize every single time. Talk about a breeding ground for inconsistency.

Case in point: I was recently doing edits on a website (that I did not build, just to be clear) and the theme uses one of those WYSIWYG interfaces. The owner asked me to change the styling of a couple sections on their homepage.

No problem, right?

Ehh…

If it was a typical theme that used typical CSS, I could've been in and done in less than fifteen minutes – more like five. But because they used a WYSIWYG website builder, where every change had to be done manually in multiple places, saved, previewed, tweaked and adjusted, etc., what should've been five minutes worth of customization took almost an hour.

Yeah. An hour. I wanted to cry. For both of us.

Look, I'm a big believer in giving my clients control over their websites. And, I'm also a big believer in efficiency and making your life easy. I know "website builders" seem appealing – to have the freedom to choose from every possible font combination and every possible color, every possible border, etc. at any given time sounds like a good idea. But when you look at it in terms of ease of use and consistency, I think website builders are an absolute menace, and should be avoided at all costs.*

* Quick clarification: when it comes to page layouts and the like, I will admit I do like plugins like Beaver Builder for ease of use. But for typography changes, I still think it’s best to keep it in the stylesheets. And if you want to use a page-building plugin, a) Beaver Builder is the best I’ve seen so far, and b) there are ways to accommodate its use in very positive ways. More on this in a later post.

Back to our original client…

When I logged into their site and found the range of styles they had tried to produce, I realized that what they needed wasn't a bajillion different header styles. What they needed was:

• a type scale that gave them the visual variety of size they were looking for
• the ability to easily change the font family and color on the fly (without messing with inline styles)
• and, have it be a simple, easy to understand system that they wouldn't struggle against, while providing the kind of consistency and future proofing that would make them happy for years to come.

By creating designated CSS classes for all the variations necessary, they can mix and match whenever they feel the need to break from the standard, and insure themselves against future headaches.

Type scale?

In case you haven't been able to tell by now by my designs and the way I talk about typography, I absolutely love it. I think well-designed type is some of the sexiest stuff around, right up there with a good espresso and well tempered chocolate.

Good thing for all of us, there are folks out there who feel the same way.

A few months ago, I came across a website called Type Scale, created by Jeremy Church, which does an amazing job of calculating all the sizes and CSS declarations you need to control the fonts on your website in a variety of scales, from "minor second" to "perfect fourth" to "golden ratio," along with Google font previews and the whole 9 yards. It's amazing, and I bookmarked it immediately.

When this project came around, I knew Type Scale would give us what we needed – a properly balanced set of sizes to set their headings to that would make their site look sharp and clean.

We went back and forth a bit, eventually settling on the "Major Third" scale, and voilà – the sizing issue was done.

From there, we used their logo colors to create classes for the colors they'd need (dark, light, and accent), and a "sans/serif" set like I mentioned above to cover their two font families.

With those variations in hand, they can now harness all the potential of a balanced, orderly typography system to highlight their words and offerings in whatever way they want, quickly and easily, along with the confidence in knowing they really can't screw anything up.

What's that saying about "The Cobbler's Child"?

I realized once I was done with the edits on this client's site that the typography system I was looking for for many years had just all come together. I also realized that my own site needed this same help.

Here's a screenshot of what my Sites page looked like before I instituted this new system:

The mishmash invaded my site, and I shudder to admit it. But hey – always forward!

I went into an unpublished page and created a sampler of some custom lorem ipsum text in all the various typographical headings and variations I would need. With my old styles, here's what it looked like:

I went to type-scale.com, played around with the options a little bit, instituted the new styles into my stylesheet, and came up with this:

Success! I cleaned up my stylesheets and refreshed the Sites page and saw this:

I decided to adjust one heading and add a little bit of extra code to skew that one section to look like the rest of the page, and here is the final version… ta da!

A typography system for the future

I'm chuffed, honestly. I'm going to use this new system on every site I do from now on. And if this looks like something that you are interested in implementing into your own site, feel free to drop me a line.

The post How to Make Your Website’s Typography Easy to Use appeared first on Bright Coconut.

But the #1 piece of inspiration is why the site exists in the first place. This topic could take books to cover (and I'm sure there are plenty), but to make it simple:

• You have a vision.
• That vision means interacting with other people.

A Note: If your vision doesn't involve interaction, then you don't need a website for it. Just go do it.

If your vision includes sharing, communicating with others, offering products/services/connections/whatever, then you need a site.

When your dream touches others in some way, that's when your ideas really start gaining traction.

So, as you brainstorm ideas surrounding your vision, don't worry if they're a mishmash at first. Until the dream crystallizes, it's going to. And that's cool. Just go for it.

A Quick Recap

Let's start with a quick recap of the big concepts from the last post, and then dive into the inspiration part. (If you want more details about these first few categories, go check out Part One.)

The site I'm building for this series of posts is my personal site. I actually started adamkayce.com back in 2006, or somewhere around there, and while it saw many iterations and evolutions, I recently pulled it down because I hadn't blogged on it or updated it for a few years, and it was just floating out in space.

However, I'm rebooting the site now because I'm working on a series of fiction books, and I want it to be the home for my business as an author.

So, let's start from the top with the Big Carrot…

Most Wanted Response

Buy every single book I ever write! Just kidding – kinda. The truth is that I want to build a community of readers who love the kind of fiction I write (hint: genre = fantasy, with a decidedly mystical flavor), so my MWR is for people to join the community by signing onto my mailing list so they can get a free book. I'm offering a free novella to people who sign up so they can see if they like my work enough to keep reading. The novella I have planned is a part of my first series, and will only available through my mailing list (not for sale on Amazon, in other words).

Visual Design

I'll jot ideas down when I get inspired by something, and over time, a focus for the site's look will come together.

Not surprisingly, I like clean, bold design that most would call "minimalist", but that's pretty far from the typical fantasy author's site. I've been keeping a few notes and ideas as they come to me, but mostly it’s a growing sense of a feeling more than a specific look.

Organization

I brainstormed using the guiding principle of thinking about readers who come to my site, and what they need/want to see in order to think, "hey, this is my kinda place."

In order to really resonate with people,

1. my books must be in a genre they read (100% out of my control)
2. they have to like my voice (if they pass #1, all I can do is be authentic and not hide)
3. my site has to not confuse, overwhelm, or disgust them to the point where they don't want to stick around (if they’re still here, then this one is 100% in my control).

To deliver that last one, I have to think long and hard about the kind of content I publish. The idea is to make it easy for them to get signed up and get their free stuff, hear about my new books, and get involved as much (or as little) as they want to.

Honestly, I've been going around and around on the idea of a blog, and I'm not decided yet on how much of that sort of content will exist yet.

I've seen very salient points written by authors against blogging for many reasons, including the very realistic point that time spent blogging could be spent creating books. And that's an amazingly strong (and overlooked) point, especially for fiction authors. For non-fiction writers, I think it's a completely different ballgame, and a blog seems almost essential. Maybe.

Brainstorming Everything

Here are the three areas I focus on, and suggest you do, too.

Design

I'll keep notes, links, images, etc. of any and all visual ideas as I see them. I'll typically keep a note in Simplenote/NV Alt, and if I need to grab screenshots, I'll set up a folder for it. Text and links usually do the trick, though.

This is where I take the most notes, by far. Maybe it's because I'm a visual person, or maybe because it's what I spend most of my day doing, but I definitely don't have a shortage of design ideas.

design – my notes

Clearly, I'm a minimalist. And, for my personal site, I want to do things a little differently. So, to the notes we go… but be warned – these are just my random notes, and not all of them may make sense to you.

TL;WR: bold background, strong typography, limited color palette that knocks you on your backside.

Theme ideas:

• something post-centric, like No Sidebar?
• really like Bright Coconut, so Digital Pro?
• Remobile's home page is so clean. I’d change a thing or two, namely:
  • ditch the silly menu thing.
  • add photos to subpages/posts.
• cook'd's post meta – sweet.

Typography:

• if all caps for headers: Rift? (I have a Typekit subscription – such a deal.)
• if old school: IM Fell DW Pica (google), or anything in the IM Fell series, really
• Remobile's combo of montserrat + neuton is pretty nice
• TypeType‘s Masters for hand style… or, TT’s Bluescreen for straight caps… or, TT’s Prosto for bold, thick type. Man, they have nice fonts.
• HF&J : For body text, you can't get cleaner than Whitney, or Gotham, and for headers, Tungsten is like Bluescreen/Bebas/etc.
• FF Clan Pro – totally sweet.

… and I like the idea of having a more casual feel to the site, rather than tight and corporate. Relaxed, clean… like a minimalist home in Dwell.

However… I almost always default to sans-serif fonts for body text on my own sites. But this is for an author site, which makes me think along literary lines… and I wonder if a serifed font would better suit the task. Hmm.

Colors: Haven't even gone there much yet… most likely a black-white look with one strong color for highlights. Possibly riff off whatever background image I end up going with, or if I go greyscale on the background… then I’ll go play around at coolors.co.

Content

Pages are not something I think about much. Does that surprise you? It's because the only standard page is an About page, and the rest arise directly out of need.

For my site (and most sites), the home page will tell people what they need to know to know if they're in the right place. The other main page, the About page, is actually one of the most visited pages on just about every website.

Why? Because it's where people go to see if they're in the right place for them in that moment.

In the words of Sonia Simone of Copyblogger, http://www.copyblogger.com/how-to-write-an-about-page/

That’s where I find out who you are, what you do, and why I should read your site.

Every site needs an About Page. Don’t be clever. Call it About.

Aside from the About page, everything is up for grabs. Services? Only if you have services. Products? Same deal. Contact? Nope, not standard.

Why? Because it might be a better idea to send people to a social channel or just give them an email address. (But you'd better believe you'd better mask that email address from bots, or you're opening yourself up to a nightmare of spam for as long as you keep that email address. You've been warned.)

In my case, I'm going to focus on the front page, About, and then Books pages. Once my books are ready to go, I'll create individual pages/sections/areas/sites/something for each of them – but that won't be happening for a few months, so for now, I'll stick with the basics.

Any decision on the blog yet?

I'm taking notes on ideas for blog categories, posts I want to write, and whatever images, videos, and things I want to share. I may or may not go as far as calling them "blog posts" – who knows, most of them may turn out to be better served as social media shares, and save only the real "long form" stuff for blog posts.

Functionality

Based on my MWR, you can bet that the #1 piece of functionality, in addition to basic WordPress stuff, is the ability to take newsletter signups.

Chances are, I'll stick with Mailchimp. But I'll admit, I've been seeing some convincing things about MailerLite, and ConvertKit has had me curious for a while. More on which I end up going with in a future post.

Beyond that, I'm looking at two author plugins to help make it easier to maintain good content about my books (when they come out). The two I have in mind are Mooberry and Genesis Author Pro . (Being a Genesis guy, I'm partial to them, but I've heard great things about Mooberry so far.)

Social Media Channels

At this point, I'm a Facebook/Tumblr/Instagram person, although I rarely post on Instagram. That'll most likely change in the near future, but until then, FB & Tumblr are my main channels.

I used to tweet, but stopped years ago.

Whew!

That's a lot of things to brainstorm, and I hope seeing my list has helped you think better about what you might need to assemble.

Where to next?

Content. I tell every client I work with that content is the #1 piece that takes the longest, so for the next post, we'll take a look at content – what it is, how to get it together, and what to do with it once you've got it.

And by then, I should have some preliminary screenshots of the initial forays into the design, too. Fun stuff!

The post How I Approach a Design, Part Two appeared first on Bright Coconut.

I see the same sense of wonder sometimes when I tell people I’m a web designer. Not that pushing pixels is the same thing as mixing music or painting a canvas, but that most people I talk to have no idea how an idea becomes a vision becomes a design becomes a cohesive site that you can click and read and interact with.

None of these creative pursuits are magical. They’re all the product of a process.

What I’d like to do in this post, and the few that may follow, is to share my process for turning an idea into a full-blown website. I have a feeling it may help some of you in guiding your own projects to fruition.

And, rather than just talk in abstract terms, I’m going to walk you through how I recently redesigned Bright Coconut, because ideas without implementation don’t carry the same force, and I want you to be able to see what I say without the haziness of imagination coming between us.

Most Wanted Response

When there’s no pretending
Then the truth is safe to say
Start with the ending
Get it out of the way

David Wilcox – Start With The Ending

Always start with the end in mind. That’s both from a reader-response angle—I want them to contact me, I want them to sign up for my newsletter, etc.—but also an emotional angle, i.e. how I want them to feel, what the mood you’re setting with the design is, etc. You want everything on the site, from layout and color to images and text to all flow into that goal.

Whatever you’re selling, giving, offering, etc., you’re doing it to add value to people’s lives, right? Your job now is to communicate that value to your reader in a way that is clear and undeniable. You want them to cruise through your site, screaming, “Yes! This is so what I want!” (If you need a reminder of that feeling you’re trying to capture, Meg Ryan can be a huge help.)

Visual/Aesthetic Design + Layout/Organization

Once you know where a project needs to end up, the next step is to do everything you can to make sure you get there.

With that in mind, I look at the visual design and the layout/organization.

• Aesthetics/Visual Design is important because if a site is ugly, people may leave just because it hurts their eyes, even if the content is solid.
• Layout/Organization is vital because if people can’t find what they want, they may bail out of sheer frustration before ever getting to the good stuff.

Deciding on a Visual Design

Minimalist? Handdrawn? Corporate? Lush? Photo-dominant? How do you choose?

Take a look around at things that inspire you.

This could be other websites, but it could also be anything from nature to music to poetry… but sticking with visual inspiration tends to make it much easier to translate your ideas into a website. For example, you may find inspiration in products you like. Book covers. Posters. The window design of a store in a mall. I mean really, how can you not be inspired by Monument Valley or the Baratza Sette?

Whatever the source, make notes. Freestyle ideas. Let it flow. You never know when an idea will kick off something amazing.

I do suggest paying particular attention to other websites you like. Having a list of things you’ve seen that you like is also a really easy way to tell your designer what moves you in a way that’s concrete, and doesn’t leave them guessing at your intentions.

When I take notes, I like to note the url, grab a screenshot (in case they change the design before I come back around to it), and a little note about what it was that caught my eye. If you do this, then when you go back to your notes, it’ll help you recapture the moment of inspiration easily.

Layout/Organization

Give people enough information to make a decision, and no more.Me, unless you can find a source. I couldn’t. Yay for me!

Lawdamercy, why do people cram so much into their designs? It is way too often that I go to a website and have to let my eyes adjust to all the cruft before I can figure out what they’re trying to offer people.

If you want people to get where you want them to go, make it as friction-free a process as you can.

Let’s take an example: sidebars.

Personally, I’m not a fan of sidebars anymore. In my eyes, they distract from the main content you’re desperately trying to get people to pay attention to. For me, eliminating a sidebar is an easy decision.

This may not be true for you and your situation, of course. Every business and every site is different. Rule of thumb: if it’s not giving vital information or contributing to the reader’s experience, ditch it.

Ask yourself: “What do people need to make a decision about what I’m trying to offer them?” And then get rid of everything else. See how that feels. If you feel something is lacking, put it back. But don’t put it back too soon.

This goes for your front page and its sections, the number of pages you have, navigation items, sidebar widgets, footer content, the actual content on your pages/posts/landing pages, you name it.

Is that it?

Oh, far from it. In order to really lay this process out and make it useful to someone like yourself who is most likely considering their next project (a new site or a redesign), I can’t cram it all into one post. Partly because then it would take forever to read, and partly because if I tried, I’d likely never finish. And I really want to get all of this info out to you in a way that works for us both.

I had originally thought to go through the steps of creating a design using the latest Bright Coconut redesign as an example. But, then I realized it wouldn’t be as helpful seeing a site that’s already done, because I would naturally gloss over bits and pieces and forget things. And, what would be most useful would be to see the process unfold rather than give you a past-tense recap.

So, I’m going to start a new site instead, and show you step-by-step how it all comes together. It makes the most sense to break the steps down into a bit more detail, along with examples so you can see how it all works in real-time, and how the process evolves. My thought is to open up each step there to feedback, so you can have a hand in shaping the new site, too. Sounds fun, huh?

I sure hope so. If you get anything from these posts, would you mind leaving a comment below? That’ll stoke my fires in a huge way. And if you have questions, or want more/less detail as I go, let me know that, too. (I ain’t just writing this stuff for myself, y’know.)

To be continued!

The post How I Approach a Design, Part One appeared first on Bright Coconut.

In the past three years, though, my Bright Coconut site has had three four different designs, each one the product of a serious itch. If the redesign scratches the itch well, it gets to stay — my 2013 design lasted over two years. But if it doesn’t, well… to the four of you who actually saw the design between that one and the last one, I’m sorry. It’s better now, I promise.

The point of this post is not to showcase my current or previous site designs, though. The point is to know when you need a redesign, and when you maybe just need to clean up a few things. (Of course, if you’re the kind of person who gets that itch to redesign and wants to scratch it often, know that I love you. We should talk.)

Do you need a redesign?

Well, maybe. Let’s take a look.

When was the last time you redesigned your site? I ask because of the speed that technology advances these days. If you have a site that’s more than a few years old, it’s very possible that you could have outdated code that’s just not mobile-responsive (best-case scenario), or on the verge of breaking (mid-case scenario) or exposing you to hackers (worst-case scenario). If it’s the latter, then you really should update your theme, because cleaning up a hacked site is something no one should have to deal with.

That important question aside, does your site do what you need it to do? Between having your current site built and today, has your business evolved to do something new, provide something new, or engage with your audience in a certain way… but your site doesn’t allow it? Common examples could be things like social media sharing, online scheduling, using contact forms so you aren’t exposing your email address, etc.

If your site isn’t doing (or can’t do) what you need it to do, it’s like signing up to run a 10k when all you have are three-inch stilettos.

This next one is a bit less cut-and-dry, but if it applies to you, you’ll know it right away.

Are you proud of your website? When potential clients ask you about your site, do you cringe? Give them your email instead? Refer them to your Facebook page?

These are really big signs. Huge ones.

There are plenty of other reasons to redesign, too.

If any of these sound familiar…

• you regularly get complaints from readers and clients that they couldn’t find something on your site
• people have a hard time reaching you
• you’re tired of hearing that one recurring juicy bite of negative feedback over and over
• your site isn’t mobile-responsive (and yes, I know I mentioned this one before, but this is the age of multiple devices, and if you’re leaving out mobile users, they’ll leave you out, too).

And on the positive side:

• maybe you have something new you’re rolling out, like a new program, product, or initiative
• you’re ready to pull the plug on something that’s no longer working for you, like an old product or service, and doing so means revamping lots of things on your site
• it’s time to pull the trigger on that blog you’ve been thinking about for years.
• you’re inspired by some other websites you’ve been seeing, and want your site to inspire the same feelings in you and your readers.

Okay, I’m seeing the mirror here. Does this mean I have to start over completely?

Not necessarily. Whew, right?

It could just be that you need to update a few things so your site is secure. Perhaps you just need to rearrange a few things and make it easier for people to find what they’re looking for. It all depends on what you’ve got in place and what you need to do with it. If you want to talk options, let’s talk.

However, if you’ve read this far and all the signs are pointing to yes, then yes — you should redesign.

A quick note on aesthetics: If you need to replace your theme, or move from your old, possibly defunct—or non-existent—platform into something that allows you to have a more secure, easy to edit, future-ready site for years to come, like, say, WordPress (hint hint), then that qualifies as a redesign, even if you stay with the same basic look.

A redesign doesn’t mean you have to make it look different… but most people like refreshing their look now and again.

(If you’re still rocking the 90s look and jamming to My Heart Will Go On on your walkman, though, feel free to bust out your flip-phone and gimme a call. I’m sure we can figure something out.)

Websites aren’t static. They live and grow and evolve, just as your business does—or in some cases, even faster—and having an up-to-date, mobile-responsive, easy-to-use site communicates to your audience that you are awake behind the wheel.

If you have any questions or want to talk about your next redesign, feel free to read more about how I work or get in touch.

The post Do You Even Need a Redesign? appeared first on Bright Coconut.

Akismet to the Spam-Fighting Rescue

Akismet is a spam-fighting plugin you most likely know about and have installed already, since it comes bundled with WordPress. But what most people don’t know is you can add a snippet or two of code that checks the sender of an email’s name and email address against the Akismet database, to weed out false submissions.

Speaking of Databases…

Ever heard of Project Honeypot? It’s a database of spam-sending sites, emails, IP’s, and more that website owners have been contributing to for years. And thanks to a plugin called Contact Form 7 Honeypot, you can test the sender of a contact form submission through PH’s database as well.

These two plugins, when used together, have cut down the amount of contact form spam that I (and a number of clients like you) have received from sometimes 100 a day down to one, or even zero. Pretty cool, huh?

So, enjoy – and if you need help getting these plugins installed and configured into your Contact Form 7 forms, just let me know, and I’d be happy to help.

photo credit: Ѕolo via photopin cc

The post How To Smack the Contact Form Spam Monster Down appeared first on Bright Coconut.

However, the default one-month-at-a-time view may not work for you. Would you rather display just a week at a time? Is that possible. It sure is. And it’s pretty easy to do, too.

First, check your privacy settings

Google Calendars are, by default, private. But if you want to share your calendar with the world, you’ll need to change that.

On the list of calendars in the left sidebar, click the little triangle that shows up when you hover over the name of the calendar you want to share. (And if you don’t see the list of calendars, click the triangle next to My Calendars.

That’ll open up a three-panel, not-so-obvious-that-it’s-three-panels, options screen. You’ll want to check first that your calendar is public, and that’s in the middle panel:

Once it’s public, go into the first panel, “Calendar Details”, and look for the customization section:

From there, it’s easy: all of your options are laid out on the left, and once you’ve chosen what you want (in this case, weekly view), the code in the box on the top right will adjust itself.

Copy and paste that code into your WordPress page (using the Text tab, not the Visual tab! But you knew that already, right?), and you’re good to go.

What about responsiveness?

If you’re using a responsive theme (and you most likely are, or most likely should be), you might notice that when you check your schedule on your phone, it doesn’t look so good. Bummer, huh?

Well, we’ve got a fix for that, too.

I found this solution at ThemeLoom, and it should work for any iframe code, not just Google Calendar’s. I found I needed to adjust the css a bit to get it to display how I wanted it to. So, here’s what I used:

Wrap your iframe in this:

Add this css to your custom.css file:

Again, you may have to play with it a bit, too, but this should get you heading in the right direction.

featured image photo credit: Andrew Morrell Photography via photopin cc

The post How to Embed a Google Calendar in Week View appeared first on Bright Coconut.

I’ve had so many clients ask how to do this, I figured it’d be easiest to put a post up that describes the process. I’m assuming you have an email address you want to use already, which I’ll refer to as you@yourdomain.com, and a google account, which we’ll call you@gmail.com. If you don’t yet, both are easy to set up; for the purposes of this article, I’ll assume you have your email settings already from wherever the you@yourdomain.com is set up (and if you don’t, log into your hosting account’s cPanel, or if it’s set up with the domain registrar, then log in there, and you’ll find your settings there. (And if that fails, google “bluehost email settings” or whatever hosting you use, and let Google provide.)

Log into Gmail…

… and go into the Settings menu. Look for the gear icon in the upper right corner.

Settings › Accounts and Import

Add your POP3 account

Don’t get confused about what a POP3 account is; if you have a you@yourdomain.com email address, chances are super high that it’s a POP3 account.

In the Check mail from other accounts section, click the Add a POP3 mail account you own.

It’ll ask you for your mail server settings next. If you have your email set up through your hosting account or your domain name registrar, you’ll be able to find your settings there without much trouble.

Next, Configure The Send Mail As

With the steps above, you’ll be able to check your email using gmail. It’s this next step that’ll allow you to send email without it looking like you’re using gmail. If you want to get email from you@yourdomain.com, but send it out as you@gmail.com, you don’t need to complete this step. But if you want people to continue to see you@yourdomain.com, then keep on following along…

If you’re still in the previous screen, you might see a message telling you your mail account has been added, and under that, the option to send mail as you@yourdomain.com.

If you’re back out at the menu again, just click the “Add another email address you own” in the “Send mail as” section.

Enter Your Name and Email Address

Easy enough…

Choose “Send through Gmail”

The last step is where you can choose to use gmail’s servers to send the email, or if you want to connect back to your old servers. If you have a reason to do the latter, go for it… otherwise, keep life easy, and stick with Gmail.

And there you go.

You should be all set; now all you have to do is access your you@gmail.com gmail account, however you want to do that (directly in a browser, through Outlook, Apple Mail, Postbox, or whatever, and your you@yourdomain.com email will be right there.

photo credit: AZRainman via photopin cc

The post How to Run Your Own Email Through Gmail appeared first on Bright Coconut.