Today Vandelay Design has a new look! Other than some minor changes, it had been over a year since the blog was re-designed and it was time to give the theme some attention. While this re-design attempted to keep a similar feel, there have been some changes worth pointing out.

For those of you who are reading this post via RSS or email, here are screenshots of the blog front page and of the website home.

One Sidebar Instead of Two

The most significant change is probably the shift from a three-column layout to two columns. The purpose of this change is to allow more space for the content, which will make it possible to include wider images within the posts.

Twitter Link

The new theme includes a link to the Vandelay Design Twitter account that was just set up. I have been using Twitter through my personal account for a while now and I thought it was time to have an account officially for Vandelay Design. If you’re interested in following, you can do so here.

Archives Page Instead of Category Links in Sidebar

The category links in the old sidebar never seemed to be used by very many visitors, so this theme now includes a link to an archives page, but the category links have been eliminated from the sidebar to save space. However, category links are available in the footer now.

Color Scheme

Some of the colors from the old design were kept and some new ones were introduced. The background is now brown as opposed to a dark red.

What Do You Think?

I’m interested to hear what readers think of the new design. Please leave a comment if you have something you would like to say. One other item to point out is that the coding of the WordPress theme was done by WPCoder (more on that in a few days). I designed the theme in Photoshop and decided to outsource the coding to save some time. The parts of the website outside of WordPress (home page, portfolio, services, etc.) were designed and coded in house.

If you notice any dead links or things not working properly, please use the contact form or leave a comment on this post. Thanks.

Looking to Hire a Designer or Developer?

Post a free job listing to the DesignM.ag job board for freelance, part-time or full-time positions. Your listing will be seen by thousands of talented designers and developers. – Post a job for free.

It’s no mystery that WordPress in many respects has taken over the blogosphere. The popularity of the Wordpress software has driven many people to use it as not just a blog, but for business sites as well. 

Did you know that you can turn your WordPress blog into a full-service website for your business or company? Maybe you’re a technology blogger and now want to expand your blog to offer web design services and software. Typically business sites include more pages than posts, so it’s simply a matter of how you organize and present content.

This Wordpress tutorial will walk you through turning your blog into a website. With a few simple steps you can create a dynamic website that is easy to maintain and update, yet still keep that “static” look user have come to expect from traditional html-drive business sites.

Right now, your blog probably looks like the following below, but just with more  posts.

Now, instead of having blog posts, you can turn your main page into a true home page. You’ll begin by going to the “pages” section of your WordPress dashboard.

Once here, you can add text, video, photos or html code to serve as what people see when they come to your home page.

Once you do this and publish it, the page will not automatically show up on your home page. To change this to your home page, you now have to go back to your Dashboard and go to “reading”, which is located under the settings tab on the left side bar.

Once there, you’ll choose to make the page of your choice into a static page.

Now if you click on your website, it’ll display the page that you marked as the front page.

Once you’ve done this, you can now add more pages to your website, and move your blog to another part of your site. To add another page, just go back to the pages section of the dashboard and name the page and put in the information you want (html, text, photos, videos, etc.) and publish it.

You’ll notice that this time, you don’t have to go to settings, but that the page immediately shows up on your website under the appropriate heading. Depending on your theme, your pages will now be posted under the names of the different pages at the top of your website or along the sidebar.

With the exception of your front page, your pages will now be arranged alphabetically, unless you change the order of their appearance.

To change the order of their appearance, you’ll go into each page and give it a number.

And now with that, you’ve turned your blog into a full website.

Turn Your WordPress Blog into a Business Website is a post from: Tutorial Blog

There are plenty of mistakes web designers (especially new ones) make when designing websites. Everything from poor design to simple oversight happen every day. But with a little diligence, they can easily be avoided.

Below are ten of the most common mistakes web designers make, along with examples of sites who do things right. Some of these are easy to correct if you’re aware of, others might take a bit more time. But all are fixable and worth the time and effort to correct. While this is by no means a comprehensive list of common errors, it is a good starting point.

1. Busy, crowded pages.

“White space” or “negative space”, space that is empty of elements other than your background design, is an incredibly important design element. It’s an important design element that affects how your visitors perceive the importance of different elements. Sufficient white space should be used between your columns, different page elements, and even between individual characters, lines, and paragraphs. Consider both the “macro” white space, the negative space around columns, page elements, and even the whole design; and micro white space, the negative space between individual lines, paragraphs, and sub-elements.

In addition to white space, don’t try to put too much on a single page. Visitors will likely visit pages looking for something specific. Including only related information and necessary navigation and site-wide elements on each page. It’s better in many cases to have multiple short pages than only a handful of very long ones, espeically if those long ones include a ton of unrelated content.

2. Hard-to-Find New Content

Unless the sites you’re designing are completely static, somehow showcasing new information and content is vital to good design. Returning visitors are likely going to be interested in what’s changed since they last visited. Generally, this is done automatically on blogs, with posts appearing in descending order based on date. But what about on other types of websites?

There are a few ways to approach this. You can devote an entire section to new content. This could be a page linking to the newest content (say, the ten most recent updates). Or this could be a section within the home page or another page that links to the newest updates. Making this prominent is important, whether it’s directly within the home page or on its own page. The goal is to make it easy for returning visitors to find it.

3. Hard-to-Find Links

Links are one of the most important parts of a website. Arguably, they could be the most important element. In any case, you need to make sure your links are easy to distinguish from other text elements.

There are two things to keep in mind here. First, make sure your links are distinguished in some way from the rest of your text. This can be done with a different color, an underline, or some other text attribute (anything but blinking text). The second thing to keep in mind is not to make text that isn’t linked look like a link. This means that under no circumstances should any text on your site be underlined if it isn’t a link. It also means that if you use other elements to style your links, don’t apply them to non-linked text.

4. Incorrect Image Formats

Using the correct image format for the different images on your site is vital. Using the wrong image file format can either make your image files larger than they need to be or effect the quality of the final image. The three image formats to concern yourself with for online graphics are JPEG, GIF, and PNG.

JPEG format is great for photos or images with a lot of different colors and shades because it’s capable of 24 bit color. The downside to using JPEG is that it uses lossy compression. In other words, the smaller you make the file size, the more quality loss you get. Using lower compression minimizes this but it can still be an issue, especially in larger images or images where the original was very sharp. You can’t use transparency in JPEGs either.

GIF format is great for images that use a limited color palette. GIF is only capable of 8 bit color (256 colors total). That means it’s not appropriate for photographs or most gradient images. GIF uses lossless compression, though, which means if you have an image that uses only a limited color palette it can result in really small file sizes with no quality loss. GIF is also capable of transparency for a single color within the palette.

PNG format is suitable for photos and other graphics. PNG images are capable of alpha transparency (in browsers that support it), which gives them an advantage of GIFs. They also use lossless compression, which gives them an advantage over JPEGs. And they’re capable of 8 or 24 bit color, so are suitable for images that previously would have been saved as GIFs or JPEGs. PNG images aren’t quite as good at JPEGs for photos, but are considerably better than GIFs.

5. Leaving the Default Page Title

The default page title in Dreamweaver is “Untitled Document”. If you search for it in Google, you’ll come up with almost 30 million results. There’s really no excuse for this. It’s literally a two-second fix. Make sure before you upload that you’ve changed the default page title to something other than the default.

Really, though, you should take it a step beyond that. Many CMSs use the website or blog name as the default page title for every page within the site. Some will add on the title of the particular page, but some don’t. You should make sure that not only is the page title for each page unique, but that the specific page title shows up before the site title. It’s a big help with SEO, both in terms of showing up higher in results and in having those results look more relevant to potential visitors.

6. Hard-to-Use or Hard-to-Find Navigation

Navigation should be immediatley apparent to visitors, both in terms of locating it and using it. There was a trend in web design for awhile to hide navigation, to integrate it seamlessly into an image or other content on the home page. And while artistically this is interesting, functionally it’s very user-unfriendly.

Even using things like drop down menus for navigation can make your pages less user-friendly. You want users to be able to find exactly what they’re looking for with the least amount of effort. Always keep that in mind when you’re designing.

7. Fixed Font Size

This is a very important one. Make sure users can resize the fonts on your pages based on their own preferences. This is done using EM sizing for fonts rather than pixel-based sizes. Again, it’s a relatively simple thing to implement but greatly improves the usability and accessibility of your site.

8. An Unclear Site Purpose

Visitors should immediately know what a site is about, no matter what page they land on. This can be done through the use of tag lines or similar indications, through page titles, or through headings on individual pages. However you choose to do it, make sure that it’s apparent within the first few seconds after a visitor lands on a given page.

9. Using Harsh Colors

Harsh colors, and especially the use of harsh contrasting colors, can quickly make your sites a chore to view. You don’t want to do anything that makes a visitor want to leave your site. Eye strain is one thing that will get most visitors to leave post haste. Your site should showcase your content and avoid anything that detracts from the goal of the site.

10. Advertising Blended Into Content

Advertising should be set apart from the content of your site. With banner ads this is relatively easy; most Internet users know what a banner ad looks like. It’s a bit trickier with text links, though. Labeling your advertising for what it is make sense to your visitors and sets your site up to be considered more trustworthy. This is especially important with in-text advertising, where hovering over a linke will bring up a modal window with an ad. Make sure these links are differentiated from your normal links.

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

Many of the marketing techniques described on this blog are active, rather than passive. In other words, they require that we do something – pick up the phone to make cold calls, hit the social networking circuit, attend business mixers, that sort of thing.

Not surprisingly, these things take a lot of time. And they get short shrift when we get busy with paying clients. Nothing like having marketing that works. But it sure would be nice to have marketing that doesn’t require so much work.

Enter search engine optimization (SEO). Call it marketing that gets business to come to you, even when you’re sleeping. I’ve been in this fortunate position, and I’ll elaborate on it later in this article.

In the meantime, let’s talk about what you can do to improve your search engine positioning. Be forewarned, this can turn into a time- and life-sucking project. I hope you don’t get so tunneled into SEO that you forget to interact with The Real World. Keep SEO in perspective, okay?

The first decision you should make is what you want to rank well on. It may not be what people are searching for. Google has a couple of tools that can aid your quest for the perfect keywords:

1. AdWords Keyword Tool shows the previous month’s search volumes. And, if you’re interested in purchasing some AdWords, it will also show the number of advertisers bidding on each keyword.
2. Search-based Keyword Tool looks at your site and matches the content with words that Google searchers are using. While some of the terms it finds will seem far-fetched, you’ll probably see one or two that would be worth weaving into your copy.

If you’ve already built your site, you can see how people have found it with Google Analytics. This is a wonderful traffic analysis tool – and it’s free. But prepare to be surprised. The keywords you’ve carefully worked into your site may not be on your visitors’ minds.

What do you do about this? Well, you can get all huffy and remove that wonderful photo that you took five years ago. You know, the one that really doesn’t relate to the primary purpose of your site. But, gosh, that photo made for a great blog post. And your site visitors like it so much that it’s the most searched-for thing on your website.

Instead of squashing that off-topic photo with your delete key, why not offer visitors a chance to purchase prints and licensing rights? You could make this happen with PhotoShelter or RedBubble. And then you can thank your website visitors for showing you an opportunity that you’d overlooked.

Now, back to the purpose of your site. I imagine that you built it to promote your freelance business. So, make sure that your desired keywords are in:

1. Page title tags
2. Page headlines and subheads
3. Copy on the page. Be sure to get the keyword(s) into your first paragraph.
4. Words that are boldfaced within your copy.
5. Captions for photos and other images
6. Filenames of pages and images
7. Link anchor text. Don’t just tell them to “click here.” You’re more creative than that. Besides, your keywords are just waiting for something to do.
8. Page navigation breadcrumbs. Not only are they helpful to your visitors, breadcrumbs help search engine robots travel through your site.
9. Description meta tags. Google uses the content of this tag in its search results. Use your page copy to create a 60-character summary of its content.
10. Keyword meta tags. Due to widespread abuse by spammers, this tag doesn’t carry the clout that it once did. But pick the 10 best keywords on each page. Those are your keyword metas.
11. Site map. Use an HTML version on your site and create an XML version for Google. And be sure to add a link to your HTML site map from your “404 Not Found” page. This will help lost humans (and search engines) get back on track.
12. Blog. Google and other search engines like frequently updated sites. And, every time you add a blog post, you’ve updated your site. And, do your blog and your site link to each other? Make sure they do!

The above items are on-site factors. They’re things you directly control. Now, what about elsewhere on the Internet? Who’s linking to your site? Find out via LinkPopularity.com.

The search engines give greater weight to sites that have a lot of other sites linking to them. So, get busy with your link-building campaign. Focus your efforts on high-traffic, reputable sites.

Tip: If you’re a Web designer, ask your clients if you can add a link to your site from theirs. Some will say yes, but not all. I once had a client tell me that her investor wouldn’t allow such a thing.

A Top Search Engine Ranking Isn’t Enough

Back at the beginning of this article, I alluded to my success in getting business to come to me – even while I slept. Nothing like waking up and seeing the sales that have already come in.

Here’s the rest of the story:

In late 2002, I published an e-book on marketing one’s business with postcards. To promote it, I built a website that grew to more than 100 pages. Many of those pages were Web versions of my e-mail newsletter, which focused on postcard marketing. This got Google’s attention, and I had a number one ranking for several years.

I worked with an SEO expert who did everything he could to keep my site highly ranked. But even this wasn’t enough. By the end of 2004, I noticed that my sales were slipping, and I tried quite a few things to get them back to the lofty heights of 2002 and 2003.

That was how I learned that having a top search engine ranking isn’t enough. You need to have people searching for what you’re offering.

For a while, they were looking for postcard marketing information. And then they weren’t. Alas, my postcard marketing e-book had a product life cycle, just like any other product. I closed my postcard marketing venture in late 2006.

Freelancers have wide skill sets, but most don’t really offer mind reading. In order to make sure that your project is completed to your satisfaction, it’s important to carefully communicate with your freelancer. Even a relatively small miscommunication can affect the end result of your project, whether you need a website designed or copy written. And if a problem creeps in at a fundamental level, the way a freelancer executes your project can be very different from what you have in mind. The final project may be great, but if it doesn’t reflect what you originally wanted, you won’t be too pleased. Such situations can be avoided by making sure that you and the freelancers you work with are on the same page throughout each project.

Communicate in Writing

Even if you hash out the details of what you want the finished project to look like, send a follow-up email to confirm what you said on the phone. Keep written records of as many of the project details and discussions as possible. Having this sort of information in writing makes it easier for both you and the freelancer to refer back to your original decisions. This is especially crucial during longer projects, or when details change from your initial agreement. You’ll be able to refer back to the documentation and have a reference point for any changes the freelancer suggests, and the freelancer will have a better concept of just what you want.

Having a paper trail can come in handy after the fact, as well. It can help you decide how well a finished project stacks up to your initial expectations and it can give you a starting point for future projects. Maybe you’ll need another website eventually, or the freelancer suggested a way to tie your current brochure design to a new business card. Those notes can give you a head start on getting future projects done.

Review Drafts Thoroughly

Depending on the size of your project, you may receive multiple drafts, mock-ups and versions of the project from the freelancer working on it. While it may be tempting to just give a once-over to a draft, perhaps because it isn’t a final project or because you’ve already seen several versions, it’s crucial to go over each iteration of the project in detail. The draft stage is the point when it’s easiest to make changes or corrections — waiting until the final draft or even the final version is likely to wind up costing you extra money and delaying the finished project. The contract covering the project will likely lay out at what point the project is considered complete and you are obligated to pay — even if it doesn’t quite match your expectations.

If you aren’t sure exactly what you should be looking for in a version, most freelancers are willing to discuss the progress of the project with you: they can tell you about changes from one version to the next, as well as the constraints that may have led to a particular approach.

Check in Regularly

With especially long projects, it’s easy to hand work over to a freelancer and forget about it. But that sort of approach tends not to work well — for you or the freelancer. In order to stay on the same wave-length, it’s important to check in with any freelancers you work with fairly regularly. You don’t have to touch base every day, like you might with an employee, but send off an email every so often. Depending on your timeline, contact every few weeks may be enough, or even just following up after each milestone could do it. There’s no precise number of of times you should connect with a freelancer during the course of a project; instead, you’ll need to see what works for you.

While there were lots of trumpets and elephants accompanying recent announcement of Google Wave, one of the things that could have slipped by was their public commitment to building Wave in HTML5.

Not long afterwards the W3C announced the discontinuation of the XHTML2 Working Group, to ‘increase resources on HTML 5‘ in their words. It’s pretty clear all the cool kids are wearing HTML5 this summer.

Arguably the single biggest difference between the two standards is XHTML’s insistence on ‘well-formedness’ — closing your Ps and LIs and using self-closing IMG and BR tags. Now, as Jeremy Keith points out, choosing to use HTML5 in no way prevents you from closing your tags.

However it does make closing your tags more of a stylistic choice — like getting a tongue stud or allowing your underpants to show above your jeans. As with HTML 4, you’re free to leave tags open willy-nilly without fear of validation errors or other reprecussions.

Personally, like many of us, I’ve become so ingrained at writing XHTML that I feel dirty if I write so much as an unclosed P tag. I also find it easier to fix layout bugs when I can easily identify where tags finish.

But clearly not everyone feels that way — including the web’s most visible citizen.

Arguably the web’s most famous page — the classic Google Search page — labels itself as HTML5 but presents with 41 Errors, 2 warnings . Most notable of these include:

• Using FONT (deprecated after HTML 4.01)
• Using NOBR (I believe never officially part of the spec)
• Using U (deprecated after HTML 4.01
• Using CENTER (deprecated after HTML 4.01

Just as interesting are some of the things Google do that seem like they SHOULD be invalid, but in fact aren’t in HTML5.

• No closing BODY tag
• No closing HTML tag

As you would expect with Google, this was no accident or oversight on their part. Evidently, leaving off closing html and body tags allows their pages load faster without any negative rendering repercussions in browsers — older or new.

Of course, Google serves literally millions of pages an hour so a 2% efficiency gain per page quickly results in huge daily savings in bandwidth and loading times.

So, will HTML5 mark the beginning of a drift away from standards and the importance of validation?

Are you a pedantic tag closer for life, or does it all come down to the cold hard realities of the load time and screen render?

It’s time we came to grips with the fact that not every “document” can be a semantic “web page.” Some forms of writing just cannot be expressed in HTML—or they need to be bent and distorted to do so. But for once, XML can help. Joe Clark explains.

Like many online games, Warrior Epic has a landing page to which we direct traffic from our web marketing campaigns. Luckily for us, our first landing page actually turned out to have a surprisingly good conversion rate.

Using Google’s website optimizer, we recently tried out a couple of new landing pages to see if we could improve upon it.

I’ve been pretty happy with our initial landing page. Although it’s quite long, it showcases the game well and I feel does a good job of selling it to a new visitor.

Warrior Epic landing page #1 (click to view larger)

Like I said, we were getting conversion rates above what is usual for banner traffic so I didn’t feel a strong need to do a lot of tweaking.

However, marketing wanted to try out some new concepts and so we tested out version 2 which was a variation of the original landing page.

Warrior Epic landing page #2 (click to view larger)

The goal of the second landing page was to brighten the page up a little, move more content up above the fold, and remove any non-conversion-related links from the main content area.

I thought we achieved this pretty well; however, the landing page performed very slightly worse than the original.

The third landing page featured a completely new design.

Warrior Epic landing page #3 (click to view larger)

I’ll be honest; I wasn’t a fan of this design at all. The white background felt too stark to me and it removed the content which highlighted the key features of the game.

The great thing about using an A/B testing tool to optimize your designs is that you get a definitive answer as to which works better. The only thing you have to invest is the time spent developing the variations.

It took less than a day of A/B testing against the original design to show that this new version dramatically outperformed it. It’s a good job I didn’t listen to myself.

We plan to run a few more variants of the winning design to see if changing the call-to-action wording has much of an effect.

We also have a version in the works which has the account sign up form embedded in it. I’m really keen to see how that performs, as I simply have no idea.

Further Reading

• A/B Split Testing
• Optimize It blog
• How To A/B Test Landing Pages

Myspace has increasingly come under more pressure over the last year with the continued rise of Facebook and the popularity of Twitter. However, there are some things you can do with Myspace that you can’t necessarily do with some of the other social networking sites.

For small business owners, a customized Myspace page can be a place to easily promote music, artwork, professional services and more. Here are some ways to make your Myspace page look professional.

In spite of the many complaints about how messy and cluttered Myspace pages look, it doesn’t have to be that way. With a few additions to your profile you can create a professional Myspace page that does far more for you than many other social networks.

One of the most important things is to first find a myspace theme. As you would expect, your Myspace page is going to look pretty bare graphically when first starting out.

Finding a professional Myspace theme/layout will immediatly change the feel of your profile. With a professional looking theme, now look how the profile page looks:

Now you’re create a look to your Myspace profile that has much more style and professionalism to it. To give your profile a professional background like this, you don’t have to know any code, although if you do, you can easily create your own theme. However, if you don’t, you’ll want to begin by searching through the many Myspace layouts and backgrounds.

When looking for the right theme for your profile, you may have to sift through a lot of unprofessional themes. Once you find one, you can usually easily preview it before applying it to your profile. Once previewed, if you like the theme, you now just have to copy the code.

Once you have the code copied, you’ll sign into your Myspace account and go to the profile section to edit your profile.

Lastly, in the “about me” section, all you have to do is paste the code in the box and save the changes.

So you’ve now made over the design of your Myspace profile, but there’s still more you can do to make it more professional. One of the main things you can do is start adding different applications. Myspace has recently launched a database of applications you can add to your profile. If you’re a photographer or web designer, you can show off your work with an application like Flash Photo Viewer. Simply choose to add the application to your profile and then watch as it turns your profile into a slide show of the photos you choose.

This is just one of the applications available to turn your Myspace profile into a professional looking page. Other applications feature tools to add your music to your profile if you’re a musician or add videos if you’re a videographer.

Lastly, make sure to put only information on your profile that is relevant to your professional goals. If you’re a CEO, you don’t need to list all of your favorite movies and TV shows. List things that are important like your education, work experience and favorite books. Then, take out the more personal things that aren’t relevant to your profile.

And with that, you can easily turn your Myspace profile into something much more professional looking. Next time I’ll discuss how to make your Myspace page more professional with the new Myspace 2.0.

Advertisement: TutorialBlog Design Articles Since 2005

Post from: Tutorial Blog

Hardwood Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

Download Them Free

You can download the full-sized textures totally free using the link below:

Free Hardwood Textures Set

License: Creative Commons Attribution

The Author

These textures were provided by Andre Oliveira, a talented photographer and artist. You can see more of his work at his DeviantArt Page or Behance Page.