When it comes to content, I’d agree with Josh Clark when he says that it all depends on the audience and their goals. That goes for both mobile and desktop. When it comes to site-building, I’d advocate responsive web design 98% of the time. Furthermore, I might add that whatever a business’s goals are, the more content that you can have available, the better. The catch is that with the small screen real estate on mobile devices, all that content needs to be well designed and usable. This might be the single greatest challenge when it comes to mobile design.

Content is Not Code-Specific
As I just mentioned, the most important thing to remember when planning out and deploying a website build and mobile strategy is that no matter how device-specific your content is, that does not mean you need to build it one way or another. Responsive websites can easily hide or show content based on the same media queries that rearrange the menu or change font size. Just because your website is responsive does not mean it will look/be the same on smaller screens (you could argue quite the opposite, actually… if you look at our website, brolik.com on a desktop and on a phone, they’re very different, even though our site is responsive).

Since planning your content is required either way, I’d advocate a responsive approach to save time and money building and updating, and I’d throw out the idea of two or more separate versions of the same site.

More Reasons to Love Responsive
Beyond the “save time/money” argument, there are more mobile-related reasons to choose responsive web design. A big one is url structure. Have you ever been emailed a link to an article that sends you to a truncated, mobile version of that article even though you’re on your desktop? Or have you ever clicked on a link in Google from your phone, only to get redirected to the generic mobile homepage? These aren’t minor annoyances, they are relatively serious issues that can lead to frustrated users and bounces.

Another negative of separate site versions stems from the widespread recommendation that additional “non-mobile” content should be accessible through a link to the “full desktop version” of a website. This means that while users get the benefit of a streamlined, fast-loading mobile site, they get “after-thoughted” into a cumbersome and slow full site on their small device if they want some specific piece of content. The full site may even have a look and feel that’s different enough to be confusing, and users will need to “re-learn” the navigation. Plus, getting back to the mobile version of the page they linked from is likely a confusing task.

More Than Mobile
If you look a little beyond mobile, the same mobile vs. full site argument applies to tablets and any other “future devices” that we’ll inevitably see over time. Adding a third (or more) version of your site requires the same content planning as it would otherwise, but now the issues involving url structure and additional desktop content are multiplied. Then there’s the maintenance and content management of a site, which also get tripled (or more). Not with responsive, however.

Even though we don’t see as many articles written about tablet-specific content, we surely will. (And it’s not like they don’t exist). With responsive design, we can actually focus on the task of planning content, instead of the task of recoding.

So Please…
It’s important to keep reading and writing about the best ways to structure content for different devices and locations. This topic is incredibly pertinent to businesses and is often overlooked, even in 2012. But don’t confuse the content with the code. Build responsively for the plethora of reasons to, but don’t do it because you think your users deserve to see all of your content no matter where they browse from (although they do deserve that). Give your users all of your content, but give them what they want, when they want it. And please, make it easy for them. In the end, after everything is planned and executed, all the user cares about is that they can quickly and easily find the content they’re looking for, where and when they’re looking for it.

This is part 1 of a 2-part series, and it addresses clients who hire firms for responsive design. Part 2 will address designers and coders who are building responsive websites for clients.

You’ve heard about responsive design, right? It appears, though, that even with its growing popularity, responsive design is notably absent from almost any corporate website (with at least one exception). Like a lot of design trends, responsive design is extremely popular in design portfolio websites and web/techy blogs. The benefits of this technique (one build, all platforms) could seriously help businesses from a financial standpoint, but I’m not seeing the wide adoption that I’d expect from something so great. Maybe I just need to be patient. After all, it takes longer to roll out a new corporate web presence than a freelance portfolio website, and responsive design is a fairly new practice. Or maybe the lack of corporate responsive design stems from the inflexibility that companies show when it comes to their design ideals and how they translate to the Internet. I’ve been seeing this exact thing happen with our clients, which is what drove me to write this article. Company decision-makers: Please give this a read. You will benefit greatly. Take proactive steps towards a smart and functional website that will delight, not frustrate, your users. (And that seems to be a rarity on the web.)

My company’s been building solely responsive websites for a number of months now, and as the first batch of projects is going live, I can look back on the process with a great feel for where our clients are struggling with it. For us, it’s been positive overall, but there are a few sticky points that are worth noting for real world responsive design.

The In-Between Browser Sizes
Probably the hardest thing to explain (and to fix) with responsive design is the “in-between” sizes. Media queries and percentage-based design can fully cover a desktop-, tablet- and mobile-sized layout, but there are instances where an in-between size, like a smaller laptop, will show broken lines of text or bad margins, for instance. These problems are definitely fixable and should not derail a project. It can be really frustrating from a client’s end to keep pointing out these little bugs, but it’s almost impossible for the designer to replicate every screen situation, so it’s a necessary part of testing responsive design. Oh, and by the way, responsive requires a lot of testing.

Internet Explorer
The second challenge with “real world” responsive design is a browser called Internet Explorer. I don’t like to bash IE like a lot of designers and coders do, but I can’t ignore its shortcomings either, especially in older versions. Example: older versions of IE don’t even respond to media queries (a staple of responsive design) without a jQuery plugin, and once you get below IE8, things like inline-block elements aren’t even recognized! These details are essential for a successful responsive website, but they’re not easily explained to non-coders. Because of IE’s shoddiness, and since a majority of corporate-types still use Internet Explorer, it’s really important to make sure everything works in IE before the client sees it. As a “website tester,” it’s good to have an open mind about IE bugs, because they can usually get fixed or finessed. (As a designer, if you don’t go above and beyond with responsive design IE testing, you’re asking for trouble. Trust me.)

But the IE issue goes a bit further than testing a site before showing it off. A fundamental part of responsive is that websites look a little bit different on every different screen. Designers can’t have pixel by pixel control like they may be used to. This concept is really important to keep in mind, not just for IE, but for all different browser and computer situations. Just because a site looks different from one screen to another (or one browser to another, or one device to another), doesn’t mean the site is “wrong.” Coding many versions of the same site to try to make every browser the same is a waste of time and money, and it goes against the philosophical concept of responsive design.

On a positive note, though, IE9 (the latest version) is looking good. I’m very hopeful, although its mere existence doesn’t mean that everyone will upgrade.

Complexity
A third reason that some companies don’t make the responsive jump is that there are other popular web design styles that make responsive harder than it already is. Imagine the popular parallax scrolling technique and how hard it must be to make sure it works on the phone as well as the computer… with the same code. Although at times it’s hard, complex and responsive design is 100% possible. In fact, in 2012, with skilled programming, almost anything is possible.

But Don’t Be Scared
So maybe responsive design is harder in the real world than it seemed at first. It started showing up on simple, designer-driven websites, but what does that mean for real world practicality? When my company first started believing in responsive, we used to tell clients how it’s actually not a new skill, but a new way of thinking. So simple! Well, looking back, it’s not very simple at all. But difficulty is no reason to shy away. Find a skilled programmer (or company or team of programmers) and make sure they know a lot about standards-based coding, old web browsers and new tablets. Make sure they know where to make the right sacrifices and then trust their decisions! The payoff is worth it. As a company, you can stay agile, stylish, uber-functional and maybe even below budget. It can be done. But it can’t be done without sacrifices, even small ones.

I have a lot of experience being the voice and conveying the brand of companies online, and the most important thing I can tell you about the websites in 2012 is that it’s time to start trusting the web experts. Years ago, there weren’t enough web experts, and we looked to print designers to shape our web experience. Today, it takes a lot of specialty to launch and run a successful web presence. Instead of fighting the unknown, embrace it (with the help of an expert).

Before I get you thinking that native mobile and tablet apps are becoming obsolete, let me explain the current state of mobile a bit more. Native apps (the kind that need to be downloaded from an app store) utilize device-specific features and can offer a better user experience and better means of payment than a mobile website. While this is true, there is potential for this to slowly change over time based on technology advances and the launch of different and new devices. Jacob notes that, “In the future, the cost-benefit trade-off for apps vs. mobile sites will change.” I agree with this.

To put it simply, there will be more and more mobile devices and operating systems and these variations will only continue to branch out. That means you’ll be building native apps for not only iPhone iOS, iPad iOS and Android, but likely 10 other devices and platforms if you want reach a large majority of your userbase.

When will this happen? Not sure. For now, if you can afford a native app (minimally, it’s all three: iOS, iOS, Android) and your app requires mobile device features, then by all means, develop it. Develop a mobile web experience, too. And while you’re at it, consider developing using responsive design. In case you don’t know what responsive design is, it’s when you code once and that code allows your website content to adapt to fit any device or screen size.

Aside from your native app initiatives, I want to give you a bigger picture approach to your mobile strategy; one that is optimal for today, but will be even more appropriate and rewarding years from now. First, let’s replace “mobile strategy” with device strategy. If you’re thinking mobile, you’re starting too narrow. Consider the future of the web and technology and realize that a few years from now we might be carrying around devices of all different shapes and sizes, and we’ll probably have smart TVs that span our entire living room and office walls. Maybe that’s a bit extreme and probably not very cost-effective for most of us, but you need to think about what’s possible, not what’s right in front of you. No matter how you cut it, in the near future responsive web design will go from smart design to indispensable, necessary design.

Now again, let’s think about device strategy and entertain my prediction that in five years there will be 10 new devices, of varying shapes, sizes and operating systems, each holding a chunk of market share. Responsive web design techniques that you use today will prepare you for these new devices.

Now, think about the native applications that you are considering building right now. You may be building and upgrading for 3 operating systems now, but imagine what the investment will be when you’re building for 10 or more separate devices in 5 years. Do the benefits outweigh the cost? It’s hard to answer yes.

Let Websites be Websites
We need to rethink websites and how we design and interact with them. We should stop thinking about them like they’re printed material on paper. Let’s embrace the movement and interaction that modern technology allows us to have with our message. Websites should provide the most optimized, quickest and most enjoyable user experience no matter where they’re viewed. In order to do that, we need to employ the principles of responsive web design.

Responsive web design is design that grows and flows within the browser window. Using only one code base, a website can grow to fit the largest screen or shrink and stack to fit the smallest mobile screen, all with elegance and attention paid to design and usability. The trick is to forget about some of the restraints we currently impose on websites while deciding what is “good” and “pleasing” and “efficient” design, and to embrace some new thinking.

Is this starting to sound too philosophical?

Well, OK. Fine. Instead of talking about the design philosophies behind responsive web design, here are a few reasons why a business can benefit from thinking about the Web in a new way.

Adaptability
The Internet is an open and adaptable medium that can show up anywhere, from computers and phones to TVs to vanity mirrors and car seat headrests. Who knows where the next screen or projection surface will be? Content for such an adaptable medium should be able to adapt. This reduces redundancy in planning, development, and maintenance and therefore decreases cost. One code base can serve any and every device at the same time.

Furthermore, there will always be some new device that people decide to start surfing the Internet on. If your site is responsive, there’s no need to decide if it’s worth the cost to build a version of your site for the new device. It’s already built and displaying beautifully.

Consistent Branding
For a lot of companies, online presence is almost entirely a branding exercise. It’s all about being there when your customer is looking for you. A successful brand is one that customers can identify with, relate to, and ultimately fall in love with. It makes sense that after spending the time to bake that brand into a perfect website, it should always look the same. With a responsive design, that brand will form fit to whatever medium it’s being displayed on. There’s never confusion or guessing for your customer, and there’s only one update each time you need to make a change.

Evolution
In a very short time, all of the smartest and most agile brands will boast responsive websites, and everyone else will be clamoring to catch up. Efficiency and good sense will undoubtedly win out, and when that time comes, instead of trying to keep up, you’ll be miles ahead.

It’s hard to tell companies that they should, without a doubt, look at implementing a responsive website. There are limitations. There are drawbacks.

It’s really easy, however, to tell companies that they’d better open up to a new way of thinking about the Web. They’d better be receptive to some big and beneficial change, and they’d better be ready to implement when the time comes. Those who don’t react will fall behind. It’s a lot like when older companies used to argue the importance of a website in the first place… remember those days!?

This article was originally published in Philly Ad News

Two of my Favorite Responsive Sites Right Now
(Play around with the window size to see how these sites shift and rearrange for different device sizes… or open them up on your phone and your computer at the same time.)
http://anderssonwise.com
http://bostonglobe.com

Sure, Why Not Press The Button?
You’re an avid user of Twitter and you’re pushing 2,000 friends on Facebook. You check the box and watch while the application computes your social status. It comes back with a score of 35 out of 100 and offers $5 off your purchase if you share your new buy with friends on Twitter, Facebook and Google+. Decisions, decisions. Do you share your purchase with everyone you know? That’s pretty annoying. If you only share it with your “shopping circle” on Google+, you get $1.50 off. Is it even worth it?

You press the button. The price for the garment drops $1.50 and your transaction is complete. You casually show your on-screen receipt as you pass by the employee at the door. He offers you a bag, and you accept. The clothing brand just paid $1.50 to blast your inner circle with some free marketing. Well, not free, but for a lot less than it would cost to reach the same amount of people with an ad in a magazine or an online ad campaign, and hopefully with more credibility.

It’s Already Begun…
For those of you tech types and marketers who are aggressively driving the engine into this future of purchasing, good for you. Klout, for example is making noise with their social status ranking, the Klout Score. If you go to Klout.com and connect your Facebook, LinkedIn and Twitter accounts, they’ll give you a score and attempt to tell you what topics you’re considered “influential” in. On top of that, they’re already working with businesses to identify top influencers to offer them perks. An interesting example is the promotion of Stephen King’s new book Mile 81, where based on your Klout score, readers receive a free e-book download in exchange for Tweeting out the promotion and the book.

Take this a step further in the future. Imagine every product, every restaurant and every event you’re interested in calculates your social score as you walk through the door. If you want to get in, you better tell your friends you’re at the club. If you want to get in without a door charge, you better have a high social status.

There Are Some Concerns…
There are a few major problems with the future of shopping, as it pertains to social status and buying, and why it may run into some serious push-back. Giving discounts as an incentive to share a purchase on Facebook promotes biased brand advertising (what many would consider social media garbage) jamming up your feed. If your Facebook feed is full of “I bought this and that”, you’re going to stop trusting your friends.

Another problem is the rich and influential get the price breaks while the poor and tech-illiterate don’t get the deal. It accentuates the disparity between the social class that buys every new iteration of the iPhone and the everyday cell phone user that has never heard of a data plan or downloaded a mobile app. But do these people shop at Banana Republic or Victoria Secret anyhow, and do they even exist in 2015? Sure they do. Only 27% of US mobile phones are currently smartphones (according to comScore’s 2010 Mobile Year In Review report). Globally, only 1 of 5 people own smartphones. But, what will that number look like in 2015 and what percentage of people will use their smartphones to browse and buy on a daily basis? Assuming smartphone growth continues at it’s current rapid pace, by 2015 there will be a new value put on each customer, and these brands (the smart ones, anyway) will achieve as much social publicity as they can get from their socially-savvy consumers.

The Truth Is…
If you aren’t carrying an expensive smart phone and aren’t spending time on the social web, people still care about you. You will simply become less and less valuable in the eyes of your favorite brands and will be penalized, paying top dollar for their products. It’s high school all over again. Lady Gaga gets paid thousands for an endorsed tweet. You get nothing…unless you’re one of the cool kids (based on your calculated online social ranking) of course.

This article was originally published in Philly Ad News

Turntable.fm originally started as Stickybits, a QR code scanning, geotagging, hodgepodge of a tech start up. They raised $2 million in initial funding. When Stickybits didn’t take off, they pivoted their business and transformed into Turntable.fm, using their remaining money and resources to launch the product into its current state.

How does it work?
Users can create or join rooms. In each room, there are five DJs at any one time and up to two hundred other users who sit and listen.  DJs can then search for songs through the Turntable system or upload their own. The rooms then cycle through the DJs one song at a time while the rest of the crowd listens and “awesomes” or “lames” the song. If a song gets enough “lames,” it gets skipped. The DJs have incentive to play popular songs in order to collect “awesomes,” which unlock bigger and better avatars. This gamification makes Turntable “fun and engaging” for users and gives it a leg up on the competition.

Why is Turntable special?
Because people are far better curators than any algorithm. This is social music. People love music and they love sharing it. There are still some major hurdles for them to overcome, but Turntable has that “it” factor that Facebook, Twitter, and Foursquare all respectively have shared since their launch into the world of social media.

Record labels and their attitudes on copyright laws present the last major hurdle for Turntable. Currently, all of their music is licensed through Medianet, a digital content provider, employing the protection of the Digital Millenium Copyright Act (DMCA). Turntable, just like Pandora, claims to be a “non-interactive radio service,” which allows it to work under the DMCA. They pay a flat fee to the music owners for each song played. But there are several grey areas within the DMCA that need to get ironed out before Turntable can fixate itself within the social media landscape.

Where is Turntable going?
In the Brolik office, Turntable.fm has replaced iTunes, Pandora, Spotify, Hypem and the other numerous music services we previously used. Although Turntable is still rather young, it has some serious potential. We’ve set up a Brolik Turntable room for the office, and anyone can come in and play a song for themselves and our office via our wireless speakers (fair warning, we’re not always in there).

Once you start thinking about other businesses that can employ it, some real possibilities emerge. Imagine if you could go to your local bar and DJ with other regulars (and a few staff members to keep it organized). Or before you head off to the gym, you jump into your gym’s Turntable room and line up a playlist for the next hour. A few artists such as Ra Ra Riot and Talib Kweli have even started using Turntable.fm to showcase new songs and connect with fans first hand.

Turntable.fm is special. No other site has brought together social networking and music in such a successful blend. Let’s hope that the record companies see it as a beneficial tool that they can use and don’t thwart it before it can grow and evolve. At this point, all that we can do is sit back and watch this small start up begin to address the hurdles that still remain. But for now, we sit, wait, and keep listening.

So what is content marketing?
It’s creating valuable content through blogging, podcasts, seminars, white papers, etc and distributing that material to people who will associate a positive connection to your brand or services. Content Engineering takes that a step further– it’s using trends in analytics to optimize the views, downloads, clicks, traffic, and overall saturation and performance of the content you are marketing, before you publish it.

Why does it matter if we engineer the content?
Well, Google (and other search engines) reward websites that provide helpful and relevant content and make it easy to find. Relevant doesn’t just mean it’s helpful to some people, it means that popular search terms, the blog title and blog content all connect, forming a relevant search experience for the reader. In other words, people search and find what they are looking for, consistently. As a result of your strategic content engineering, your website will be more credible and optimized.

This type of engineering can be as simple as doing keyword research to analyze the competition and volume of a keyword or group of keywords before publishing your blog post using tools like Wordtracker or Google Keyword Tool. Let me give you an example…I had a handful of options for the title of this blog:

Hi, I’m a Content Engineer, and I’m Doing it Right Now. (Interesting, but not good for SEO)
The Basics of Content Marketing, Keywords and SEO for Blogging
What’s the Value of my Blog?
How do I Search Optimize my Site with a Blog? (Getting closer…)
How To Blog Your Way To More Search Traffic (WINNER!)

The difference between these titles could be hundreds or potentially thousands of unique visitors in the next few months. It’s hard to predict exactly what the outcome would be for each title, but looking at the keywords in each, the titles range from very competitive to high volume / low competition (and that’s what we want).

For example, the term “Content Engineer” shows ZERO searches in the Wordtracker database. That’s right, being the top site on Google for those who search for “Content Engineer” will gain you exactly nothing. Nobody knows the term (surprise!), and so nobody is searching for it. Conversely, the term “How to” was included in almost 250 million searches in the Wordtracker database and “How to Blog” in over 20 million. While not everyone who searches for “How to blog” is looking to increase search visibility, there’s a good chance that people who are looking to blog want people to read it, making this a very pertinent article.

If you’ve read to this point and learned something new, then I guess I’ve done my job and I’m sure Google appreciates it. So, before you just post your next blog, think about the amount of potential interest based on the topic your writing about and don’t just come up with a clever title. Find the right title for SEO. You’ll be happy with the results.

Now, almost 8 years later, it would appear that everyone has realized that websites aren’t movies. Now that people are used to browsing the Internet, they want and need certain things to stay interested. Nearly everyone (except the restaurant industry) has done away with intro videos and sitewide music, but it’s still really hard for people to break away from another medium that the web tends to impersonate. Print design.

The Web is Definitely Not Print
At their core, print and web are very similar. Both mediums convey a message, both aim to lead the viewer around a “page” or “canvas,” and they both need good design to do so. The web, though, has a number of really useful traits that print doesn’t have- things like an unlimited canvas size, the ability to hide and show information, and the ability to adjust design based on user preference- to name a few. The boundaries of print design are defined by the medium’s lack of these traits. As of today, those same boundaries are (for some reason) being placed on web design.

What I’d like to propose is that the web doesn’t have the inherent boundaries that print has, so we need to stop treating web design like it’s print design. We need to stop thinking about the web in terms of print, and we especially need to stop talking about the web using print terminology. Remember (and I know it’s hard), that the web is not print.

Even though there are a lot of reasons why the web should not be thought of in print terms, I want to focus on a couple important reasons just to get you thinking.

The Canvas
You know why we call it a “web page”? It’s because we’re referring to a page, like a page of print. A page, however, has a fixed size. It has edges that limit it because it’s physical. In print design, if we have a lot of information to get across to a user, and we only have a small page, we’re forced to shrink all of the information to fit on that single page. Good designers know how to organize that information so that it still looks friendly, readable and carries a brand, but at some point the limits of a physical page can really hurt an otherwise perfect set of information.

A website, though, in a browser window, is a virtual and essentially limitless space on your computer monitor with no such constraints. Clients are always asking us to keep information “above the fold,” even if that means shrinking font sizes or reducing image sizes. But when designers try to cram information above the fold on one computer screen, another smaller screen still hides information and a larger screen looks empty with a ton of white space at the bottom. The web isn’t meant to have a fold. It’s movable, and it’s meant to be interacted with.

The Andersson-Wise website is a great example of how a design should react to screen size, not be constrained by it. Resize your window to different proportions to see it in action.

Instead of treating a website as a page, it’s better to think of it as a window– a window that looks into a sea of information that can be scrolled, moved, scaled, etc.

User Preference and Control
Another trait that print lacks is the ability to cater to user preference. Some like their words big, others very tiny. Some even prefer to read text that’s white on black, so it’s easier on the eyes. The modern browser allows us to control these things, but the modern web designer tries as hard as possible to override these settings, sticking to a strict, pixel-based font size and a fixed site width. We even purposely cut a design off on each edge and leave a bunch of unused “background” just because it’s a constraint that we’re all used to. (Don’t get me wrong, I know we have to do these things sometimes, but hopefully you’re starting to get the point here.)

That’s only one example of a user preference. Think about the user who has thirteen windows open on their screen at once, so your website is only a tiny square in the corner of their screen. Where’s the fold for them? How’s your font size look there?

And what about mobile?!

The Point
The point here is not to run out to your web design firm and overhaul all of your fixed-pixel font sizes, opting instead for a percentage-based font system that scales to a user’s browser window. (That would be awesome, though.) The point is really to start looking at the web as the living, breathing, interactive organism that it is. The more your users control their experience, the happier they are. It’s scary as a designer, as we tend to be control freaks, trying as hard as we can to finesse each and every pixel until our composition is “perfect.” But we need to design for the unknown. It’s even got a name: Responsive Design. Some consider it a zen-like philosophy towards web design, because it just goes with the flow. One “design” can work on a huge TV screen and on a tiny smartphone equally well.

I’ve found that the challenge of creating a design that can move and react and still look great is exponentially more fulfilling than creating a static, non-changing, single layout. Learning to embrace the spontaneous design moments that happen as our images and text slide and scale is essential to a more user-friendly and evolved World Wide Web. It’s more challenging, but it’s more rewarding. The sooner we all stop thinking about the web as print design, the faster the web can progress as its own new and different medium, with its own set of capabilities and possibilities.

Additional Information

Andersson Wise – a great example of what the web can be and where it’s going.
http://anderssonwise.com/

Responsive Web Design by Ethan Marcotte - If you’re a coder and are interested in responsive design, this book is a quick read and a great resource… in fact, the author coined the term “responsive design.”
http://www.abookapart.com/products/responsive-web-design

A Dao of Web Design by John Allsopp – Great article (from 2000!) that explains some philosophy relating to the web as its own medium.
http://www.alistapart.com/articles/dao/

For designer/coders – A Smashing Magazine compilation of tricks and techniques that we’ll start to see as more designers start embracing the web for what it really can be.
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Of all the reasons to pay for a degree in graphic design, I consider typesetting the most important. I’ve seen plenty of “amateur” designers who master Photoshop, Illustrator and InDesign, but fall short of creating professional layouts because the nuances of type are insanely difficult to just pick up.

On the web, huge numbers of “amateur” designers take that difficult task and make it more difficult by appealing to a fleeting, click-happy audience. The web reader is much more finicky and typically holds the attention span of a gnat. (Plus they’re tweeting on their phone while reading your website.) Without proper typesetting, you’re going to lose potential audience, readership or business.

So here are some factors to consider when typesetting for print or the web. I’ll start with some traditional rules that are overarching type rules, no matter where your type appears, then I’ll get into web-specific rules.

• Watch the Line Length
  Believe it or not, there is an optimal amount of characters per line where a reader’s brain stays interested, and their eyes don’t get fatigued. The perfect balance of reading and breaking (“breaking” being the mental pause you get as you go from the end of one line to the beginning of the next) will make your text easy to read, and a shorter line length will make your text initially feel accessible instead of overwhelming.

  How long is too long? The entire width of a webpage is ridiculously too long. Think of books and newspapers and how they break large blocks of text into columns. The typical, optimal line length is somewhere around 70-80 characters (including spaces), but really it’s a judgement call based on actually reading the text and seeing how easy or hard it is to read and digest.

• Pay Attention to Space (Between the Letters, the Words, and the Lines)
  Graphic designers pay attention to every detail about their typography. By controlling the space between each letter overall (called “tracking”), we can make text more digestible and easier to skim. By adjusting the space between each line of text (called “leading”), we can help the reader move quickly up and down long blocks of text. Even manually adjusting each letter’s relationship to the letters around it (called “kerning”), can create a surprisingly more solid message.

• Create Hierarchy
  Probably the most important factor when initially setting type is to create hierarchy. A designer needs his or her reader to know in less than one second what’s important to read first, where to look next, where to look after that, etc. Or maybe the reader knows what she’s looking for and needs to quickly find only that. Changing sizes, weights, placement, white space, line rules and color are just a few ways to start distinguishing one piece of content from another and controlling how your reader sees your information.

• Be Generous with White Space
  The final traditional typesetting “tip” I’ll go over is white space. White space is the space around blocks of text, images or any object on your page. It’s very important to frame your content with white space so that it feels easy to dive into and doesn’t overwhelm your reader.

Now let’s get into a few web-specific typesetting rules. This is the “new breed” of typography, and once you start looking around the Internet with this stuff in mind, you’ll see that not many web designers are doing this right.

• Plan for Skimmers
  On the web, a typical reader has a much shorter attention span than someone reading print material. Usually people are trying to quickly find the information they want amongst the sea of junk that is the Internet. So they skim.

  If we read every word of text as we search for the information we wanted, we’d never find anything. Therefore, when typesetting for the web, keep an F-shaped reading pattern in mind. Users read left to right and top to bottom (at least in the US). This means that skimmers will read the first couple words of a paragraph, and if it doesn’t look like it’s going to have the info they want, they’ll skip right down to the first couple words of the next paragraph.

  Keep your text short and broken up. I like to follow two simple guidelines. No more than two or three sentences per paragraph, and every paragraph gets a title. Of course, I can’t always stick to that exactly, but I certainly try.

• Typeset for Interaction
  Web readers know that the information they need isn’t necessarily on the page they’re currently looking at. Moving page to page in a non-linear fashion is one of the hugest advantages of the Internet in general. So readers are not only skimming your actual content, they’re skimming your links, too, in case there’s a better place for them to land.

  Make your hyperlinks stand out well, and make the copy count. Web readers skim by reading the first 11 characters of headlines and hyperlinks.

Next time you’re reading something online and it’s subconsciously slowing you down or tiring you out, think about factors like letter spacing, line spacing, and line length. When you look at your own website’s content and wonder who’s actually reading it, consider how easy it is to scan the information so your reader knows exactly what she’s going to read before she reads it.

Graphic designers train in typography for years, but most web designers don’t. I don’t think we need to get too snobby or artsy with our type on the web, because after all, it’s ever-changing, dynamically generated, and largely utilitarian. But, what good is your website if no one wants to read it? You might as well put your logo and a picture of your product over a couple paragraphs of Mandarin Chinese.

1. Create a memorable brand identity and a strong voice to go with it (sorry all you product-centric folks out there, you’re generic without it).

2. Create a Facebook fan page and experiment with Facebook ad campaigns. You might be surprised at how quickly your following will grow. Just make sure you’re staying active with quality content, offers, and conversations. Each Facebook fan is valuable.

3. Get your product in the hands of people who want you to succeed and will talk to everyone they know, even if they don’t pay you a cent.

4. Find someone willing to write about you, then give them a reason to. Warby Parker got their start this way.

5. Make product returns as easy for your customers as possible to eliminate risk for the customer. Piperlime does this really well, and so does Gilt.

6. Go beyond the “browse and buy” mentality and integrate social tools to allow your customers to ask their friends’ opinions, share their purchases, and “like” your brand. Reward them for doing it, too.

7. Keep your website and customer experience slick, simple and extremely usable.

8. Pay attention to analytics. Focus on improving every page/click and converting every visitor.

9. Focus on CRM integration as early on as possible to organize customer accounts, email subscribers, purchase history and analytics from one central location. A few years from now you’ll be very happy you did.

Do you have other tips to contribute? Comment…