Tag Archives: websites

Colored text: Add a dash of color to your blog content

This is a simple resource any blogger can use to add a dash of color to otherwise drab text (textual content) — especially for larger text, such as titles and subtitles, where color shows up better. Adding color to your titles, subtitles, etc. is quick and simple as long as your blogware allows you to edit in HTML view or mode; most platforms (e.g., WordPress) allow this. [ I get it; take me to the list of color codes ] [ Lighter colors for backgrounds ]

Here’s how you do it! (If it makes no sense, then read on… it’s explained simply.)
HTML code example for a red H3-level title:

<H3 style=”color:#FF0000″>

In general, virtually all blogging, website, coding, and programming platforms have two modes for editing content: A visually oriented mode and a coding-oriented, text-based mode.

WordPress allows users to create and edit content (for blog posts and pages) in either Visual mode or HTML mode. Most geeks, technically proficient, and power users prefer to edit in HTML mode. Most others probably use Visual mode, which is a type of content presentation often referred to as WYSIWYG (stands for What You See Is What You Get; pronounced wizzie-wig).

In HTML, headings, or headers – HTML terminology for what most would call a title or a subtitle – are indicated by being enclosed within "H" tags; therefore, the HTML code for a normal H1 heading title looks like this:

<H1>Title goes here</H1>

The above line of HTML code produces this:

Title goes here

The HTML code for a heading tag to display text in the color of your choice (for now, red) looks like this:

<H2 style="color:#FF0000">My red title</H2>

When the H2 code snippet above is displayed on a web page, it looks like this:

My red title

Selected HTML color codes

Antique white 3: #CDC0B0
Azure 3: #C1CDCD
Bisque 3: #4A708B
Bisque 4: #8B7D6B
Burnt orange: #CD6600
Cadet blue 4: #53868B
Chocolate 4: color:#8B4513
Coral 3: color:#CD5B45
Coral 4: color:#4A708B
Cornsilk 3: color:#CDC8B1
Cornsilk 4: color:#8B8878
Cyan 4: color:#008B8B
Dark green: color:#006400
Dark olive green: color:#556B2F
Dark orange 4: color:#8B4500
Dark red: color:#8B0000
Dark salmon: color:#E9967A
Dark sea green: color:#8FBC8F
Dark sea green 4: color:#698B69
Dark slate blue: color:#483D8B
Dark slate gray: color:#2F4F4F
Dark slate gray 4: color:#528B8B
Deep sky blue 4: color:#00688B
Dodger blue 3: color:#1874CD
Firebrick: color:#B22222
Firebrick 4: color:#4A708B
Honeydew 3: color:#C1CDC1
Honeydew 4: color:#838B83
Indian red: color:#CD5C5C
Indian red 4: color:#8B3A3A
Lavender blush 3: color:#CDC1C5
Lavender blush 4: color:#4A708B
Light blue 3: color:#9AC0CD
Light blue 4: color:#68838B
Light cyan 3: color:#B4CDCD
Light cyan 4: color:#7A8B8B
Light salmon 3: color:#CD8162
Light salmon 4: color:#8B5742
Light sky blue 3: color:#8DB6CD
Sky blue 3: color:#6CA6CD
Light sky blue 4: color:#607B8B
Light steel blue 3: color:#A2B5CD
Sky blue 4: color:#4A708B
Light steel blue 4: color:#6E7B8B
Magenta 4: color:#8B008B
Maroon: color:#B03060
Medium orchid 3: color:#B452CD
Medium orchid 4: color:#7A378B
Medium purple 3: color:#8968CD
Medium purple 4: color:#5D478B
Medium sea green: color:#3CB371
Medium turquise: color:#48D1CC
Midnight blue: color:#191970
Misty rose 3: color:#CDB7B5
Misty rose 4: color:#8B7D7B
Navajo white 3: color:#CDB38B
Navajo white 4: color:#8B795E
Navy blue: color:#000080
Orange red 3: color:#CD3700
Orange red 4: color:#8B2500
Orchid 4: color:#8B4789
Pale green 3: color:#7CCD7C
Pale green 4: color:#548B54
Pale turquoise 3: color:#96CDCD
Pale turquoise 4: color:#668B8B
Pale violet red 3: color:#CD6889
Pale violet red 4: color:#8B475D
Peach puff 3: color:#CDAF95
Peach puff 4: color:#8B7765
Plum 3: color:#CD96CD
Plum 4: color:#8B668B
Purple 3: color:#7D26CD
Purple 4: color:#551A8B
Red: color:#FF0000
Red 2: color:#8B0000
Red 3: color:#CD0000
Red 4: color:#8B0000
Royal blue 3: color:#3A5FCD
Royal blue 4: color:#27408B
Salmon 3: color:#CD7054
Salmon 4: color:#8B4C39
Sea blue: color:#4A708B
Sky blue 4: color:#4A708B
Sea green: color:#2E8B57
Sea green 3: color:#43CD80
Sea green 4: color:#2E8B57
Seashell 3: color:#CDC5BF
Seashell 4: color:#8B8682
SGI light blue: color:#7D9EC0
SGI salmon: color:#C67171
SGI teal: color:#388E8E
Sienna: color:#A0522D
Sienna 2: color:#EE7942
Sienna 3: color:#CD6839
Sienna 4: color:#8B4726
Sky blue 3: color:#6CA6CD
Sky blue 4: color:#4A708B
Slate gray 2: color:#B9D3EE
Slate gray 3: color:#9FB6CD
Slate gray 4: color:#6C7B8B
Snow 3: color:#CDC9C9
Snow 4: color:#8B8989
Spring green 4: color:#008B45
Steel blue: color:#4682B4
Steel blue 3: color:#4F94CD
Steel blue 4: color:#36648B
Tan: color:#D2B48C
Thistle 2: color:#EED2EE
Thistle 3: color:#CDB5CD
Thistle 4: color:#8B7B8B
Tomato 2: color:#EE5C42
Tomato 3: color:#CD4F39
Tomato 4: color:#8B3626
Wheat 1: color:#FFE7BA
Wheat 2: color:#EED8AE
Wheat 3: color:#CDBA96
Wheat 4: color:#8B7E66

A few light colors; suitable background colors

Many of the above colors are light enough to serve well as background colors — perfect for sectioning off small sections of text, such as asides, notes, digressions, etc.; they are easily used with blockquotes. As above, many more suitable colors can be found on Somacon’s page of HTML color codes.

Antique white 1: #FAEBD7
Antique white 2: #FFEFDB
Antique white 3: #CDC0B0
Azure 1: #F0FFFF
Azure 2: #E0EEEE
Azure 3: #C1CDCD
Bisque 1: #FFE4C4
Bisque 2: #EED5B7
Bisque 3: #CDB79E
Cornsilk 1: #FFF8DC
Cornsilk 2: #EEE8CD
Cornsilk 3: #CDC8B1
Dark sea green 2: #B4EEB4
Dark sea green 3: #9BCD9B
White smoke: color:#F5F5F5
Yellow: color:#FFFF00


Curious? Additional details about headings, HTML, and CSS

Here are a few of the details which I omitted from the above explanation in order to keep things simple for everyone, to avoid getting too technical, etc.

HTML includes six (6) standard header sizes; from largest to smallest, they are H1 to H6. The next few lines are what the standard H1 to H6 headers look like on this blog:

H1 is the biggest.

This is an H2 heading.

Next is the H3 heading.

Then comes the H4 heading…

… followed by an H5 heading.
Last & least is the H6 heading.

If you are new to HTML, then the primary question at this point is probably something like this:

Where is the code with all the variables necessary for things like the font type (e.g., Arial, Franklin Gothic Book, Times New Roman, etc.), the font size (e.g., 10, 12, 14, etc.), the colors, what links look like and what happens when you click on them, the width of the website, etc.? When I use the browser’s feature to look at the original source code of a web page, I don’t see variables like BACKGROUND COLOR, FONT FACE, attributes of forms, and so much more… How do our web browsers know what colors and fonts to use?

That’s an excellent question which shall serve as the segue into CSS: the Cascading Style Sheet. For years now, the web standard has called for the separation of presentation and content.

Presentation: Appearance; just about anything having to do with the way a site or blog looks on the screen: background color, text color and size, font stack, link color, link action, width of the webpage, the attributes of the headers H1 to H6, etc.)

Content: The actual, bare-bones textual content; the words that comprise the content of a site or blog

In the old days, the content — PLUS all the hundreds or thousands of variables used to instruct the web browser how to render the content onto the screen (colors, fonts, widths, heights, etc.) was all mixed together to form an great big ugly mess of HTML code which could be very time-consuming to update. But now — with CSS — things are much better for the webmaster!

Resources: Add a dash of color to your blog content using colored text

Code snippets

To set background color for blockquote section
<blockquote style="background-color:#C6E2FF">

NOTE: Code snippets moved to separate post; see HTML code snippets for WordPress blogging

Removed content

<H1 style=”color:#6C7B8B”>

Thursday, April 19, 2012

Stack Exchange: A network of helpful Q&A sites

Stack Exchange network of helpful Q&A sites During research for an article last month, I found a unique site worth noting for future reference: English Language & Usage is a site based completely on questions, most with valid answers, posed by writers and others who care about accurate, proper writing…

The English Language and Usage Stack Exchange is for linguists, etymologists, and (serious) English language enthusiasts.

Stack Exchange network of helpful Q&A sites Reading further, I saw that this English Language and Usage website was but one site in a network of more than 60 sites collectively known as the Stack Exchange Network, all of which are Q&A (question-and-answer) sites, covering a wide range of subjects.

The most useful Stack Exchange sites for our projects

Technology, IT Stack Exchange sites

Stack Exchange network of Q&A sites

Creative arts – Stack Exchange sites

Critical thinking, belief systems – Stack Exchange sites

Science – Stack Exchange sites

Other Stack Exchange sites

An idea hatched…

Jeff Atwood and Joel Spolsky created a site called Stack Overflow in 2008 and eventually brought together millions of computer programmers from around the globe to help each other out by documenting the answers to a wide range of detailed technical computer questions.

The amazing success of Stack Overflow led to a $6 million venture capital investment from Union Square Ventures, enabling them to create and launch the Stack Exchange Network and started launching a collection of Q&A sites in August of 2010.

As of January 2011 there were 63 separate sites in the Stack Exchange Network with over 19 million unique visitors and counting. (Source: About Stack Exchange)

Resources: Stack Exchange, the ultimate network of Q&A sites

Originally written
Monday, September 19, 2011

Examples: Excellent Google SEO results for our clients

Last week, we needed to provide concrete examples of our SEO skills and experience to new client. We conducted the following searches relating to services offered by a few of our longtime clients to see where their web sites ranked on Google. (The site link is followed by the key words we Googled and how the site ranked.) Like our clients, we are quite pleased with the results.

Specific examples of SEO success via Google

Website (keywords) #GoogleRank
http://www.hikingnature.com/ (Nashville hiking) #2
http://www.brentwood-landscapes.com/ (Nashville landscaping) #3
http://www.brentwood-landscapes.com/ (Brentwood landscaping) #1
http://www.broderickbuilders.com/ (Nashville remodeling) #1
http://www.broderickbuilders.com/ (Nashville residential renovation) #1
http://bestwebnashville.com/ (Nashville web development) #2
http://bestwebnashville.com/ (Nashville web services) #4
http://bestwebnashville.com/(Nashville web content) #2
http://stevendieringer.com/ (Nashville nature photography) #1
http://actionsportsphoto.net/ (Nashville sports photography) #2

We would very much appreciate the chance to help your organization. With eleven (11) years of experience in general web design and development with a focus on creative, search engine-friendly writing, copywriting, blogging, etc., we can help you get noticed on the web – through web sites, Facebook, Twitter, and so on. Web content, web marketing, and SEO (search engine optimization) are our bread and butter.

We truly enjoy the challenge of tweaking web sites and blogs to help them rank at (or near) the top of Google searches! If you know of any individuals, organizations, etc. that might need affordable web design, web development, search engine optimization, or any kind of writing services, we would really appreciate it if you would pass along our contact info.

Critique of friend’s Atlanta legal services website

NOTE: These words were adapted from the email I recently sent to a friend of mine, a lawyer in Atlanta who specializes in DUI. He asked me for comments about his new web site. Although the early version of the web site to which these comments apply no longer exists, I decided to post this anyway, since it contains recommendations that could apply to many web projects.

I have many low-cost or free, modern suggestions for your web presence (for both appearance and marketing); I will write it up for you soon, no strings attached. (Don’t worry, there won’t be any time wasted on my part; it will serve as the backbone of most of my future website recommendations.)

I am going to be completely honest, which is what I would want and always prefer. I’m sure (the original web designer) won’t mind. Obviously, regardless of MY opinions and comments, the most important thing (apart from sales, opinions and views of customers, etc.) is how YOU like it.

Your new site will probably be fine to a casual user and will come across as just another website. And there is nothing wrong with that. However, I would have done things very differently.

Here are a few notes:

It doesn’t work (biggest problem). Error message: Your form could not be submitted. Please contact the owner of the site where you completed the form for further details.

Also, it should be noted that the web form uses (or in this case, attempts to use) a third-party form service instead of working on its own accord.

It loads fast and does not waste bandwidth on unnecessary graphics. Very good.

Text is used instead of graphics for the main navigation links – very good. (Unneeded graphics are very passé and only slow things down; eye candy is no longer a plus for non-entertainment sites)

The rule of thumb for professional sites is white backgrounds. However, this is a personal preference. Statistically, dark text on white backgrounds is read faster and more often by more people, and they create more return visits than a light text on a dark site. The reasons for this are a mix of the science of light waves, psychology, trends, and of course, opinion.

The web site was built on a template that’s very dated. It’s quite old-school in several aspects. The first thing I noticed was the 90’s look of those blue graphics with rounded corners (top, left, footer). These qualities shout “free, outdated template.” IMAO, it would be better to have a plain-text site with NO graphics.

It contains graphics that serve no purpose other than an attempt to make it look “nice.” (Hardly anyone agrees on what is “nice” which is why standard, content-oriented, clean, bright sites with plenty of whitespace are almost universally preferred.)

On the straight-line page (reference omitted) (and other pages using images in the content area), the text should wrap around the image; instead, the image uses the whole column for some reason. It may be a browser compatibility error or something – like most others these days, I do not use Internet Explorer (IE is being dumped like a hot potato in favor of Firefox and Chrome for many reasons – slowest browser, too much clutter, etc.).

In general, what people want is a clean, neat, uncluttered, fast-loading, content-oriented site. One can learn much about preferred and desirable features by surfing the world’s most popular websites, which virtually all have white backgrounds. (However, doing something just because others are doing it does not make it right!)

  1. http://toolbar.netcraft.com/stats/topsites
  2. http://www.google.com/adplanner/static/top1000/
  3. http://www.alexa.com/topsites

…and I am sticking this link in here because zeitgeists are so interesting…
Google zeitgeist

Top Law Firms
I also spent some time looking at the sites of the top law firms, which also used light backgrounds.

  1. http://www.ilrg.com/nlj250
  2. http://www.bakermckenzie.com/

Nashville website meeting, SEO success

I just concluded a successful meeting with (client), the leading high-end residential remodeling firm in Nashville. All were excited about the numerous #1 Google rankings (their site ranks #1 for various search terms similar to and including “Nashville remodeling”), and the volume of new business they are getting from the website has never been higher.

A new phase of website development is about to commence. It will involve not only improving the current site, but beginning construction on a new & improved, far more powerful website which will probably be based on the WordPress engine. This will allow easy updating via simple-to-use screens, among other things.

I just ran across an article I thought you might find interesting; it’s entitled The Single Most Powerful Marketing Method, which turns out to be the creation of a free online marketing course (on one’s subject of expertise) – an evolution of the educational video ideas we have been playing around with.

I will soon publish a post that answers your most recent questions with regard to creating small videos.

Creating online videos and movies is among the suggestions I received from the successful local writer earlier this year; therefore, learning much more about it has become a higher priority.

As it turns out, a surprisingly large percentage of her advice on making a living through writing applies equally to our web services business; therefore, this will make the learning curve more enjoyable, more relevant and applicable to our own situation, and therefore much more pragmatic and productive overall. The same skills apply to a wide range of web projects, actually.

NOTE: These comments were taken from an email.