Old Hat, New Look

Striped Text Boxes Website Design Trend 2012

newhat — Tue, 01 May 2012 03:44:27 +0000

Placing text in long strips is a design trend I have seen in both print and web lately—usually the box is a neutral colour, but I have also seen them in bright pink and yellow. The transparency is often set to 80-90%, so the image or colour field behind them bleeds through slightly without making the text difficult to read.

Many of the striped text headlines or call to action areas are using serif fonts, which have not been prevalent online in some time. It is harder to read large blocks of type on a screen in serif, so traditionally sans-serif has been the style of choice in website design. With large headlines like these, it is possible to use a serif font, and many websites are now jumping to use classic print fonts in a new way online.

The example below shows text strips with darker coloured backgrounds and reversed out type. These give a splash to the website, but can easily become overpowering or look amateur if not used properly. When first experimenting with these sorts of text areas, choosing softer colours would be a good start, unless you have a firm grasp of colour theory and feel comfortable working with a sophisticated use of colour as design. There are fantastic website designers out there that are not the best with colour, so knowing strengths and weaknesses is a must when considering whether or not to adopt a current trend like this one.

Striped Text Boxes Website Design Trend 2012 originally appeared on Old Hat, New Look on May 1, 2012.

Images are fuzzy on iPad 3 – how do I optimize for retina displays?

newhat — Sun, 01 Apr 2012 01:00:43 +0000

The new iPad 3 is out and it is gorgeous! Retina display apps jump out from the standard apps like red roses in a field of ashes. In excitement, I started looking at websites and while the text was clear and sharp, images turned into a blurry fuzzy mess.

Standard image viewed on retina

Image optimized for retina display

I have exaggerated to show those on a standard computer the vast difference between regular 72ppi web images used online and what they look like when examined on a retina display. The sharp text renders the difference even more obvious and painful.

After experimenting with many techniques, the one I found worked the best was this:

1. Decide the final pixel dimensions of the image (example: 100 x 100 pixels)

2. Create an image at 72ppi twice the size (example: 200 x 200 pixels)

3. Call the image in html with the exact width and height in css or markup for the original size (example: width:100px; height:100px;)

The result is a crisp image, even if it has text in it. I would highly recommend avoiding any text in images for retina displays, but if you must be sure to use the above method right away! This is crucial if you have a logo on your website, for example. Go right now and change that logo for retina, because otherwise it will be a fuzzy blob amongst crisp text.

As for the images themselves, I would recommend fixing the homepage first, since it gives the first impression of a website, and any crucial images next. The rest of the spot graphics and eye candy can wait, although it might be a good idea to revisit them as well.

Remember that 72ppi is 72ppi so if you create an image at a higher dpi/ppi it does not matter. The image has to be at 72dpi, but halved in size to display well on retina.

Images are fuzzy on iPad 3 – how do I optimize for retina displays? originally appeared on Old Hat, New Look on April 1, 2012.

Where did the left column navigation go?

newhat — Fri, 02 Mar 2012 03:31:33 +0000

I have noticed many of the newest sites have eschewed the left navigation column that we are so used to seeing for a more horizontal approach. Usually there is a large area going all the way across, then a set of columns underneath. This allows for a large rotating or static highlight area and a series of items above the fold which is quite admirable. I think this makes for a clean look that can be helpful for organizing content.

What I would recommend if you are thinking of implementing this sort of homepage concept is to think about what target audience groups your website is for and take one of the three-four columns underneath for each. For example, a nursery could have a column with dedicated gardeners in mind, another for a wholesale landscape architect call to action, another for the casual gardener with perhaps a tip, and finally one for people who know nothing about gardening looking to purchase a gift (I would be the latter category).

Here is an example of a horizontal style site that is getting to be a bit busy. Notice all the different icons? It makes it hard for visitors to figure out where to look first. Visuals are a powerful medium—if the grey boxes next to the titles were removed it would draw the eye straight from the main graphic down to the learn more buttons. The general organization of the site is excellent, see how they kept the columns underneath the same length to avoid a jagged look and how they put bullet style lists for a quick glance scan? That is exactly what visitors need on a homepage.

Sometimes giving your main page a refresh can help spruce up the feel of the entire site for repeat visitors and give it a current fresh feel for new ones. Slightly rearranging your content and even taking the time to ask why each item is on the homepage into this new style might be beneficial!

Where did the left column navigation go? originally appeared on Old Hat, New Look on March 2, 2012.

Are detailed background images distracting or awesome?

newhat — Wed, 01 Feb 2012 01:52:25 +0000

Back in the early times of website design, when the idea of having images was still new, I remember using the technique of a dramatic image as the background. It drew people’s eye and helped differentiate the website. Eventually, designers decided it was a bit busy, and design turned more to using header photography with basic patterns and gradients as the background to subtly break up a large plain color field. It seems the dramatic background photo is back! I have been noticing many websites adding a splash of vivid color, or using a muted mysterious photo behind their text areas. It is more sophisticated than in the 1990s—with fake page curls, drop shadows, and elegant shapes, but is it really to a website’s advantage?

To help determine whether or not to consider using the revived photo technique consider these questions:

Is there an important or beautiful location associated with the website?
A real estate site selling a Victorian home, a Zen retreat centre, a restaurant on the river—those are the sorts of websites that can really benefit from the technique. If the location isn’t important to the business, or does not have a spectacular visual appeal—car repair shop, ice cream vender, locksmith—using the photo background could detract from the business by highlighting the lack of excitement about the location.

Is your product or service a strong visual?
In the website example above, the archaeologists realized that a dig site has potential for dramatic images. The locksmith with the tiny shop can instead feature beautiful wood table strewn with all sorts of keys, the ice cream vender could avoid showing the cart and instead feature mouth-watering pictures of ice cream that seem to almost melt off the page. Other products do not have the same grab visually. Think honestly about your product—it could be incredibly helpful and still not be a power-house in the photography department. There is nothing wrong with that, it just means using the photo-based website isn’t such a good idea. If the service offered is something like insurance, there probably aren’t many images you want to use. Burning houses and people dying will frighten people, not help the business. On the other hand, services like house painting have potential for some especially fun background images.

Sometimes images can be used in the background that are not directly associated, but can still be helpful and interesting visually. A company that makes robot parts for undersea submarines can use beautiful photographs of underwater scenes, for example, even if the product itself isn’t much to look at. Be careful about what to use, though, if it gets too far off people will be confused. A site selling gardening tools that keeps using photos of flowers can look like they are a seed company instead.

Not every website is a good choice for the revival of the strong background photo, but some are. Think about whether it could help on your site—even just on the homepage to give a visual punch when people first arrive.

Are detailed background images distracting or awesome? originally appeared on Old Hat, New Look on February 1, 2012.

A billboard is not a brochure, and a website is not a magazine ad

newhat — Wed, 04 Jan 2012 05:44:36 +0000

As I was driving around during December, I noticed a lot of banners hung by churches out on their front lawn or by their parking lot advertising their Christmas Eve service. The image above is a quick reproduction of one (with the church’s name changed) that floored me. Here you are driving along at a brisk pace—all I could read was “Christmas Eve Service” and then a quick look at the tagline. That’s great but it obscured the one thing people needed to know—what time it was! There is no point putting a large banner out and making the key information so small that the target audience (ie drivers) can’t read it. I made another mockup of how the billboard could have looked instead.

Notice the time is obvious, but you can also quickly read what it is also. I’ve seen even worse examples of signage that included entire paragraphs out by the road or highway on billboards. Unless you are in the middle of commute traffic and at a dead stop right in front of it, there is no way anyone in a car could read them. The above is an example of trying to apply the rules of one area of graphic design to another—it doesn’t work.

When thinking about website design, it is also easy to fall into a similar trap. Picking up a print brochure and simply retyping it online doth not a website make. It is not interactive, it tends to be in-your-face ad copy, and people do not have the patience to sit through a big wordy static website these days, especially using mobile devices. On the other hand, I’ve been to sites that took a highway billboard and put it up as their website—when trying to find key information it is either obscured or not on the site at all. Just today I was looking at a girls summer camp website trying to find their prices because I wanted to help with a scholarship grant. Did the website bother to list the prices? No they did not. Here are some quick things to think about when switching between different applications of graphic design. Which one is your current website leaning toward?

Billboards
Good – Easy to read uncluttered look
Bad – Often leaves off crucial information
Ugly – Seems too punch in the face in its advertising which is offputting

Direct Mail / Brochures
Good – Concise well crafted paragraphs of information and pictures
Bad – Can have overwhelming amounts of text that scare visitors
Ugly – Bland and static, discouraging customer engagement

Magazine Ad
Good – Compelling photography or illustration and strong headlines
Bad – No content there, visitors leave quickly when not finding anything
Ugly – Static look or it seems like everything is just a call to action with no meat to it

Email / Eblast
Good – Streamlined coding behind it, strong direct message
Bad – Usually they are either too lengthy or too short for website copy
Ugly – Few or no images due to email restrictions

I could go on, but you get the idea. What makes a fabulous billboard or a lovely print ad campaign does not necessarily translate instantly onto a website.

A billboard is not a brochure, and a website is not a magazine ad originally appeared on Old Hat, New Look on January 4, 2012.

Stock photos don’t have to be a ripoff—using Google Images is

newhat — Thu, 01 Dec 2011 23:19:28 +0000

It is so easy to find fantastic photos using the images search at Google and similar websites. Snagging photos or illustrations for your website from there, however, is like swiping jewelry off the counter at Cartier. Someone spent time finding, creating, or legitimately paying for the images on their website. It is not only rude but illegal to then pull them off for your site. “But stock photos are insanely expensive!” Not any more! I remember the days when I was first starting out and Getty had the monopoly on stock photos. We’d spend an average of $2,000 an advertisement. Those days are gone! Now the average photo or illustration can be acquired for $0-50.

Something to keep in mind is that no matter where you purchase a stock photo, odds are other people are using it. Taking the time to learn how to take good photos and going out and doing your own shoot is always preferable. With a large budget, hiring a photographer is the ideal. For those of us without thousands of dollars to throw around, a quick stock photo is a good way to go, especially in news items or other site updates that are ephemeral. I’ve included a few seasonal examples from each site.

stock.xchng – http://sxc.hu

It may have a strange url, but it is perfectly legitimate. When using the photos, keep in mind that they do not usually have model releases. That means if you use a photo with a person in it, be sure no faces are visible. The search function does not correct spelling, so be sure to say precisely what you’d like. I’ve messed this up several times! Look for photos with a white dot next to them, not grey. That means you can use them right away without asking permission, and do not need to give a credit back. Be sure to search using the dropdown “downloads descending” because it usually shows the best images. They have both stock photos and illustrations available, but not in vector. Did I mention they are all free?

iStock Photo – http://istockphoto.com

They have some truly beautiful and professional photos and illustrations available. All have been carefully juried for quality, so you know your money will not be wasted. The lower the resolution of the photo, the less expensive it is. Illustrations tend to be a bit more, but that is because they come with fully editable vector versions that can be recolored and manipulated if you have a program like Adobe’s Illustrator. Best of all, each photo with a person is required to include a model release—that means you can use any photo you like. Keep an eye on their free photo of the week, too. Some of them are quite good and you can snag a high resolution version for a print campaign as well that way. The prices are reasonable, averaging about $10-25 each. I usually use them for more important photos on a site, and accompanying ad campaigns, rather than just as one-off news items.

There are others, like Dreamstime, etc, but usually it is more trouble than it is worth using more than one site. They each have their own way of paying for the images, and when working with a site trying to track down what photo was from where gets complicated. Make life easier for yourself and pick one. Some even have memberships per month that are quite reasonable that give you access to thousands of images. That’s only a good choice if you use stock photos frequently.

Stock photos don’t have to be a ripoff—using Google Images is originally appeared on Old Hat, New Look on December 1, 2011.

Popular website design color palettes for fall

newhat — Tue, 01 Nov 2011 01:32:28 +0000

Although website design usually follows brand trends for choosing a color scheme, often a designer will hype up the brand using trending colors online. Logos are usually 1-2 colors—not necessarily enough to create a dynamic website that pops to the viewer. Here are three different color palettes that I am seeing used extensively in website redesigns this fall. If you want to slightly reface your site for the holiday season, it might be worth considering one of these. Be certain it fits in your branding family, though, because if you use completely different colors on your website from print campaigns or your corporate identity it can confuse people!

Just in time for autumn, there is the warm palette which is especially in use by non-profits, restaurants, and casinos. It helps visitors feel welcomed and appreciated right away with a softness that does not seem “in your face.” If you have a gold or red logo, this might be a good one to use.

Pink is no longer just for ballet tutu sites! Hot pink and vibrant purple have been making a splash in all sorts of places, mostly in eCommerce sites. Ironically it is used more and more by corporations and insurance brokers, perhaps to add an extra punch to what is otherwise an abstract concept.

Just when we thought dark blue websites had died off, it seems that color scheme is back with a bit of orange. In the 90s when websites were first thinking about color palettes, dark blue was the official corporate color seen almost across the board. The reaction to that went on for some time in the mid 2000s but it appears the “no corporate blue” is not an issue heading toward 2012. Most sites that are using it also add an extra contrasting color such as green or the complement of blue—orange. If you have an old “corporate blue” site still hanging around this is an easy way to liven it up.

Popular website design color palettes for fall originally appeared on Old Hat, New Look on November 1, 2011.

Duplicate article posting: what’s the big deal?

newhat — Sat, 01 Oct 2011 01:29:28 +0000

There is some confusion going on about Google’s recent ~~Farming~~ Panda Update. The average person I have talked to seemed to think that as long as they wrote the content, it was okay to have it online duplicated in a bunch of places. An example is an employee who wrote a brilliant article that was posted on the website of their old employer, and decided they wanted the same article posted on the website of their new employer. What’s the problem with that? The content could be flagged and consequences will occur for one of the two websites, if not both. Google does not read minds: if your article is posted first on a site with high credibility, then later you post it on your personal site with low credibility, you might be the one penalized.

Google looks for:
- Crawl time when first seeing the article (which came first?)
- Which domain is more trusted (which should be ranked first?)
- Other unknown factors (insert cackling from Google engineers here)

Even if you originally wrote the article, and did agree to have it posted on multiple websites, that does not change the fact that the technique is a form of farming and could be penalized.

What if you have a legitimate reason to post content on two or more different websites?
- Rewrite the title of the article / page
- Rewrite the first paragraph, or add a new paragraph above it
- Alter your targeted keywords within the article to reflect the different websites

The safest, best policy is to simply rewrite your article when posting on a different website. There is probably a slightly different target audience on each site anyway. Create unique content without resorting to Black Hat SEO techniques. In the long run, it’s easier.

Special thanks to speaker Matt McGlynn at the North Bay Web Design Conference

Duplicate article posting: what’s the big deal? originally appeared on Old Hat, New Look on October 1, 2011.

Choosing a CMS: WordPress, Joomla!, Drupal, and more

newhat — Thu, 01 Sep 2011 01:23:38 +0000

WordPress

Best suited for: Blogs, Portfolios, Social / Community, Small Shopping / eCommerce
Not for: Large eCommerce, Text-heavy Large Sites

Originally created for blogs, and now set up for regular websites, it has an “out of the box” philosophy. It is simple to install, and you can get up and running with it quickly. Many webhosts offer it pre-installed. It is designed for the average user and is currently used for nearly 50% of websites using a Content Management System.

Install: 5-10 minutes, easy-medium difficulty, $0 average cost
Software Updates: Regular updates, average of every 3-4 months
Hosting: Your own server, or WordPress.Com
Themes / Templates: Thousands of free designs available
Plugins / Widgets / Modules: Thousands of free user-friendly add-ons
Support: Large community support, Low software support, Extensive tutorials

Joomla!

Best suited for: Directories, Social / Community, Small Shopping / eCommerce
Not for: Large eCommerce, Text-heavy Large Sites

This is one of the internationally known CMS platforms, although it is not as popular in the US. Most questions are responded to promptly, although it is not very designer friendly.

Install: 45 minutes – 1 hour, medium difficulty, $0 average cost
Software Updates: Rare
Hosting: Your own server
Themes / Templates: Mostly paid only, but a variety are available
Plugins / Widgets / Modules: Many free user-friendly add-ons
Support: Small but active community support, Some software support, Many tutorials

Drupal

Best suited for: Businesses, Government, Non-Profit, User Membership / Social, User Generated News
Not for: Creative Designers, Small Sites

A popular CMS designed around visitor interaction, it is best used for medium-large corporate sites that are not used for marketing purposes. It has many membership functionality features and user generated content options, including Geolocation. It is an excellent option for a company intranet, but not for a website marketing the company.

Install: 1 day, extreme difficulty, $5,000-$15,000 average cost
Software Updates: Regular security updates
Hosting: Your own server
Themes / Templates: Many free themes available
Plugins / Widgets / Modules: Many free add-ons
Support: Large community support, Medium software support

ExpressionEngine

Best suited for: Blogs, Static Site, Large Site, Membership Based
Not for: Small Sites, Web Apps

A paid service, it is excellent for large websites with multiple channels, such as event structures. It has a blank slate style technique, and a great deal of control, especially in how channels interact with each other. They were responsible for sites such as http://change.gov

Install: Medium difficulty, $299 license fee
Themes / Templates: N/A It is a blank slate designer’s dream
Plugins / Widgets / Modules: High number of add-ons
Support: Small but active community support, Much software support, Low documentation

Webvanta

Best suited for: Information Based Sites, Database Content, Large Sites
Not for: Community / Social Sites, Blogs, Small-Medium Sites

They do not allow much customization without piling on fees, but it is bug free and you never have to worry about maintaining the backend technical site of the website—Webvanta does it all for you. The tradeoff is that you don’t have as much access, and it is difficult to learn the system. They offer live help, and are swift with responding to support issues. This is great for designers that don’t know much about programming and have clients with large pocket books.

Install: Software updates and install done automatically, $149 per year – $999 per year
Themes / Templates: Design implementation $560-$850
Plugins / Widgets / Modules: Many available, but very expensive
Support: High community and software support level, main reason to choose them

Special thanks to speakers Tony Fardella, James Westley Foreman, Chad Crowell, and Charity Grace Kirk at the North Bay Web Design Conference

Choosing a CMS: WordPress, Joomla!, Drupal, and more originally appeared on Old Hat, New Look on September 1, 2011.

3 Types of Marketing: Learning from H2O

newhat — Mon, 01 Aug 2011 01:16:38 +0000

There is an Australian fantasy series where a group of girls turn into mermaids if water touches them. If this is extrapolated to marketing, with water as the message turning potential customers into actual leads or customers, there are three general types of marketing techniques which can be used online and in print.

1. Sprinklers

Putting your message and brand out in as many places as possible is like turning on a bunch of sprinklers and hoping that out of the multitude of people walking by one will turn into a mermaid when it hits them. This tends to be extremely expensive with not much ROI, but it does raise brand awareness. Campaigns like this include Facebook ads, Twitter promotions, radio ads (yes they still exist), etc.

2. Squirt Guns

Ever seen a group of children running around on a hot day with various water pistols and super soakers? They tend to use targeted attacks to soak specific friends, because the toys don’t have a long range or spread. Running an ad campaign like this involves a lot of market research into your target audience, which is an initial expense, but the actual ads are far more likely to bring in customers. If you have a boarding school and advertise on a specific high profile boarding school website, every person who clicks through will actually be seriously searching for boarding schools. If you put an ad for your winery in a local wine tours website, the people looking through it are highly likely to actually want to participate in a local wine tour.

3. Water Cooler

Another big contender lately is inbound marketing—facilitating customers coming to you, rather than chasing after them. These types of campaigns are built around community as the focus and getting people involved. You need to offer them something they want and need in an environment where they feel comfortable and willing to open a dialog. This is the cheapest way to advertise, but it does take a higher amount of manpower. You cannot just hand the project off to an ad firm, pay their invoice, and think no more about it. People in your company have to get seriously involved in the project on a long term basis.

Before starting a new marketing campaign, think about which type would be best for your company—do you have a large or small budget? Is your product universal or targeted to a specific small group? Do you have the staff to run a large social media campaign or not?

3 Types of Marketing: Learning from H2O originally appeared on Old Hat, New Look on August 1, 2011.