-
Big Relaunch of the GetHiFi.com Site
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.
For some time now we've been working on our new Web Marketing platform, HiFi. We first launched a marketing site for it back in September. At that point it was just a simple landing page with a cool rainbow header.
This time around, we worked with a local designer, Lenny Terenzi to get a really killer design. We just re-launched GetHiFi.com on the design last week. Today, we put up a 38-slide slideshow that documented the process of taking Lenny's complex design and turning it into a website. We thought it would be interesting to followers of this blog since it covers HTML5, CSS Sprites and a bit of jQuery. So if that is something you're interested in, head over to the post to read more about it:
Building a Complex, High-Performance Site with HTML5, CSS, and jQuery
-
Good Web Design Remains Important in B2B Online Marketing
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.
A recent survey of B2B customers by RainToday had some interesting findings about the importance of different elements in a B2B marketer's online presence. The chart above, posted by HubSpot, outlines the top 10 important factors. The new study gives credence to philosophies that web designers and marketers have been espousing to B2B firms for years.
For example, when B2B marketers approach us about our services, we frequently hear “our customers don’t care about design – they come here for facts and to find our phone number.” It’s a statement that I’ve repeatedly heard over the years. Even if they don't explicitly state it, it's implicitly evident in the way they treat the design process or creative costs.
While I'm the first to admit that content is an essential, and likely the most important, aspect of a company's web presence, it's also critical to understand the importance of design. In fact, design is inherently relevant for the rest of the surveyed website elements, as it is the design that will highlight things like white papers, presentations, case studies, etc. Without a well-thought-out layout and attractive design, these other important features will be hidden or cumbersome to the user.
A couple of our B2B clients that have really taken this study to heart are Health Decisions and CloudSwitch. Both of these companies have similar targets of highly technical and sophisticated executives. They not only do a wonderful job of creating voluminous content in different formats, they both also placed a high priority on design, making sure their site resisted the template look of many B2B sites.
From our initial discussions, both clients were clear that they wanted their web design to be a distinguisher from their competitors, and that they wanted to make their content and calls to action available in an attractive and informed manner. The strategy has worked. Both companies frequently receive compliments on their sites and online marketing efforts, confirming that prospects are noticing.
As B2B marketers prepare to embark on a redesign, they will be well served to not only create good content and use inbound marketing, but to also place a priority on good design and informed layout. Are you a B2B marketer that has placed an emphasis on design as well as content? What has the result been? Look forward to hearing other opinions and cases.
-
The Complexity of Simplicity
Kris Jordan
Kris Jordan leads web programming & development at New Media Campaigns; Kris previously worked for Microsoft's Developer Division, and studied Computer Science at Brown University and UNC Chapel Hill. You should follow Kris on Twitter.
'Simplicity' is often the protagonist in product design lore. Perhaps too often. Simplicity is deceptive. Simplicity isn't always the good guy, and many of its best showings aren't simple at all.
Take Google, for example. Its user interface is undeniably simple. In a recent experiment it is as simple as a logo and a text box. No submit button. No links. No "I'm feeling lucky". No advertisements. The web's most popular application has the simplest design.
Very little about Google though, outside of user interface design, is simple. Google is the web's most complex application. Feel the dissonance? The most complex web app has the simplest interface. This is a key trait of 'good simplicity': leverage.
Leverage is simple with a purpose. Leverage as in mechanical advantage, not Lehman Brothers. The ability to do more with less, not less with less. Simple not as in simple stupid, but as in simple machine. Good simplicity moves the fulcrum closer to the load. Bad simplicity removes the fulcrum all together.
Good simplicity restricts user input to multiply its value. On one end of the Google machine you type in words, on the other end of the Google machine you get a list of the web pages most relevant to those terms *from across the entire internet*. On one end of the Twitter machine you type 140 characters, on the other end everyone on the internet who cares about what you're saying receives it. On one end of the iPhone machine you stretch your fingers out, on the other end a map of the entire world zooms in.
The iPhone is another icon of simple design. Its face has one physical button. One button. This beautiful simplicity is achieved through patentable complexity: a multitouch screen. When the iPhone was introduced it was both the world's simplest smart phone and its most technologically complex. The 'simple' capacitive touch screen leads us to another key trait of 'good simplicity': complexity disguised.The face of an iPhone really has 153,601 "buttons". Only one of them can be pressed reliably: the one that isn't on the screen. The other 153,600 are points on the screen so small that when a single finger touches it tens to hundreds of them are pressed at once. Specialized hardware and algorithms then turn this large amount of noisy input into the single point on the screen your finger was aiming for. Somehow it works and the result of this complexity is an interface that feels natural and familiar. It feels simple.
Good simplicity disguises necessary complexity. Bad simplicity labels all complexity as unnecessary and throws it out the door. Google could have chosen not to accept misspelled words, they could have created a separate app for solving mathematical expressions, multilingual searches, etc. These are all complex problems Google solved not by avoiding them, but by disguising complexity to make us believe it's just as simple as every other search.
Simple can be a siren just as easily as it can be a signal. Good simplicity is less with leverage, not less with less. Good simplicity is complexity disguised, not complexity denied. Don't give in to stupidity when creating simplicity.
-
Designing for the mobile web
Josh Lockhart
Josh Lockhart is a project manager, designer, and front-end developer at New Media Campaigns. A graduate of UNC Chapel Hill, Josh encourages web standards, semantic markup, and simple design. Josh writes about web development and creates RapidWeaver themes on his personal website. Follow Josh on Twitter.
Devices and Platforms
New Media Campaigns recently launched a mobile version of its website. When I was first approached with this project, Joel Sutherland and I debated how we should develop the mobile website. Should we develop a mobile website only for Apple, Inc.'s iPhone? Or should we develop a mobile website for as many mobile devices as possible?The mobile web has surged in popularity lately with help from the iPhone. The iPhone has been a tremendous success, and it has propelled web standards into the main stream thanks to its adoption of the Webkit platform. Other recent smart phones and mobile devices have also adopted the Webkit platform, such as Verizon's Droid and Palm's Pre.
Joel and I decided to target the Webkit platform rather than a single device. The Webkit platform provides a nice breadth of device coverage and a surplus of advanced web development features, such as web standards and CSS3 support. As a result, we were able to leverage advanced CSS properties such as
border-radius,text-shadow, and more. Of course, these properties will degrade gracefully in less-advanced web platforms. In an earlier blog post, Joel describes how we targeted specific devices that support the Webkit platform.Simplify, simplify, simplify
A smart phone is small compared to a desktop web browser. The Apple iPhone and Palm Pre provide a 320x480 screen. The Verizon Droid provides a slightly larger screen. With such little space, it is imperative to provide a good user experience with a simple and easy to use interface that provides only the most important information.
While designing our mobile website, I filtered our primary website into four distinct categories: Home, Work, Blog, and Contact. These categories were translated into tabs, a global layout element that resides at the top of every page on our mobile website. Tabs are an immediately identifiable and easy to use form of website navigation.
The "Home" tab provides a brief description of New Media Campaigns, with links to recent blog posts and an about page. There is also a link that will initiate a phone call and a link that will initiate an email.
The "Blog" tab provides the best example of simplification. Unlike our primary website, we do not use categories or tags on the mobile website. Instead, we provide a single paginated stream of blog posts. The listing view provides the title, excerpt, and number of comments for each blog post. Viewing an individual blog post also allows the mobile website visitor to read existing comments or leave a new comment. Ultimately, our mobile website provides a simple, usable, informative blog that provides exactly what is needed and nothing that is not.
The "Contact" tab provides only what is necessary to contact our web design agency: a simple HTML form and a link to initiate a phone call.
Our mobile website is simple and easy to use. It provides the most important information in an accessible format. This is perfect for mobile website visitors who are usually on the go, in a hurry, and need important information fast.
Device agnostic, platform centric
In my opinion, the future of mobile web-enabled devices is Webkit. Webkit provides a stable, standards-compliant, and forward-thinking platform that is being adopted by the most popular mobile devices, including Apple Inc.'s iPhone, Verizon's Droid, and Palm's Pre. RIM recently posted a job listing for a Webkit developer... perhaps a future Blackberry will also support the Webkit platform.
Our mobile website works in any Webkit-enabled mobile device, in portrait or landscape orientation. If an end-user visits our website in another device, the same information will still be accessible; we used simple, clean, standards-compliant XHTML markup to structure our mobile website. This ensures the information will still be readily accessible to any device that can adequately parse HTML.
-
Check First Impressions with Five Second Test
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.
With websites, first impressions count big time. According to Nielson, visitors spend less than 25 seconds on a page and read less than 20% of the content. One in five visitors will leave a site in the first five seconds. It is extremely important to know how your site performs on quick scans to make sure that you're making the right impression.
Enter FiveSecondTest.comFiveSecondTest.com is a new site that allows you to quickly run a mini-test on a screenshot of your site. You upload an image and it gives you a URL to send people to. You can try a test on our site at:
http://fivesecondtest.com/test/xWVM6787
Once someone visits the link they get instructions and then five seconds to look at the image. They are then asked to list everything they remember.
We ran this test on our site's homepage and solicited responses on twitter. The results were about what we expected, but there were a few surprises.
Our Results
We had 30 responses, each listing some things that were remembered. We looked at everything and categorized them into classes of responses so that we could get an overall picture of the results. For example, any reference to "New Media Campaigns" or the Logo was combined into "NMC / NMC Logo". The results are charted below:
These results clearly follow the F-Shaped Pattern that eye tracking has shown visitors use when looking at a site.
It is also a huge reminder that visual details are much more obvious than textual ones. On our homepage, "Your Web Team" is the most highlighted text, but it was remembered by far fewer than those that noticed our branding and colors.
Conclusion
Five Second Test is a great tool to get first impressions about a design. It can't replace full usability testing, but for projects on a tight budget it is a great tool. Be sure to share any tests you're trying to run in the comments.
-
Why Less is Better than More
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.
Less is a good thing.
Users read 20% of the text on a page.
Users generally spend less than 25 seconds on a page.
(http://www.useit.com/alertbox/percent-text-read.html)Less means you can pick your core message. On a busy site, what visitors see is based on luck; which elements did they choose to look at?
A good design should be centered around a single message.
A bad design allows users to choose from competing messages.
-
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
-
How we made a jQuery Events Calendar for The Salvation Army
Josh Lockhart
Josh Lockhart is a project manager, designer, and front-end developer at New Media Campaigns. A graduate of UNC Chapel Hill, Josh encourages web standards, semantic markup, and simple design. Josh writes about web development and creates RapidWeaver themes on his personal website. Follow Josh on Twitter.
New Media Campaigns recently developed and launched http://www.keepthebellringing.org for the Salvation Army of Wake County. Springboard Eydo, an agency partner, provided the excellent layout design that we incorporated into our content management system. Although the Salvation Army's website features are many, I want to focus on one feature in particular — the calendar.
Overview
The Salvation Army of Wake County website includes a monthly calendar that may be paginated into the past or future. Each calendar cell (representing one day of the current month) contains a list of events, similar to Apple iCal or Google Calendar. When you click an event link, a modal window appears featuring details about the selected event. This calendar is the result of carefully woven design, HTML markup, CSS styles, and jQuery scripts.
The Markup
We developed The Salvation Army website using the XHTML 1.0 Transitional DTD. In most cases, the markup will validate as XHTML 1.0 Strict. However, we opted for the Transitional DTD since a majority of the website's content is provided and controlled by the client. Here is a sample of the calendar's markup.
<ul id="full-calendar-legend"> <li class="all" id="all-events">All Events</li> <li class="orange" id="community-center-events">Community Center</li> <li class="blue" id="church-events">Church</li> </ul> <table id="calendar"> <thead> <tr class="calendar-heading-days"> <th title="Sunday">Sun</th> <th title="Monday">Mon</th> <th title="Tuesday">Tue</th> <th title="Wednesday">Wed</th> <th title="Thursday">Thu</th> <th title="Friday">Fri</th> <th title="Saturday">Sat</th> </tr> </thead> <tbody> <tr> <td class="calendar-cell calendar-cell-weekend first"></td> <td class="calendar-cell"><span class="calendar-cell-date">1</span></td> <td class="calendar-cell"><span class="calendar-cell-date">2</span></td> <td class="calendar-cell"><span class="calendar-cell-date">3</span> <ul class="calendar-cell-events"> <li class="all orange"> <a href="/page/summer-basketball-registration" title="See details for this event" class="thickbox calendar-event-orange">Summer Basketball Registration April 6-June 5</a> </li> </ul> </td> <td class="calendar-cell"><span class="calendar-cell-date">4</span></td> <td class="calendar-cell"><span class="calendar-cell-date">5</span></td> <td class="calendar-cell"><span class="calendar-cell-date">6</span></td> <td class="calendar-cell calendar-cell-weekend last"><span class="calendar-cell-date">7</span></td> </tr> </tbody> </table>
Yes, we used a table for the calendar markup. A calendar is, in fact, tabular data. Week days (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday) are table columns, and days of the month are table cells. We added meta annotations to the calendar markup in the form of class attributes. For example, we annotated table cells with classes like
calendar-cellandcalendar-cell-weekend.The CSS
Our CSS is clean and easy to understand. This simplicity is the result of well-annotated HTML markup. By annotating our HTML markup, we can quickly and easily isolate and style the appropriate calendar elements.
#calendar{ width: 800px; font-family: helvetica, arial, verdana, sans-serif; font-size: 0.917em; margin: 40px 30px 0 30px; } #calendar thead tr.calendar-heading-days th{ text-align: center; font-weight: normal; } #calendar tbody tr td{ width: 100px; height: 80px; border-top: 1px solid #b8b096; border-right: 1px solid #b8b096; } #calendar tbody tr td.last{ border-right: none; } #calendar tbody tr td.today{ background: #b8b096; } #calendar tbody tr td ul{ margin: 0 0.5em; } #calendar tbody tr td a{ color: #fff; text-decoration: none; font-size: 10px; color: white; line-height: 11px; display: block; width: 100%; margin: 2px 0; padding: 1px 2px; } #calendar tbody tr td a.calendar-event-blue{ color: blue; background: blue; } #calendar tbody tr td a.calendar-event-red{ color: red; background: #bb2f2d; } #calendar tbody tr td a.calendar-event-orange{ color: #d53b27; background: #FF6600; } #calendar tbody tr td span.calendar-cell-date{ display: block; text-align: right; padding: 0.25em 0.5em; }The Javascript
The calendar behavior was created using jQuery and Thickbox. Here is the relevant snippet from the HTML markup above.
<a class="thickbox calendar-event-orange" title="See details for this event" href="/page/summer-basketball-registration">Summer Basketball Registration April 6-June 5</a>
We annotated the hyperlink with the
thickboxclass. When the link is clicked, a Thickbox modal window appears and loads the referenced resource with AJAX. We also provided a mini calendar that is used throughout the rest of the Salvation Army website. You can see this mini calendar on the home page in the left column.
Like it's larger version, the mini calendar provides a small color-coded link in the appropriate table cell for each event. Each event link's color represents a specific calendar, as described in the calendar legend. When a color-coded link in the calendar legend is clicked, all relevant events in the mini calendar are shown; events with other colors are hidden. We relate events visually with colors and programatically with class annotations. For example, each link in the calendar legend has a class attribute similar to
<li class="blue">...</li>. Each event link in the mini calendar has a class attribute similar to<li class="all blue">...</li>. Class annotations create a parent-child relationship between calendar and event; class annotations also establish calendar view states using the following jQuery script. We referenced the color class attribute in our CSS style sheet to customize the calendar appearance. We also referenced the color class in our Javascript (see below) to customize behavior.function showMainEvents(eventClass){ $('.calendar-cell-events .all').hide(); $('.calendar-cell-events .' + eventClass).show(); } $('#full-calendar-legend li').click(function(){ showMainEvents($(this).attr('class')); });Merging design and programming
The Salvation Army website and calendar demonstrates how New Media Campaigns merges design and programming to create stellar user experiences. Head over to our portfolio to view more of our work.
-
Controlling typographic weight and contrast with text-shadows
Eli Van Zoeren
Eli Van Zoeren is a front-end developer and designer at New Media Campaigns. Previously, he received a degree in Visual Communications from Beloit College and had a successful freelance career. You can find out what he's been up to at his personal website or on Twitter.
Face it, we don't have a lot of control over typography on the web. We have about a half-dozen fonts to pick from, we don't know what size or exactly what color the type will be, and the exact same type will render very differently on a Mac than a PC. But the increasing browser support of the CSS text-shadow property is giving us more fine-grained control of text weight and contrast.
Text shadow has been supported in Safari since version 1.1 (as well as other Webkit-based browsers like Google Chrome) and in Opera since version 9.5. With the release of Firefox 3.5 last week, all the major browsers aside from Internet Explorer support shadows. Fortunately, since we will only be making subtle adjustments to our typography, it isn't a big deal even if the viewer is using a browser that doesn't support shadows. They will simply see the default look.
Typographic Weight
Normally, there are two font weights on the web: normal and bold (in theory there are a range of weights from 100 to 900, but there is little practical support for that). However, we can fake an intermediate text weight by setting the text-shadow color to the text color, and setting the blur to zero.
Normal text / Bold text / Text with
text-shadow: 0 0 0 #000;We can also reverse the trick and make the text a bit lighter with nearly-transparent shadow with 1 pixel of blur behind the text. I first saw a similar trick on Wilson Miner's site, although he has since removed it. The version using alpha transparency was developed by Komodo Media. Unfortunately, this technique is a little less predictable in browsers other than Safari, particularly in the current version of Chrome which actually darkens the text.
This has no text-shadow / This has
text-shadow: 0 0 1px rgba(0,0,0,.01);Local Contrast Enhancement
There is a trick commonly used in Photoshop to make photos "pop" with more contrast, but without modifying the overall tonal range of the photo. You can read more about local contrast enhancement elsewhere, but the essence of it is increasing the contrast of every edge in the photo—making the darker side a bit darker and the lighter side a bit lighter. We can use text-shadow to do the same thing with low contrast text.
Note: I am not advocating low-contrast text on your website! Make sure the text is readable even before you add any shadows.
So for instance if we have some brown text on a tan background, we would need to add a lighter tan "glow" around the text. That will increase the contrast immediately around the text itself, without changing the rest of the background.
No contrast adjustment / With
text-shadow: 0 0 5px #f1e2cd;You can see that this method lightens the text-weight slightly (just as in the previous example) but it also makes the text look sharper. The trick here is to pick a shadow color that sets off the text without looking artificial. In particular, this can be useful when you are overlaying text on a background image: the slight glow will make the text easier to read.
With all of these techniques the trick is getting the right combination of shadow color and blur radius: keep experimenting until you get it looking the way you want. And make sure to browser test! We are using cutting-edge technology here, so it will look a little different from browser to browser.
Finally, there are undoubtedly many other interesting effects to be had by manipulating the text-shadow property. If you find others, please share them in the comments.
-
Make It Easy for Visitors to Register Their Data
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.
One of the most effective elements of an online presence is gathering data from your visitors by having them register for email alerts, send a contact form, sign up to volunteer, and more. You can then leverage this data to keep your visitors up to date on important organization happenings, offers, and more.
Many sites (and almost every site that we design) have a quick email registration option at the top or in the margin of their main site. This feature allows visitors to easily and painlessly give the organization their email address for future updates and offers. The ease of registration is not only a core principle of a successful landing page design, but also an important tenet of any web design strategy.
The only thing worse than not having a signup is having one that is buried deep in your site and is frustrating to visitors. This is where the US Airways website comes in.
I recently went to the site to register for their e-saver program to be kept up to date on upcoming travel deals. This is a prime opportunity for US Airways to capture my opted-in data and convert me from a lead to a sale in the future.
I was first surprised that there wasn't a signup immediately available on the front page. My surprise turned to disgust after navigating three pages, an email confirmation, and captcha entry to finally be registered. They made me work to sign up for a simple email alert as hard as Kayak makes you work to book an entire trip.
To signup, I had to go to the Specials dropdown menu, choose the email alerts option, clarify my choice on that page by clicking e-saver, enter my email address twice, and then decipher a captcha.
I went from being excited to signup to incredibly frustrated with the airline. I don't think it's out of the question at all to assume at least 15% of desired registrants abandon the process out of confusion before signing up.
Don't make your visitors work to give you their data. By having a registration always available in your header or sidebar, or just a simple call to action, you'll make it easy for visitors to get in contact with you and you will have more leads. We've seen this work time and time again with everyone from corporate websites to the success of political splash pages.
Encourage visitors to interact with your web presence by making it as easy as possible for them to sign up for alerts and submit contact forms. By making it easy for visitors, you will not only win more signups out of convenience to them, but you'll also be sending an important message that you value their time and input.
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