-
From Print to the Web: A Designer's Guide
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
We work as technology partners with a number of designers. They'll design a site and we'll make it work as a website. These partnerships have been rewarding as we've worked on a diverse range of sites and have been able to meet a number of great designers.
This diversity of work is a product of many of our design partners having a print background. In web design circles we've seen this looked down upon, but frankly our experience with print designers has been incredibly positive. Generally, print designers have a very strong and disciplined design background so once they learn the basic principles of the web as a medium they are able to translate their ability well.
The purpose of this post is to cover the basics of the web for designers who have a strong print background. It doesn't cover core design principals, those translate to the web just fine. The five main areas that will be coverd are:
- Successful Web Layouts
- The Dimensions and Color of the Website Medium
- Safe Typography Choices for the Web
- Backgrounds
- File Organization
Successful Web Layouts
Compared to print pieces, most websites share very common layouts. To some extent, this is because designers tend to copy each other. Other than a lack of creativity however, there are a number of good reasons for this. Websites that behave in expected ways are much easier to use.
To get an understanding of how web layouts evolved. It is worth reading this piece by Jakob Nielsen about how user's eyes move on a webpage:
F-Shaped Pattern For Reading Web Content
General Website Elements
This eye pattern makes plenty of sense when considering how the elements of site are traditionally placed. Below are some accepted rules-of-thumb to consider when placing website elements:
Logo
A site logo should go in the top left with few exceptions. This is where a visitor's eye goes first so the site will be associated with your brand if the logo is there and ready. Additionally, this is where a visitor will check if they stumble onto the site from elsewhere and they wonder where they are.
Navigation
A site's primary navigation should either be listed vertically along the left side of the page or horizontally along the top of the page. More and more major sites are moving to a horizontal naviation scheme. We believe this trend will continue now that nearly every site designs for a minimum screen width of 1024px. This increased width allows for larger navigational structures to fit horizontally and it also encourages more multi-column content layouts. (See a nytimes.com sectional page.)
Content
The primary content of a page should be towards the left or center and be reasonably narrow. In fact, the same alphabet-and-a-half line length rule applies from print -- for a fixed-width site this means roughly 500 pixels. The primary difference between print is that on the web, text can't easily wrap from one column to the next. Visitors are willing and accustomed to scrolling while reading.
Login, Logout, and Search
These go in the top right of a page by convention. Nearly every bank, ecommerce site, search engine or really every site puts these in the top right so visitors will be looking there.
Banner and Call to Action
As described in the eye tracking article above, the first pass a visitors eye makes, is in a horizontal stripe across the top of the page. Many sites will put a banner in this area along with a call to action. This has become nearly universal among political websites that must quickly interact with new visitors since the site may be only be up during the campaign.
Contact Forms/Buttons and Signup Forms/Buttons
These are often found in the sidebar of pages towards the top. They can also be placed in the header of a site near the top, but the explosion of blogs has made it more common to see them in sidebars. The important thing to remember is that the farther down the page they are, the number of views they will get will decrease.
Footer
Obviously the footer of a site should be at the bottom. Some of the elements that are often contained within the footer include a repeat of the logo, primary site navigation and copyright line. If the site has a privacy policy or terms of service, this should go in the bottom right.
Well-Understood Layout Elements
"Featured" Box
It has become common to use a box in the highlighted banner of a site that features latest stories along with an image. Usually just one will be featured at a time, but it is possible to switch between three or four using tabs, links or buttons. This can be done simply, with a switcher, or other fun effects can be used like sliding or fading. We use this technique on our homepage to highlight our different services and we use a slide transition.
Drop Down Menus
Early-on, drop down's were considered bad practice. This was because they depended on javascript during a time when bandwidth was scarce and javascript was much more unreliable across browsers. Today they are common and quite useful. One form of the dropdown, the mega-dropdown shows a large amount of information at once. These can make deep sites much easier to navigate. Jacob Nielson has a great writeup on these.
The Dimensions and Color of the Website Medium
Compared to print, websites are very small. Websites are shown on low-resolution screens that are poor at reproducing color. This causes a number of issues that a print-to-web designer needs to be aware of.
Pixels vs. Inches vs. DPI
When dealing in print the unit of measure is the inch, or point, or cm or something else that bears a connection to real-life physical dimensions. This is why DPI is used. A designer can create something of a certain size, regardless of the resolution it will be printed at. This is not possible on the web since the unit of measure is the pixel and pixel density varies dramatically. For example, it is possible for the common resolution of 1024x768 to be used on a 12" laptop and a 19" flat panel.
This is why setting your working resolution to 72dpi is not enough! Instead it is important to understand the dimensions of the media in terms of pixels. Monitors may have varied resolutions, but in 2009 it is safe to design for a minimum resolution of 1024x768. This does not mean that you can use all of those pixels as you can see below:
Safe Dimensions
Some of the width and the height will be consumed by the browser, scroll bar, toolbars and even the windows task bar. We consider a safe maximum width to be 960px. It may be worth going more narrow if the background image or color are important to the tone of the site. For elements that must be "above-the-fold" use 500px as a safe number. Also remember that visitors are more and more willing to scroll.
For content columns aim for 450-650px wide. This gives visitors a chance to change their font size without losing a good reading width.
Working in Photoshop
When in Photoshop, be sure to set your unit of measure to the pixel so that it is easy to work out the dimensions of the site. Additionally be sure to use the sRGB colorspace. CMYK does not work on the web. If the site ends up needing translated from CMYK some colors may be slightly different than you originally intended. Additionally, if you are ever saving an image for the web, a CMYK image will not display properly on most visitors machines.
Typography for the Web
Web Safe Fonts
Typography on the web is depressing. There is really no way around it. There are some emerging technologies that could make the situation better, but these are the only safe fonts for copy:
- Times / Times New Roman
- Georgia
- Palatino Linotype
- Andale Mono
- Arial
- Arial Black
- Impact
- Trebuchet MS
- Verdana
- Comic Sans MS
- Courier New
So what does "web-safe" mean? It means you can expect them to be installed on a visitor's computer and that it will render as you expect. If you use a font that a visitor doesn't have, the results cannot necessarily be anticipated and a replacement font will be selected. To try out some of these fonts on the fly, the following tool is great:
Using Non-Web-Safe Fonts
Other fonts can also be used sparingly by using a number of techniques. The thing to remember, however, is that any of these techniques have downsides. They either cause the page to render more slowly, increase the file-size of the site, or make text impossible to copy and paste. Many of the best "web-medium" designs stick to web-safe fonts as much as possible
Replacement Techniques:
- Basic Image Replacement - This is just a rasterizaton of the text to a static jpg, gif or png. This makes it impossible to update the text with a CMS and also can have some SEO downsides. This is the best technique for logos or other major design elements.
- Cufon - This uses javascript to draw the text in a font as vector shapes. It is reasonably lightweight and it is easy to change text since it is done dynamically. As a downside, the text cannot be selected and it can have a delay prior to rendering.
- sIFR - This method is like cufon except it uses flash to render the text. This makes it a little more heavy-weight, but its text can be selected.
Designing for more than Lorem Ipsum
If you are designing a site with client or user generated text, you'll need to consider more than just paragraph text. A good web-style guide will be ready for:
- Headings 1-6
- Paragraph Text
- Ordered Lists
- Unordered Lists
- Blockquotes
Building this out will ensure that the site design will continue to look good even as content is added.
Backgrounds
Since visitors have different monitor sizes, they will see a different amount of the site background. This should be considered when designing the background. In most cases, a repeating background will be used, so it won't matter how large a monitor is. That is how this site works:
A background image must also account for the fact that each page will be a different height. In the case of our site, we repeat the background image horizontally over a white background. The same can be done with a vertical gradient, but it will need to ultimately fade to a static color, so that a webpage can extend down indefinately.
If an image is used as the background, it will need to consider extra wide monitors. It should either fade out to a static color, or the image should be 1920px wide to accomodate 24" monitors. It will also have the issue of vertical expansion to consider.
Organization
As mentioned early on in this guide, it is important to set up Photoshop to be ready to work with web colors and pixel based dimensions. To do this, set your color profile to sRGB and your units to pixels. This will get you off to a great start.
From there, it is important to keep your photoshop file well organized as it will serve as a reference for the website design for the life of the site. There is a great guide on Web Design Depot on how to do this. The key points are:
- Make sure every layer is labeled and organized in a folder.
- Nest Folders into a logical design heirarchy.
- Make sure to include hover and click states
This concludes the guide. We have tried to make it as comprehensive as possible while still remaining brief. If you have any suggestions on additional tips to include or bad advice to remove be sure to let us know in the comments.
- Successful Web Layouts
-
Mind the Web Gap, Please: Challenges in Bridging the Interactive Agency Divide
Kris Jordan
Kris Jordan leads the web programming & development at New Media Campaigns, previously worked for Microsoft's Developer Division, and studied Computer Science at Brown University and UNC Chapel Hill. You should follow him on Twitter.
"We think your [insert creative, copywriting, print design, branding, positioning, ... here] is the best of the bids... but can you do [insert custom development, email marketing, interactive web design, content management systems, ... here]?" With advertising and marketing dollars continuing to shift to the internet traditional advertising agencies, marketing and PR firms, and print designers can no longer escape having an answer to their client's internet needs.
So just how difficult is it to forge a path from being an Awesome Agency to an Awesome Agency (That does their Awesome work on the Web, too)? There's only challenge standing between them, right? A little thing called the web.
Without a support infrastructure for the web an agency's core competencies won't make it safely to the "other side". The good news is the demand is continuing to grow on-line for better website copy, skillful graphic design, and all-around thoughtful creative. Most agencies have the right pieces to create value on the web, they're just missing a support beam to keep from drowning in the alphabet-soup of technologies: HTML, JS, CSS, XML, JSON, FTP, etc.
As an established agency, this is today's most important juncture: the realization that your core competencies have a growing demand on-line, but you can not meet the demand without stronger technological support.
How does an agency bridge the gap, then? Let's start with the most common approach: obtaining competency in HTML, CSS, and JavaScript.
The Triumvirate Beam Bridge Support: HTML, CSS, and JavaScript
An agency learns HTML, CSS, and JS or hires someone that does. Now when your client asks "can you create a website along with your branding work?" you've got an answer. Need to put your copywriting on websites, forms, site maps, landing pages: no big deal. All of these elements are a part of your pitch now. The more you pitch interactive and learn about the web the more you realize the problem with this solution: the distance between being a traditional agency and an interactive agency isn't much wider than you originally thought, but the web is a heck of lot deeper than you thought.
It's not long before knowing HTML, CSS, and JavaScript just isn't enough to do the awesome web work your clients are after. The problem with the web is that new technology and techniques are always being invented and it's only growing deeper. At first static websites are all you need to know how to do. Pretty soon it's dynamic websites with custom programming in an obscure programming language that needs to integrate with Twitter and accepts payments from a form that does javascript input validation and hooks securely into a merchant account.
When agencies first get their hands dirty with web technology it is difficult to appreciate the significance of a couple major points:
- Growing a technological competency involves growing in a very different direction from expanding existing core competencies.
- Learning a valuable new web technology or technique today doesn't mean it will solve your client's problems tomorrow.
Because the web is ever changing agencies can't bridge the interactive divide by stacking up technologies one-by-one. Instead, if a traditional agency is after sustainable success on-line, the traditional agency must build a different kind of bridge suspended from two new, vital core competencies.
The Cable-stayed Bridge to a Sustainable Interactive Agency
The two core competencies necessary to stay relevant on the internet are:
- Understanding and Appreciation of Programming Fundamentals
- An Obsession with Learning New Technology
Traditional agencies looking for long-term success on-line must either grow these competencies in-house, or partner with a technology focused firm (shameless plug) whose core competencies are already programming and learning new technology. The right direction is a strategical decision that depends on the size of an agency, its existing staff, risk tolerance, available funding, and how quickly it needs interactive capability. That's another blog post in itself.
Bottom line: Travel with caution when crossing the interactive divide. The web is a lot deeper than you probably think.
-
Reflecting on Three Years of Business
Clay Schossow
Clay Schossow leads New Media Campaigns' project management and business development efforts. A graduate of UNC Chapel Hill, he has guided more than 200 websites from concept to launch. He is a frequent writer on Internet marketing and online campaigning. You should follow him on Twitter.
Just last week on May 5, to little fanfare around the world (except for a few tweets), our firm celebrated its third year in existence. It has been an exhilarating and rewarding few years, which has seen us grow from a bootstrap funded startup to a successful full service web design and development firm that has launched over 200 websites for clients ranging from public corporations to national non-profits.
Over time we have grown in number, have had a couple of different offices, have adjusted our business model, have won awards, and have made plenty of mistakes. However, we have also always stayed true to our core business philosophies:- Empower our clients with powerful technology that meets their needs to solve specific problems.
- Create beautiful websites that set our clients apart from their competitors.
- Provide unparalleled personal service, always making ourselves available to our clients and going the extra mile for them.
- Have a lot of fun in the office and make NMC a truly enjoyable place to work.
- Do all of the above at an extremely affordable price for our clients, allowing them to successfully leverage the web at a fraction of the cost of our competitors.
Challenges and Decisions Along the Way
When we first launched, we envisioned ourselves as only a political web design firm, solely focusing on that niche. As it stands today, a little over one third of our total business is political, and the rest is non-profits and corporations. This is due to the fact that within weeks after launching, our political clients brought us non-political business; rather than reject these clients, we embraced the new niches and expanded into new regions. This decision ended up being a major revenue driver and likely kept our company alive through off-election years.
Similarly, when we first launched the company, we didn't foresee acting as a web development partner for ad agencies, and that is now our most explosive area of growth. The idea makes total sense. Ad agencies are amazing at strategy and creative; we have special talents with technology and understand the web. Why not marry the two knowledge bases to provide clients with the best of both worlds and no added overhead?! It seems so straightforward now, but it was a space we looked over in the frenzy of our initial launch.
This ability to wholeheartedly embrace change within our company and shift on the fly ultimately helped us become a stronger company with a deeper body of work and a more steady revenue stream. To this day, we're constantly trying to think of ways to evolve our business into other disciplines that strengthen our overall offering to clients and also grow our company.Separating Ourselves from the Pack
We have progressively grown every year that we've been in business, in terms of volume of work done and company revenue. The number one thing attributing to that growth are referrals. We pride ourselves on being passionate about our clients and truly wanting them to succeed online, and they have rewarded us by sending new business our way.
In addition to our service, another reason our clients remain happy with us is our view on project-based billing vs. on-going hourly fees. We're not here to milk every billable hour out of each client, in fact we try to avoid hourly charges to clients all together. After we have priced out, built, and completed a project, over 90% of our clients never incur an hourly fee; however, just about all of our clients reach out to us for help or advice sometime in the future...we just don't bill them for those requests.
It's a pretty novel idea in the world of interactive agencies and most of our clients are initially skeptical, but it boils down to our core principles of empowering our clients with powerful technology at a good price. We want them to succeed, and we know that if we do that without unnecessary fees, the long tail of the relationship will be much more lucrative than billing for our time on a phone call. This approach has worked well for us and our clients, and I'm surprised that more agencies aren't moving in the same direction.Where We Are Now
These decisions and procedures have helped us stay viable and become the company we are today, all along without ever deviating from the core principles outlined above. As it currently stands, we're one of the top political web design firms in the country, have a renowned Content Management System, and have built a prestigious client list.
None of this would have been possible without facing the adversities listed above or without the dedication of our staff and partners. It's been a great ride over the past years and we have learned a lot; we're also focusing on continued expansion over the next year. 2009 has already been the strongest year in our company's history, and it's much thanks to the leg work we put in the past three years. At times, it was a slow growth curve to get here, but it has continued to be worth it, by allowing us to do quality work and have fun.
Happy Birthday to New Media Campaigns and congrats to our team for some great work, and a special thanks to all of the clients that have made this possible! -
Helping Ronald McDonald House Charities of North Carolina Share a Heart
Clay Schossow
Clay Schossow leads New Media Campaigns' project management and business development efforts. A graduate of UNC Chapel Hill, he has guided more than 200 websites from concept to launch. He is a frequent writer on Internet marketing and online campaigning. You should follow him on Twitter.
Launching a non-profit online marketing campaign to engage donors around the Carolinas.
Ronald McDonald House Charities of North Carolina has run a Valentine's themed campaign for the past couple years known as "Share Your Heart." It has been a point of purchase campaign where shoppers at selected stores can donate a dollar after making a purchase and then give a paper heart to someone close to them.
This year, their PR Firm, McKeeman Communications and marketing firm, Grace Strategic Marketing, thought it would be great to add an online element to extend the reach of the campaign to those who may not see the point of purchase promotion.
The team came to us, knowing that we act as a web development partner for PR firms and have launched dozens of non-profit website designs to implement the design and set up the design for the new rmhcnc.org as a portal to this campaign.
We also had the idea to let people send virtual hearts to friends from the site, in order to establish it as more of a destination and to refer other people to the campaign.
The team loved the virtual heart idea, and we were off to the races.
After coding their design, we designed the Virtual Heart feature, which allows visitors to personalize a heart (seen above) and send to up to 10 of their friends. The friends get an email that refers them to both the heart and the main site.
This site is a great example of how to take current campaign, move it to the web, and add an online touch that encourages usage. By building in the Share a Heart online feature, the campaign automatically gains legs and expands its network of visitors/donors far beyond the original visitors.
Please join the movement and visit the site to share a heart this Valentine's season.
-
Launch of New PHP Framework, Recess!
Clay Schossow
Clay Schossow leads New Media Campaigns' project management and business development efforts. A graduate of UNC Chapel Hill, he has guided more than 200 websites from concept to launch. He is a frequent writer on Internet marketing and online campaigning. You should follow him on Twitter.
We are very proud to announce that one of New Media's founding partners, Kris Jordan, has completed and launched a new PHP framework named Recess! Kris has spent the past few months, much of it from the NMC office, developing the framework and preparing it for launch. As a gift to PHP developers everywhere, Kris released the framework on Christmas.
Recess succeeds where other PHP frameworks have failed. Just about all other PHP frameworks have fallen behind, especially in the department of RESTful development -- Kris developed the framework with these shortcomings in mind. He took inspiration from what Ruby on Rails and Django get right, what PHP5 allows, and what has been left out of other PHP frameworks.
The team at NMC has high hopes for the framework and is dedicated to helping it succeed. Our team of developers plans on rewriting our Content Management Software in the Recess framework, and we've already developed a couple of custom applications in the framework while we were beta testing it.
The development team at NMC is well versed in many different frameworks, and we have confidence that Recess outperforms them all and is well on its way to becoming a mainstay in the realm of PHP frameworks.
If you're looking for a powerful and modern PHP framework, I encourage you to register to preview Recess. Congrats again to Kris on all of the work he put in and the success that he is already experiencing.
-
Great Email Customer Support from Campaign Monitor
Clay Schossow
Clay Schossow leads New Media Campaigns' project management and business development efforts. A graduate of UNC Chapel Hill, he has guided more than 200 websites from concept to launch. He is a frequent writer on Internet marketing and online campaigning. You should follow him on Twitter.
As a thank you to companies that go above and beyond the call of duty in customer support, we like to give them a shout out on our blog. Previously, we highlighted Wufoo's personalized thank you cards. Now, another company has joined their ranks as customer service rock-stars. Campaign Monitor majorly helped us out the other day when we were blasting out an email for one of our clients.
We've always been a big fan of Campaign Monitor and their email marketing product; we previously included them in our list of tools we use to build successful websites. The other day, I was having trouble importing a list of contacts for the client, even though I was pretty sure that I had formatted it correctly. I emailed the support team at Campaign Monitor, expecting to get some generalist advice on how to format and try again. Instead, I got an extremely friendly email and a completely reformatted list. That's right, their friendly customer service rep, Diana Potter, actually went into my CSV file, did some reformating and sent it back to me along with this note:
"After switching that the file was still having problems, I think that's due to the handful of names with first and last comma separated and such. I went ahead and cleaned up your files, removing the names with associated email addresses, and converted it to a .csv file. It should import fine now but let me know if you're still having any problems."
How awesome! She saved me the time of having to figure out the error and reformat the list, and it allowed our client's e-mail blast to get out on time. There was no extra charge at all, they just wanted to make sure they got it fixed; maybe I was so happy because this philosophy reminds me of our no hourly fee approach to customer service. No matter what the reason, it made my day and I just had to thank them in a public way. Anyone else have stories of companies going above and beyond the call of duty to keep you happy and your business rolling along?
Subscribe to RSS
Subscribe to email updates
-
Go to our Development Blog to read about new technologies, techniques, and tutorials for developers and designers.
-
Go to our Internet Marketing Blog for strategies and discussions on how to fully leverage your web presence.
Network with Us