Archive for the ‘web design principles’ Category

Writing for the web (SEO)

Tuesday, June 23rd, 2009

They have been saying “content is KING” for a long time – that includes content in all it’s various forms (video, web design, social media, articles, animation, etc.) as well as the delivery and design of content too!

There are literally thousands of articles about “writing good content for the web” — over the years I took some time to read as many as I could, so with everything learned and much applied here it is :

Keep it simple:

When writing for the web we should strive for simplicity, consistency, and clarity; this means chunking up content, using bullets, and keeping copy short. People don’t necessarily read on the web they scan, so keeping copy in bit-sized pieces makes the task of digesting information much easier. We can evaluate copy by asking the following questions:

* Does the copy get to the point quickly?
* Is the copy shy about the offer or incentive?
* Is it easy to respond to?
* Does the copy overcome every objection to replying, leaving the reader with no choice but to act?
* Does the copy use simple words?
* Does the copy use active language; does it address the site visitor as ‘you’ ?
* Is the copy broken down into simple sections and bullet points?

People read 25% slower on screen, so keep your sentences and paragraphs ultra-short. Highlight keywords to make the messages jump out. If the website is offering something, make sure the offer is simple and transparent—and be clear about what you are asking people to do if a response is needed.

People spend some of their time understanding the page layout and navigation features, as well as looking at the images. And generally actually read only 20% of what is on the page.

Website visitors are restless. They spend more time scanning and clicking than reading, and they expect quick progress. Your copy should:

* Be specific—the first five words must have meaning.
* Make the news stand out—don’t bury your message.
* Signal where to go—make the actions visually clear, ensure the click-through paths follow a logical sequence, so that visitors can go straight to the key information.

Keep It real—keeping copy short comes with a caveat:

Keeping copy short is sometimes, but not universally good advice—people are generally looking for content.
Just because something is published online doesn’t mean it must be read online. One good tactic for longer segments of information is to allow for site visitors to print and read it offline.

How many words: (for web designers in cooperation with keyword density strategies)

1. 250-word count for each optimized page exactly balances search engine and reader needs.
a. The search engine spiders crave content.  You may see “a lot of words,” but the search engines see “a document with lots of important data to extract.” As long as you follow usability principles, you can write tons of text without overwhelming your reader.
b.  A longer word count makes it easier to include your keyphrases without sacrificing your marketing message.
2. Identify no more than 3 keywords and create a theme around them. If you have more than 3 keywords? Create another page.
3. A page title shouldn’t be longer than 8 words. Google cuts them off typically at that point.
4. Paragraphs for web content should be between 2-5 sentences in length, unless the sentences themselves are longer,
and then perhaps only 3 sentences to a paragraph. (Paragraphs: 40 – 70 words)
5. Headings: 8 words or less

When writing headings:

1. Keep them to eight words or less
2. Include important keywords
3. Avoid the use of adjectives and prepositions (and, a, the, of).
4. Be clear and concise. Avoid wordy, wishy-washy phrases.
5. summarizing the essence of what’s on offer and allowing visitors to access what they require fast.
6. Website visitors are looking for information fast. The best headlines for the web immediately communicate facts.
7. The title could be short and work the best. However longer titles can have keywords and are more searchable

Use many sub-heads:

Start the writing with a header followed by short sentences.
Use as many sub heads as required for different points.
Sometimes you may also use a list to highlight all the important points.

Sell benefits not features—Focus on making content more personal:

A feature describes a product or service. A benefit is what the user gains from using that product or service.
Don’t say, “Our duvets are warm and comfortable,” say “You’ll be warm and comfortable in one of our duvets.”
Tell your customers how your product or service will make them happier, healthier, wealthier.

In other words focus on making sure every line of your copy is dedicated to what’s in it for them.

Scrolling copy:

Do you lose customers with scrolling copy?  No.  According to a study by User Interface Engineering (UEI),
One of the most significant findings of our research on Web site usability is that users are perfectly willing to scroll.

However, they’ll only do it if the page gives them strong clues that scrolling will help them find what they’re looking for.
Anything that appears “above the fold” is immediately visible when the web page loads. Site visitors will use this information to make an instant decision as to whether the site is useful to them—they will only scroll down if you have successfully grabbed their attention and aroused enough interest.

In the trade-off between hiding content below the fold or spreading it across several pages, users have greater success when the content is on a single page.

Keep it memorable, engaging, and formulate trust with words:

Emerging web standards and technologies nourish the new approaches to web design, clarity and coherence.
Create a memorable experience and giving the site visitor a reason to remember the experience

Content is the heart of the user experience. From the body content to the alt text to the footer, the words that shape the page lie at the very center of an engaging visit. If the words aren’t beautiful and meaningful, the sleekest design in the world won’t compensate for it.
When content is thoughtful, personable, and faithfully written it hooks the reader and draws him in, encouraging him to click this link or that, to venture further into a website. The content will need to deliver what it promises, and this will hold an attentive reader, staying longer on your web site.


Speak to the individual, not the audience:

Try to personalize your web copy as much as possible. Build a picture of your readers. Are they likely to be familiar with the product on offer? Are they likely to be regular internet users? Are they in regular communication with your client’s company? If any of your answers are “yes,” integrate that knowledge into your copy to make your reader feel more connected and understood.

If you don’t know the answers, give visitors a choice of avenues so they can access more targeted information. (You might include things like links to detailed product information, company news updates, and detailed ordering instructions for people who may be unfamiliar with e-commerce conventions.)

ALT TAGS:
alt text does a tricky thing: it translates a visual experience into a coherent, semantic expression. It takes the implied and makes it explicit—an emotional trigger palpably interpreted. With a mere handful of words, alt text must relate the full impact of an image to those who can’t, for whatever reason, see it.

Summarize and HOOK the reader:

Different from print medium you will want to start your writing with a small summary of what you want to say.
Then say what you want to in the main content.
Finally conclude by giving a summary of what you have said.

A “bottom down” approach is necessary, with the conclusion or summary at the top.  This may seem like a superficial treatment of subject matter, and it can be.  However, keep in mind that millions of websites compete to deliver information, and if your website is written in a clear, direct manner, you will succeed in delivering information.

The first part of your article really needs to be something that will grab the reader’s attention in those first 3-5 seconds and make them read further so save your introduction for something that will really hook your reader.

Keywords — and keys to writing for SEO:

Balance your marketing message with the use of keywords
Optimize your pages for more than one keyphrase.
Focus on Keyphrases but don’t force them into your copy flow
Use key-phrases to emphasize your point.

1. Use Keywords in URL. The keywords you mentioned in the URL must be mentioned on the webpage as well.

2. Use Keywords in <title> tag. No more than 8 words.
It is also the title of the page on the Search Engine Results Pages (SERPs).
Listed by others as one of the Big Three (tags, links, and text), we’re putting title tags at the top.

3. Keywords In content
Try to use your keywords in <h1> and <h2> tags.
Don’t spam the page with <h1> tags, just include the keywords naturally into your content.

4. Use Keywords in Anchor Text of Inbound Links
When you get links to your website from external websites, try to vary the anchor text used.
Don’t always link straight to your index page, instead get links to deeper pages.

5. Use keywords in images <alt> tag

6. Keywords in and around hyperlinks
Include keyphrases in and around hyperlinks (otherwise known as call-to-action links). Key to the link analysis algorithm is not only the number of links that point to your page, but also the contextual phraseology around the links.  In other words, if your phrase appears in or near a hyperlink, the search engines may give it a relevancy boost.

7. Balance your marketing message with the use of keywords, focus on Keyphrases but don’t force them into your copy flow. It is not so prudent to jam pack your copy in an unnatural way with keywords or key-phrases.
Although search engine spiders might eat this up, readers will revolt. Plan on including your two to three main keyphrases at least three times each within the body text.

Just look at the keyphrase-packed drivel people had to wade through:

“Our web design services are the best web design services on the ‘Net today.  Discover the best web design services  in New York City are right for you.”

Sure, you immediately know the keyphrase is “web design”  But, the constant keyphrase repetition jack hammered the sales flow.

……………………………………………………………………………………………………………………………………………

So–it’s not everything but it is a fair summation of things web designers, web developers, digital strategists or people building their own website can try. Remember all the information is out there and anyone can read about it — it’s up to you to apply it and really find out what works online with results !

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati

Bing it. Web Designers will need to know

Tuesday, June 2nd, 2009

bing-logo

It’s not a typical post for this blog, all things being web design and New York City… but… Microsoft’s New Search at Bing.com helps people make better decisions… maybe ? (available tomorrow JUNE 3rd 2009)

Formerly rumored to be named “Kumo” back in April… it’s BING ! They are calling it the “Decision Engine” which is touted to  go beyond search to help customers deal with information overload.

Bing appears to organize data in useful ways and with the “web 3.0″ being tossed around  – and web 3.0 being called the “semantic web” … let’s hope it can sift through all the details and grab out the one you really want … boy I hope they don’t big this up !

A few things clipped from the web which seems to sum it all up for us are below:

1. You can use it as a verb as Google is the Kleenex of search engines… www.letmegooglethatforyou.com

2. Ballmer says it shows real-time flight data

3. The Bing engine is showing UPS and Amazon customer service numbers for queries for tracking numbers

4. Bing seems to be designed specifically to keep people on its search pages as opposed to sending them off to other sites. … we’ll have to see how this works … details… details.

5. Apparently you can hover over videos to view them right from Bing.

6. Matt Cutts (the posterboy of Google Search ) is pointing out shortcomings in Bing’s search results like spammy search results.

we’ll see… for now web designers / flash designers / web developers will be watching and experimenting… oh by the way I don’t think it can search Flash design files … but Google still has a lot of work to do on this as well.

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati

web design file formats

Wednesday, May 27th, 2009

So many people ask me about file formats for web designers and web developers. Whether they be account managers, project managers, or even digital strategists want to know the difference between file formats that work best while web designing. For web designers and web developers and anybody on the creative side of advertising this is an easy one… but this post is for everyone else.

Quality vs. Size

When designing for the web we want the smallest size possible, making your site load faster. You also want your images to look good. So… you need to find a balance between having a clean professional image and having a small enough file size.

Types of Image Files

There are many file types, but these are the standards for web development: JPEG, GIF and PNG.

Bitmap Images (In General)

Bitmap graphics are the most common graphic format (and the above mentioned formats fall into this category)in use on the web and, indeed, on the computer.

Bitmap graphics are composed of pixels, each of which contains specific color information. A pixel is small; a single image may be composed of hundreds of thousands of individual pixels. Much like cells revealed from a piece of tissue when seen under a microscope, these pixels are only clearly and individually visible when the image is magnified (fig 1).

Figure 1

A graphic composed entirely of pixels each with its own color properties is ideal for photographic images where there are thousands, even millions of different colors. Complex fills, shading and gradient effects can easily be rendered. The Bitmap image offers as much freedom as an empty canvas.

In Bitmap graphics, there is an immutable connection between pixels and the image they compose. When a Bitmap graphic is saved, the computer is really saving an exact visual picture of the image: this pixel goes here and is this color; this pixel goes there and is that color, and so on and so on.

This connection is responsible for the effects seen when resizing a bitmap graphic. Given three image sizes – an original, one smaller, and one larger – each will naturally contain a different number of pixels. Pixels do not change sizes, but the image has. It takes more pixels to fill the volume of a larger space, fewer to fit into a smaller space. (fig 2)

Figure 2

When attempting to enlarge or interpolate bitmap images… the computer must add additional information (pixels) to the original image to allow it to fill the new larger area. Since there is no source for this information, it must be interpolated based on what is currently available in the image. Because the computer is not especially skilled at guessing games, Bitmap images that have been scaled larger are frequently blurry. After extreme size increases, individual pixels “blocks” are more apparent (as though we held a magnifying glass up to it) and the image is said to be “pixilated.” An enlarged image will never be as clear as the smaller original. This blurriness also occurs for the same reason any time a Bitmap graphic is manipulated, by rotating, skewing or distorting.

JPEG

JPEG is a compressed file that has very good quality standards. Because of its compression, colors and data are squeezed out of it to create smaller file sizes. This can cause some blur with images with sharp edges, which is great for photos / images. If you look at a photo there are no straight lines or edges. Everything is blended together, which why JPEG is great for photos.

GIF

GIF is used by web designers more for illustrations rather than images. Transparency and transparent backgrounds is a feature that is supported by GIF.

PNG

PNG is one of the newest web graphic technologies. PNG is great for quality and file size. You have the best of both worlds in a PNG. PNG can also support transparent backgrounds. The only downside to a PNG file is that some old web browsers don’t support PNG. This problem is becoming less and less a concern, but it still is a concern with older browsers.

Then we have VECTOR File Formats

Rather than being composed of pixels, Vector graphics consist of points, lines, and curves which, when combined, can form complex objects (fig 3). These objects can be filled with solid colors, gradients, or patterns.

Figure 3

Vector graphics are mathematical creations. For this reason, the programs that are used to create them save instructions on how the image should be drawn, rather than how it looks. They can be redrawn at any size, in any position, without losing any quality. A vector graphic resized to 5 times its original dimensions is simply reproduced, exactly, at the new size. It can also be freely manipulated without losing coherence, like a rubber band that can be stretched an infinite number of ways.

The price of this scaling flexibility is that Vector images must remain relatively simple in comparison to Bitmap images. It is next to impossible to render the nuances of a photographic image in a vector editor; as a result, illustrative vector graphics have a distinct look and feel, even when produced in detail.

However, Vector graphics are ideal for producing artwork which frequently needs to be presented in different sizes or colors. Logos especially fall into this category. A logo produced with a vector application can be blown up to fit on a billboard or scaled down to adorn a letterhead with no loss of quality.

Flash File Format

Flash started out with it being a scaleable vector file format for the web (I think back in 1997). It requires a plugin to allow it to operate in browsers which is now ubiquitous (98% of all internet users have version 9). Recently with Web 2.0 being a reality and less of a buzz word, javascript has taken much of the low hanging fruit from flash. Rollovers, animation, slideshows, transitions can be done with jQuery and related javascript. Flash has now become the defacto standard for video online. Flash also remains the number 1 tool for creating rich interactive content on the web such as animations, 3D web based interactions and animations (CS4 and Papervision), and now Flash content has the ability to be searched by Google and Yahoo ( still should not really be used to count on high SERP’s ). Adobe Flash created content by web designers and web developers is delivered at an amazingly low file size considering what kind of “web interactive experience” is output — and those web designers and web developers who started with it 10 years ago have a big leg up… being able to create stunning content with amazing quickness and efficiency. Flash gurus can create creative ways to make content very manageable ( which make updating web designs easy ). One reason Flash design has become so popular is due to it’s wide user base — allowing designers and developers to share ideas and propel it’s use of amazing interactive content into it’s ubiquitious form.

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati

web design and SEO

Monday, May 18th, 2009

Another SEO post… geared toward web designers who offer search engine optimization as one of their services.

seo_12

With almost every single web site that we design and develop, we have our clients asking about “Being found online”. Here’s our response… whell in the past people who built or created things like buildings, businesses, and stores used to say “…If you build it, They will come”. Now in the online space we say “If you build it they will come — if they can find you”. That’s where SEO comes into play! As a boutique web design firm in New York City, I stress a few things that will enable you to be found online in natural search engine searches (in order of importance) –

1. well written content with keywords and keyword density strategies in place

2. trusted, high quality inbound links

2.1. using social media, blogging, and social behaviors for linking strategies

3. links with good phrases to other internal pages within your site, and links to other external quality & related websites

4. title tags

5. meta descrition tags

6. alt attributes and tags

7. meta keywords

…And another thing we mention is that it takes time and it’s an ongoing process. Taking this SEO approach without buying high end links (such as Online Publicity, Article Marketing, Some Directory Submission, Social Media Marketing, Social Networking, etc…) SEO is an ongoing process that takes time to build the right way (onsite optimization and off site seo) and should not be rushed.

Then the question arises, how much will all this cost ? and I see offerings all over the web for 29.95 …

The cost to do it is :

1. creativity (how and where you form your linking and keyword strategies)

2. time (the time it takes to implement, test and refine)

First as a web designer , a web developer or digital strategiest or anyone selling and/or promoting these kinds of SEO services– test it out first! Refine your techniques and apply it. Many people know the strategies, which are all redialy available online… but there are few who actually know how to apply these principles to their web designs… and believe me once you start it’s a fulfilling task to see your web site climb the ranks in the search engines !

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati