I thought I’d make Friday Focus post titles a bit more descriptive from now on. The theme for this week, however, is a tricky one. It’s not about a common design element for the featured sites. I want to talk about techniques and choices made by the designers that can make or break things. These designs are almost there, but they need that one final tweak. I’m curious to find out if you agree or disagree with me.

Designs of the Week

What a delightful site to look at! I love that the colors alternate for each datestamp, and that the black-and-white cartoony illustrations don’t look dull but absolutely cute. I have just two nits to pick.

First, I’m concerned that the header is a little heavy on animations. It’s a bit distracting after the second or third round. The upside is you can scroll down and it disappears from view.

Second, the logo looks out of place, which I’m not sure how you’re supposed to fix. Do you redesign your logo just to fit this current look of your website? Should you have chosen this look at all? Because it’s such a fun site, I’d miss it if it had to go!

I like how bright and lush this design is. And the interface effect is fresh, too. But here come the buts: I would avoid using lens flares—even if the whole “Sunday morning” concept seems approriate in this case—just because they’re overused.

Second, the vertical and horizontal scrolling does not make for a good user experience. The layout seems fit for only really big resolutions. If the designer can fit the content into the vertical height of an average screen, all will be forgiven!

I really appreciate all the little design details here. It’s a very interesting layout that makes me want to stay and explore the site. It just feels like it needs more of a little something.

Maybe warmer hues, because even if there’s bright red and gold all over, the dark grays seem to dampen my mood looking at it. Maybe a bit more imagery, even though understandably you can control everything in a blog.

Social Media Weekly

Design – 50+ Cute and Adorable Monster Characters Illustration
How can monsters be so cute?

Programming – Image Rollover Borders That Do Not Change Layout
A nifty trick using the outline and negative margins for inner borders.

As I’ve been working away on WPUnlimited, I have been running into a small problem: people want to use things in ways I never intended. Of course, this is wonderful, as it gives me new ideas on the direction of which I will take the theme, but it also shows how different the mind of a programmer can be from the mind of a user.

In writing code, I have been working hard in making sure that the code I use will work effectively on nearly any environment, and as such, there are things I need to take into account, but as is usually the case, I’ve missed one or two things, which is why I am soon releasing an updated version.

A great example of something simple that was forgotten, that other plugin and theme developers would do well to remember, is that not all WordPress users upload their files to wp-content/uploads. This was a small headache for me the last few days because I had totally forgotten about the option to change where uploads go, and so made assumptions in my code.

It is something small, but important. While less than one percent of the users of WordPress would ever think about changing the location of where their uploads go, those users that did experienced an issue where they couldn’t use some of the built-in features of the theme. This lead to them feeling frustrated, and created a business experience that was less than perfect.

As people continue to build on top of WordPress and other platforms, changing the features, growing out the hooks, plugins, themes and more, it is very beneficial to find as many people as possible to test that code before you push it out live to the world. I had thought that through the testing I had people do, we had covered every basis, but everyone gets set in their ways, and can forget to check the smallest of details, especially ones that most users never use.

How do you make sure that your code will work with everything and in every way? Have your users ever tried to use a feature you created in an odd and interesting way? Please tell me your stories in the comments below.

I’ve mentioned before how much I depend on and love RSS feeds. Google Reader is one of those tabs I always have open in Firefox. And with literally hundreds of posts to look through, I’m  inevitably drawn to those that look interesting- by that, I’m not just talking about a catchy title (although that always helps!)- I mean posts that are formatted well.

The thing is, because RSS Readers are not web browsers, they strip your content down to- well, to just your content. As a subscriber to your RSS feed, I don’t get to see your fancy background or your jazzy sidebars or your 500-pixel-tall header. In RSS Readers, content is truly king. Here are some tips on formatting your next blog post:

• Headers and sub-headers are your friends. When writing a blog post, I like to think less New Yorker, more Reader’s Digest. By adding headers and sub-headers to the different parts of your post, you break up the monotony- and allow your reader to jump to another section if he/she so chooses.
• Use lists. See what I’m doing here? By formatting these tips as a list, I’m separating them from the rest of the post- so again, you don’t just see paragraphs and paragraphs of text. Because you’re expecting tips, your eyes can go straight to the list, knowing that’s where the meat of the post probably is.
• Write shorter paragraphs. You know not to be afraid of white space- and that goes for the space between paragraphs too. Yes, it’s all about breaking up those loooooong paragraphs that look boring (even though they may not be).
• Watch how you align your images. The safest way is to put your image on one line, with a nice strong break before the following text. If you must do the left or right align thing, you should be using CSS anyway.
• Publish full posts. Okay, so that doesn’t have much to do with formatting- I just had to sneak it in there. Please, please publish full posts in your RSS feeds.

Do you have any tips on formatting posts? What types of posts catch your eye in your RSS reader?

If you want to make some extra money from your site, an effective monetization method is reviewing products that help you with your web work.

Make a list of products you use in your work and see if there is an affiliate program for that product. Then, write in-depth reviews of those products. Here are some ideas to get you started.

• If you’re a web developer, you may have read some books that helped you learn how to code.
• Are you satisfied with your web hosting? If you are, check to see if your host has an affiliate program.
• If you’re a freelancer, you probably use software to help you run your business. Many web apps have an affiliate program and you can sell off-the-shelf software through Amazon.com.

SEO Tip

Don’t get too creative with your titles.  State the product and then add the word review. This will help you attract traffic from internet users searching for the product name.

So don’t use a title like Here is a Great Time Management Book. Instead, try Getting Things Done Book Review.

High Quality Traffic

Reviews may not get you a lot of traffic. However, the traffic that comes from reviews is high quality traffic.  People searching for reviews are usually more likely to buy than the average internet searcher. Search terms related to product reviews show an intent to buy whereas most other search terms are used by people only looking for information.

Compare tv american idol schedule guide with tv american idol dvd review. The person using the first keyword just wants to know when American Idol comes on TV while the person using the second keyword is thinking about buying.

This is why I like to call the phrases related to products “money keywords.”  Even if you don’t get a lot of traffic to your reviews, you’ll earn more money per visitor from that traffic than your other traffic.

How Much Traffic Can You Expect?

The success of this monetization strategy depends largely on two things: (1) how popular the product is and (2) how much authority your site has.

Reviewing a popular product should lead to more traffic. However, if a product is very popular, many people will review it so you’ll have a lot of competition on the search results pages.

This is where your site’s authority comes into play. Authority is basically how much the search engines like your site. Sites with more authority will rank higher than sites with lower authority. The main way to increase your authority is to get links from quality sites.

Over to You

What products could you review and recommend to other web workers?

Daring Fireball is perhaps one of the best known and most minimal blogs out there.

There a lot of great resources about minimalism and web design which highlight several basic principals:

• Form follows function
• Content is King
• Include only what is necessary
• More white space!
• Typography is awesome
• Use simple color palettes

I wanted make these principals more practical by identifying common design choices made by the designers of some of the best minimal blogs.

Blogs surveyed

I informally surveyed the following 15 minimalist blogs with 23 questions, which I answered by scouring each site until my eyes hurt. They are all fantastic examples of great minimalistic blog design and have been featured on many design galleries.

• Absenter
• Astheria
• Binary Bonsai
• Daring Fireball
• Hivelogic
• Inca Un Calator
• Indie Labs Blog
• Jon Tan
• Justin Blanton
• Maniacal Rage
• Maxvoltar
• Root Apex
• Shaun Inman
• Wilson Miner
• Write Hype

Here are the reoccurring items that are used, and not used, in minimalist blog design.

Main menu

Inca Un Calator is beautiful and VERY stripped down. No menu, no widgets, just content.

Most blogs have a main menu with links to home, archives, and about. Some had a contact page while others had one or two more links total.

• 86% used a site menu
• 86% have an archive page
• 73% have an about page

7 posts on the home page

While some blogs displayed upwards of 50 posts on the index page the majority of minimal blogs averaged seven.

Ditch the widgets

Widgets make it so easy to add all sorts fun stuff to your blog. Before you know it your sidebar will be filled with badges and buttons, friends, and feeds. Most widgets are clutter. In fact in the minimalist blogs that I surveyed:

• 93% did not use recent comments
• 80% did not use recent posts
• 80% did not use related posts
• 86% did not use a tag cloud

Skellie has a great guide to uncluttering your sidebar.

Avatars, trackbacks, and bookmarks

There a few items that popped up that were barely used at all among minimalist blogs. I mention them because they did come up occasionally. Here is the general rule of thumb for minimizing clutter:

• No Avatars on comments
• No trackbacks
• No Social Bokmarks

The “it depends”

Write Hype strikes the perfect balance between content and design. Where's the logo?

There were a lot of items that turned about to be borderline. These are the “it depends” items. In other words, it depends on your overall goals. Consider function first when approaching these items:

• Comment counts: If you don’t have comments you don’t need comment counts. On the other hand, a comment count can be a useful indicator.
• Sidebars: Only 60% of the blogs surveyed used them. Do you absolutely need a sidebar? Why?
• RSS Links: The holy RSS button turns out to be a little less popular in minimalist blogs than you would think. Since browsers detect RSS Feeds automatically, a link might be redundant.
• Contact Page: A contact page usually contains a form. In some cases you may be able to get rid of the form and just go with an email address. Many bloggers choose this approach, simply including it in the about page.
• Profile Links: If you’re trying to cut some fat, you might be able to get rid of all those profile links like Twitter and Delicious. Alternatively you could move them off to a page or blog of their own. Tumblr does this well.
• Next/Previous links: The next and previous links are commonly displayed on permalink pages. I question whether these are actually useful and would love to see a heat map from a popular blog to prove conclusively whether to keep them.
• Search: A surprising amount of people did not include a search form anywhere on their site. This is strongly discouraged by usability experts.
• Post summaries: It may be useful to excerpt posts on your index page. This can help to reduce the amount of space that is used.

Everything else

If I didn’t mention it, don’t add it. Err on the side of simplicity by avoiding any extraneous elements. In general you must approach your blog with an understanding of why it exists. If you can answer that question then your design should follow naturally.

It’s flexible layouts on this week’s Friday Focus. I’ll be loose with the definition though, since 100% fluid width layouts are so hard to come by!

Designs of the Week

This is just a well-put together site. From the type to the colors to the images to the layout, everything feels like it’s in the right place. If it were a book or magazine, you’d be curled up with this for hours—even if you don’t understand Spanish!

If you hover on their logo at the top left, several objects morph and the table becomes a slacker’s desk. It’s little details like these that help make your site and consequently your company more memorable to the audience. I want more!

I always love a clean, type-focused design, and here’s one of them. Again, this site reads like a good book—easy on the eyes and laid out nicely. I like the black hands as arrows and of course, the sign up form, which will definitely go down in history as one of the most finely crafted ever.

Social Media Weekly

Design – Paper + Color + Concept = 40+ Creative & Inspirational Piece of Art
Beautiful graphic design and use of paper.

Programming – Fluid Grids
Learn how to create fluid layouts with grids in mind.

As I continue to pour through WordPress themes in developing my own, I find it interesting to see how people tackle challenges. Even though we are all using the same languages to develop the themes, there are a million different ways that people come to the same answer.

This then brings up coding practices, and how one method of coding is better than another.

Most people seem to have developed almost a fingerprint in the way that they code, and even if it isn’t the best for optimization and the lightest on the server, they’ll still stand by their code because their method allows them to produce massive amounts of usable code that might take a perfectionist in optimization upwards of ten times longer.

Of course there are various standards, speed tests, and other information out there on writing the perfect code, but is it better to focus on producing shippable code fast rather than perfect code slow?

Even without taking personal coding speeds into consideration, coders seem split on how to do simple things in WordPress themes, like are you the type that echo’s out HTML or do you exit PHP before doing HTML? .

For as long as there have been coding languages, there have been various practices. In my experiences with Code Igniter, I found it hard to break from the way I coded things before and work within the constraints of the model, view, controller way of developing applications.

It seems like once you’ve learned how to code, changing can be as difficult as breaking deep set habits.

But coders have to remember that things change, new ways of doing things are found, and as developers we have to evolve, change, and adapt to the language we program in, making sure to create the best code we can for ourselves, our clients, and our companies.

So my original question still exists. What makes good code? Is it keeping up with the standards of the language? Is it fulfilling the needs of the client? Or is it something else?

How do you make sure that you write good code? Do applications keep you in check, other coders, or are you always reading the latest web development books and websites? Let me know in the comments below.

One of the fundamentals of SEO is keyword research.  Keyword tools are used by search experts to find keywords to target.  Two of the more popular tools are Google AdWords: Keyword Tool and SEO Book Keyword Suggestion Tool.  These type of tools are useful because they tell webmasters how often a keyword is searched.  However, they don’t tell you which keywords are sending traffic to a given site.

If you could figure out the traffic-generating keywords of the sites in your niche, wouldn’t that be helpful?

Fortunately, there is a new keyword tool called SEMRush.  SEMRush allows you to find the top keywords that are sending traffic to any domain and even specific URLs.  More specifically, it searches through a large database of popular keywords and keeps track of the sites that rank in the top 20 results of Google for those keywords.  So, whenever you search for a site on SEMRush, it shows you the popular keywords that site ranks for in the top 20 Google results.

The tool costs $25/month but you can export the keyword lists to xls (Excel) and csv.  So, you can use it for one month and just export the keyword lists of many sites.  All this data should give you enough keywords to target for the next couple of months.

There is a free account but it only shows you 10 keywords and you can only used the tool 10 times an hour.

If you have a newer site or your site doesn’t have a lot of links, I would go after long-tail keyword phrases.  These phrases have 3 or more words.  These search terms have less competition since less sites are optimizing for them as opposed to shorter phrases.

One tactic is to find sites with similar stats as your site.  For example, you could find sites with similar PageRank, Alexa, Compete, or Quantcast scores.  Then, research those sites on SEMRush and you’ll have yourself a great keyword list.

If you haven’t checked out the PHP + Javascript Start Page head over to the extras page and give it a try. It’ll take you 5 minutes to get it running on your server.

Introduction

Sometimes I will get to looking around the web for a script to do this or that. Inevitably I will come up short-handed and decide to code my own solution. The PHP + Javascript Start Page was one such project.

The impetus

All I wanted was a page that I could add and remove links to sites that I visit frequently. I wanted to be able to open the mobile version of my webmail in-page and I wanted it to look good.

It ended up being an experiment in Object Oriented PHP and the Text DB API which provides a file-based database. I ended up with a pretty usable app, so I thought I’d share the wealth.

If you want to skip the technicalities, just go download it and have some fun. No programming required. If you want to see how it works, stick around.

Design Pattern

I used the Model-view-controller design pattern in the Start Page which started by defining three main classes:

• PageController.class.php
• BLL.class.php
• DAL.class.php

While it may be obvious that the PageController class acts as a controller intercepting events triggered by the user, it may not be obvious what the other two classes are for. The BLL or Business Logic Layer acts as the view. It translates data into a usable form which is made available through the controller.

The DAL or Data Access Layer is the equivalent of a model. It handles all the data interactions, basic CRUD (create, read, update, and delete).

Each of the classes uses a Link object, defined in the LinkObject class. A link object is an ID, title, and URL. That’s it.

There is also utility class which has a single function for retrieving parameters from the querystring.

Text Database

It annoys me a little when I have to setup a database in MySql to try out some piddly little application. For my own projects (which are typically piddly little applications) I have started to use the PHP Text DB Api. It is a great API used for managing a super-lightweight file based database.

Creating a database is as easy as creating a folder. And you can create a table by typing a couple of lines in a text file. Here is the only table used for the Start Page:

id#link#title
inc#str#str
##

Looks a little cryptic but it’s really quite simple. The first line defines the names of each column separated by a pound sign. The next line defines the data type. inc is an auto incrementing data type. The final two pound signs mark the start of the data. Pretty straight forward.

Of course you could just fire the executeQuery() method in a PHP file with a simple CREATE TABLE statement. Yep. The Text DB API uses a subset of the T-SQL syntax. Very cool and simple.

So that’s the architecture and the database. The last part is the Javascript.

Lightwindowboxthing

I thought it would be cool to use one of those Javascript light boxes to display pages. Prototype JS was in a nearby folder so I just decided to go with it. I use both jQuery and Prototype on a regular basis and I don’t really care either way.

After a bit of poking around I found the Lightwindow plugin. It was really easy to add, used data that already existed (e.g. hrefs and classes), and worked the first time. That’s what I expect out of a Javascript library.

How it works together

1. When a user requests the Start Page the Page Controller gets instantiated.
2. Because it doesn’t have a cmd parameter it will fire the display method in the BLL class by default.
3. The display method gets all of the links from the DAL and formats them with the proper Lightwindow classes.
4. The formatted links are made available in a variable which is then used to display the data on the page.

The only code on the page is to include the PageController class, instantiate it, and echo any errors and HTML to the page.

A similar process is followed when the user adds and deletes a link. The difference is that this time a cmd parameter would be passed to the controller. The data would then be validated and processed accordingly.

Conclusion

The use of a text database makes it easy to get running on a shared host without the trouble of setting up a MySql database. By using the MVC design pattern and Object Oriented PHP I was able to create a rather robust little Start Page that is ripe for all sorts of creative additions. It is easy to envision support for notes, widgets, categories, multiple layouts, in-place editing, ordering and more.