Category: Mobile Design

Partnership with Wild Critter Media

Moonlight Designs Studio is proud to announce the partnership between Moonlight Designs Studio and Wild Critter Media.  Like us Wild Critter Media provides the best solutions for their clients. We are excited to form this partnership as we have been working together for the past few months now testing out the waters.  What makes it easy is that we have the same goals/ideas for our clients.  We look forward to building a life long partnership and working on projects together.

If you would like us to provide you a quote on your project please contact us!

Cascading Style Sheets

In the past, I haven’t done a lot of CSS work; my interests lie more in the areas of SEO and content. We needed a WordPress programmer, though, and before I could start programming WordPress themes, I needed to brush up on my CSS and PHP. Fortunately, I had a decent book sitting around: O’Reilly’s CSS: The Missing Manual. After a few hours reading the book and playing with the CSS in some WordPress themes, it all makes sense; my only hesitation in recommending the book comes from the fact that, because it was released last year, it contains less than a hundred pages on CSS3.

I’ve probably mentioned this before, but if you’re not familiar with what Cascading Style Sheets can do, you need to run, not walk, over to the css Zen Garden and play with it a bit. Good programming practice for the web these days, and what HTML5 is built on, is the separation of style from content. HTML5 holds the content; CSS should be used to indicate to the browser how to display it. What’s really nice about this is that by using an external style sheet for your website, if you decide to change the look and feel of the site you can immediately alter every page (drastically, if desired) simply by editing one file.

CSS is really pretty simple. Suppose that I wanted to change how the text in each of these  posts is displayed. Let’s say that, for some reason, I wanted the text to appear in bright orange. In WordPress, the posts are contained in the following tags: <div id=”content”></div>. Thus, I would simply add the following code to my style.css file:

#content {
color: #FF7F00;
background: #FFFFFF url(‘images/background.jpg’) no-repeat;
}

So what does all that mean? The hash mark before the name of the div means that this is an ID, which is something that should appear at most once on each page; something that can appear multiple times should be a class and is indicated using a period. Everything between the brackets is CSS code that will apply to the contents of the content div; in this case, #content is called a selector because it selects this particular part of the HTML. Inside the brackets I can have any number of declarations; in this case I just have two. Each declaration is a property followed by a colon and then a value; some properties can take on multiple values. For example, here I told the browser that it should render the content area with a white background, use the file background.jpg in the images directory as a background image, and that that image should not repeat. If I later decide to use a less hideous color combination, all I have to do is edit this one file.

Aside from making my life a lot easier when I have to change something, this can also reduce the amount of space the code for a site takes up, as the formatting only has to be stored (and downloaded) once, rather than once for each page. This helps speed up the process of loading your site, which helps to keep Google and your customers happy.

Google Adsense and Smart Pricing

You may have noticed that we don’t run advertisements on this blog. The main reason for that is that we don’t think it looks professional on a business website; also, we don’t want you to click an ad and go elsewhere. We want you to stay here and hire us!

That said, we do own other websites which are monetized with adsense and make about a buck fifty per click. This brings us to another reason we wouldn’t want to put adsense on this blog: it could drag down what we’re making elsewhere! Why? The answer lies in Google’s “smart pricing” policy.

Google wants to  make sure that their advertisers are getting good value for their money, so that they’ll keep spending; this means not putting high-cost advertisements where they’ll receive low-quality traffic. Social media traffic, for example, tends to not click on ads and not buy when they do, so a blog that gets a lot of social media traffic compared to search engine traffic will get paid less per click. Similarly, Google hates Made for Adsense (MFA) sites, which have no content whatsoever, just a bunch of ads; the hope is you’ll click on one of these spam sites and immediately leave via one of the ads. Whereas a legitimate site like this one tries to provide useful information – we want you to find what you were looking for even if you don’t hire us – a spam site just wants you to click an ad and doesn’t want anything getting in the way of that, including content.

However, bad or no content isn’t the only way to get smart priced; as mentioned, the type of traffic your site receives matters as well. This site would do poorly with adsense because we discuss topics like blogging and web design. It’s not that Google dislikes these topics; it’s just that people who want to read about them generally don’t make money for the advertisers, so Google isn’t willing to pay much for that traffic.

A little bit of money is better than no money, right? The thing is, Google doesn’t smart price websites; they smart price adsense accounts. If I was to place adsense on this site and Google decided to smart price us, the pay rate on my other sites would go down as well, which means that having the advertisements here would actually be costing me money! Fortunately, if you get caught in that trap, there’s a way out: just remove the adsense code from the offending site and your remaining sites should return to normal.

WordPress and .htaccess

Having installed a number of WordPress blogs lately, one thing I frequently find myself doing after a new installation is editing the .htaccess file. What is .htaccess all about?

On an Apache server, .htaccess files allow you to make configuration changes to a directory (and its subdirectories); multiple .htaccess files can be present in your directory structure, with lower ones overriding higher rules where they conflict. They’re often used for access control, helping to keep the wrong people from poking around in your files. Today we’ll talk specifically about how they interact with WordPress.

Aside from the basic WordPress functions, I’ve mostly used the .htaccess file to force my webhost to use the correct version of PHP. My preferred host offers both PHP4 and PHP5, but defaults to PHP4; this tends to cause issues with WordPress plugins. The solution? Just add the following line to the .htaccess file in your WordPress directory (or a higher directory):

AddType x-mapp-php5 .php

This tells Apache to use PHP5 when interpreting a .php file, and all is well.  Of course, this assumes that your host actually has PHP5 installed; given that it’s been out since 2004, if your host doesn’t support it, it’s probably time to find a new host.

What else can we do with the .htaccess file? WordPress uses it to store the rewrite rules for permalinks. Be careful editing the .htaccess file that WordPress uses; if you put your code in the wrong place, it will be overwritten next time WordPress updates the file. I often prefer to simply go up a directory, where feasible.

Often the default amount of memory allocated for PHP is insufficient; you can increase it with the following line:

php_value memory_limit 64M

The above line is hopefully fairly self-explanatory;  other attributes you can set include upload_max_filesize and post_max_size, which often default to 2M each.

Host a site with a lot of photos? Find people stealing your bandwidth? Try this code:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Obviously, replace “mysite” with your own URL and “/images/nohotlink.jpg” with the image you want to display on the site that’s attempting to display your image. (Thanks to WPRecipies for this tip) You may want to host the second image on a different server to avoid the possibility that your host will get into an infinite loop.

Next time: using .htaccess to prevent spam.

Terminology for Internet Marketing

As with any technical field, online advertising has its own terminology and set of TLA (three letter acronyms). Today let’s review some of the more important ones.

CPA: Cost Per Action. In this case, you get paid (or pay someone) when the user takes a predefined action, such as signing up for a credit card.

CPC: Cost Per Click. Self explanatory. This is the model under which Google Adsense generally operates.

CPM: Cost Per Thousand (page views). M is the roman numeral for 1000.

CTR: Click-Through Rate: how often do people click on your ads?

PFP: Pay For Performance; you get paid if your advertising is successful. See also CPA/PPL/PPS.

PPC: Pay Per Click

PPL/PPS: Pay Per Lead/Sale

PV: Page View

SEO: Search Engine Optimization; this is the process of getting your website to rank highly in search engines, particularly Google. A similar term is SEM, Search Engine Marketing, which also includes paid advertising.

Website Usability, Part V: Don’t Annoy the User

It seems obvious, but many sites seem to have a problem with it: if you want your users to keep coming back, don’t annoy them! Here are a few common-sense things to avoid.

  • No unsolicited windows. If you use pop-ups on your site, half your users will be using a modern browser that blocks them, and you’ll annoy the rest. Find a better way to get attention.
  • Arrange the website logically. Don’t make the user think about how to find something; it should be obvious.
  • Provide a search; we mentioned this before, but it bears repeating. Today’s users don’t want to click around looking for things; they want to jump straight to their target.
  • Be consistent. Again, this is something we mentioned before. If your navigation bar is on the left on your homepage, it should be on the left on every other page as well. A user attempting to search should know exactly where the search box is without having to, well, search for it!
  • Don’t make the user do work that the computer can do; one particularly annoying example is when the same information must be input in several places.
  • Avoid making the user remember things. If two or more items must be compared, place them side by side.
  • Design efficient pages. Even if you expect most users to be on broadband, remember that large images still take time to load, and a bored user is a lost user!
  • Don’t make users lose their work! If a page must time out, warn the user and give him a chance to extend the timer or save his work.
  • Design webpages so that they can be printed; long, complex documents in particular are often printed for later reading. If needed, the page can use different style sheets for viewing and printing.
  • When users must wait for something to complete, give them a way to track progress; for particularly long tasks, such as large downloads, provide an estimate of how long the task will take.

Website Usability, Part IV: Arranging Page Elements

One aspect of designing an effective webpage is to make it easy for users to find what they’re looking for. Overly cluttered pages, for example, tend to confuse users.

Users anticipate where things will be; don’t surprise them! Users expect that important items (such as the navigation bar, as we discussed in part 2) will be in the same place on every page, near the top. Never put important items “below the fold”! Users should never need to scroll to find navigational items, such as search boxes.

 

Eye-tracking studies have shown that users first look at the top of a page, then at the left side, then the right side; this is why those have been popular locations for banner ads. Important information should be placed in these areas so that users are sure to see it, while less important information should be placed lower down on the page; this helps users to process it more easily.

One thing that makes scanning a webpage for information difficult is when it is too densely packed; not only do users have an easier time searching spare areas of the page, they tend to visit those areas quickly. Lesson: don’t cram important information into too small a space! On the other hand, too much whitespace wastes time by causing users to scroll unnecessarily; effectively using whitespace allows you to place plenty of information on the page without it feeling cramped.

When possible, it’s best to use a fluid page layout so as to utilize the user’s entire screen; designing for a particular screen size inevitably means the page will display improperly for most users. However, be sure that items are aligned consistently, as this makes them easier to scan.

The proper length of both the webpage and the lines displayed on that page depends on what type of content is being displayed. Longer pages are appropriate for uninterrupted reading, while homepages, navigation pages, and those that need to be browsed quickly should be shorter. Users prefer shorter line lengths, but read faster when longer line lengths are used, so the choice is a trade-off between user preference and usability.

Website Usability, Part III: Text

One website that I tend to avoid if at all possible is MySpace; too much of it seems to be pages composed with horribly clashing colors, backgrounds that don’t contrast well with the text, and other things that make them difficult (and annoying) to read. I would go so far as to call the typical MySpace page an excellent lesson in what not to do. What can we learn from them?

 

Formating your text

If you want people to to read your site (rather than hitting the back button), make it easy for them. Use 12-point (or higher) resizable text, preferably dark text on a light background. Choose one font, preferably a standard one such as Times New Roman or Arial, and stick with it. Typing in all-caps has been considered annoying since the earliest days of the Internet; use appropriate capitalization!

Be consistent

As mentioned, you should choose one font to use for the entire site; common page elements should also be consistent. Navigation bars, for example, should be in the same location on every page.

Attracting Attention

A number of elements are designed for attracting attention; use them sparingly. For example, this page uses bold headers to let the reader know what each paragraph will be about; randomly bolding words throughout the document would only lead to confusion! Animation in particular should be used sparingly;  it should convey useful information that the reader needs to know immediately, or users will simply find it annoying. Additionally, use emphasis (bold, italics, etc) only on short phrases, and never use underlines for emphasis as users are programmed to regard underlined text as links.

Remember: making it easy to quickly scan webpages for important information makes them more useful to the user; avoid using attributes that can be distracting or make the page difficult to read. Strive for simplicity in design; don’t change how information is being presented simply for the sake of variety.

Website Usability, Part II: Accessibility

By law, all websites owned by the US federal government must comply with the Section 508 Federal Accessibility Standards. For private sites, such compliance may not be legally required, but it’s still a good idea; adhering to standards ensures that all of your potential customers can utilize your site.

 

The main component in designing an accessible website is ensuring that any non-text element, be it photos, music, video, etc, has a text equivalent; this can mean adding descriptive text to a photo or subtitles to a movie.  Some of the most common disabilities include:

Hearing Loss
Ensure that any audio that is required to fully use the site has accompanying text; for example, you can add captions to a video using software like Camtasia, and provide transcripts of podcasts. In many cases, audio-to-text programs like Dragon NaturallySpeaking can do much of the work for you.

Vision Loss
Designing for vision loss often means desiging for screen readers, which has the side benefit of making your website easier for spiders as well. Ensure that alt tags contain useful information, and consider that blind users may not be able to tell if part of the screen updates without a page reload. People using screen readers may also appreciate being able to skip repetitive navigation links, rather than having to wait for the entire menu to be read out every time. Finally, ensure that all elements are accessible using the keyboard only.

Colorblindness
A significant percentage of the population has difficulty discriminating colors;  avoid using color as the only way of transmitting important information, and choose high-contrast color combinations. There are tools available that allow you to view your website as it would be seen by people with various types of colorblindness; you can also read more about optimal color choices here.

Addendum
When adding movie captions, etc, be sure that related information is synchronized; captions become annoying rather than helpful if they show up too late! CSS is a great thing for designing accessible websites, as it encourages thinking about content separately from style; be sure that it’s possible to read the page and have it make sense without loading the associated stylesheets.

Ensuring that your website is accessible can be a pain at first, but your customers will appreciate it. It’s always worth a little extra effort to have your site read by the widest possible audience!

The Google Sandbox

You may have heard people speak of the Google Sandbox as a dreadful place to be avoided. But what is it, exactly, and how can you avoid going there?

Google’s goal is to return the best possible search results. They have a number of rules for webmasters that basically boil down to: don’t screw with the search. For example, Google will penalize your site if they catch you buying or selling paid links.

Suppose you have a brand new site, just registered within the last few months, and it has thousands of links to it. What’s the most likely explanation – that this site is so incredible all these people have found out about it already, or that someone is trying to manipulate the search engine results? Google will assume the second, and they’ll put the site in the sandbox, which generally means it’s not going to show up when someone does a search for the targeted keywords. Considering Google’s share of the search market, this is a Bad Thing.

While the sandbox can be triggered automatically, Google employs people who actually go out and look at sites. If you have a new site that’s been growing so quickly that it got put in the sandbox, but not so quickly that it couldn’t just be the greatest site ever built, eventually someone from Google will come out and see if the site really does have the content the links say it has. For example, if One Ear Productions was a new site and suddenly had thousands of links talking about our awesome web design, someone might come check that the site really is talking about web design and doesn’t just have some crappy computer-generated articles and a bunch of advertisements. Google isn’t going to decide whether this really is the greatest web design company ever or whether we really are offering extremely informative articles on web design;  they just want to know that this is a legitimate site and we’re not trying to jerk them around.

Cliff notes? Publish high-quality content. Don’t buy or sell links, don’t give Google a reason to think you’re doing that, and don’t put a link to your brand new site in the footer of your 10,000 page site. Otherwise, you may find yourself sitting in the sandbox all alone..