So, you’ve got a great design idea for a new website, and you’re ready to take it to a developer. Or so you think. The developer looks at your mockups, and he’s got a few questions. Will it use jQuery for animations? How will drop-down menus behave? What will be your links’ hover states and rollover styles?

If your answer to these questions is, “uhhh…” (or anything similar), listen up. If you’re designing for the web, it doesn’t matter whether you’re doing the actual coding. Knowing at least a little about the world of web development is now officially part of your job.

Your design files should allow a developer to easily pick your design apart, build it, and take it live. To do this, you need to speak developers’ language—so you can explain exactly what you want them to do.

Why’s this so important? Because if you aren’t clear about how you want things to look, certain features won’t be built into the live site. (I learned this one the hard way.) But knowing the basics of web development means you can communicate clearly. And that will make your life—and the developer’s life—a whole lot easier.

At a minimum, here’s what you need to know.

• Get some basic CSS3 know-how. Gradients, buttons, drop shadows, and even basic shapes and rounded corners can be built with CSS. And using CSS instead of images cuts down on the size of a site—meaning faster loading time. Design visual elements that can be reproduced in CSS (rather than creating clunky image files), and developers will thank you for it.

• Use standard fonts. Choose fonts from Typekit, Google Web Fonts, or another major font directory. Again, if you choose a font that isn’t common on most browsers, your type will have to be displayed as an image, meaning slower loading times—and frustrated developers.

• Go easy on the backgrounds. The same goes for webpage backgrounds. Go for a solid color—or a small image or texture that can be easily repeated. This will also help cut loading times.

• Be careful with images. If you’re a designer, Photoshop is probably your thing. Here’s a tip for sharing images with web developers: Use the Pen Tool to cut out all images that will need a transparent background, instead of using blend modes. If the developer goes to save the image and you used a blend mode, it’ll show up on the live site with one of those ugly, patchy backgrounds. Don’t let this happen to you.

• Keep responsive features in mind. As some screens get bigger, while others get tinier, you need to make sure your design can easily adjust to different browser sizes—or appear in a totally different configuration based on the device it’s viewed on. So make sure design elements can be resized easily or simplified for faster viewing on mobile platforms. But don’t forget a high-res photo for full-width banner images—that way, it won’t get pixelated if viewed on a huge screen.

And where can a designer learn development basics—fast? You can’t learn to code overnight, but sites like Codecademy and Smashing Magazine are a great place to start. Another cool trick I’ve learned: find a site you like, and peek at its code using the Inspect tool in Chrome or Firefox. Just right-click on an element, click “Inspect,” and voila—learn any site’s coding secrets!

Soon, you’ll be throwing around terms like “cell padding” and “pseudo-class selectors” with ease. And you’ll be happy seeing your design creations come to life—just the way you imagined them.

Want to see what our designers are capable of? Contact Atomic, and we’ll give you all we’ve got.

 

As Atomic’s digital marketing and SEO pro, it’s up to me to know the latest in keeping web content optimized for Google. It’s not an easy job. The tricky thing about SEO is, the rules are always changing—and what’s right for one industry doesn’t necessarily work for another. But there are a few tips I try to apply to just about every client project. And lucky for you, I’m willing to share.

1. First things first: You need a strategy. If there’s one thing you don’t want to go at blind, it’s your website’s SEO. (Okay, and maybe climbing Mt. Everest. But SEO is a close second.)

That’s because when you’re optimizing your site for search, you have to be clear about what exactly you want it to show up in search results for. Google’s site-scanners are smart—but they can’t read minds. And if the words on your site don’t reflect the search terms you’re after, you’ll be banished to the far pages of Google’s search results. So decide where you want to stake your claim before you start developing content.

2. Choose your keywords wisely. You have a general idea of how you want to position your site. Now, how do you make sure it pops up on Page 1 of a search?

First, try tools like Google Suggest (those words that drop down when you’re typing in a query) and Google Trends (which shows how many people have searched for different terms, over time and by region). Type in a few terms related to your industry or product, and see what people are searching for. You’ll see that more generic terms tend to get lots of hits, which is a plus—but it also means that lots of sites are likely “optimizing” (read: competing) for them, too.

The key is to strike a balance between using keywords and phrases that people are likely to search for—and carving out a keyword niche that your brand can own. For example, if you sell rock climbing gear, a word like “climbing” is probably too broad. But optimizing for a phrase like “rock climbing shoes”—or whatever other product you want to spotlight—will help deliver users straight to your homepage.

3. Keep content up to date. A big SEO no-no is a site with broken links, incorrect meta tags, and outdated content. To make sure your hard-earned ranking stays strong over time, you’ll need to perform regular maintenance to make sure all of your site’s nuts and bolts are tight.

One great way to do this? Pair your SEO strategy (remember Tip #1?) with a regular content marketing strategy. If you’re regularly publishing blogs, social media content, and case studies on your site, Google will see that your site is alive and well. That’s called organic marketing—and it’s great for SEO!

Plus, there’s no better time to check that links, title tags, and other back-end stuff on your site is up to date…than when you’re already updating. Plan to schedule a regular “SEO check” at the same time you’re uploading your blog posts for the month, for example.

I can’t predict what Google’s next algorithm update will demand of SEO marketers. But I do know this: if you want your site to get noticed, you can’t afford to ignore SEO. It doesn’t have to be scary—but like climbing a mountain, running a marathon, or anything else, the first step is to winning is getting in the game.

Need help developing an SEO strategy or keeping your site ranking strong? Call Atomic, and we’ll show you how it’s done.