Feature
Post

Category
Design Focus

Friday Focus 01/30/09: Collages and Scrapbooks

Let’s have some collage and scrapbook style web designs for this week. It’s like the lighter, less angsty grunge!

Designs of the Week

sIFRvault website screenshot

Rarely do font and gallery-type sites get a highly stylized treatment, so this one’s a breath of fresh air. Even the login form is nicely decorated, although the field sizes could have been made bigger.

feelfit website screenshot

Excellent use of javascript to animate the images and text—why bother with Flash? And the overall look is clean and light, which is what a fitness program is supposed to make you feel.

Woman to Woman Gynecology website screenshot

Beautiful typography, imagery, and colors. I like that the blurb has atypical rounded corners that break away from the boxy articles below it.

Social Media Weekly

DesignJanuary UX Roundup
UX Booth’s monthly roundup on user experience design and usability.

Design12 resources for getting a jump on HTML 5
Get up to speed on the next version of HTML.

Programming20 Useful Resources for Learning about CSS3
If there’s HTML5, then there’s CSS3!

Feature
Post

Category
Strategy

The Types of Content in Web Design and Development That Send Traffic

I’m not a web designer or developer. But as a blogger and a marketer in a wide variety of niches, I’m always on the lookout for the types of content that do well in a given industry.

I was curious as to what types of content get a lot of traffic in the web design and development niches. So, I looked at popular social media sites that have a design and development section. I researched social media sites that cater to web designers and developers. And I checked out popular web design and development blogs to see what they were linking to. Here’s what I found.

For both web design and development, tutorials and lists make up a big part of the high traffic content. One smart author even combined the two. He published 10 Seriously Useful Photoshop Tutorials and got a lot of traffic.

It makes sense that tutorials are popular since web design and development are both “how to” niches. Web designers and developers are looking to learn new things and tutorials are great learning resources. The key to making a quality tutorial is to be detailed. Make sure each step in your tutorial is covered well and include screenshots so that the reader knows exactly what you’re doing.

Surprisingly, I didn’t see any video tutorials except this one. That could be because many people are not creating them. I think they could be popular as the video I linked to did pretty well. If you have some screencast experience, try creating a screencast tutorial and see where it goes. You may start a trend.

Lists do well in any industry but for some reason, web designers really like lists. Whether it’s 22 cool fonts, 46 sites to inspire you in the hand drawing style, or 50 Creative 404 Pages, web designers find lists useful, inspiring, and/or entertaining.

For web developers, cheatsheets or reference guides seem to be popular. If you’ve created one or found one that’s been useful for you, you should write about it. They help beginners and even more experienced web workers.

Finally, cool web apps get a lot of traffic. If you’ve created one or know about one, let the world know. If you can give an in-depth review of the web app, that’s even better.

Much of marketing and promotion today is heavily based on content, so if you’re not publishing any of the above types of content, you’re missing out on a lot of traffic.

Over to You

What types of content has sent you a lot of traffic?

What types of content do you like to read?

Feature
Post

Category
Code

CodeIgniter: PHP Development Fun – Part 1

ci_logo_flameLast night, I had an idea for what I think could be an interesting project, and I was left with a choice: hire someone to build it, or do it myself?

I am not the best developer in the world. My PHP skills are not ninja like in the least, but I have been craving a reason to get back into developing a few of my own things again, as development skills are almost always in demand.

I decided that I would give it a go, and instantly started thinking about all of the files I would need to write. The project files ballooned in my mind, and I felt a little dizzy. I didn’t have time to write a million different lines of code on twenty or thirty files. It was just too much, and while for most programmers, this might have been an easy task, for me, I felt overwhelmed.

It made me a little envious of people that use Ruby on Rails. I had seen the demo videos numerous times where they went and created and felt envy. It just seemed like so much to take in though. I didn’t have time to learn another programming language.

Then I found out about the many different PHP framework systems that are out in the marketplace today, and read that CodeIgniter is the most forgiving. I had to at least give it a chance.

I looked over the installation information for CodeIgniter. It was basically a series of PHP files that are already written for you, and allowed you to easily take advantage of them. They, like other frameworks out today use the model, view, controller system of development, which is new to me, but not too difficult to pick up.

Installing CodeIgniter was as easy as uploading and changing two files. The first file, config.php was just making sure that CodeIgniter understood what domain it was on. I had to change the base_url. And then, because I knew I would want to use a database, I edited database.php with my database information.

After that, I watched the two instructional videos on the CodeIgniter website, and used information within to extract what I needed to do to get the start of my project running.

Within forty minutes, I had already done what would have taken me around a week on and off of PHP development on my own. I still have a long way to go before my project is complete, but CodeIgniter was able to help me get where I am, much faster. Will it continue to save me time, as I continue forward? I am not sure, as I will have to learn more about what CodeIgniter includes, and how to make use of it efficiently, and this learning curve might remove any real time advantage that CodeIgniter implies in using it.

Thankfully, there is a pretty active, and helpful community of users that can hopefully reduce my learning curve, and help me jump over any hurdles. They were already helpful in getting around errors in the demonstration videos due to depreciated information held within.

As I progress in the project, I hope to put up code samples, things I have learned, as well as show the project once it is complete.

Feature
Post

Category
Design

Web Design with Moleskine

I’m one of those designers that likes to sketch out new website layouts with pen and paper. Nothing fancy- I don’t haul out the acrylic paints or anything. My sketches are usually just a bunch of boxes and lines with arrows pointing out different sections of a layout. When I first started, I did these sketches on nearly anything that was handy- the back of a flyer, an empty space in a newspaper page, and yes, the ubiquitous paper napkin. After awhile, and too many lost sketches,I got wise and bought a tabbed notebook (okay, so it was a Five Subject Notebook). Several years later (I started web design in ’95, when I was very young), someone gave me my first Moleskine… and the rest- well, you know the rest. Au ‘voir, Mead- hello, Moleskine. More →

Feature
Post

Category
Publishing

10 WordPress Plugins You’ll Love

WordPress is becoming increasingly popular with each passing day and new release. Perhaps even more popular than WordPress itself, are the plugins you can use to customize your WordPress platform installed on your domain. For more information on WordPress, check out Thord Daniel Hedengren’s article on Things to Consider before using WordPress as a CMS.

There are literally thousands of WordPress plugins available for use on your blog or WordPress hosted site. Not all plugins will work with each release of WordPress, and these plugins are usually not endorsed by WordPress because anyone with programming knowledge can create them. With this in mind, let us take a look at the top 10 WordPress plugins for site productivity.

Photo from http://www.wpwp.org/

Photo from http://www.wpwp.org/

Wassup

This is a new plugin compatible with WordPress versions 2.2 and above. Installing this plugin will provide you with real-time visitor statistics to help you determine how well your site is doing. There is a customizable sidebar widget for you to show your statistics to your viewers. It aims not to provide daily, weekly, or monthly summary stats as some other analytics plug-ins do, but to show you live actions of your visitors as they on the site, while still providing you with information on keywords, hostname, and other stats like other programs. Use it in conjunction with an anti-spam plugin for an even greater edge, or use it as a standalone.

Keyword Luv

In order for your blog comments to work to your full advantage in terms of search engine ranking gains, the anchor text associated with the link to your website should be keywords you want to rank for, right? We can thank spammers for creating the no-follow fiasco—and the fact is, many blog owners will spam a comment which uses keywords as the name of the person leaving the comment. The Keyword Luv plug-in will help fellow commentators by allowing them to place both their name and keyword anchor text on the link—ensuring a fight against spam while saying thanks for commenting. To use the plug-in effectively, your blog should also have the nofollow code removed in order for this plugin to function correctly. You can try the NoFollow Free plug-in to ensure it works. Download the file, unzip to the /wp-content/plugins directory of your site, and manage your plug-ins from your dashboard. When a user comments on your blog all they need to do is enter their name like this: name@keywordphrase. The result will translate to this: John from ABC123 says “Great site!” Where ABC123 would be the link to his site—the keyword phrase he chose.

Comment Luv

Help out fellow commenters by using this plug-in to fetch the most recent blog post from their blog. It will display at the bottom of their comment, and encourage participation in comment campaigns as it will help earn traffic all around. As with its aforementioned counterpart, CommentLuv works with Do-Follow blogs. This plugin works with WP versions 2.5 or higher, and is compatible up to the current WP version 2.6.2.

Image from:http://lirent.net

Image from:http://lirent.net

All-in-One SEO Pack

Need some extra help making sure your content is search engine friendly? There are several SEO plug-ins available for use with WordPress, but this one is great because it lets you customize the important fields just a bit more to push your optimization efforts a little higher. It allows you to change the meta title to include more keywords while still leaving your post title as you wish, make use of a post excerpt rather than posted on information in the meta description that displays with your link on a search engine result page, generate keywords from your categories, and combats duplicate content with a “no-index” feature. Download and install the plugin on your host, and use the dashboard to activate and use the features. This plugin works with versions 1.5 and higher, with compatibility to 2.6.2.

WP DB Backup

To ensure your site stays up and running in the event of computer meltdown, this plugin automatically backs up the database where your posts and other data are stored for archival and restoration purposes. This plugin works with versions 2.0.3 and higher. Customize your settings and data backup frequencies from within the plugin management dashboard.

WP e-Commerce

Need to sell products within your WordPress hosted site or blog? This simplifies the entire process for admin and consumer, from catalog to shopping cart and payment processing. This plugin requires at least version 2.0.2. Simply download and install the plug-in to the appropriate directory and activate from within the dashboard, where customization also takes place.

ShareThis

Social bookmarking is a major component of web traffic, so why not give your readers motivation to submit your entries to various sites? The likelihood of submissions will increase if the ability is there in front of the user, as opposed to hoping that he or she will take the time to manually do it. This plugin allows users to submit the post via AIM, MySpace, Facebook, and various others. To use ShareThis, start by customizing the look of your widget and register for tracking purposes. This can be used with version 1.5 or higher, but is only compatible up to 2.6.

WordPress Related Posts

Want a way to link other relevant posts to your new ones without having to find them do it manually for each post? The WordPress Related Posts plug-in is what you are looking for. By monitoring the tags you use for each post, the plug-in pulls data from the MySQL database where your posts are stored, and then displays the appropriate list of related posts on your page. To use this plugin, download the file, unzip it to the /wp-content/plugins directory, and then place the following command in your template code: <?php wp_related_posts(); ?> To change the output of the plug-in, click Manage > Option > WordPress Related Posts. This plug-in requires at least WordPress version 2.3, and is compatible up to 2.6.2. Newer versions of WordPress have a separate plugin management area in the upper right of the dashboard.

Podcasting

Simplify the delivery of your podcasts with the Podcasting plug-in. Download and install the plug-in, and begin recording podcasts—making RSS feeds a breeze, with multiple feed support and multiple podcast support. Embed a player in any post to encourage your readers to listen, and edit your episodes with ease. This plug-in works on WordPress versions 2.5 and higher.

Twitter Tools

Twitter is an excellent way to notify followers of new blog posts, but it is easy to forget to post the tweet. This is where Twitter Tools comes to the rescue, fully integrating your blog and twitter account so as to automatically post a tweet to notify followers of a new blog post as soon as it publishes. This plugin may be used with WordPress 2.3 or higher.

This list represents only a small portion of the total amount of WordPress plugins out there available for your use. With this list, we have covered social networking, analytics, podcasting, SEO, site backup, e-commerce, and enhancement of user experience. Factoring in all of these things to your WordPress site will help you in the long run.

Feature
Post

Category
Design Focus

Friday Focus 01/23/09: Illustrated Mountains

Let’s take a look at websites that all use illustrated mountains (or are those hills?) in their designs. See how the sloping sceneries change with each purpose and mood. Welcome to this week’s Friday Focus!

Designs of the Week

Go Glamping website screenshot

Go Glamping is a much more specific website as it is about luxury or “glamorous camping”. It therefore makes sense to see the use of mountains in the header. But what’s even better is that the illustration is very stylized: see how the camping tents look like arrows. And the site logo uses an elegant script font. It gives you a very trendy and almost elite feel.

RedBrick Health website screenshot

Here’s a more subdued version of a mountain scene. Since the illustration covers a lot more real estate than just a header would, it was a very wise idea to lessen the elements in the scene. Just a few trees, bird, and a sailboat in the distance. And instead of a bright red or orange for contrast, we see a cheerful shade of pink on the icons, buttons, and the logo.

Nine Lion Design website screenshot

The mountains on this Nine Lion Design are fiery, colorful, abstract…and even translucent on the wooden background texture. And since this time we’re looking at a dark design, the effect is brooding and artistic.

Social Media Weekly

Since Barack Obama was sworn into office this week, let’s look at some presidential links.

DesignNewspapers Covering Obama’s Inauguration
Headlines, typography, photography, layout, grids—take notes.

Programmingwhitehouse.gov Website Code
Moments after the Obama inauguration, the new White House website was put up. This post goes behind the scenes into its structure and components.

Feature
Post

Category
Strategy

Different SEO Focus for Different Sites

If you try to use all the available SEO strategies, you wouldn’t have time for anything else in the day. With the growing complexity of the search engine algorithms, SEO has become a wide range of activities including link building, linkbaiting, social media, and onpage optimization. Today, it’s not enough to just pick the right keywords and optimize your meta tags.

PeterD over at SEO Book has an excellent post about using different SEO strategies for different sites. In his article, he contends that certain SEO strategies are more effective depending on the site. This principle is great for webmasters that don’t have time to do (or learn) all the SEO activities on a consistent basis.

First, he talks about the importance of setting goals. Your goals will play a big part in determining the best strategies for your site. For example, if you want to rank for a specific keyword, your best bet is to build links to a page that’s optimized for that keyword. If you want to increase your search traffic by 20%, then you should probably do keyword research to see if you’re actually targeting traffic generating keywords.

Next, he talks about the difference between SEO for new sites and established sites. This is very important, because these two types of sites are viewed very differently by the search engine bots. He advises on focusing on link building for new sites. It’s hard to rank for much of anything until you get a good number of quality links. On the other hand, established sites already have the links. Therefore, for established sites, PeterD says to focus more on the onpage factors like internal linking and content creation.

Finally, he gives his top five SEO activities:

  1. Produce remarkable, attention grabbing content
  2. Crawlability
  3. Build links
  4. Title tag
  5. On-page content

Check out his post for more information. It includes many useful links so make sure to click through to them.

Feature
Post

Category
Design

A Searchable Site

That most people will probably find your website through a search engine is a given; but how quickly will they leave if they don’t find what they came for in the first place? More →

Feature
Post

Category
Webapps

Web Designers and Web Analytics

Web Designers generally do not consider analytics as something they should know about, because the internet marketer should be taking care of those aspects of the website. However, web designers who know about and consider web analytics when they design a website tend to do better. Today, we will discuss the importance of web designers knowing about web analytics, along with three different programs used for analytics.

A major portion of what affects visitors to a website, and thus the analytics, is the user interface developed for a website. When a web designer knows about the analytics software being used with the program, or analytics in general, a web designer has a glimpse into what is being tracked by the program and ways they can improve the site design and layout to influence higher analytics. For instance, many analytics programs track how long the user stays on a particular page, and how many pages each user visits before leaving the site. By being aware of this, designers can make changes to the structure of the website to influence people to stay on the site longer and peruse the the site to take a look around.

It is very important for the web designer to know the audience he or she is designing for, and knowing about analytics to watch the trends of the users, gives the web designer another tool and insight into the users’ mind.

Here are three different analytics programs to help web designers in their quest for more knowledge about the users they are designing for.

Copyright Google

Copyright Google

Google Analytics: A free web analytics program designed to integrate with AdWords. For more on Google Analytics, check out the Google Analytics blog, or Bright Hub’s detailed series on all of the Google Analytics reports. Google Analytics will help you track several different aspects of the web traffic to your site, your AdWords campaigns, online and offline advertising campaigns and will help your track how well your content is doing.

Piwik Screen

Piwik Screen

Piwik:This is an open source alternative to Google Analytics. As it is open source it is free to users, and it is also available for developers to work on and improve. The drawback to an open source option is support and documentation may not be available or as thorough as the commerical analytics options. With many of the same features as Google Analytics, it is a good open source option.

Yahoo! Web Analytics Copyright Yahoo!, inc.

Yahoo! Web Analytics Copyright Yahoo!, inc.

Yahoo! Analytics: A major competitor to Google Analytics, Yahoo’s analytics program offers free web analytics for any website. One of the major differences between Yahoo Analytics and other analytics programs is the data is presented within minutes after it is collected, rather than over the next 24 to 48 hours. This gives designers and internet marketters a slight advantage in being able to see trends earlier, because they can react to the design earlier to stop a bad trend in analytics from continuing any longer than it has to. It also allows users to see how well new ads are doing so as to quickly be able to adjust ads and budgeting. The raw data provided by Yahoo! Analytics allows users to create custom reports to better serve the website purpose and target audience. Google and Yahoo! Analytics do a good job of competing with each other, as the Yahoo! program is slightly behind Google.

Regardless of the analytics program used, very important data is tracked and monitored. Knowing about this data makes web designers aware of what needs to be done to a website to make it better for the audience.

Feature
Post

Category
Design Focus

Friday Focus 01/16/09: Old Eras

Say the word “vintage” and different images come to mind. This week’s Friday Focus shows how the old-era look can differ from one website to another. Which decades are these designs inspired by?

Designs of the Week

Blossom Graphic and Web Design

This designer has a specific aesthetic and clientele, and that point gets across right off the bat. Just lovely details all around.

Online Portfolio of Orlando Web Designer Todd Adams | 61Pixels.com

I love the dark mood this site instantly puts you in. And the details, once again, are stunning. No pixel out of place.

iPhone Development Bits

Great concept: new technology (the iPhone) meets old-world graphical details. Very steampunk and Leonardo Da Vinci-esque. The red ribbon on the right is a good idea to present a sidebar and add interest with color.

Web Designer Michela Chiucini - creazione siti web Viareggio

Another vintage look filled to the brim with nostalgia. I love how the portfolio images blend in with the whole design.

Social Media Weekly

Design8 Free Design Platforms To Build Your Own Site
8 site builders reviewed.

ProgrammingStructured process you must know to develop a web application
It’s not all about code.

Feature
Post

Category
Design

ColorlabsProject Design Contest – Win $3500!

Designing a dream WordPress theme? Anyway, what do you believe in designs? We believe that great designs are designs that speak and function. They were developed through insightful inspirations and born to convey an important message to the viewers. Although designs are always eye-candies, we do believe that awesomeness lies beyond.

Talking about WordPress, what do you think an awesome high quality WordPress themes should look like? Should they have vivid colors? Clear typography? Great content readability? Or perhaps something that conventional graphic design theories forget?

Well, we guess this is your time to decide. Express your insights by designing a theme concept for us. Show yourself off, gain some recognition, and not to mention, there is a total prize of US$ 3500 available for you, talented designers.

How to participate in the contest?

To participate in the contest, you must submit a theme concept to ColorLabs Project. It’s not a theme, it’s just a concept. Here are some technical requirements of the concept:

The theme concept is intended for WordPress. That’s rule number one. But the great news is: there is a broad possibility of amazing stuffs we can create with WordPress. We believe that there are numerous ways to present a theme concept, but to participate in the contest, your theme concept must be created in PhotoShop format.

The theme concept must cater the 1024 X 768 user’s screen. Therefore, considering the margin and borders, the maximum width of the design is 980 pixels.

To participate in the contest, you need to publish a blog post and tell a bit of your story about the contest. You should also give a linkback to this post.

Designs must be submitted in JPG or PNG format to contest [at] colorlabsproject [dot] com. You also have to tell us the background story of the concept: what inspired you, how you designed, what the design is all about. Designs are not only about shapes, colors, or patterns. They should have insightful story that complete the whole as one. In the story, please also mention your full name and any URL you would like to be linked to if you win.

If you use any stock/source images in the designs, please submit them as well and mention the URLs in the story above. Please make sure that those images have extended usage licenses that allow the distribution of the design.

Designs must be submitted before 14th February 2009, midnight (GMT+7).
The competition is divided into two phases:

Qualification Round: January 10 – February 14, 2009.
In this round, participants are only required to submit the front-page of the theme concept in PNG/JPG format. In the end, there will be 12 theme concepts that will be selected to compete in the final round.

Final Round: February 14, 2009 – February 21, 2009.
In this round, finalists are required to submit the inner pages of the theme concept along with the source files (PSD files). Source files will be assessed to determine the core quality of the design.

The contest is divided into 3 (three) categories:

Category A: General Blog/Lifestream and Photo/Videoblog
Theme concepts participating in this category should include general elements for standard personal/lifestream blogs or photo/videoblogs.

Category B: Business Blog/Portfolio
Designs competing in this category should include several basic elements of business/portfolio blogs. They should be able to market products/services or function as a showcase site.

Category C: Newspaper/Magazine
Theme concepts participating in this category should include main elements of an online newspaper/magazine, particularly: headline, featured posts, multiple post listings, and ad spots.
The winner from each category will receive US$ 1000 and additional US$ 500 will be awarded to the best of the three. So it’ll be US$ 1500 for the best of the best and US$ 1000 each for the rest two winners. All winners will be interviewed and featured in ColorLabsProject. One contestant may submit more than one design and he/she may win more than one category as well.

Designs are assessed by a special team from ColorLabs Project. Three main factors that we will put into considerations are (1) the background story of the concept, (2) how well the theme concept presents the site’s content to the viewer, and (3) how far it transforms WordPress into something stunning yet well-functioning as a website.

We will then make the winning theme concepts available as official ColorLabs Project themes and we will credit the contestant for the design.

Terms and Conditions

One contestant may submit more than one theme concept, he/she is also able to win more than one category.

Theme concept has to be completely new, never been published anywhere, and never been used to compete in similar contests.

Theme concept must be originally developed by you and it must be entirely your own work. If it contains any stock images, it must be certified that they have an extended usage.

You understand that by participating in this contest, your theme concept is possibly used by ColorLabs Project and may be made available for purchase on our site. Winners will be awarded a cash prize for their work. Any other theme concept will only be made available for purchase after a once-off fee agreed by both parties. Sales generated off the theme will be kept by the company.

So, are you in?? Submit your theme concepts now!

Feature
Post

Category
Code

Object-Oriented Programming in Flash

Object-oriented programming (OOP) is generally the best way to code in most languages. It helps by grouping together similar code and by having the ability to reuse the code. This tutorial will be based in Flash CS3, using ActionScript 3.

First off, AS3 requires that you use the package { } code structure and the class { } code structure within it. An example would be this:

package <package_name>
{
    class <class_name>
    {
    }
}

You may only have one class per package structure. If your application will use more than one class with the same package name, create another file for that class. When you want to include other classes, such as Flash frameworks, your own classes, or predefined classes and functions from Adobe, it is possible by doing this within the package, outside of the class, using the import keyword like the following:

package <package_name>
{
    import flash.display.Sprite;
    class <class_name>
    {
    }
}

If you know what functions are, then you are in luck. Classes are composed of a group of functions, called methods when within the class. To use a class, you need to instantiate, or create a new instance of, it. Instantiation has a general format:

var my_var:<class_name> = new <class_name>();

Like in “normal” (pragmatic) flash programming, var is required to create a new variable. The text after the ‘:’ is called the variable’s data type. If the data type of a variable is a string, then the variable would be created by doing:

var my_var:String = 'text';

The ‘new’ text is necessary, for it creates a new instance of the class, or else it might as well be a method or function you are calling. An example to instantiate would be like so:

var today:Date = new Date()

Methods are just like functions in which you have the same function structure, like so:

function <func_name> (<parameter>:<data_type>):<return_type>
{
}

Additionally, methods and variables can have other keywords prefixed to them such as public, protected, and private, called access modifiers.

public means that anyone (users, extenders, and itself) can use it.
protected means only extenders and itself can use it.
private means only the class itself can use it.

Well, you may have been confused by when I said “extenders” above. If you have a class that you like and want to add other methods to it without duplicating the class, you can extend the class with your own:

class mySprite extends Sprite
{
}

In the end you may find yourself with a file like this:

package my_classes
{
    import flash.display.Sprite;
    import flash.text.TextField;

    class my_first_class extends Sprite;
    {
        public var my_str:String = "My First Class";
        protected var something:Int = 4;

        public function my_first_class()
        {
            var tf:TextField = new TextField();
            tf.text = my_str;
            addChild(tf);
        }
    }
}

I hope you liked this post and that it helps you some way in the future.