Posts Tagged ‘graphics’

It’s not enough to attract visitors to your blog or website. You have to keep them here long enough to teach, sell, inform or otherwise get whatever it is you want out of them in the first place (for me, it’s you to read AND acknowledge that what I wrote resonated with you in some fashion i.e. leave me a comment)

I’ve worked long and hard to make pretty graphics to entice people to look, but having those graphics slow the loading of my page down is going to drive visitors away rather than pull them in farther.

I was reading an article from Site Pro News about this very thing this week. It was written by Heather Coleman a noted graphics artist who helps virtual assistants, coaches and other professionals online bring visual impact and depth to their products.

In this article, she makes 10 salient points about web graphics that are worthy of passing along.

Take this photo of Harley parts assembled into this rather attractive motorcycle. The picture is worthy of being someone’s desktop wallpaper!

I’ve used several of Heather’s points to bring it to you in a fashion that doesn’t slow down the loading of the page.

I’ve made the image a thumbnail version and linked it to it’s larger version that’s stored on my server. You can see the smaller, faster loading version and then, if you want to save it to use as a desktop wallpaper, you can click the image and it will load a new page with the original sized image that you can right click and save to your own computer.

I’ve reduced the file size by optimizing the image. Using her suggested optimization setting, I saved it at 60% optimization which still gives you the bright colors but doesn’t blur the picture or pixelate it.

I’ve brought it to you in the best format for this type of image — jpeg. This format allows that cool reflection to stay detailed and sharp. Other formats would be gif which is commonly used for small images such as icons as well as for animated images, and png which supports transparency and layers. And speaking of animated images, golly gee don’t overload your pages with them! They’ll give your vistiors convulsions!

Please note that older browsers don’t support png formats so it’s a good idea to know the browser that the majority of your viewers use — you guys overwhelmingly use Firefox, so I feel pretty safe in using png formatted files whenever I have a graphic that needs transparency to it.

Don’t forget to use the alt and title tags on your image! Not only is that good for SEO, but it actually helps keep your visitor who’s waiting for that image to load in his browser! Knowing it’s coming makes him curious enough to stick around while it loads. Along with this tip is to use the size attributes for your images. By using those, the browser knows how to render the rest of the page. Leave them off and it has to wait for those images to load before it can render the text! Who wants to look at a blank page for 10 seconds! While you’re at it, size them correctly! Just setting the size attributes to a smaller display doesn’t make the file size any less and it will still take as long for the image to load. By resizing the image in your graphics program, you’ll not only accomplish that file size reduction but speed up that page load time.

I limit the number of graphics you see on a page. You’re going to get the graphics that come with my theme, but each post usually only has one graphic in it. While there have been some exceptions to that general rule, the one regarding file size is one I never ignore.

Heather also mentions image slicing. I don’t actually see this in practice a lot and have personally only done it once and I had a specific purpose in mind that wasn’t really about faster load times for the site. Another thing she mentions that I also have never done and am not sure I’ve seen much of it either is progressive loading of images. This is a setting you can choose when optimizing your image which has the image gradually come up to it’s full detail. This doesn’t actually make the image load faster, but like that alt and title tag, gives your visitor a hint of things to come.

I have another little tip of Heather’s used for the entire site and that’s caching. I use a WordPress plugin called SuperCache to keep the files cached on the server so that it loads faster for you.

So now you know how to make your blog not only more attractive to your readers — it’s a well known fact that graphics increase the length of time your visitors stay on your site — but now you won’t turn them off by jerky animations, bloated images that load slowly and pages that remain blank for any length of time.

ê¿ê

Image via CrunchBase

Have you seen a Wordpress template out there that you really like, but don’t want your blog looking like one of the crowd? If you’ve been a follower of this blog for very long, you’ll know that I routinely change themes, but rarely do they look “out of the box”.

You’ll also know that I rarely keep all of the default graphics that come with those themes, so when I go searching for a new theme, I’m usually looking for one that has the mechanics of what I want in a theme more so than one that has the graphics. I may initially look for something in the color scheme I’m wanting to use just because I’m lazy and don’t want to change every graphic in the theme files, but if I really like the structure of a particular theme, then it’s not something that will take the theme totally out of the competition.

Having done this a time or two, I’ve discovered a few shortcuts to creating the look and feel that makes your blog uniquely your own. Here’s how I do it.

I have the One Click Plugin Updater installed for ease of installing plugins and themes. I also use Paint Shop Pro from Corel to create and manipulate graphics.

So, I’ve searched around and found a theme I like the looks and feel of. It has the basic things I want in a theme — a significant amount of real estate dedicated to posts but a side bar area that supports more than a measly 125 pixel wide graphic. It also has to validate code-wise.

I’ve downloaded the file to my local hard drive because I want to unzip it, and manipulate the graphics and save them back in the images file of the template set. One Step Uploader also allows you to load themes and plugins directly from their download sites, but since I want to make changes to the theme files, I’m downloading it to my hard drive.

Once I’ve unzipped the file, I open each of the graphics in Paint Shop Pro. Using the tools contained in it, I can recolor the background and other support images and find out the size of the header and footer images, so I can create ones that are the same size and dimensions. I usually rename all of the original graphics with “originalnameO” and then save my corresponding image with that original name so I don’t have to look for anywhere that particular graphic is referred to in the code files that are included with the theme.

If need be, I can open the css file which is where all the information about where those graphics are placed, the fonts used, their sizes and colors are stored and make changes to that file as well. The folder should also have a screenshot of what your template is supposed to look like, so you can refer to that if you ever question whether using a bit taller or wider image would work in place of another.

Then I rezip the file with the template name followed by an M to indicate that it was modified and upload that zip file to my website.

Then I can go to the design tab, find my newly customized theme and activate it. And there it all is! All the graphics are in place, the fonts are the correct ones and correct size and color and my blog looks all spiffy and new!

I know that not everyone is proficient with graphics, so if you would like custom graphics made for your blog, contact me and we’ll work out something.

ê¿ê

Image via Wikipedia

It’s my considered opinion that a well designed theme contributes to the overall success of a site. A poorly designed one will surely break it.

As you can tell, I’ve been playing with new themes.

Like I told Stan in a comment, it’s a woman thing — we just like changing stuff from time to time. It’s not necessarily that there was anything particularly WRONG with the old stuff, it’s just that we’re tired of it, or want one little thing and then that doesn’t “go” with some other things and then one thing leads to another and before you know it, there’s a whole house makeover in progress.

My husband is thrilled that I attend to my themes and websites in this fashion and not so much the house. It saves his back and his Lowes credit card gets paid off before it gets charged to the limit again. But beware, honey — the house isn’t too far behind the website makeover……

So, where am I going with this, you ask.

Well, IF you’ve visited the past 3 or 4 days, you may remember that for a fairly long while I was using a theme called “Leavy”. I liked Leavy — it had some color to it, but was a light background with dark font and had colored tab-like things by each post that had the date on them. It looked WONDERFUL in Firefox, but had the post header images skewed to the right when viewed in IE7.0.

Being the picky-ass person I am, once I noticed that, it grated on my nerves.

Nothing I did by way of IE hacks would make that darned image behave, so the theme had to go. I just can’t handle my website looking SKEWED.

Then I changed to one called Clock Work Mint. There was nothing at all wrong with it. It displayed properly in both IE as well as Firefox and everything worked as it should have with the exception of the sidebar. It seems the theme creator included stuff in the sidebar that I was using widgets for, so they appeared twice., The “default” wouldn’t give way to the more robust stuff in the widget, so I ended up with TWO Meta sections and TWO category sections. I don’t particuarly like my sidebar going miles past my content, so that was irritating to me. And yes, I tried removing the widgets — for categories, that made the drop down list go away, so you just got a plain old list and the meta section didn’t have anything about RSS feeds in it like the widget does. And the real clincher was that even though I’m a fan of dark font on light background for ease of reading, that theme was just TOO light overall. It was washed out looking.

Let’s face it, I’m a pretty vibrant gal and my website, being an extension of me should reflect that, right? But we don’t want GARISH either!

Then I tried one that didn’t support widgets at all and have since deleted it from my arsenal of themes, so don’t remember the name of it right off the top of my head. I have too much stuff in widgets to hand code a sidebar to accommodate them. I mean, my time is worth something.

So, now I’m using a theme called “Orange Squash” which, on the review of it appeared to be exactly what I wanted. It’s made by Bright Cherry, a website designer of some knowledge and talent. It purported having the ability to customize the header and colors, but although the functionality is in the coding, said functionality does not translate into any change on the theme. When I delved deeper into the files, I discovered that rather than a straight out color blocking of the header with a right aligned logo-like image, it’s actually a background tile across the top, so none of that light-dark color changing does squat. Even the font color change didn’t work. I still had to go into the css file to change that myself. Customizing my graphics was easy and something I’ve done to one degree or more with nearly every theme I’ve ever used. I really like this eye image, so am continuing to use it throughout the theme changes.

The one thing about this image is that you can go in several directions color-wise with it. It looks pretty good with orangey shades as well as with more burgundy cast shades and looks GREAT with greens. I chose the more burgundy and pink for this month as it’s Breast Cancer awareness month, but will feel very comfortable making the changes to other colors in the spectrum as the seasons progress or whimsy dictates (take your pick).

You will also note that I’m trying out the abbreviated post teasers as well. This means I have to grab your attention with that first paragraph in order to get you to read the whole thing instead of just blatantly spreading it all out for public view when you land on the page. I trust you’ll let me know how succcessful that is.

That’s supposed to help with SEO…. and I have no idea why I’m particuarly concerned with SEO, but hey, I do some things to help me fit in with the crowd. I just don’t want to fit in too tight, yannow?

ê¿ê

My last post mentioned blogrolls and some of my commenters have touched on the value (or lack of) of them. So, I did a bit of research on just what the origin of the blog roll concept was and why having a good one on your site can be important to you.

Lee Lefever has defined a blogroll as

“a listing of websites that often appears as links on a weblog. This list of links is used to relate the site owner’s interest in or affiliation with other website owners.”

Since that pretty much sums up what I think of a blogroll as, I’ll let him have the credit for defining the term.

There has been some talk both pro and con about having a blogroll. Lately, the talk has been a bit more con. The really popular sites or those considered to be authoritative ones like ProBlogger dont’ have a blogroll citing that it’s become too “political” because of all the requests to be on his (that’s one of the drawbacks to being popular — people are always asking you for something — I’m never asked so what does that tell you about my popularity?).

Blogging Startup has one of the best articles I read on blogrolls. Jim talks about the myth of the blogroll (that it takes visitors away from your site) and goes on to make a pretty strong case for having a blogroll. “Link Love” is never mentioned, though, so be forewarned.

As for the SEO value of blogrolls, as with any other outbound link on your website, they have value up to a point. Using a Javascript tool or service (such as MyBlogLog) to produce your blogroll results in virtually no SEO value for you or those listed in it as the bots don’t read Java (yet). Steve Johnson wrote a comprehensive post on blogroll creation and has some worthwhile points about choosing your reciprocal links carefully and with forethought.

I know I read somewhere an article on moving your blogroll to a separate page and why this is a good practice and what conditions under which you should do this and what conditions you should not. I can’t find it, right now, but it’s somewhere in one of these shipping boxes I call favorites folders and I’ll update this post once I’ve found it. I don’t want to paraphrase it as my memory is notoriously bad and I don’t want to mislead you. I do want to point out that many of the articles already cited along with this one at skelliwag mentions having your blogroll appear only on one page, not all of them. If, like me, you have it in your sidebar, then you need to address this as it’s considered a duplication by Google and can hurt you in the long run. There’s a teeny tiny bit of code you add to your sidebar template that handles that.

But just HAVING a blogroll doesn’t seem to me to be enough. A list of websites tucked over on someone’s sidebar doesn’t get me particuarly motivated in clicking one. There needs to be more and how much more is going to be your call.

Lyndi at Nice2All has written a post on sprucing up your blogroll. While I totally agree that graphics are more enticing to click, I take issue with using just 125×125 images. To me, that’s like having yet another PW ad bank on your sidebar. I’m not much of an ad clicker and since I don’t feel that I’m unique in that respect, I have to think I need to provide my visitors with a reason for taking the chance on that link. Images are one thing, but there are other things I can do to encourage that click. Oh, and she gives you that teeny tiny bit of code that keeps your blogroll limited to your front page only, so that alone makes clicking on her link worthwhile.

I certainly have no blogroll worth emulating. Mine is very short, not often updated (I did some updating today just to illustrate a point) and is purposely self-interested. I have no aspirations of achieveing any SEO from any of those links - they are solely there because I genuinely LIKE those sites. If I were a better person, there would be more than 5 lonely links, but alas, I am who I am and those of you deserving of link love will just have to wait your turn to be featured in a post. I do so much better with that!

So, take a look over there on the right at my blogroll. It’s not extensive — just 5 sites listed. Of the 5, only two have a graphic image and one isn’t square. Which one got your attention first? Hover your mouse over each entry in the blogroll. Which link or image has a tool tip that piques your interest?  Does the graphic get you first, then the tool tip convince you? Or does the tool tip turn you off? Would you click it if you still had an interest but it was just a link and there was no tool tip?