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.

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

homework: template mods

OK people - question: When I was checking your homework in class last week, the ones that I saw had done absolutely nothing to their blogs. I am amazed! How could you possibly have resisted? Something that is so easy and so much fun? And that is in fact a righteous introduction to web design? Which is the class that you are taking?

I am putting my money where my mouth is and setting you an example now:
http://easypeasydesign1.blogspot.com/2011/03/modifying-template.html

Please go to the above link and look at the examples that I am showing you which have all been made  using a blogspot template, by simply changing the background images, making simple header images and replacing the default header with them, and then going to the template editor and choosing different layouts, widths and changing values from the advanced tab. No coding, no nothing! Except in very simple cases, such as adding a background image to a single post, which I was talking about in the entry just before this one. There are cases where some advanced CSS editing will be needed to tweak these into a perfect state but (with Selim's help) we will get to all of that when and if needed.

This is your homework now! grrr... I want to see some action on your blogs! And I will be even happier if you keep experimenting and take different screenshots and put them into posts. And furthermore, I would like you to keep on doing this - not only this one time, this week, but always! This is how you will get a sense of web design - not by sitting around and waiting for a miracle to happen, you know? And ooops - sorry, the miracle has actually already happened: You have a fully editable template, courtesy of blogspot, for free! And if that isn't a miracle, I don't know what is!

Here are a few good tips before you start to play around - so that you actually have elements to play around with:

 1) Add gadgets  - a nice text box, even two maybe. Links (find some stuff to link up!). Make different link boxes, for different categories.... 

 And please delete the default gadgets:  Absolutely no point in having a follower box on a brand new blog where you have no followers yet - or so few that it is kind of better to not show them at all, you know? Same for 'About Me'. This one is almost impossible to make look nice and aligned. So, get rid of it, for God's sakes! Make an 'About Me' page and put a nice big photo of yourself and some nice text. Easy peasy... And also 'Archives'. Again, too soon, you have only been around for 5 minutes - what archive?

 2) Labels  (which you can rename as 'Topics' or whatever you like: Now these will only happen once you start putting them at the bottom of the label box of a post. So, create a 'dummy post' (you can call it 'for labels' or something) and put a lot of labels in it. This will give you the list which you can then use as a gadget box. Similarly, add pages and use a page gadget. (The page menu on the top looks pretty awful in its default state and you cannot change it unless you re-code it, so for now I would stay away from that and go with a side gadget instead). You don't need to write anything in them yet, simply give them a name and write 'under construction'. 

And, again, absolutely no kidding guyz - this is now your homework! ;-) 

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

starting out with some design stuff now :-): background images and screen sizes

OK! Almost ready for some design fun! 

I figured that it might be nice to let you guyz start out with something that should be quite enjoyable - adding a background to your site. But before we get there, I would still like to remind you of something which is actually quite obvious: Not everyone has the same computer set-up and so everyone sees things differently, depending upon how large their screen is. There is a top left bias in all of this, which means that everyone, always, sees the top left corner of the browser. All else that people see varies from resolution to resolution.

The screenshot above shows you how this site is seen at a 1024x768 screen resolution. As the site's content slides left, one of my pixelmen is actually placing himself very nicely behind the header, so I am quite pleased about that. True, folk can no longer see the big pink fellow to the right but since the image that I have is more like an abstract backdrop I can live with that.

 (Tip:  A very nice freeware application that lets you test out screen sizes is Sizer (PC only). I would advise you to make use of it and often check to see how your site looks to others.  ) 

The widest screen resolution which we need to take into account is 1920x1080 or if we think lengthwise 1600x1200. However, this is not as wide or as high as it gets, Wikipedia gives a very nice list going all the way from the smallest to the largest sizes.

Some older websites are designed flush left, but nowadays for the largest part we tend to favor a centered layout. As the screen gets smaller all content will slide to the left of the screen.

 Upshot:  Your background image needs to take all of this into account. It is of no use whatsoever having a gorgeous image where the main elements are on the bottom right since there is no way that someone with a 1024 x 768 display setting is going to be able to see the stuff. It is equally bad to have full background images that are smaller than 1920 x 1200 (1920x1080 - 1600x1200) since anything smaller will result in really nasty patches when viewed on a large screen. So, unless you are tiling a small image (more on this later), always make sure that your full screen background image is larger than 1920x1200 and that the nice parts of the image are located towards the top and left. That way everyone, small and large, will be equally happy!  :-) 

 Update:  While all info above is still valid for most purposes, there is also an update on making resizeable full background images, which you can read here:
http://easypeasydesign.blogspot.com/2011/03/can-you-resize-background-image-on-non.html

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

better use google chrome...

Most browsers have too many (and often also completely unnecessary) tool bars, don't they? I mean, do you want to see the website or all those boxes which, at a small screen resolution, can easily take away up to a fifth of your web real estate? Big difference is google chrome where they have managed to place things beautifully all in one line. There is a separate bookmarks bar which you can make visible/invisible by doing a quick ctrl+shift+B. And everything else you may need is found under the little wrench icon on the top right. The rest of the screen goes to the actual site that you want to look at.

 (Tip:  One little nasty is that the default google chrome theme is a bit too flashy, which may also distract from the page content. Easily solved: Go to their theme gallery and select something less obtrusive.  ;-) 

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

content issues: blog vs. website

As you are working on your content and your mind map one important decision to be made is whether you will have a blog or a regular website. While a standalone website is good for certain kinds of content (say, product sites or artists portfolios), when it comes to most web content my personal bias is in favor of blogs. I have this idea that blogs get a far better viewing response since they are open to social interaction. Yet another thing which makes blogs very attractive is that in their very nature blogs are updated very frequently through new posts. These posts see to it that a blog is structured quite differently from a regular website in that the home page of a blog consists of a post roll in which the latest post is displayed at the very top and things progress in counter-chronological order as you move downwards. 

The good news is that most blogging domains let you have the best of both worlds in that you can add pages to your blog which then make it work in a fashion very similar to a regular website with a home page and sub pages that can be reached from it either through a top bar or a page widget. While wordpress lets you have an unlimited number of pages and even lets you nest pages within pages (thus giving you the full hierarchy of a web architecture), blogspot is somewhat stingier in this regard and lets you have only 10 pages and no nested pages.

 (Tip:  What you can do however is create a secondary site at blogspot which has the exact same layout and design as the primary one. This is done very easily by exporting and then re-importing the blog once the structure of it is somewhat established. The secondary site you can then link to the main site and use custom created posts that you put on it as the sub-pages of your primary blog. ) 

Another type of combo which you can also consider is to attach a blog and a regular website. To give an example: At some point I intend to start a gallery on this site. For this I intend to do a perfectly straightforward thumbnail layout using Photoshop and Dreamweaver since it would be kind of silly to try to get that style to work within a blog format. This gallery I will then link to the blog with a separate link category or maybe even under a separate page where I have a bit of an explanatory text or something. Needless to say, the design of the gallery site (which is put together with Dreamweaver) and the actual blog will have to be consistent and this may end up being a bit of a design challenge to solve (but more on this type of stuff later...). And then the other thing to be aware of is that in terms of logistics, you need to either have your site externally hosted or run your own server so that you can access ftp, etc.

In terms of blogging domains, my favorite these days is blogspot. I used to be a die-hard wordpress person but the fully customizable template editor (wow - they even give you the code!) at blogspot has made me a convert. Of course, you are not bound by the user friendly services of public blogging domains - if you want to suffer you can also create your own blog from scratch or bust your chops by using wordpress technology embedded into your site and then spend long blissful hours configuring the CSS. ;-) :-)...

But one way or another, user friendly solutions or hard graft, in terms of the big decision - blog or website or combo platter - make your mind up pretty much now, I would say.

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