using the blogspot text widget (and the post editor) to make menus and thumbnail galleries

On the right hand column of this site you can see a section where I have put a menu with thumbnails for template downloads. It just occurred to me that I never got round to posting on this little trick which I figured out and which makes it very easy to make something like this by using the text widget and the regular post editor. Here's how it goes:

1) Start a regular post - except do not publish it but save it as a draft! (You can always go back and add to it later as well if you just keep the draft).

2) Put all your images and text in the post. (Your text will wrap automatically, however remember that your images will need to be sized to the width of the sidebar that you are planning to put the widget into).

3) I guess you could also add a background texture/color, or a border, or a bit of padding while you are still doing the post entry, as explained here >>>. I haven't tried this myself yet, but I am assuming that all of these attributes would show up on the text widget as well.

4) Select all the stuff on the HTML tab of the post editor and copy.

5) Start a new text widget, go to the HTML tab, then paste the code you got from the post editor into there.

6) Save! Done!

.................................................................................................................................

fine line between good web design & usability

As the technology advances, we get more and more freedom in how we design our websites. While this aspect allows creativity beyond imagination, it also creates dangerous pitfalls that should be avoided. First, you have to accept and understand that you are designing a web-page not a print (poster etc.), which is the most dangerous pitfall for beginner web designers especially for those with a graphic design background. (GripLimited; welcome to poster design 101, great typography but a ton of problems). Then, you have to think like a simple internet user, where will they look, what will they see, can they reach the desired information easily. Know that, not everyone will be as proficient as you are with internet browsing, nor will be able to see your website like you see it.

During the design process, there are mainly 5 issues that you have to be careful with. These are visual placement, visibility\accessibility, navigation, loading times\problems, categorizing\archiving (if used).

Below, I will try to give you some examples of what "NOT" to do. The selected sites are particularly well designed however due to one of the facts above, each suffers major problems in usability.

Visual Placement - or in this case Visual Mess:

ContentOf

This is what I would like to call hammering the visitor. I don't even understand what the page is about, nor where I should click.

Crative with AK

Nicely done, but what am I looking at? There is so much going on, stuff moving on its own. It is impossible to understand what is a link and what isn't. A navigation disaster as well. Plus on smaller screens, it re-sizes itself, I can't even imagine browsing this site on a netbook.

Visibility\Accessiblity - or in this case Invisibility:

BioBak

Incredibly fun and innovative design, yet an overkill due to the ridiculously big design. It gets tiresome to drag yourself around, not knowing what is where.

Lego

Innovative design and yet again too large for its own good, it is hard to understand what and where is content. Plus the site scrolls from bottom to top and the scroll is at the right bottom. Also too much content at one page, it takes quite long to load.

Navigation - how will I browse?:

Theologs

Where to begin? This site is a lesson by itself. Disturbingly long load time, no proper menu (just a bunch of images that bring out names that don't mean anything). Slow and jagged transitions on images. Again more load times for new pages. And marvelously, you have to go to a new page to actually shut off the sound.

On Toyota's Mind

There was on thing that wasn't on Toyota's mind while designing this beautiful website, navigation. It is really unsatisfying going over those numbers on the bottom to actually see where they might be linked to.

Loading Times - lets face it, no one will care how beautiful your page is if it takes more than a minute or 2 to load. This is especially a problem with those who tend to use flash. In HTML, the only thing you have to be careful about is the size of the images you use. If you are crating a page with massive and high quality images, try to use pre-loading and loading screen javascripts to prevent partially and slowly appearing images. Even in this case, there is the same problem with flash, if you overdo it, it will take disturbingly long:

Coca-Cola Light

Along with no proper navigation, it also takes quite a while to load. Add to this, the fact that there is no way whatsoever of skipping the introduction animation and you get a beautiful and yet useless website.

Categorizing & Archiving - you have to create an intuitive interface so that the visitor can find what he/she is looking for easily... or maybe you don't as in the following cases:

VanAlen Ins.

This is the pillar of confusing categorization. Just click one of those stripes and see what happens, how could anyone find what they are looking for over there.

Self Titled

Another very confusing categorization, just move your mouse pointer to the right side of the page and you will see.

Finally...

I hope this gives you a good perspective on what to consider when designing for web. Good and innovative design is very important but overdoing it results in losing visitors which I guess no one would want.

.................................................................................................................................

the trio: padding - border - margin

The most common and confused elements of the css.

Border: As the name suggest it is the border around your element. If the border has 0 width, the border edge is the same as the padding edge and invisible.

Padding: Defines the space between border and element content. If the padding has 0 width, the padding edge is the same as the content edge. This means that your content will stick to the edge of your defined content box.

Margin: Defines the space between border (if you don't have a border then padding, and if you don't have a padding then content)  and other surrounding elements. If the margin has 0 width, the margin edge is the same as the border edge(if you don't have a border then padding, and if you don't have a padding then content).

Each edge of margin, padding and border may be broken down into a top, right, bottom, and left edge. (for ex: padding-right: , margin-left: , border-bottom: etc.)

The image below may give you a better understanding.

.................................................................................................................................

how to add a poll into a blogspot post

Easy enough to add a poll as a gadget, however what happens if you want to put a poll into one specific post only? Can be done as well, and this video shows us how:

http://www.youtube.com/watch?v=qoK9lHMjnDc
Ingenious, huh? Tried it, works like a charm... ;-)

.................................................................................................................................

additional photoshop lens flare tips

If you are working with a dark, more or less solid image field, the duplicate layer > apply flare > layer mask trick seems to be the easiest way to go. However, what happens if you want to use the flare on a photograph with a lot of different tonal values? There is another way to do this and I figured I should talk about that one as well, in case some of you want to try it out: 

Create a new layer on top of your image, fill it with 50% gray, or lighter or darker. Apply the lens flare onto the middle of the gray layer. Then in the layer palette change the layer mode from normal to hard light, screen or exclusion - whichever works, this will depend upon the values of the underlying image - as will the value of the gray of the flare layer. Move around, see what happens around the edges (they may be visible), and if needed use curves or levels or brightness/contrast (or indeed, yet once again a good old layer mask) on the gray layer to blend everything together.

So, the whole thing involves a bit of experimenting, undo's and redo's, I'm afraid. But essentially that is how it works folks.

Open this photoshop file here >>> to get a clearer idea.

.................................................................................................................................

design: using photoshop plugins for website backgrounds and effects

geek.folk goes elegant ;-). This is to show you how to use photoshop plugins and filters to achieve effects on your background and header.

I didn't change much from the previous layout and even the glass buttons are still here, except that I applied a dark layer style to them this time.

On the background I used a plugin named Sinedots II, freely downloadable, courtesy of a very generous gentleman named Philipp Spoeth, who has been making this wonder available (PC only - ouch!) right here >>> for a very long time. Just place it in your plugins folder and the rest is fairly self-explanatory, although there are a few tutorials on it available on the download page as well. In this case I just applied the plugin onto the full canvas and then used a layer mask to delete the top and the bottom. Moved it up to where I wanted it to be, and that was that. In any case, this is such a beautiful filter that it would be kind of hard to go wrong with it no matter how you use it...

On the header, where I switched the font to Bauer Bodoni this time, I used the standard photoshop lens flare filter which is under Filters > Render. Now, here is the trick with that: It is actually quite difficult to get this to sit exactly where you want it to sit. What I do is, I create two layers in the same color, and then put the lens flare dead center in the middle of the top layer. Apply a gradient on a layer mask from all 4 sides  (Tip:  make sure you have the gradient colors going from solid black to transparent white, otherwise you will keep painting over what you are doing  )  then move, rotate, resize the flare to exactly where you would like it to be - which in my case is behind the header text so that I get a nice highlight there to offset the dark typography.

(Note: If I were to actually make such a site, I would place the flare on the background, together with the sinedots effect, so that the content slides over it as the viewer scrolls downward).

And you can see everything that I did in the photoshop file which you can download from here >>>.

.................................................................................................................................

blogspot stuff: finding your gadget ID

This is something which you need to know about if you wish to configure the properties of your individual gadgets in the HTML editor. They are well hidden out of sight, however can be found at the very end of the address bar of the gadget when you are on the Design panel: Click to edit the gadget, scroll all the way to the right, to where the mouse cursor on the image is pointing - and there it is!

.................................................................................................................................

seo: post title before blog title, or how to get google to like your blogspot site even more

Here is another little code snippet which will make it possible for a search engine to search the contents of your posts as well as your blog's title and keywords. Result: Even better web visibility. All you need to do is find this line in your HTML code under the 'Design' tab:

<title><data:blog.pageTitle/></title> 
And then replace it with this:
<b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Save. Done!

 (Tip:  It will of course help if there is some indication in your post title as to what you will be talking about. As an example, a title such as "nice code" would not have gotten me very far with this one right here. So, as you can see, I made a point of mentioning all the relevant stuff in the post title itself.  ;-) 

.................................................................................................................................

how to get google to like you

Want to get a top ranking in search engines? Be sure to have proper meta tags included in your html. Meta tags are not a magic trick to get you to become the top website on search engines, however they provide search engine crawlers with the desired information which proves that you deserve to be thereabout.

Definition & Usage (as explained on w3schools.com)

• Metadata is information about data.
• The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
• Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
• The <meta> tag always goes inside the head element.

Most Important Tags: (What you need to fill is highlighted in red)

identifier-url This tag provides google-bot with the information on where to start indexing your website.

[meta name="identifier-URL" content="http://www.yourwebsiteurl.com"]

description Provides the description of your website, you can use a maximum of 255 characters.

[META NAME="description" CONTENT="yourdescription"]

keywords Write a maximum of 12 keywords separated by commas, which are directly connected to your content.

[meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,etc"]

language Provides the language of your website, if it is English, this is not very important but still it would be good to have. 

[META NAME="Language" CONTENT="english"]

revisit This tag is important for bloggers such as yourself and for those who update their sites very frequently, otherwise it is just a waste of space. It tells google-bot, how frequently it should visit your website. Having a short interval means, you will have updated content much faster on google search engines.

<meta name="revisit-after" CONTENT="X days" />

Other than these there are many more meta tags, however they do not have much of an impact. If you are interested you can see the whole lists here and here. Also you can use the online meta tag generator to get a proper code which than you can copy/paste into your website.

.................................................................................................................................