Get Started on the Right Foot: Planning Your Website

planning your website

One of the first questions I ask people when we start discussing their website project is about their content plan – it goes something like:

  • What pages will you have on your website?
  • Do you need any special types of content, such as a blog or a gallery?
  • Are there any particular features or types of functionality you already know you want, e.g. a home page slider?

Quite often, the response is “I’m not really sure – I haven’t planned it all out yet.” Other times it’s a quickly brainstormed list of the same pages you see on just about every somewhat similar site, without much specific thought to how each page will be used or whether it’s actually a useful addition to this particular website.

While it is perfectly fine (and, actually, often desirable) not to be 100% set on the page structure of your site at the outset of your project, there are a few things that you should have at least a general idea about. In today’s post, I’ll outline my thoughts, as well as some suggestions from a few very smart pros from various related fields, on the following questions:

What should you know before you start getting quotes for a website project? Who are the various professionals that can help you create your early website content plans, if you’re not equipped to do it yourself?

What do we call this work?

There’s a lot of jargon around building the content for a website, everything from “content strategy,” to “information architecture,” to “site map.” There are some recommended resources at the end of this post where you can dive into the details of these different terms, as well as various tips and strategies for tackling this stuff.

Meet the Experts

The three experts adding their voices to this post are all involved in content development in various ways:

The Communications Pro: Diana Ecker

Communications Pro Diana EckerDiana is a writer, editor, and communications/ branding professional based in Palo Alto, California. She helps small businesses & entrepreneurs “identify, shape, package, and communicate the mission of [their businesses] with exceptional clarity and confidence, online and in person.”

The Designer: Breanna Rose

Designer Breanna RoseA talented web and graphic desinger, Bre has created website designs for the likes of Josh & Naomi Davis from the popular blog Love Taza and has a popular blog of her own where she shares everything from inspiration to tips on making it as a freelancer.

The Marketing Expert: Isa Maria Seminega

Marketing Expert Isa Maria SeminegaThe brilliant mind behind Noisette Academy (among many other projects), Isa is an experienced marketer who has worked with everyone from top UK brands such as Virgin and Financial Times to independent micro-businesses. She also runs Happy Piece, an accessories brand with a social conscience.

Before you contact your first designer

At the most basic, I believe that before you start shopping around for design quotes you should have:

  1. A clear understanding of the goal(s) for your website, including the most important 1-3 things you want people to do when they come to your site and why they matter
  2. An outline of pages
  3. For each page, a short description or summary of what that page is for and what it will contain
  4. For each page, general notes or estimates about the volume of content (e.g. about how many photos will you include in that gallery, or how often are you planning to blog?)
  5. Examples of any specific layout/ content/ functionality ideas you’d like to incorporate (these could be links to similar features on existing sites, rough sketches, and/or detailed written descriptions)

But wait… about those website goals

“Marketing is about communication and you can only communicate effectively when you know what it is you want to say and why.”
- Isa Maria Seminega

Once people see the words “website” and “goals,” funny things start happening. Maybe they do a bit of Google research and fall into the dubious world of sales (aka squeeze) pages, or they read an article about someone else’s business goals and think “sure, those sound good.”

Before you even get started defining your goals, especially if you’re working on a brand new venture, you’ve got to take the time to evaluate what you’re actually offering.

According to the experts

When I asked the experts what someone creating a new business website should do first, both Isa and Diana lept to remind me that substance comes before any kind of design thinking. Isa recommends the following approach to getting started:

Before you consider creating a new website you need to make sure you have products and services people desire. If you don’t have that, it doesn’t matter how beautiful your website is you still won’t get any sales. A unique and creative website can really take your business to the next level but only if you have a business model that works. Consider who you customers are, what you’ll be selling them, and how you will make a profit.

Next, consider the purpose of your new website and how it fits into your overall business strategy. Marketing is about communication and you can only communicate effectively when you know what it is you want to say and why.

Diana says that ideally you should be prepared to go to a designer and confidently say:

“This is who I am, this is what I’m about, this is who I’m trying to reach, this is what I know about those people, and this is how I want them to feel when they visit my site.” And even, “Here’s the content I’ve developed,” or “Here’s a combination of what I’ve written and what I’m thinking about including.”

Of course, this isn’t necessarily any easy thing – boiling down who you are and what you want to do is hard work. But, it’s completely necessary to at least have started before you contact a designer (or developer).


Continue reading >>

Small Efficiencies for a Front-end Development Workflow

I’ve been a bit obsessed with making small changes that make a large difference in efficiency, quality of life, or general happiness lately. I picked up the idea of taking the time to think through solutions to all those little, seemingly trifling irritants from hearing a talk by Gretchen Rubin, author of The Happiness Project, at Alt Summit 2012, and I can tell you that doing so really does lead to being happier (at least for me).

Here are two small tweaks I’ve made to my own front-end development workflow that make me endlessly happier and a bit more efficient:

Tweak 1: Stickies with Key CSS Values

If you’ve ever written even a single web page’s worth of CSS, you’ve probably experienced the need to use a font-family value or a color in more than one place in your code. If your CSS is short, you can just throw those values in a comment up top for reference, but if you’ve got a long CSS file (ahem, WordPress theme), then jumping up and down for those values gets annoying and interrupts the coding workflow.

I fully acknowledge that using a CSS pre-processor would also take away much of this particular pain point, but until I get around to trying that out I’ve come up with a quick, simple, free way to handle those repeated snippets and color values: desktop sticky notes.

sticky note with CSS stylesThere’s a built-in Mac utility for this that is actually called “Stickies,” and I believe Windows comes with a version called “Sticky Notes” (trust Microsoft to be a bit more formal with the naming). I just create a new sticky for each active project and throw in the values I want to have quick copy/paste access to. Most of the time, these stickies live in a corner of the screen, neatly minimized and easy to ignore, but when I need them I float them right near my code editor.

Tweak 2: Screenshot of Image File Names

You really may think I’m crazy with this one, but I swear it actually is more efficient than some alternatives I’ve tried. When I’m working on a custom build, I usually slice all the layout graphics (the ones I’ll apply via CSS) first and throw those into the theme’s /images/ directory.

I use a few naming patterns to help me remember those image names when I go to actually use them in my code, but even still about 60% of the time (possibly a slight exaggeration, I’m not really sure) I go to add an image and either I can’t remember the likely name at all or I remember it incorrectly.

There are a couple of ways around this that involve either digging into that folder (inefficient) or keeping the set of images someplace in an open window (I am obsessive about deleting or archiving files, so this drives me bananas, plus who needs an extra window?), but the simplest way I’ve found so far to handle this issue is to just take a quick screenshot of the /images/ directory after upload:
image-list
Believe me, I fully realize this sounds kind of crazy, but it really does give me a single, at-a-glance reference to the actual, uploaded file names. True, I can’t copy/paste them, but really typing them is just as fast in most cases.

(PS: In case you were wondering, I did in fact fix the typo in one of the above file names.)


Of course, if you have way better ways to handle these particular small inefficiencies, I would love to hear them. I’d also love to hear – what are the small annoyances in your own workflow (those you’ve solved, and those you haven’t yet dealt with)?

Prepping Images for the Web Using Photoshop and/or Preview

When I recorded my video about slicing up PSDs in preparation for coding, I touched briefly on saving images for the web, but I thought it might be helpful to go into a little more detail on that specific piece of the process. If you do any work on the web (which you probably do, if you’re reading this blog), you should know at least the basics of prepping images.

General Tips for Web Images

When working with images for the web, you’ll want to keep an eye on file size and quality – you’re essentially striving to find the right balance of those two things. You can impact both through your choice of dimensions, file type, and compression/ image quality.

Use the Right Image File Type

You’re probably generally familiar with the most common file types for images – PNG, JPG, and GIF – but do you know when and why you might use one over the others?

image file types

Each file type handles the image information slightly differently, so the type of file you use will impact the quality and the file size of the end image. In most cases, JPG is best for photographs, and PNG is best for other types of graphics (including those with transparency). GIFs are usually only the best option if you’re going animated. JPG compression and the different types of PNGs, etc., are covered a bit more below, and there’s a lot of information out there on the web that goes into detail about the various image file types.

Size Appropriately Before Uploading

There are tools built into WordPress, Shopify, and other content management systems that resize your graphics to better fit your theme or template layout, but still be careful about the size of the images you’re uploading. My general rule of thumb is that you should size your image to the largest size you’d reasonably ever use on your website, keeping in mind zoom features, the level of detail, and where it’s appearing on the site.

This has gotten trickier with retina devices (which require files 2x the size of other devices), but keep in mind that larger images take much longer to load and don’t get too crazy with huge files. I typically max out at 2000px in either direction, and even that is quite large.

Crop in Advance

Most auto-cropping happens from the top left corner of the image, regardless of where the actual focal point is. If you have strong feelings about how an image should be cropped, do it manually. Focus on the aspect ratio (the height/width ratio) so that you can still upload a full size image but have it crop nicely to the smaller sizes it may be displayed at.

Sizing & Cropping With Preview

While simple tools like Preview (the default image tool on Macs) don’t have a lot of options for compression, you can still accomplish some quick changes to your images. In fact, I frequently use Preview for resizing and cropping when I don’t want to pull out the full monster tool that is Photoshop. If you’re using Preview (or a similar minimal tool) you’ll definitely want to consider further compression using online tools.

Quick Initial Cropping

Start by cropping any unnecessary bits of the image, approximating the final aspect ratio (e.g. making it landscape or portrait as appropriate, and keeping in mind if it’s going to be very short and narrow vs. closer to square). I use the Rectangular Selection tool (in the Annotation menu) to do this quick initial crop.

cropping with preview

Adjust the Size Exactly in One Dimension

Use the Adjust Size menu option (under Tools) to drop the file down in size. Do only one dimension (height or width) and pick the one that leaves you with excess to crop off. For example, if cropping it to the correct height won’t leave you with enough width, you should crop to width.

adjust size options

Select Final Dimensions

After you crop one direction (or if you’re feeling like you have a steady mouse hand you can skip that step entirely), use the selection tool again to grab the correct dimensions and choose your final crop. Pay attention to those pixel values and zoom in if you’re having trouble getting the exact value you need. After you release the selection tool, you can drag and drop to move it around on your image and refine the edges of your selected area.

pixel values while selecting

Refining Images in Photoshop

While Preview is great for quick resizing and cropping, Photoshop gives you much more detailed control over your images and graphics, including letting you fine tune the compression and file type settings.

Use “Save for web”

Most of the compression, file type selection, and fine adjusting happens in the dialog box under “Save for web.” You’ll want to make sure you have it set to show you your output side by side with the original file – this lets you eyeball the final file quality – and you’ll also want to keep an eye on the file size/ download speed stats printed super small at the bottom.

photoshop save for web dialog

Balance compression & file size with quality

There are some really detailed posts out there about optimizing images using Photoshop, but here are a few quick tips to get you started:

  • Don’t use transparency unless you actually need it
  • If it’s a graphic with just a few colors, use PNG-8 for the smallest file size
  • If you’re using JPG, adjust the quality until it’s just high enough that you are happy with the final file and no higher
  • If you’re really gunning for speed, try some of the online tools available to further compress your files but make sure to keep an original in case you aren’t happy with the results

Resizing using Cropping

Check out the instructions for Preview (above) to see the steps I use for quickly cropping and resizing images (I use the same method in both programs). In Photoshop, you’ll find the Image Size option under Image, and you’ll want the rectangular marquee tool for selecting the part of the image to crop to. I’ve set a keyboard shortcut for the crop command (COMMAND + K, the same as in Preview), but you can find the menu option under Image. Photoshop actually does have a dedicated crop tool but I’ve never used it.

Resizing using Clipping Masks & Slices

Another easy way to crop images in Photoshop is to use shapes and clipping masks. This is particularly useful if you want to create a layout template you can reuse for future images.

Just create a rectangle the size of your final image and then place it on the layer below your image. Right click on your image layer and create a clipping mask. Then, you can drag your image around and resize it to place it just as you want it within the crop space.

clipping masks

Use the slice tool to isolate the shape and to save it for the web (see the video on slicing if you’re not sure how to do that).


Just to review, the three main factors to consider when working with images for the web are: file size, image dimensions, and quality. There are a number of relatively simple ways to manipulate your images to maximize all three for a given image, even using free software that comes with your computer – just keep your eye on those three things and you’ll be on your way to that sweet spot of quality images that don’t take forever to load.