Over the past two years, I have been one of the primary facebook page admins for the Chesapeake Cats and Dogs facebook page. In that time, I have helped the page double in likes; from 1250 in December of 2013 to more than 2700 today. What makes a facebook page successful?

Step one: interesting and unique content.
What makes your page different from the perhaps thousands of other similar pages? What do you have to offer the facebook audience that they can’t find somewhere else? Figuring out how to make your page unique is step one.

Step two: once you’ve figured out the answer to step one, the next step is to post regularly.
Depending on the type of page you’re running, that could mean once a week, once a day, three times a day, etc. You need to find that sweet spot between posting too infrequently and losing your audience’s attention and posting too frequently and risking coming across as “spamming” your audience. Another aspect of this step to keep in mind is that facebook will not display all your posts in your follower’s timelines. So, the more frequently you post, the more likely your page will show up in their timelines; however, if you post too frequently, you also reduce the chances that any one post in particular will be the one that is displayed. For the CCAD page, I aim for 3-4 posts a day. Also be aware that facebook recently made adding images to albums display in timelines; so adding images to albums now count as posts. One other note: for posts that include more than one image, be sure to include a description on each image; facebook will often only show the images in timelines without the corresponding post text attached.

Step three: interact with your followers!
When people comment or send your page a message, reply as quickly as you can… Even if you don’t know the answer to their inquiry, let them know you’ve seen their comment or message and are working on answering it.

Step four: encourage followers to SHARE your posts.
This will increase the number of people who see your posts AND will encourage people to consider “liking” your page.

Step five: Once your page has a certain number of likes, you can view the “Insights” tab to see which posts encourage the most interaction. What is particularly helpful is you can see WHEN those posts have been made. For example, on the CCAD page, posts made in the evening have tended to get the most views. One caveat: facebook does not always display your posts in people’s timelines in a timely (pun intended!) fashion. Often posts will appear in timelines several hours later. So keep this in mind when you are figuring out when is the best time to post. Generally, I try to schedule posts an hour or two BEFORE prime interaction time.

Step six: Schedule posts!
Facebook allows pages to schedule posts in advance. This means you can plan several days worth of posts ahead of time and be strategic about when and what you’re posting.

If you would like more information about setting up a facebook page, Line by Line web design will be offering facebook consultations starting in 2016! Please contact us for more information.

One of the most immediately noticeable aspects of website design is color. Coming up with a color scheme that is not only visually pleasing but also aptly represents the content and character of a website is, frankly, one of my favorite parts of designing a website. The smallest change in a shade can result in a completely different visual tone, changing a background color from abrasive to calming, or from blah to eye-catching.

Consider the two website snapshots below:

snapshot 2

snapshot 1

The first snapshot is my original color scheme for a new wedding and event planning company called Simply Smashing weddings & events. Perhaps because of the Britishism in their name, I visualized a traditional, classy theme based in golds and silvers. Perhaps also because I personally prefer neutral colors for backgrounds, I chose the champagne color as the focal color.

The clients were initially pleased with the website, but after a few days, they realized the color scheme wasn’t what they had envisioned for their website. “We want the purple and green to be the focal colors!”, they said. And, though slightly hesitant in the beginning, I agreed to give it a try. The new color scheme gave their website a completely different visual tone. The end result was a website with a very contemporary, modern flair, that more accurately represents the character of this new company than the first gold and silver color scheme.

1. All links must function like links. They must have hover effects, be a navigation tool, and look noticeably different than other text.

This sounds blatantly obvious, but there are so many websites online where a link doesn’t change when you hover over it. This is particularly true on websites that are designed first in Photoshop. Imagining a website as a static image may be useful for getting a basic design idea, but a website is not a static image. A website must be dynamic. Website users need to be able to interact with the website, and having links change when the user mouses over them is one of the most fundamental and basic ways of making a website interactive. This is also an issue with usability. When a link doesn’t change when the mouse hovers over it, it forces the user to think: “Is this really a link and not just colored or underlined text? Is my mouse actually over this link or am I off by a pixel or two?” And good website design requires no thinking on the part of the user.

2. It must be obvious on the page itself what page you’re currently viewing

It’s not always convenient for a user to look up at the address bar of their browser to find out what page they’re currently on. It’s very simple to add a header on each page with the page title. Another technique I use on all of my websites is for the menu link of the current page to display differently than the other menu links. This is another indication to the user that they are on this particular page and assists them in navigating the website.

3. Contact information must be easy to find

One of the first things many users look for on a website is contact information. Since websites are created worldwide, the very first question a user often asks is: where is this business located? When I visit a website of a company, this is what I want to know right away: is this business located near me? Does it have offices near me? In other words, is this business located close enough to me to be useful? If contact information isn’t easy to find on a website, a user won’t know if this business is one that’s actually useful or not. You can have the best business in the world, but if your business is located 500 miles away (and isn’t a company whose business involves transportation), the user is going to look elsewhere. And if your website doesn’t have contact information clearly displayed, the user is going to lose interest and move on to another website.

4. The website must be functional, if not always pretty, in all browsers currently used by Internet users

The sad reality is that there are still people who use Internet Explorer 7 (and 6). These people probably are unaware that there are better browsers out there, or, if they’re aware, they’re using an office computer and not allowed to update their browser for whatever reason. These users need to be able to use a website. This means that the menu bar, in particular, must be useable in these unfortunate earlier versions of Internet Explorer.

5. The website must be accessible for people who are vision-impaired

In other words, don’t make your website out of images. Use “alt” tags for all images. Make sure the design doesn’t break if a user increases the font size. For more information, please click here. And yes, this does matter. It’s not just people who are blind who need accessible websites, but also people with more common vision problems, such as farsightedness. Think of all the people you know who use reading glasses. These people will all benefit from either zooming in on a website or increasing text size. Don’t disclude them from your website audience.

6. All text must be easy to read

This is just common sense. A website is not just pretty colors and fancy visual effects. The foundation of most websites is their text content. Make sure the contrast between the text and its background is sufficient. Black text on white background is ideal, but if you must use another combination for design purposes, make sure the text is easy to read! The text size should also not be set too small. Line-spacing can be increased from 1 to 1.5 or 2 to make paragraphs easier to read. Margins between paragraphs act as a visual display of their narrative function.

7. Website sections must be obvious by design elements and not just by labels

The header section must look different from the content section. The menu must look different from the other sections. In other words, the function of each website section must be visually apparent. There are many simple ways to accomplish this: different colors, spacing, borders, text styles, etc.

In short, don’t make the user have to think about how to use your website!

One of the most challenging aspects of website design is coming up with intuitive navigation. When a website has fewer than 10 pages and no sub-menus, designing navigation is a breeze! When a website has more than 10 pages and has sub-menus, figuring out an intuitive way to display all those menus can be a challenge.

The first time I was faced with this challenge was for a website I was designing for the non-profit organization, 2 Cents 4 Change. First, this website had a total of 24 pages, which originally had been organized somewhat haphazardly. So, the first challenge I had was figuring out how to organize those 24 pages. I ended up deciding on 7 pages to be shown in the main menu, with 3 sub-menus for the remaining 17 pages. There is no aesthetic way to display 24 menu buttons, especially when 17 need to display as sub-menus. But for the website to be as functional as possible, each and every page needs to be accessible from each and every other page. This requirement rules out having static sub-menus that display only when a user is viewing specific pages. So, if static sub-menus on specific pages isn’t the best option, what is?

Many website designers would answer, “Drop-down menus!” Indeed, drop-down menus are an easy way to display sub-menus without cluttering the website with cumbersome navigation. But drop-down menus aren’t always easy for users to navigate and require extra effort in that a user can’t see the sub-menu unless his or her button first hovers over the required menu button.

The solution I finally came up with is a combination of drop-down menus and static menus. I also use this method on BioMolecularProducts.com. Here is my solution: sub-menus that function first as drop-down sub-menus, and then as static sub-menus when the user is viewing a page within that category.

For example, on BioMolecularProducts.com, if a user is on the page “Lym-X-Sorb®”, the sub-menu connected with “Lym-X-Sorb®” is always displayed underneath the main menu; whereas, when a user is on the index page, the sub-menu appears below the main menu only when a user hovers on the “Lym-X-Sorb®” button. I believe this solution provides the user with the benefits of drop-down sub-menus and static sub-menus without any of their disadvantages.

I accomplish this without using any javascript, only HTML, CSS, and PHP. Here’s how I do it (note that what follows assumes a basic understanding of HTML, CSS, and PHP).

First, the CSS:

ul.menu li ul {
	position: absolute;
        width: 966px;
	z-index: 100;
	left: -9999em;

ul.menu li:hover ul, ul.menu li.sfhover ul {
left: auto;

Note that ul.menu is not necessary; whatever you call your menu un-ordered list is fine. Many website designers prefer to have their menu ul in a div called #nav, in that case, it would be #nav ul li ul . The important part is that there is a second ul that appears after the li. The way this works is that the second level list originally displays somewhere waaaaay off-screen to the left, and then when the user hovers on the list item, the list displays on the screen.

The HTML looks something like this:

<ul class="menu">

<li><A HREF="trigger.php">Trigger</A>

<li><A HREF="submenu1.php">Submenu 1</A></li>
<li><A HREF="submenu2.php">Submenu 2</A></li>


Note that the list item has an un-ordered list within the list item tags.

So, this is how to get the sub-menu to function as a drop-down menu. To have the sub-menu change from a drop-down menu to a static menu when the user is on the Trigger, Submenu 1, or Submenu 2 pages requires PHP and a CSS class.

First, the CSS class:

ul.menu li ul.sub {
	position: relative;
	z-index: 20;
	left: auto;
	float: left;

This allows the sub-menu to display below the main menu.

So, how do we have the change occur? Well, first, I set a variable on each page called $title. I also use this variable for the tag in the HTML section and as a page header. You can call this variable whatever you want; what’s important is to have something in this variable that’s common to all of the pages you want the sub-menu to display as static on.

Here’s what the HTML and PHP look like with the $title variable:


<li><A HREF="trigger.php">Trigger</A>

	<?php if(stristr($title, 'trigger') == TRUE)
{ echo " class=\"sub\""; } ?> > <li><A HREF="submenu1.php">Submenu 1</A></li> <li><A HREF="submenu2.php">Submenu 2</A></li> </ul> </li> </ul>

The section in bold is what’s new. What this does is add the CSS class “sub” to any page whose title variable includes the word “trigger”.

Thus, the sub-menu will display as a static menu underneath the main menu on those pages and as a drop-down menu on any other pages.

Sample code:

p {
text-indent: 5px;
border: 1px solid black;
clear: none;
float: left;
margin: 2px;
padding: 5px;


  1. The whole set above (what’s inside the fancy brackets) applies to one SECTION (in this example, identified by <p> in HTML) of the site.
  2. What’s inside the brackets ({ }) are ATTRIBUTES, or CHARACTERISTICS, of that section.
  3. How those attributes work: what the left-side of the colon (:) means, and what options can be used for the right-side of the colon. For example: text-indent: 5px; means that the first line of each paragraph will be indented on the left side by 5 pixels.
  4. Punctuation! Each attribute line must end with a semi-colon (;) and have a colon in the middle. Each section must be delineated by fancy brackets: { } . Also watch out for extra spaces.
  5. How to integrate the CSS you now understand with HTML, which is just a matter of using the right identifier (i.e., the <p> above) for the right section in HTML and having a stylesheet (a file saved as .css) defined in the <HEAD> section of your HTML.

Sample Code Explained:

The sample code modifies a paragraph <p> in HTML. The first line of this paragraph is indented on the left by 5 pixels (text-indent: 5px;). This paragraph has a thin black border around it (border: 1px solid black;). This paragraph can have other sections on either side of it (clear: none;). This paragraph is floated to the left (float: left), which means that whatever section to the right of it will wrap-around this paragraph. This paragraph is indented outside the border by 2 pixels in every direction (top, right, bottom, left) (margin: 2px;). This paragraph is indented inside the border by 5 pixels in every direction (padding: 5px;).


Once you’ve learned these five steps, you’ll understand how basic CSS works and why particular CSS displays the way it does.