Everything in the 'Design' Category

Optimize your blog for the iPhone and iPod Touch in Five Minutes

1

iPhoneYou can’t deny that Apple is re-defining the mobile web. The iPhone and iPod Touch are full fledged web browsers and there are lots of people using them. So, why don’t you take 5 minutes and optimize your Wordpress blog for the iPhone and iPod Touch?

Step 1 - Install iWPhone. This plugin and theme combo automatically detects the iPhone or iPod Touch and serves up a specific theme optimized just for those screens. All you have to do is install it and activate it. When an an iPhone or iPod stops by, your site will be ready.

Step 2 - Install iPhone Mobile Admin. This plugin re-works the admin side of your blog specifically for the iPhone or iPod Touch. It makes it quite handy if you have one of these devices and want to login and post or manage your blog on the go. It should work with other mobile phones too if you don’t have an iPhone. There is also WPhone if iPhone Mobile Admin doesn’t fit your needs.

Don’t Let Microsoft Ruin Your Blog

5

As blogs become more and more mainstream, issues are coming up that blog software is not quite ready to take on. One of them is formatting issues created by copying and pasting content from Microsoft Word, Explorer, Outlook or even from Firefox!

The issue is that users are creating or finding content with other programs, then copying and pasting it into the WYSIWYG editor in their blog software. When that happens, the editor does it’s best to keep the same formatting including fonts, font sizes, line spacing, colors and much more. Any content copied from a Microsoft document will also come across with hidden, Microsoft only, tags such as the <o:p> and [endif] tags. This formatting then overrides the blogs default font, size and formatting tags giving your blog an inconsistent look and feel.

Here are a few examples:

The first one is what the code looks like when copied from Word. Can you tell what it says?

Bad Source

The second one is what the code should look like in Wordpress’ WYSIWYG editor. Much nicer.

Good Source

Here are a few of the inconsistent layout options that can result. There are different fonts, sizes and use bolding.

Optimize FeedBurner Emails

3

One nice option that FeedBurner offers is the ability to send out blog updates via email. This is a vital option as there are many more people that understand email but don’t understand feeds.

Just turning on email subscriptions is a good start. Customizing the email that goes out is even better. FeedBurner allows you to edit the subject, fonts, sizes, colors, message and add your own logo. There are really only a few options, but you can better brand your emails with the options available.

To customize your FeedBurner emails, log into your FeedBurner account and click on your feed. Then click on the Publicize tab and then Email Subscriptions in the left column. If this option is not activated, do so now.

Then, click on the Email Branding link. On the branding screen, you’ll have the option to change the following:

  1. Email Subject/Title - Work on the wording to encourage your visitors to open the email.
  2. Logo URL - This is where you get to put in a visual que to re-enforce your site’s identity. I’d highly suggest this for all.

Does your blog kick ass?

1

Webaward LogoLast year I was given the honor of becoming a judge for the annual WebAward competition. This year, I’ll again get to juge outstanding sites from 96 different industries. Ok, so I don’t judge one in each industry, but I’ll get to see a wide range of different sites.

The WebAward competition judges sites on six different categories including design, ease of use, copywriting, interactivity, use of technology, innovation and content. You’re blog doesn’t need all of these, but the more you do have, the better your score will probably be.

The 2007 call for entries is open and one of the newer categories is blogs. If you think your blog stands out from the competition, go ahead and enter it. Judging will happen later this year as we pick the best of the best.

Good Luck!

[tags]webaward,award[/tags]

Extra Text Editing in Wordpress

9

Color Color ColorA client asked me today for more control in their Wordpress control panel. Specifically, when posting they wanted to control the font sizes, colors and do a bit more. As a designer I always freak at that question as I think the code is going to be filled with massive amounts of font tags and out of order strong tags and ohhh the madness. But, then again, maybe I’m overreacting.

So, I did some researching and came up with one possible idea, Xinha4WP. It’s a Wordpress plugin that replaces the default text editor with a much more advanced version. It also needs the Text Control plugin to work so you need to install that too.

Xinha4WP gives bloggers many features including all font control (sizes and colors), tables, additional smilies, special characters and few more items. The coolest thing is the maximize button that lets you make the editor the size if your browser window.

The downside is that it is a rather large plugin weighing in at 5.5mb. It is also showing up above the built in Wordpress editor widow. This is not ideal to have two editor windows especially since the default Wordpress one is ignored. This could be a conflict with the video pugin they using too. Not sure.

Where is above the fold?

8

NewspaperI’ve recently acquired some email campaign tasks and one item I’m always hearing is to get something ‘above the fold’.

Now, I know what above the fold is. It’s the space that the visitors sees on the screen without having to scroll down. Really it’s a term from the newspaper industry where the fold of the newspaper cuts off stories. Those on top get more exposure and those on the bottom of the page.

But now that we are in the web world, it’s not the same. There are many different screen sizes, internet browsers, toolbars and the term ‘above the fold’ just doesn’t seem to fit.

So my question to you is, where is ‘above the fold’ on a computer screen and has it been standardized? Should I assume that 1024×768 is a good size? But then again, how does that work when it comes to emails?

That’s what is on my mind today. What are your thoughts? :)

[tags]email,email-marketing,email-campaign,above-the-fold[/tags]

Use Avatars to Show Authority

1

Technorati Screen Grab - AviatorsToday’s tip is quite simple and easy, it’s merely creating an avatar for yourself which will represent you across the web.

An avatar is just an image. A logo or icon that represents you or your business. It could be your picture, your cat’s picture, a cartoon character or just a cool design. I’d recommend picking one that is original for best results.

Now, when you create your blog, put your avatar on it. When you register at a form, use your avatar. Services like Technorati and MyBlogLog have the ability to upload a profile image and you’d want to stick it there too. There is even a global avatar service called Gravatar that will show your avatar on other blogs that have this functionality enabled in the comments. Ideally you’d want them all to match to build your identity. But mixing a photo and a logo treatment also seems to work well.

What you are doing is making sure that you stand out. When people are browsing other services, they can quickly notice you. Avatars also show a sign of authority as spammers rarely take the time to worry about the minor details. It’s a quick and easy thing to do to catch the attention of others.

Your Site Design Reflects Your Company

4

Paint SpotsOne of my pet peeves is ugly websites. Now I know that not everyone has the time to put into a new site, but it’s worth the time and effort. Online visitors first impressions of your company is your site. If they like it, they’ll continue to look around the site but there are plenty of alternatives if they don’t like it. Lack of design may make the user feel there is also a lack of security, product quality and/or customer service.

One of the big things right now is that Web 2.0 look. Now I don’t know if you can really target a look and feel to Web 2.0 necessarily, but is the characteristics that make up some of the biggest Web 2.0 companies websites that are making up this look and feel.

What do you need for a Web 2.0ish site? Simplicity, color, larger fonts, nice icons or graphics and a beta logo never hurt.

Actually, WebDesignFromScratch.com has a great Web 2.0 how-to design style guide. Granted it won’t do the work for you, but it’ll point you in the right direction. Sometimes, incorporating a few items on the list can go a long ways and a whole site re-design isn’t always necessary.

Administer Your Blog In Style

0

Where as the Wordpress admin isn’t bad, it could be much better. Check out this optimized and stylized version of the Wordpress admin.

Wordpress Admin Optimized

And it’s all available via a plugin.

WP Tiger Administration v3.0 became available today and it adds quite a bit of style to the admin area of your blog. It was organizationally designed to be a Mac style, now it’s just style. It uses the power of CSS2 to add subtle colors, a right had nav, a few icons and less clutter all around.

It works great in Firefox and Safari but leaves out Internet Explorer as IE doesn’t support CSS2.

Check it out and start administrating your blog in style!

Tutorial: Uploading images to a Wordpress blog.

0

This tutorial, on how to upload images to a Wordpress blog, has one prerequisite. That is that you must have a folder named Upload in your wp-content folder and it must have write permissions (777) set. Once that’s done, lets move on.
Step 1: Login to the admin area of your Wordpress blog.

Step 2: Click on the Write Post tab to create a new post.

Usually, I write (and save) my post before adding images, but that’s up to you.

Step 3: Scroll down until you see the Upload area.

Upload Area
Step 4: Click the Browse… button and it will allow you to find the image you want to use on your hard drive. Once you’ve found it, enter in a title and hit upload. Description is optional.

Once it’s been uploaded you’ll then see a Browse tab with the image you just uploaded in it.

Step 5: Click on the image to get the image options.

Image Options
Options Overview:
‘Using Thumbnail’ means that when sent to the editor, it’ll be a small version of the image in the post. Click on that link and it’ll switch to ‘Using Original’. That means that when you send it to the editor, it’ll use the original size of the image.

BloggerDesign from TopRank Online Marketing | To Top