If you visit the site using your normal desktop browser, you’ll see this:

Here's a look at weconnect.com in it's normal desktop design

Taking your browser window, try reducing the width of the window horizontally. It should look something like this:

Here's a look at the website with a condensed window to about the size of a mobile phone screen.

As you can see in the example, quite a lot of things changed when I made my screen smaller.

1. The main navigation disappeared
2. The image of the laptop went above the headline
3. The fonts became smaller and more suitable for a small screen.
4. The bottom navigation became more mobile friendly

So, how did I do it?

Getting Started

Download HTML5 boilerplate

First, I went to the HTML5 boilerplate site for mobile. This will set you up with everything you need to to make your site mobile-friendly: http://html5boilerplate.com/mobile By implementing the mobile boilerplate, I was able to get the correct meta tags and css I needed to ensure my site looks great on smaller windows.

CSS media queries

I’m not going to lie. Being a designer first and a developer second, I was a bit freaked out by the idea of media queries. It wasn’t until I began to dig into them that it all began to finally click. It’s really a simple concept – using CSS, media queries basically detect the pixel width of your browser display, and change the CSS declarations to modify your design to better fit the page.

At the bottom of the boilerplate CSS file, you’ll notice an area for Media Queries. This is where you place all the styles that make your site look normal at a certain browser size. I pasted all of my site’s CSS into this area and set the media query like so:

@media only screen and (min-width: 974px) {

So at 974px screen size, everything on my site should look as I designed it. Everything ABOVE the media query section should be the CSS that makes the site look good at a smaller resolution.

To start, I set my browser window width to the default iPhone screen resolution to start with (320×480). Then I inspected my code with Firebug (you can use whatever inspection tool you want) and started changing my CSS to make everything look nice on the smaller screen resolution. As I made CSS changes, I made a duplicate of my existing code, edited what I needed, and put that CSS ABOVE my media query.

Careful now

As I went along, I was careful to periodically check the site at the full browser resolution to make sure my styles weren’t overriding anything and breaking the design. I also made sure that I didn’t duplicate a lot of code. Some of my CSS could be used at the 320px browser size AND at the 974px size. So as I went along, I started stripping out CSS from my media query that could be used for any browser size and pasting it in the area above the media queries. By the end of the project, my media queries section only contained the styles that were necessary for making the site look normal at the 974px size.

Hopefully this gives you a good starting point as to how to dig into CSS media queries.

The content grabber appears as a circle when you hover over an image using the Selection tool. Use the content grabber to select and move the content of a frame with the Selection tool still selected. This behavior effectively replaces that of the Position tool, which is removed from InDesign CS5. If you rotate the content with the frame, a horizontal line appears in the center of the content grabber. This line mirrors the rotation angle of the content. The content grabber draws over each frame that is part of a group. Use the Selection tool to reposition content within a frame that is part of the group.

It’s useful to the beginner, I suppose. But too often I found myself clicking and dragging on a bounding box expecting to move the object, only to move the content within the object instead.

Disabling content grabber
If you’re like me and you want to disable content grabber altogether, simply go to to “View -> Extras -> Hide Content Grabber”.

Dynatrap home page: Features rotating product images and colorful links to learn more information.

Testimonials page: Features rotating customer testimonials and a navigation menu to learn more about each product.

How it works page: Video and photo descriptions about how the Dynatrap works.

Product navigation: Interactive navigation menu for selecting products. Features a pop-up when each image is hovered over, showing key product specifications.

Product page: Organized information is displayed in a unique way with a specific marketing message for each product.

The home page

Home page - used in the weeks leading to elections

Dashboard

Mark on Main Street

Get out the Vote

A review of our site:
One of the most interactive GOP websites we’ve seen. You can create your own account and keep track of upcoming events near you, join and keep up with campaign groups, and organize your own online fundraising efforts. … This is a beautiful website with excellent functionality.” – estampede.org

If you’re like me, you used to add bleed by starting with a desired document size. Then you’d have to calculate bleed around the edges, add it to the document size, and create a new Photoshop file. Then you’d carefully draw guides 1/8″ or .125″ (or 9 pts if you’re using picas) all the way around the document. Guides are important. We want those. But for those creating a document on the fly, this may be a little more time-consuming than we’d like.

The solution

Create a document at the desired size. For example, 8.5 x 11 inches. Draw 4 new guides by dragging 2 down from the ruler on top, and 2 across from the ruler on the left – and have them snap to the very edge of the document, all the way around.

Then go to Image -> Canvas Size, and add .25 inches to the width and height of your canvas. IMPORTANT: Make sure the anchor is set to “Centered”. In our case, the dialog box will look like this:

Then simple click “OK” and your document will be perfectly sized with the bleed added! The guides stay in the place that you drew them (marking the document’s edge), but the size of the document is now larger to account for the bleed. This is especially useful when I’m placing a Photoshop file into InDesign at 100%.

Final document with bleed added:

This is the storefront before the banners were designed. The unique challenge would be to create a banner that wraps around the TV in the right window.

Some of the problems we initially ran into was deciding on the correct banner material. I chose to print it on a cloth-like material that was light-weight and allows light to still come into the office. This was a big concern for the client, since these windows are their only source of natural light. Other options for material would have been heavy vinyl (that wouldn’t let any light in), or adhesive vinyl (the type that goes on city buses). This would have let plenty of light in, but the print quality would have looked horrible up-close, and the client needed something that could be removed easily. So the cloth material was our best solution.

The Design

The client’s number one goal was to increase foot traffic in their office. Located in the heart of Chicago just blocks from the Trump Tower, their office is in a prime location, being on street level. These banners would be seen by thousands of people as they walk by.

The left window design focuses on their commercial real estate services.

The right window design focuses on their residential real estate services. (Notice the black rectangle in the middle represents the area where the TV would be.)

Below are photos of the final finished product:

The storefront with the new banners installed. Although there is a glare, the signs are still very visible when pedestrians walk by.

The left banner

The right window banner

The view from the inside shows how the banner lets light through.

At the end of the day, the client was extremely happy and the project was a success. Foot traffic increased dramatically in the first week, and these banners will hopefully draw in plenty of business in the coming years.

Before we begin

Let’s talk about readers. Readers are a fickle bunch. You will never get everyone, everywhere, at all times, to read every word you write. It simply will never happen. Most people are too busy and too impatient to stop and read everything. The fact is, only 10% of people read everything you write, 80% read some things, but lose interest easily, and 10% read nothing. The 80% group of readers are who I’m focused on in this article. These are the readers that will decide whether or not to read your design in a split-second after viewing it. And the other 20% you ask? Well, there’s no changing them, so our job is pretty easy when it comes to those readers. Ok, so on to the basics.

Organize information using headlines and subheads.

This is pretty self-explanatory. Your headline should be a larger font than your body text. It should be simple and to-the-point. Your reader should be able to grasp the idea of a section by simply reading the headline. Headlines serve as an attention-getter, pulling your reader in and allowing them to read the text. The more well-written your headline, the greater chance your reader will be drawn to the rest of what you have to say.

Similarly, your subhead should be written the same way, although it can be slightly longer. I personally like to keep the font size significantly smaller than the headline, but larger than the paragraph text. Subheads can be bold or regular in weight – do whatever looks best.

Paragraphs: Font Size, Line Spacing, and Line Length

When styling your main text, here are a few thoughts to keep in mind:

Font size

When determining font sizes, your first question should be “who’s my target audience”? For younger readers, try to keep your paragraph font size smaller. For older readers with poorer eyesight, I tend to increase the font size by a couple points, but still be careful to not make it too large. For print, the default size of most word-processing programs is 12 point text. For web, this is a very normal font size. However, for print I usually go much smaller. Of course, it depends on what font you’re using, but anything between 9 and 11 points will do for most copy-heavy publications.

Line Spacing (leading)

Leading refers to the amount of added vertical space between lines of text. Most word-processing programs set the default leading at 2 points more than the font size. For the most part, the default setting looks fine. However, depending on which font you’re using and how large or small the point size is, you may want to experiment with different sized leading from time-to-time. Bumping up the leading by a couple points can sometimes set your design apart and really make it stand out. Just be careful not to increase the leading too much. Line spacing that is too large will often detract from readability.

Line length

The human eye, at normal reading distances, can only focus on a small area at a time. With long line lengths, the muscles in the eye tend to strain, as they have to move more to follow from the end of a line to the start of the next line. Also, as line length increases, retention decreases, since it’s easier for readers to accidentally skip a line or lose their place. Ideally, keep your columns shorter in width to avoid these problems. There are many studies and opinions on line length, and there isn’t one set answer that will apply for every situation. This article talks about several formulas you can try on your own to determine proper line length. Just remember, balance is key. If you feel uncomfortable reading it, then your line length might be too long or too short.

Keeping in mind, a few simple rules will help your text get noticed and read by more people. In my next article, I hope to get more in-depth about some typesetting do’s and don’ts. Stay tuned!

Serif fonts are fonts the have a line crossing beyond the “terminal” of a main stroke. A terminal is the ending point of a stroke. Some examples of serif fonts include: Times New Roman, Georgia, and Garamond.

Sans-serif fonts are fonts without serifs. They usually appear more straight and clean-looking. Some examples of sans-serif fonts include: Arial, Helvetica, and Verdana.

Every project has it’s own needs, and figuring out what font looks best depends on the feel of the project. For more modern, technology-based designs, such as a website for a cell phone application development company, a good choice might be sans-serif — since it’s cleaner-looking that serif fonts. On the other hand, a serif font might suit a softer design, like a flyer for an arts-and-crafts store.

Choosing fonts is never easy, but understanding some of the basics can help.