While designers know that a user’s experience on a website has a
large impact on the way that customer will interact with them,
impressing that concept on the corporate establishment has taken a very
long time. Trends in design are making their way into corporate web,
albeit slowly; with patience and a little luck, businesses will soon
start to consider carefully coded and appropriately functional design as
important as their mission statement and recent sustainability
reports.

One unfortunate fact is evident above all else: despite having plenty
of money at their disposal, many corporations are lost in sterile MS
Word-esque designs that are more stagnant than a museum exhibit;
though at least museums have dinosaurs and mummies and stuff. Here’s
hoping we all will get new corporate clients soon.

Below, we present some interesting corporate websites,
although the insight they offer may not be immediately apparent. This
review is not about aesthetics or visual appeal, but rather about the
design solutions the sites exhibit. In fact, corporate websites aren’t
as visually arresting as you might think, so if the appeal isn’t
immediately apparent in the previews below, take a moment to visit and
interact with each of them.

[Offtopic: by the way, did you know that there is a Smashing eBook
Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Beautiful Corporate Websites

Levi Strauss & Co
With its website, Levis demonstrates that it has not only a strong
flair for style and interactivity, but a rich sense of history. Hover
over or click the photographs to see some of the company’s defining
moments; ever known for its sense of identity, Levis draws you into its
past, present and future, excellently breaking through to customers and
inviting them to stay.

McDonald’s
By simplifying and softening the navigation, McDonald’s opens the
entire screen up to use as canvas for their product. Harmonious colors
in the typography complement the food (and exploit the visual
association with hamburgers), while the vivid photography does not
obscure surrounding elements.

Starbucks
Gentle colors and careful hierarchy of elements aside, Starbucks’
strength is in the details. The navigation exhibits an attention to
hierarchy not often seen on corporate websites, while offering
alternative destination links, should you find yourself in the wrong
section. Such consideration for the user would be a welcome trend in
design going into 2011.

Sony
You’ll see that this is a link to Sony Canada’s website. While the
navigation and theme is the same as its American counterpart, the
experience here is different: here you can see short films in which
people relate their experiences of how Sony technology has enriched
their lives. Best of all, a floating meter lets you sort stories into
categories, giving you control of the content. Brilliantly executed.

The Ones You Would Expect

Adidas
Few websites employ a grid design that is at once so rigid and
flexible. Individual modules expand and contract to allow for dynamic
exploration—a lot of fun, particularly because the website has so many
parts to explore. The only thing to note is that images do not
obviously reflects the content they open to display, necessitating the
standard top-menu — an important point in usability.

Citroen
While the technique of using tiny images to fill a shape has been done a
million ways, Citroen takes an old technique to the next level. Draw
your cursor across the world to see the photos dance around it,
beckoning you to select a region. An excellent use of a landing page,
effectively drawing in users without information inundation.

Fender Guitars
While you may need to be a guitar player to fully appreciate the
beautiful lines and tones of Fender products, you need only a pair of
eyes to appreciate the simplicity and functionality of Fender’s
website. Unobtrusive navigation at the top and hot links lower down
make way for a large stage on which Fender can showcase the stars of
its website: its beautiful instruments.

Heinz
One of the most recognizable brands in the world, Heinz has
intelligently focused its website on its consumers. Rotate the globe by
clicking on photos to see simple recipes from around the world. A
design brilliantly suited to users of any skill level, Heinz has found a
new means to engage their customers and entice them to visit more.

Prologue Films
Any company that designs opening credits and effects for movies needs a
keen aesthetic sense, and Prologue Films’ visual dynamic is evident
on its website. A clean grid with gray tones puts the company’s
custom type and effects (an impressive collection) front and center,
the same technique made famous by artists and photographers. Using a
pop-up window for the content, though, is ill-advised.

Rolex
The beauty of this website is in Rolex’ masterful attention to detail.
With the gorgeous products on display, the eye almost misses the
clever tricks contained therein, such as the clock face that adjusts to
your time zone. The intuitive user experience reinforces the notion
that great design blends together. When it works right, it’s
seamless.

Steinway & Sons
Lucky for us, Steinway invests as much effort into its website as it
does into its pianos. Elegant type and warm subtle imagery grace this
design and project an image of quality, undoubtedly the intended effect.

The Ones You Should Have Thought Of

Aflac
While a blue and white palette is nothing new, Aflac has mastered the
use of subtle gradients to enhance type. Smartly assembled, this site is
intuitive and easily digestible. The clever part is the horizontal
scrolling frame, a visual hook aptly used here to display customer
testimonials.

American Standard
A gorgeous website; American Standard exemplifies grid design,
employing the majority of frame as a news scroller. Intelligent use of
color, elegant type and thoughtful spacing make this website
particularly easy on the eyes.

Avery Dennison
At first glance, this might look like the website of any old
manufacturer of office supplies. At second glance, though, brilliant
little touches leap out:: the subtle grid, the attention to readability,
the side-scrolling frame that harmonizes type, color and imagery.
Oddly dissonant, the side and top navigations make this website looks
almost as if it were a composite of different designs over time, a
curiosity.

Con Edison
While the Con Edison website doesn’t have much to look at, the section
for the annual report has been capably executed. Great attention to
space, clean type and subtle movement are all used to great effect in
this section where Con Edison addresses its corporate responsibility.

Grow Interactive
Most interactive firms don’t have exciting websites, which makes Grow
stand out all the more. Grow demonstrates an expert use of type and
illustration, moving your eye in perfect circles over the page, and
nuances like the small interactive animals along the footer make it
stand out among its peers.

PGI (formerly Premiere Global)
Here is another rare instance of a Canadian version surpassing its
regional siblings. A playful take on the boxed blog/corporate theme, the
website for PGI puts an interactive panel into the fold, an attractive
way to draw users further into the website. The layout and color
elements are evidence of authentic design acumen.

Rohm and Haas
This Fortune 500 company knows how to engage visitors online, with
interactive features coming from every angle. The innovation in its
products is reflected in the playfulness of the website, which
encourages users to explore. Careful, effective use of otherwise
familiar textures and themes support an engaging concept, to good
effect.

Society for Environmental Graphic Design
While the inclusion of an organization of graphic designers in this
showcase is no surprise, SEGD shines in its presentation of simple yet
powerful elements. As any designer can attest, bold colorful shapes can
easily run a design off course, but that isn’t the case here. SEGD
has married vivid color with effective usability, creating a website
that is smooth and wonderfully user-friendly.

Virb
Recently rebranded and redesigned, Virb demonstrates a capable grasp of
visual elements even in this placeholder page: good typography, ample
white space, soft shapes and forms — akin more to social media than
standard corporate toadery, excellently indicative of the target
demographic.

The Ones You Might Not Know About

Acro Media
A Web development firm that knows exactly when to stick to the grid and
when to break boundaries. The most impressive parts of this website are
the way certain elements react to hovering, such as the company name
in yellow at the top left. Mousing over it flips the logo around to
display a toll-free number. Clever.

AgencyNet Interactive
The spirit of AgencyNet is clearly the team of creatives behind its
work. Showing the team at work (and play) behind the scenes in the
office is refreshing, well executed and a great way to engage viewers to
learn about the company.

AmoebaCorp
A small creative firm, AmoebaCorp shows expert use of type on its
website. The type establishes a strong hierarchy, enabling the content
and navigation to coexist on the left without confusing the user about
functionality.

Imaginary Forces
Less is more with Imaginary Forces, which displays its brilliant work
as prominently as possible by cluttering the screen as little as
possible. Even without the showcased work, the website would stand out:
take away the grand images, and you’d still have a clever arrangement
of type and navigation, which is more than can be said of most
websites.

Kurylowicz & Associates
This Polish architecture firm has produced a website that bleeds
inspiration from every pixel. Elegant in its use of gray tones, this
website combines line, shape and space in a way no other website does.
Perhaps it took an engineer to think abstractly enough to design with
such abandon, but the result is brilliance online, from start to finish.

Vancouver Convention Centre
Aside from the harmonious colors and subtle grid that frames the
content, the Vancouver Convention Centre succeeds by going the extra
mile to make its website visitors feel local: the “Cheers!” factor
in action. Not many websites impart a sense of belonging with their
welcome; that this one does makes a strong case for using heart as a
design tool as much as shape, color and texture.

What Have We Learned Today, Bobby?

Finding beautiful corporate websites proved to be quite a challenge,
and we had to make a number of unusual choices along the way. We sought
regional versions of international websites, for instance, because
multi-national companies present a number of differences among their
sister websites. Bizarrely, did you know that many Fortune 500
companies don’t even have websites? Or worse, have non-working ones?

Admittedly, the word “corporate” is pretty loose in definition
here. For the sake of impartiality, we did not discriminate by industry
or field. We were more interested in collecting websites that employ
interesting techniques. Because innovative and fresh stand out on the
Web whatever the industry, putting aside traditional definitions is
crucial.

For further reading on corporate websites and design, you may be
interested in Corporate Blog Design: Trends and Examples, published August 2009.

Beginning in WordPress 2.8, themes will be able to take advantage of the body_class() function to place location-specific classes on the opening <body> tag, usually located in the header.php file of most themes.

Why is this significant? Easy … this opens up the ability to change the look of nearly everything with CSS only.

Before we get into the application of the body_class() function, let’s cover some technical details first.

What body_class() Generates

The body_class() function operates in nearly the exact same manner as the post_class() function that was introduced in WordPress 2.7. The only differences are the classes it generates. The body_class() function will generate the classes mostly based on where your viewer is on your site. For instance, if a viewer is on your homepage and you haven’t set a static page for your homepage, then the classes the function might generate might look like this:

<body>

Notice, those are two separate classes, either of which you can use as a selector.

However, if you are on a particular post, the body tag might look like this:

<body>

And if you are currently looking at a page, then body_class() will generate something like this:

<body>

Essentially, body_class() will generate dynamic CSS classes based on the type of content, and under what circumstances, you are currently browsing. For instance, if you are a registered user, and are currently logged in, body_class() will generate a logged-in class on the body tag.

The following is a full list of possible body classes (HT: WPEngineer.com):

• rtl
• home
• blog
• archive
• date
• search
• paged
• attachment
• error404
• single postid-(id)
• attachmentid-(id)
• attachment-(mime-type)
• author
• author-(user_nicename)
• category
• category-(slug)
• tag
• tag-(slug)
• page
• page-parent
• page-child parent-pageid-(id)
• page-template page-template-(template file name)
• search-results
• search-no-results
• logged-in
• paged-(page number)
• single-paged-(page number)
• page-paged-(page number)
• category-paged-(page number)
• tag-paged-(page number)
• date-paged-(page number)
• author-paged-(page number)
• search-paged-(page number)

How To Add body_class() to My Theme

This is actually the easy part. Assuming you are running WordPress 2.8 (currently in beta, soon to be released), all you have to do is add a new template tag. You’ll need to locate which template file generates the opening <body> tag. This is usually the header.php file.

After you’ve located the <body> tag, just change it to this:

<body <?php body_class(); ?>>

Save the file (and upload to your server, if necessary), and you’re done!

Using Dynamic Body Classes

So, we now have body classes. What’s the big deal? I’ll explain:

With the exception of the HTML element, the <body> tag wraps around all other HTML code. Therefore, by having classes on <body> allows us to target any other element on the page, specific to the current <body> class.

It may just be easier to explain by example.

Let’s say that I have a <div id="content"> that renders on the left, and a <div id="sidebar"> that renders on the right, both within a 960px wide <div id="container">. The content div is 600px wide, and the sidebar is 360px wide. But, when viewing a single post (as opposed to the homepage), I have told my theme to not display the sidebar. Now, we’re left with just a content column. Unfortunately, our container is 960px wide, and our content div is only 600px wide.

We’re stuck with a large blank space where the sidebar used to be. How do we fix that? With a <body> class, it’s easy. We just target the <div id="content"> when it is being displayed on a single post. It would looks something like this in CSS:

.single #content {
	width: 960px;
}

By doing this, we’re saying “if we’re viewing a single post, make the #content div 960px wide”.

We’re basically adding a simple conditional system to CSS.

Adding Classes to body_class()

In some cases, you will want to add your own class(es) to the list of classes that body_class() generates. If you find yourself in this situation, here are a couple of ways to do it.

The first, and easiest, way to add a class to the list of classes the function generates is to simply pass your custom class as a function argument to body_class(). Here’s how you would do that:

<body <?php body_class('my-class'); ?>>

By doing this, we’ve now told the body_class() function to add ‘my-class’ to the list of classes to output.

The second, and harder (but more flexible) way is to use take advantage of a WordPress Filter to add new body class(es). In this case, we’ll be using the body_class filter provided in the get_body_class() function. If you don’t understand how filters work, I’ll do a post on that in the future. Until then, see if you can just follow along. You may pick it up pretty easily.

Here’s an example of how to add a class by using a filter:

<?php
add_filter('body_class','my_body_classes');
function my_body_classes($classes, $class) {
	// add 'my-class' to the $classes array
	$classes[] = 'my-class';
	// return the $classes array
	return $classes;
}
?>

By using this method, we allow ourselves to use conditionals, and other cool things, that we would not be able to use with the first method.

The problem: (After installing Office 2003 and/or updating Mozilla Firefox,) Firefox HTML icons are replaced by Windows default “unknown file type” icons. The usual simple fixes fail to restore the correct icons.

The solution: Find the registry key “HKEY_CLASSES_ROOT\FirefoxHTML\ShellEx\IconHandler” and delete it.

The source of this solution: http://forums.mozillazine.org/viewtopic.php?f=38&t=1048725&st=0&sk=t&sd=a&sid=98b7d1b372f2fdbef925a0be42715fcf&start=15

For the inexperienced, here’s an overview of how to make changes to the registry:

http://antivirus.about.com/cs/tutorials/ht/regmod.htm

Practical guide to subversion on Windows with TortoiseSVN

by Nikolai V. Shokhirev Up: Programming | Next: Repository backup and restore

Contents

• Introduction
• Subversion installation
• TortoiseSVN installation
• Step-by-step setup
  • Step 0. Global ignore pattern setting (optional)
  • Step 1. Repository (database) creation.
  • Step 2. Initial import – Loading your project in the database
  • Step 3. Creating a working directory – Connecting your project to the database
• Some remarks
• References

Introduction

There are many excellent books and tutorials on Subversion (SVN) and TortoiseSVN. Some of them are presented in the References section. This tutorial in no way substitutes them. It covers a limited subset of subversion functionality. However, I hope that it simplifies familiarization with SVN. Subversion is a multi-platform open source version control system (http://subversion.tigris.org/). It consists of a repository database (FSFS or BDB) and several command-line tools. There are GUI front-ends for the Subversion. The Subversion is designed for project management with several participants. However it can be used to manage personal projects as well. The current tutorial is limited to a Windows-based local (without a server) SVN.

Subversion installation

Go to the download section of Tigris.org, Open Source Software Engineering Tools ( http://subversion.tigris.org/ ). The latest command-line binaries and libraries for Windows can be found in this directory of the file-sharing area (http://subversion.tigris.org/servlets/ProjectDocumentList?folderID=91). Download the installer. At the time of writing, it was svn-1.3.2-setup.exe. The installation of SVN into the default directory C:\Program Files\Subversion is pretty straightforward. At this point you can start using SVN. It is not necessary to install any GUI program if you are comfortable with using command-line tools.

TortoiseSVN installation

TortoiseSVN is a Subversion client, implemented as a windows shell extension, a plug-in to Windows Explorer (http://tortoisesvn.tigris.org/). The latest version can be downloaded at http://tortoisesvn.sourceforge.net/downloads. For my 32-bit processor I used 32 Bit TortoiseSVN-1.3.5.6804-svn-1.3.2.msi Installer. There is another file, TortoiseSVN-1.3.5.6804-svn-1.3.2.md5 in the download area, which is not required for installation. It contains a checksum of the installer file which is useful if you want to verify that you have downloaded the right installer (and that its not corrupted). You can download my program HashFile (http://www.shokhirev.com/nikolai/programs/progmisc.html) and verify the installer by checking its MD5 hash (checksum). The checksum must be identical to that found in the TortoiseSVN-1.3.5.6804-svn-1.3.2.md5 file. This installation is also straightforward, just accept the defaults. The only point of interest is the ASP.Net hack. By default, SVN uses the .svn working directories (Linux style for hidden files).

Default, without the ASP.Net hack	With ASP.Net hack for VS.Net web projects

This confuses Microsoft ASP.Net and the hack forces SVN to use the _svn working directories instead. Do not install this feature if you are not going to control your ASP.Net projects by Subversion.

Note, that after installation your Windows Explorer has extra buttons in the main menu and in context (activated by right-clicking) menus.

Step-by-step setup

There are various ways of Subversion management (see the manuals). Now we consider the most typical scenario:

• You have an existing project, which you want to control by Subversion
• This is your personal project on a local Windows computer

In this case you should not worry about security and setting up a server. Suppose your project resides in C:\Projects\MyProject. It contains files and possibly subdirectories: Step 0 (Optional). Global ignore pattern setting. You probably do not want to keep track of temporary and some other types of files. Right-click on any folder, and launch TortoiseSVN/Settings: Alternatively you can click on File/TortoiseSVN/Settings in the Windows Explorer main menu. In the General section you can list all ignore file types separated by spaces (*.bak *.~* in the above example). Note that this setting affects all working directories. See the section 5.25 of the User Guide for more options. Step 1. Repository creation. On your hard drive create the directory for repositories of all your projects, e.g. C:\SVN. Create inside it a sub-directory \MyProject. Right-click on MyProject and choose TortoiseSVN/Create repository here:

Select the default Native FileSystem (FSFS) option and click the OK button:

This converts C:\SVN\MyProject into a repository with the following contents:

So far this is an empty repository, even though Subversion has created several directories and files! We need to fill it with our project files and connect it with our working project directory. All this required several, sometimes counter-intuitive actions. Step 2. Initial import. Somewhere in your hard drive (e.g. in C:\tmp) create a directory (e.g. \new) with the following three subdirectories:

     C:\tmp\new\branches
     C:\tmp\new\tags
     C:\tmp\new\trunk

The resulting structure is: This structure is necessary for more advanced project management, but it does not hurt to create it beforehand. Some tutorials first recommend to import this structure into the repository and later add the project. I recommend the following shortcut.

• Backup your project (C:\Projects\MyProject.), just in case.
• Delete all unnecessary files that are not included in your global ignore list
• Move the contents of \MyProject into the trunk subdirectory (C:\tmp\new\trunk). We will need an empty directory later, anyway.
• Import the ‘new’ directory into the repository (Right-click/TortoiseSVN/Import):

Selelect URL as file:///C:/SVN/Myproject (forward slashes!):

The “Import finished” message shows C:\tmp\new\* :

Do not worry about the “tmp\new” messages, just check what was actually imported into the repository. Right-click on C:\SVN\MyProject and start TortoiseSVN/Repo-browser:

Navigate to file///C:/SVN/MyProject/trunk:

Note that the files from the ignore list were not imported. Also there is no traces of ‘C:\tmp\new’. It is no longer useful and it can be deleted. Step 3. Creating a working directory. Now you have the repository with all your files and the empty C:\Projects\MyProject (remember, we moved all its contents to C:\tmp\new\trunk?). “To get your hands on blessed, completely approved, and fully loaded Subversion directory, you need to check it out from your repository” [6]. Right-click on C:\Projects\MyProject and choose “SVN Checkout”

:

Set URL to file:///C:/SVN/MyProject/trunk and Checkout directory to C:\Projects\MyProject:

Press OK. Checkout has finished:

The “blessing” is reflected in the small icons on your project directory and all containing files (and subdirectories).

Such a “blessed” directory is called a working directory. Now you can start working with you project and learn more about Subversion.

Some remarks

• Sending (checking in) your changes to the repository: Right-click on selected files then “SVN Commit”
• Adding files to the repository. This is a two step process:
  1. Right-click on selected files then “TortoiseSVN/Add”
  2. Right-click on selected files then “SVN Commit”
• In addition to books [4] and [5], I also recommend Charlie Calvert’s article [6].
• If you use Lavasoft Ad-Aware, do not delete negligible objects: this removes the icon settings from the registry!
• Happy Subversioning!

References

1. Subversion Home Page: http://subversion.tigris.org/
2. By Hans Dietrich, Version Control for the Standalone Programmer – Part 1. – Excellent Article at Code Project.
3. SVN 1-Click setup.- Set up SVN on Windows with a single installer: http://svn1clicksetup.tigris.org/
4. Adam Pash, How to set up a personal home Subversion server (with Apache on Windows).
5. RapidSVN, a cross-platform GUI front-end for the Subversion revision system: http://rapidsvn.tigris.org/
6. TortoiseSVN, a Subversion client, implemented as a windows shell extension: http://tortoisesvn.tigris.org/
7. Ben Collins-Sussman, Brian W. Fitzpatrick, C. Michael Pilato. Subversion book: http://svnbook.red-bean.com/
8. TortoiseSVN User Guide, which comes with TortoiseSVN.
9. Charlie Calvert. Creating Repositories and Projects in Subversion Trunk, Tags, Branches. Codefez: (http://www.codefez.com/Home/tabid/36/ctl/ArticleView/mid/364/articleId/144/Default.aspx)
10. Sebastian Rahtz. Introducing Subversion, Oxford University: http://www.oucs.ox.ac.uk/oucsweb/svn.xml
11. An OUCS Guide to TortoiseSVN Client For Windows.http://www.oucs.ox.ac.uk/oucsweb/tortoisesvn.xml
12. TortoiseSVN Tutorial. http://www.mind.ilstu.edu/research/robots/iris/iris4/developers/svntutorial/
13. SVN vs CVS. http://www.pushok.com/soft_svn_vscvs.php
14. More SVN links

See also: Buildix - The Agile development platform on a disk: http://buildix.thoughtworks.com/. Buildix includes:

• Subversion for Source Control
• Trac for a Wiki, Bug-Tracker and general Project Management
• Cruise Control for Continuous Integration

Available as LiveCD and VMWare image. Up: Programming | Next: Repository backup and restore

1. As you browse the list below please keep these helpful tips in mind:
2. Consider All Touch Points: Use every point of contact with customers and prospects.
3. Obtain Permission: Always obtain permission with the confirmed (double) opt-in method for online contacts. For offline contacts, update your database with when, where and how the contact was initiated. Confirm their permission in the first email.
4. Required Information: Obtain email address, name, format preference and logical interests/preferences.
5. Focus Equal Attention on Existing Lists: Implement strategies and incentives to transform inactive subscribers into active ones.
6. Provide Valuable Benefits: Convince potential subscribers of the valuable benefits they’ll receive.
7. Convey Trust: Clearly state your privacy/email policies.

TIPS

1. Feature a Sign-Up Form on Each Page of Your Site: Be sure to remember this basic concept. Sign-up opportunities should be ubiquitous throughout your site.

2. Promote Benefits on the Sign-Up Page: Enhance subscription value with sample emails, testimonials and strong call to action copy.

3. Offer Opt-In Incentives: Incentives like white papers, discounts and special reports significantly increase conversion rates.

4. Optimize Your Site for Search Engine Placement: Optimize current and archived newsletters for search engines to increase traffic and subscriptions.

5. Pay for Search Engine Services and Promote Your Email on the Landing Page: If you use Pay Per Click, be sure to include email subscription information on the landing page.

6. Add Opt-in Check Boxes on Demo Requests, White Papers and Registration Forms: Well-executed forms and pages may improve conversion rates by 50 percent or more.

7. Include “Send to a Friend” Options: Generate new subscribers with minimal effort if bundled with promotional campaigns.

8. Use Direct Mail and Catalogs: Encourage email subscriptions on all print ads.

9. Direct Employees to Include Messages and Links in Email Signature Line: Add “Subscribe to the Company X Email Newsletter” to employee email signatures.

10. Direct Call Center and Sales Employees to Obtain Permission and Capture Email Addresses Over the Phone: Instruct call center and sales staff to ask customers and prospects if they’d like to receive newsletters or promotional email.

11. Send Post Cards to Customers Encouraging Them to Subscribe to Email: If you have postal contact information for customers but not email addresses, send a post card with opt-in sign-up offer and URL.

12. Hand Out Sign-Up Forms at Public Speaking Engagements and Seminars: Promote your newsletter in presentations and handouts.

13. Implement Rented List Campaigns and Subscriptions: Promote your company in email campaigns and landing pages when you rent email lists.

14. Promote Sign-Ups in Confirmation/Transaction Emails: Add messages and links to opt-in pages of all confirmation and transaction emails.

15. Include Opt-in Line on Credit Card Receipts: Not an obvious method, but may be quite effective.

16. Add Opt-in Message: To Warranty and Product Registration Cards.

17. Add Sign-Up Message: To Invoices.

18. Display Opt-in Forms at the Cash Register: An approach used by restaurants and retailers to advertise weekday discounts, catering services etc.

19. Promote Your Email/Newsletter in Articles and Article Attribution: Include a reference and link to your newsletter after the byline on articles in trade and consumer publications.

20. Include Opt-in Message and Check Boxes on Shopping Cart Pages: Remember to ask for email format and product/information preferences.

21. Promote Your Email/Newsletter in Other Company Publications: Promote online newsletters in print newsletters, magazines and brochures. Add “Sign up for our monthly newsletter at www.companyX.com/subscribe.html” after “Visitwww.companyX.com for more information.”

22. Include Newsletter Subscriptions in Trade Show Lead Generation Forms: Obtain permission to send your monthly newsletter to booth visitors.

23. Promote: Your Newsletter/Promotional Emails in Industry Directories and Sites.

24. Distribute Press Releases Based on Newsletter Articles: Newsletters with topical articles may warrant a press release. Make sure the press release includes links and information on how to subscribe.

25. Include Information and a Link to Your Newsletter in Press Releases: A good option for smaller companies. Include your company newsletter and other resources in press release copy.

28 Ways to Build Your Email Lists

Source: Lyris HQ

It seems like only yesterday I was designing my first website. The year
was 1997 and apparently I had an affinity to blue lightning bolts and
animated gifs of my initials. When the project was complete, I had
created the most beautiful design I’d ever seen. At least that’s what I
believed at the time. Looking back at that design now is quite
embarrassing. I’m sure most of us have been there, but what about
popular websites today? Do you ever wonder how they looked in the early
days?

In this article, we’re going to travel back in time and see how some of
the most popular websites today looked in their beginning, and how
their design has evolved through the years.

Click on the images for a larger view.

CNN

2000

2003

2008

2009

Apple

1998

2003

2008

2009

Digg

2004

2009

Nike

1996

2000

2009

Adobe

1996

2003

2009

Yahoo

2000

2004

2008

2009

ESPN

1999

2009

Amazon

2000

2009

Microsoft

2002

2009

Dell

1999

2003

2009

Starbucks

2001

2009 ]]> http://www.luquew.com/?feed=rss2&p=216 0 http://www.luquew.com/?p=212 http://www.luquew.com/?p=212#comments Thu, 20 May 2010 22:40:29 +0000 Seven Seas http://www.luquew.com/?p=212

The year is 1999. You’ve just watched the Matrix, and it’s blown
your mind. You sit down in front of your computer to work on a web
design and then create or download an animated Matrix background for
your Geocities website. You’re so cool. Fast forward 10 years, and you
say to yourself, yikes, what was I thinking?! We’ve all been there. As a
matter of fact, I’m personally guilty of copying many of following
trends.

Trend isn’t a bad word in web design. In fact, the items on this
list inspired an entire generation of web designers. All of these ideas
were so huge that they created a mass following. That’s a good thing.
The problem comes when we’re happy to create a clone of a great design
and let it rest at that. Great designers push themselves to be ahead of
the trends, or they twist the trend into something uniquely their own.
The problem isn’t that you were inspired by the Matrix, it is that you
didn’t re-imagine your inspiration into something different. As you
look through this list, remember the reasons why you may have once
loved these web design trends. It will help you understand why they
were so popular, and what you can learn from them.

Reflective Text or Objects

Mirrored objects are one of those web design trends that seem to
constantly resurface. We love it for the sense of realism and dimension
it brings to a static 2D image, but most of the time it’s done
incorrectly. It takes more than simply flipping an object upside down to
make a mirrored image.

Aqua Buttons

There’s no way this list could exist without the prominent mentioning
of aqua buttons. These shiny, glassy, light blue buttons gave the
impression of 3D even though they took less than 10 minutes to make in
Photoshop. Amazingly simple, aqua buttons were a ubiquitous trend that
finally died down around 2005.

Flourishes

Unfortunately this web design trend is still in its 14th minute of
fame. These embellishments are often created to emphasize an artsy site,
and can be done very well, especially if the designer is particularly
gifted in graphic art. The problem is that this look has been seen in
an obscene amount of sites, and is no longer fresh or unexpected. The
flowers are dying.

Desktop Design with Coffee Cup

Don’t forget the coffee stains somewhere in the design. I’ve never
quite understood the perspective on this design. Is the viewer supposed
to be standing up and looking directly down at the desk? That’s the
only way this view makes sense. This trend must be stopped.

Animated Globe

Fortunately, this web design trend has come to an end for most
websites, but it died a long death. This popular �rotating� earth was
usually attached to the site’s logo. Most businesses which displayed it
weren’t even international. It was your local mom and pop shop showing
they could have a fancy animated gif, too.

Comic Sans Font

There was a time when Comic Sans was everywhere and, despite its name,
it wasn’t funny. Comic Sans was the font many misguided designers used
to convey a sense of playfulness on their websites. Comic Sans has
stirred an unholy amount of hatred over the years, and yet it continues
to exist as a font. Fortunately, every designer knows to steer clear of
this font like the plague.

Overused Stock Images

How many business sites have we visited where there’s one of these
images on the front page? Of course, clients request these types of
stock images all the time, but as designers, we have to show them what
else is possible.

Torn Notebook Paper

It’s nice to see realistic elements on websites, but the paper look
lacks originality. The overwhelming amount of paper textures and
tutorials make this a definite trend to avoid for a trend-setter.

Polaroids

There was a time when everyone incorporated Polaroid-type objects into
their design. This retro trend has outlived its usefulness. Polaroids
may be a fun throwback, but it’s doubtful that anyone born after 1990
has ever seen one in person.

Oversized RSS or Twitter Icons

We get it. You want us to subscribe and follow your random thoughts. We
want to, but putting up a huge RSS icon that’s half the size of your
web page is just obnoxious and insults your visitors. The same goes for
Twitter. Keep these icons classy and non-obtrusive.

Auto-played Music

Music is awesome, but it’s wrong to impose your music selection on your
visitors. What if they’re listening to their own music? Unfortunately,
there was a time on the internet when bored office workers had to surf
on mute for fear that they may enter the wrong website. Fortunately,
most designers have dropped this trend, but it still seems hot in
Eastern Europe.

Counters

Here we have the sad web design phenomenon of visitor counters. In the
early days of the internet, web designers used counters as a way to
(sadly) collect visitor data, but more often to impress visitors with an
impossibly large amount of web traffic. These counters were
notoriously inaccurate and everyone knew it, because no one believed
you had over a million visitors into your Homestead account.
Fortunately, the web counter trend is dead, and happily so.

Marquees

Scrolling text across any part of a website is considered a marquee.
Marquees were so cool in the late 90s, but soon lost its seem once
designers realized that websites are not headline news networks. We all
seen way too many marquees in Comic Sans font.

Frames

Frames. Frames are probably the saddest trend on this list. The only
thing that saved us from frames was the supreme importance of the search
engine. Designers started realizing that it was no longer optimal to
have five or six pages to incorporate one home page. Frames were ugly,
difficult to deal with, and had way too many moving parts.

Splash Pages That Make You Choose

Flash or HTML? Old site or new site? Full screen or normal screen? Your
visitor does not need to face these crucial choices before entering
into your website. This trend is still popular amongst designers who
don’t realize how to effectively manage both old and new, html and
Flash. By the way, no one likes full screen. Keep it simple. Don’t give
your audience these types of choices or they may choose to leave.

Intro with No Skipping Option

This design trend forced visitors to sit through an impossibly long (no
matter the length) introduction to your site with no means of escape.
The trend supposed that every visitor to your site was a first-time
one, and never took into account the possibly of repeat visitors.

Black Backgrounds

This is a delicate subject, but black backgrounds are an overused
trend. Dark is nice, especially if you find surprising new colors to
re-interpret a mood such as a deep blue or a hazy gray, but black is
out.

What do you think this list is missing? We’d like to hear from you.

About the Author

Jacqueline is an artist and a writer who spends an inordinate
amount of time playing Super Nintendo and watching Star Trek. You can
find out more about Jacqueline on her href="http://www.pearlofafrika.com/">website, and follow her updates
on Twitter. ]]> http://www.luquew.com/?feed=rss2&p=212 0 http://www.luquew.com/?p=210 http://www.luquew.com/?p=210#comments Wed, 12 May 2010 18:37:50 +0000 Seven Seas http://www.luquew.com/?p=210 Branding yourself allows you to easily engage with your clients and build trust. Once your clients begin to trust you, they’ll never forget what you have to offer. Out of building trust comes recognition. Odds are if a client trusts you, then they won’t hesitate to refer their contacts to you. Over time, this evolves into a strong relationship, which in return turns your clients into loyal customers.

Easier to Find You

A brand that’s easy to remember is easier to find. If your brand has unique properties and succeeds in attracting attention, then you’ll have a much better chance of having potential clients hear about you and easily find you as well. For example, Apple is a strong brand that has attracted new customers by breaking standards and reaching higher levels of innovation. If you type the word “Apple” in Google, the first thing that comes up is Apple.com, not the definition or content on the actual fruit. That’s a remarkable accomplishment. The Apple brand has become a staple in its own niche, and it will always be easy to find. You should apply these same principles, offer good services, break a few standards, create a unique representation, and your brand will flourish.

How Are You Branding Yourself?

What are ways to establish a self-brand? Who are good examples of self-branding? Share your thoughts and opinion on this subject in the comments.

Related Content

• 5 Branding Basics Every Logo Designer Should Know
• 70 Excellent Logo Design Tutorials and Resources
• 10 Definitive Tips for Writing Captivating Emails
• Related categories: Project Management and Resources

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.