Blog >> Website Development

Darcy Grabenstein Jan 26

A marketing must: Make a good first impression

Written by:

When we think about first impressions, it’s usually in the context of a job interview or a first date. As the saying goes, “First impressions are lasting impressions.”

Make a good first impression

This holds true for marketing as well. Here, we’ll look at the importance of first impressions in digital marketing.

Unless the prospect knows your organization’s URL or enters your organization’s name directly into a search engine, chances are the first online impression will be a banner ad or search ad. It’s not only the ad itself that will impact that first impression, but how that ad is served up and who sees it.

Who sees your ads depends on how you target your audience. For example, you can target your audience via different demographics. Want to attract a diverse audience? Serve up ads, with appropriate imagery and messaging, to women and minorities. Want to drive traffic to a brick-and-mortar location? Target your audience geographically. Looking to hire someone with X years of experience? Target your audience by age.

Why bother targeting, you ask? Why not try to reach the largest possible audience? When you target, you will attract quality leads. You also will be delivering relevant content to viewers.

Digital marketing is both an art and a science. If you’re doing it right, when prospects click on a banner or search ad, they won’t go to the home page of your website. Instead, they’ll be taken to a carefully crafted landing page. You should have a separate landing page for each ad campaign. That way, there won’t be a disconnect between the ad and your site. Again, think relevant content. Make that your marketing mantra.

Keep in mind that the landing page cannot — and should not — include every single aspect of your product or service. It should include just enough information to pique the prospect’s interest. A key component of your landing page is the form capturing prospect data. To minimize distraction and encourage form completion, your landing page should have no other outbound links besides the form itself. You need enough form fields to capture data but not so many that the prospect is overwhelmed. A lengthy form can create an unfavorable first impression among prospects. And a strong call to action (CTA) will boost form completions.

For those who do go directly to your website by entering the URL or searching for you by name, your home page will make the all-important first impression. You want an attractive home page, but you shouldn’t sacrifice content for aesthetics. Make your site “sticky”; that is, include content and links that will keep visitors on your site longer.

Your entire website should include keywords that you (and your competitors) are bidding on in search marketing campaigns. If you’re not sure what keywords to use, free online tools such as Wordtracker can help you get started.

Timing is everything. Your sales cycle may or may not coincide with the buying pattern of prospects. There certainly will be overlap, such as at Christmastime for a gift retailer, but this will vary among your prospects. That’s why you should schedule ads throughout the calendar year. And that’s why you should constantly refresh your creative. If you have outdated ads, that first impression won’t be a positive one.

The first impression is just the first step in terms of marketing. While first impressions are important, it’s the continuing dialogue with your prospects and customers that will build your brand — and your business.

Darcy Grabenstein is senior copywriter at Annodyne.


Lester Traband Feb 3

I Love My Craft, and I Love My Job

Written by:

Throughout our lives, we aspire to do the things that we love. Since I started my first computer science class in college, I’ve loved software development. My favorite part is coming up with unique solutions to problems, whether it’s finding an API containing key data that could be used to improve a product or utilizing the code from a previous project to build the foundation for a new Following software best practices allows us to deliver quality products and use a minimal amount of time to complete.


At Annodyne, we strive to deliver quality products inside and out. We make sure that the code written for our products is the best it can be before we ship anything out the door. This helps whenever we need to make enhancements, since we can write a little bit to affect a vast amount of a user interface (UI). The UIs also are built with a unique look and feel for each of our clients. Our creative designs are viewed and reviewed by many people as part of our process to ensure that we have the best possible representation of our customers.

Another thing I love about Annodyne is that I’m offered opportunities to work with a wide spectrum of technologies and platforms. I’ve been given the chance to work on websites, services, mobile applications and databases. Each one provides its own challenges and benefits. I also can express some of my creative talents as I’m given the chance to work with many unique designs and functionality ideas. Being able to work with creative technologies as well as finding time to learn new technologies is something unique that Annodyne offers its employees.

Lester Traband is a Senior Applications Developer at Annodyne

photo credit via Anthony Lee  /  Getty Images/OJO Images

Oct 1

Cascading Style Sheets 101

Written by:

Cascading Style Sheets (CSS) is what a web developer uses to make your code “look pretty” and to easily style multiple elements, pages or, sometimes, just a single element.

But why a single element? Doesn’t that defeat the purpose? To understand this we need to talk about the cascade order. There are three main ways to implement CSS, the first being inline CSS. Inline CSS is applied directly to HTML elements on the HTML page using the style=”" attribute. Inline styling affects only the element it is applied to.

Second is embedded CSS, which is CSS in the head of the HTML file, marked with the <style> tag. Embedded CSS applies to the entire page, and uses CSS markup conventions to determine what styles apply to what elements.

External CSS is the same as embedded CSS, except that it is housed on a separate file. This separate file allows for a lot of variables, such as linking across multiple pages and caching. External CSS is the preferred use, as it allows the style to be cached so that the browser does not need to make as many requests, and so that pages can load faster.

The order of the cascade:

1. !important tags: These are the highest priority styles. The only way to override an !important is with another !important.

2. Inline style: An inline style overrides any other CSS declarations, with the exception of an !important declaration.

3. Specificity: Specificity works based on a weighted system to decide which styles are more important on a style sheet. When you declare a style, you can call an HTML element (body), a class (.body) or an id (#body) or any combination of such. Assuming you put in something like “h1.first #heading”, the style will look for any element of type h1 with the class “first” and look for an element inside with the ID “heading” and add a style with a weight. These weights are calculated such that an element is worth 1 point, a class is worth 10 points, and an ID is worth 100 points. If an element qualifies for multiple style declarations, only the most highly weighted are applied.

4. Order: Assuming that an element receives multiple styles that are all equally specific, the CSS defaults to the order a style is applied. If two styles are equal, then the one that was declared later in the sheet is applied.

This is the basics of CSS. Get out there and make stuff pretty.

Andrew Major is a junior web developer at Annodyne.

Sam Saltzman Aug 4

Optimizing the Web

Written by:

“Why is this page taking so long to load?!” This is a common theme with Internet users — why is it that web pages take so long to load on one’s browser?

The reason for this is (unsurprisingly) complex and multifaceted. The Internet is richer in content and media than it was in yesteryear — there is more interactivity, larger bandwidth options by Internet Service Providers (ISPs), and more web traffic. Web pages are filled with so much material, and the technologies driving these pages are becoming so much more complex.  “OK, I get it!  It’s technical. Speak English now.”

When someone jumps on the web (via a web browser such as Internet Explorer), a couple of things happen while accessing a website (e.g., The web browser says, “OK, you want to go to Let me check with the Internet to find the exact address for that link.” This process of identifying where to go — finding an Internet Protocol (IP) for— could take a couple seconds to locate. Fortunately, countless computers request the IP for; Internet servers cache popular sites like this for future requests to speed up the process.

“OK, so we found the site, now what?” Your computer will then ask Google’s computer(s) for a list of the content on the requested page ( has a couple of images and a couple of web files). One way this is optimized is by an acknowledgement between Google and your computer to identify which files have already been saved/cached on your computer (by comparing dates and file sizes). This comparison prevents re-downloading those files, thus reducing the total data to download from the site. For files that haven’t been previously saved, your machine and Google will determine if it is OK to save them for quicker future access.

Have I still got your attention? We went over the following: caching the IP address for a website and caching a web page’s assets (images and files). What else is there to be optimized? How else can we speed up the loading of web pages?  I’m sure you are asking yourself all of these questions in that exact order right now … right? Well, I’m going to start dropping some golden information on your collective consciousness now.

Other reasons for slowness involve rendering the content. Rendering is a fancy word that means your browser is trying to “display” web content using various tools. How will it display those images? How will it understand the code that the web page is written in (HTML)? How will it compute the JavaScript files that make it more interactive and dynamic? This is all taken care of by the rendering engine. Just like the engine and gas tank in a car, a browser engine performs a lot of complex processes and could explode with the slightest erroneous tap in the wrong place. In the past decade, browser rendering engines have matured a great deal (like those found with Internet Explorer, Firefox® and Google Chrome).

So, images are drawn onto the screen using format-specific algorithms that interpret image data. For example, bitmap files are processed and drawn differently than JPEG or GIF files. Some images are compressed more than others — this means they are smaller in file size (and likely image quality). One way to reduce image sizes (thus optimizing your web page’s load time) is to remove unnecessary color information (i.e., making the image’s color scheme “web safe.”) This reduction in information reduces file size tremendously, but can also noticeably alter quality; thus, it must be adjusted carefully.

SpeedThere are script files that also slow down the rendering of web pages, called JavaScript (JS) and Cascading Style Sheet (CSS) files. JS files provide communication between your browser and the web page — this is called “client-side interaction.” By enabling client-side interaction, actions like client-side form validation can take place prior to a bad form submission to the server.

JavaScript is used in many popular web applications, such as Gmail. Gmail is built upon thousands and thousands of lines of JS code. How does the Internet optimize thousands of lines of JS code? One way is to “minify” the code: removing unnecessary spacing and carriage returns, shortening variable and function names, and other ways to reduce the total file size.

There is also a way to reduce file sizes between computer servers and your computer by different forms of compression. The most popular compression is “gzip” or “gzipping.” When a file is transmitted over the Internet, it can be compressed via the gzip format, making the file size smaller and thus faster to receive on the client end. Gzip is similar to the zip” format, but for the Internet, and using it with the minifying process can optimize the transmission of large files by large percentages!

So, what have we learned today? The Internet is a place of wonderment and baffling processes. It is fraught with confusing terminology and scary server rooms. It also offers web designers and developers different tools to speed up the time to load web pages. This can be done by reducing the number of colors used in GIF images. Script files can also be “minified” to reduce file sizes. Developers can also send files to clients using special compression techniques like gzip. By reducing the number of files, images and file sizes, and by using complex processes, developers can optimize their webpages and provide clients faster load times.



Eric LeVan Aug 4

‘Reset the Net’ Campaign Raises Security Awareness

Written by:

While the fight for Net Neutrality continues, attention on the National Security Agency’s domestic spying is waning. It’s a shame that when we aren’t worrying about ID theft or monopolized Internet access that we have to worry about our government. It’s good to remember that we need to keep our sensitive information safe from more than just would-be criminals.

Join the movement to end government surveillance.

I recently received an email from Fight for the Future, an organization dedicated to preserving Internet freedom. Inside the email was a link that caught my eye. It sent me to Namecheap’s Reset the Net campaign page. As one of many companies that are participating in Reset the Net, Namecheap is currently offering very affordable SSL certificates for use with its hosting accounts. Previously, to acquire an SSL certificate that was reputable, you’d have to pay something around $300 per year for commercial-grade protection. Namecheap’s PositiveSSL and RapidSSL products are offered for $9 and $10.95 per year, respectively. These are for smaller commercial websites, but can certainly be used by any web host to secure its traffic.

Now I’m not a government conspirator, but I do appreciate the need for security. Your users will also appreciate that you are trying to protect them, and SSL is now a very affordable way for website owners to do that.

Any website that accepts private information such as credit cards or Social Security numbers is required to use encrypted communication to keep that information safe. But that isn’t necessarily the only information that should be secured. Why not encrypt ALL the information exchanged between browser and server? Google, for instance, runs entirely over SSL. Not a packet of data is sent to Google that isn’t encrypted.

We’re entering a world where it’s appropriate to encrypt data that we normally don’t think about. All data is valuable in some way even if it isn’t sensitive. And if it’s not encrypted, it’s a healthy (albeit slightly paranoid) point of view to imagine that someone is listening in. If we do that, then we begin to think about how to become more secure. We can create longer passwords with greater variety all day long, but if they are being sent to a server as plain text, then all that effort is for naught.

Let’s bring security to the forefront and think actively about what it takes to preserve our freedom and our information.

Eric LeVan is a front-end developer at Annodyne.

Eric LeVan Jul 17

Next Gen Banner Ads

Written by:

Flash has been on the decline for a while now and I am still surprised that we’re using it in our campaigns as a means to capture attention and drive traffic. What technology do we fall back on once flash has gone the way of the dodo? We need a technology that can provide comparable 2D rendering to achieve the kinds of effects that people want to engage with.

I’ve decided to explore the HTML5 canvas platform as a suitable alternative to Flash. Why canvas? Since it is part of the HTML5 standard, it integrates much more seamlessly into a web page. Flash cannot be viewed on some mobile devices, which is a huge detriment for marketers, considering a vast amount of Internet traffic is now generated from handheld and portable devices.

Below you find two similar examples of the same ad. One is implemented in Flash, while the other is implemented in canvas. Can you spot the difference without cheating?


Get Adobe Flash player
AimRx. We can help you reach your patients. Get in touch.

Now that we have seen both demos in action, let’s draw some comparisons:

Flash (left) Canvas (right)
Dev Overhead Very Low High
Footprint Compiled SWF (38 KB) Canvas Javascript (7KB) + Assets (200KB)
Quality Embedded True
Fallback Support Good None
Maintainability Requires Adobe Flash Requires Text Editor


Both contenders offer up specific advantages. Because of Flash’s age and maturity, it is widely supported in older browsers. This is a major benefit over Canvas, which will only work in current-gen browsers. With Flash, though, you lose your audience on other platforms. Canvas will work on mobile devices, although it may not run as efficiently on the hardware that runs phones and tablets. Flash grants us some portability since all the assets are embedded in the SWF format. Extra care must be taken, however, to ensure that the assets will not suffer a loss of quality in the compression process. Personally, I like a crisp, clean image. Because canvas uses native browser functionality to build its presentation layer, there is no discernible loss of quality.

The overhead for canvas is very high. While Flash demands the use of proprietary software, it also makes the development of the ad itself much easier. This means that creating a canvas ad from scratch by writing custom JavaScript takes a long time — approximately 8 times longer. This overhead time could be mitigated quite well by performing the development in Flash or associated IDE and then exporting the final product as HTML5 canvas. Some applications, such as Muse, handle this very well. They use a built-in framework for easily translating Flash-like builds into canvas.

After all is said and done, if pressed to choose a technology for ads going forward, I would find it hard to choose Flash. My decision isn’t weighted on the bias against Flash that is growing steadily as we progress, but simply in its inability to reach the market share of growing mobile platforms. Now if only Google would permit us to provide a simple JS file in lieu of the usual format.

Eric LeVan is a front-end developer at Annodyne.

Sam Saltzman Jun 26

Software Is a Tool, Not a Cure

Written by:

In the software development industry, it is often the case that stakeholders will demand a software product to solve a problem without thinking about the “human factor.”  For example, users may ask for a new portal to keep track of form entries and user metrics.  These portals can be built, the form entries tracked, user metrics measured.

However, there needs to be a human element at the end of these software products — a user who is pushing the buttons and analyzing the data.  This is perhaps the most important facet of technology: Who will be manning the ship and steering it on a course to achieve a goal?  Who will take ownership of that product, ensuring that it is maintained and is properly addressing an ultimate goal that benefits various stakeholders?

In the agency world, client requests always take top priority. It is absolutely critical that we deliver a product that meets the needs of these users, and within an acceptable time range and budget.  The Information Technology department at Annodyne works closely to analyze and steer user requests in a direction that will both benefit the client and set accurate expectations.

Part of setting expectations is to ask the question “How will this system solve the problem?” to gauge what the end goal is for these users.  This question, more often than not, will open up a floodgate of additional requirements and needs for the project.

A common response to this question is: “Oh, we need to see who is using our site.”  We continue to ask these primer questions until we can fully establish the end goals.  It is at this point that we can determine the high-level requirements of these users.  We can answer the question “How will this system help the client?” At the point where we have gathered the requirements, we maximize client engagement and communication throughout the entire development process.

 For each screen, we can point to how it addresses a user need.  For each overall function, we can deduce that it helps the client in a specific capacity. If we are off the mark with a design or feature, the client can determine this issue early in the development process, and the course can be corrected sooner than later.  Most important, clients are gaining exposure and direction of their software tool as it is being built.  They gain vision into the system.

After the system is built, success can be determined by the following factors: end users know how to use the system, and the system helps them address their business needs and goals.  Software packages are just software; they are not intended to solve business problems.  They will, however, aid users in locating problems and determining better solutions.

A “Google” search probably won’t solve a medical question, but it will provide resources that share relevant information.  Google Analytics won’t optimize a company’s designs for form conversions, but it will provide statistical data to point that business in the right direction based on its current design and form conversions.

 Moreover, software should always be used as a tool first and foremost.

Sam Saltzman is tech team lead at Annodyne.

Eric LeVan Jun 11

Live Preview Coding with Brackets

Written by:

As a developer, I often to try to keep up with the standards of the industry, but it has always been a different challenge in keeping up with the tools. HTML and web-based coding encompass a lot of the daily tasks I perform here.

In what I like to call “The Before Times” of web development, there were not a lot of tools available to effectively debug web pages without changing the code, saving the file and refreshing the web browser. It was a tedious process that produced minimal feedback. In turn, that made it a lot harder to identify issues in the code.

Currently, we have a wide array of Integrated Development Environments or IDEs available that aim to lessen the load of the programmer. The learning curve is generally steep with these tools since they cover so much ground, but several try to simplify the process of development.

This is where I discovered Brackets, an open-source IDE for front-end developers that is available for Windows, Mac and Linux. It focuses on one thing and it does it very well. Since a lot of what front-end development is about is being able to view the changes you’re making in the code, Brackets offers a live preview function. When you open a live preview of your web page, it creates a connection with your browser. Now any changes you make as you code will appear live. This grants a large boon to workflow, since you no longer have to stop coding to see what you’ve accomplished so far.

The biggest challenge I now face is catching myself when I go to refresh my browser manually.

Eric LeVan is a front-end developer at Annodyne.

Ashlee Hall Nov 7

Keeping Your Site Afloat — Navigating Google Algorithms

Written by:

Google’s ever-changing algorithms ebb and flow with both SEO challenges and benefits. With Panda, Penguin, Hummingbird and an estimated 500-600 lesser-known changes each year, it’s difficult to tread water and stay on top of each update. If you’re not a webmaster, it’s not essential for you to stay informed of each modification (that’s why we’re here), but you want to be aware of the larger-scale changes.

When it comes to taking the helm of your online marketing strategy, your tactical direction should be heavily impacted by these larger-scale Google algorithm changes. In 2013, Google’s search engine market share continues to hover close to 70 percent, even with Microsoft Bing users increasing. Maintaining and improving your site’s SEO position is crucial to succeeding in today’s primary online marketplace. To quickly get up to speed on the current status of the leading search engine, let’s sail through the major algorithm changes that occurred since 2011.

Read More