Manage your uploaded photos

As posted on Blogger Buzz and noted by Phydeaux3, Google has now finished the merging of Blogger photos, and Picasa Web Albums. That is just the base of the story however. If you start to look into it a little more closely, you'll see how much this helps our case, and why we love Blogger/Google so much!

All those pictures!

The first thing to notice is that every blog of yours automatically gets its own album. The album is populated with all the pictures you've uploaded using that blog. This offers a perfect interface to add more pictures, find and reuse old pictures, see what all you don't need anymore and (wait for it...) delete pictures! Yes! We all know that the space offered by Blogger isn't unlimited. If you look to the right, you'll see a '1GB (and growing)' message. Now, since it doesn't mention individual blogs, we have reason to believe that your Google account itself gives you a 1GB to store your pictures, all your blogs combined. That's not a lot of space if you think about having big blogs. Hence the ability to delete pictures becomes more important.

The next important thing, as already noted, is the pictures JSON feed. You can get a URL to 'all' your pictures via. a tasty JSON feed, which can be used to show them as a widget in your sidebar, or anywhere you see fit. This is not really helpful for a blog like mine, but if you do maintain a photo-blog, then you'll see how this comes into play. Won't it be nice to show a bunch of family pictures from your photo-blog on your main blog? :)

Those are the Blogger specific Picasa goodies. If you see their What's new page, you'll see that they've added features that is slowly moving them closer to Flickr. But I don't think they have the 'it' factor yet, with Flickr offering unlimited storage (with just a bandwidth restriction 100MB/mo, which is hard to reach anyway) -- Edit: As Phydeaux3 points out, Flickr does put a restriction, which slipped my mind. But it still offers many more features than Picasa. However this sure is a move in the right direction.

Getting things together

It's becoming more and more obvious that Google is working nice and hard to integrate their various features into each other, which can move to serve a few immediately visible purposes. The blatant first one being 'visibility'. By integrating services, they're increasing exposure to all their services. You remember how Blogger shows a Google Docs integration notice when you publish? Like this:

They know that Blogger is now one of their most widely used services after GMail (or maybe the other way around), and even GMail has those top row 'corner bookmarks' thingies. So it's becoming more and more obvious what they're upto now. But hey, I'm not complaining. All this is making life much more convenient for all of us, and the only thing which I can see that's remaining to be integrated with Blogger is Measuremap (if they ever get around to doing that). They recently integrated GTalk with their personalized homepage as well, so it's an all round effort.

This is some mighty good development! :) Let's see how far and deep this goes...

Creativity with Conditionals

Making this new template, I had to filter out a lot of stuff for various pages. For example, you won't see the TOC on a post page, but you will on the main, archive and search pages. The hanging flowers in the bottom area disappear from the top left on post pages, and show up at the bottom, straightened out.

No, these aren't Javascript if-else statements. These are too trivial for that. Plus there aren't any fool proof checks to see which page we are working with, except regular expressions, which are overkill for things like these. The above mentioned tricks are all thanks to Blogger conditional tags, which gained a lot of power with the new Blogger. I'll explain some creative uses of these (even in Javascript), but first, a look at these tags for those who don't know. Skip the next section if you do know.

Conditions, conditions

The simple format of the new Blogger conditional tag is:

<b:if cond='--condition--'>
    <!-- codes to execute if True -->
<else/>
    <!-- codes to execute if False -->
</b:if>

That is pretty much all you need to know to get started. The cond attribute can hold any condition in the form of a Blogger data variable, operator (optional) and value (optional). I say optional for the last two because most of the data variables have either of two values, True of False. In this case, you can just check their content with a cond='data:variable' which translates to if true. The <b:else/> is optional too, in which case there will be no output in case the condition is false. Don't miss the forward slash, otherwise Blogger will give an error.

They are explained by Blogger here in case mine didn't suffice. You can take a look at all the layout tags to see which ones you can use for conditions. Comfortable? Let's move on!

Creativity and ingenuity

The first simple trick is conditional CSS. This means that certain parts of your CSS will be executed on certain pages. This let's you style main, archive and post pages separately if you want to. Sound cool? Hehe! There's a catch :P

You'll have give up on your <b:skin> tags (somewhat) for this. You see, Blogger doesn't like adding conditions to those tags, because the 'Page Elements' layout depends on those to draw the widgets and and their dimensions, with any other nitty gritty that you might have added. So, what do you do? Simple! Add your own pair of <style> tags! These won't be checked by Blogger in the Page Elements view, and you can style away to your hearts content.

However, be warned, this most probably 'will' warp your 'Page Elements' view pretty weirdly. If you don't use it too much, like me, then go ahead. If you do, try this. Keep the main styles within the <b:skin> tags, and move over only the conditional styles within <style> tags. You will still see some styles creep in, but they'll be minimum. You can use your conditional tags the same way you use them in your widgets. Nothing changes! :)

That's that for styles. You can't use conditional tags to hide widgets from certain pages. Apparently there can only be <b:widget> tags within sections. Anything else is rejected by Blogger. That little bug has been brought up by Phydeaux3, so you'll be better off using Javascript to fix that.

The next thing is the page content itself. You can literally use the conditional tags anywhere you feel like (except inside sections but outside widgets). You can use it to hide one sidebar, and show a different one. This can be achieved by making two sections, one for each sidebar. Then wrapping each of them with the conditionals, having the required conditions to suit your purpose. It's quite easy when you begin to think of it, and becomes more fun when you start to play with it.

Now the grand finale. This is probably the most useful of uses, and a great way to integrate Blogger's language with one we all know and love, Javascript. If you want to execute certain code on one page, but not on others, there is no good way short of using regular expressions, right? Nope! Again, we bring in the trusty conditionals. Have a look at this:

<script>
//Javascript to put in a greeting on proper pages

<b:if cond='data:blog.pageType == "index"'>
//<![CDATA
document.write('You are on the main page');
//]]>

<b:else/>
var main = '<data:blog.homepageUrl/>';

//<![CDATA[
document.write('You are not on the main page. <a href="'+main+'">Go there</a>.');
//]]>
</script>

See what it does? It'll print out the first message when the user is on the main page, and second one with a link to the homepage on any other page. The variable main gets the value of the main page because it is outside the CDATA tags. Anything outside those tags is parsed by the Blogger parser as tags. Anything inside is left as it is. That means, if you try to put the variable line inside a CDATA segment, it'll get the value '<data:blog.homepageURL/>' instead of getting the actual URL. This is why in my custom dates script, the actual date is passed to the function, and not the tag. This can be your best scripting friend if you want to work with separate page types in your scripts. A simple way to allow multiple functions/codes to check which page it is, is by writing out this code right under your <body> tag:

<b:if cond='data:blog.pageType == "item"'>
<input type='hidden' value='item' id='pagetype'/>
<b:else/>
   <b:if cond='data:blog.pageType == "archive"'>
   <input type='hidden' value='archive' id='pagetype'/>
   <b:else/>
      <b:if cond='data:blog.pageType == "index"'>
      <input type='hidden' value='index' id='pagetype'/>
      <b:else/>
      <input type='hidden' value='search' id='pagetype'/>
      </b:if>
   </b:if>
</b:if>

That (if everything is right) should print out 'one' hidden input tag with the value set to the page you're on. Then you can do a var page = document.getElementById('pageType').value, which will put that value in the variable, and then you can use that variable everywhere and anywhere you want (provided it is global). This trick works superbly, and since the page type is being decided by Blogger tags, there is no way your condition can be broken. This can also be used to hide individual widgetsThey will still load though, hence there will be no reduction in page load time, so you might want to keep that in mind., or other page elements until the pageType attribute begins to work as documented.

Let 'em flow

So, those are the few methods that I've been able to come up with to increase the mileage you get with the conditional tags. You're limited only by your creativity ofcourse. Give me a buzz in the comments whenever you come up with a cool new way of using them, and I'll gladly link to you! I'd love to see what people can come up with :)

Get 'em creative juices flowing!

Resolution independent designs and standards

Making resolution independent designs becomes the focus of web designers when they start to become serious about the pages they work on. Making sure they look near about the same everywhere is a big issue today, and till web standards are followed properly, there is really no proper way to make sure your beautiful custom made template or layout will render perfectly at different resolutions. What do exist are however little loopholes that you can climb through to create the effect of a resolution independent design.

The situation at hand stands that out of the three main browsers being used in the market today, Opera is the only one which has passed the Acid2 test satisfactorilyFirefox Gran Paradiso (Fx 3.0 alpha 2) passes the Acid2 with the help of a new rendering engine.. So you'd think the ideal thing to do would be to make your pages look the best in Opera. But there is a catch! Opera only holds about 3-4% of the browser market. Which means that about 96% of the people using the Internet out there have probably never seen a perfect CSS standards compliant site. Macs have Safari, which is also an Acid2 test graduate, but we all know how many Macs are out there! :( So, who rule the roost here?

Firefox (18-19%) and Internet Explorer (doh! 70-75%) are what most of the people use. They follow CSS standards pretty closely, but not perfectly. Which is why something suited for Firefox will most probably be off in Opera, and definitely in Internet Explorer. IE has been the failure story of Microsoft since day one, with security problems and non-standard compliance. Don't even think of making your pages look good in Internet Explorer. They'll get messed up beyond recognition in the remaining two browsers.I talk from experience of designing over 6 different templates. It might not break in IE, however, but designing for IE is trying to run through a wall. It's hard and fruitless. However, with IE7, Microsoft has been able to rectify the problem quite bitThis template doesn't show up in IE at all. It begins to load, and then just gives up and stop. I have no inclination to find out what the problem is. I'd really suggest people to get a 'real' browser (hint: Firefox).. But these two browsers still have a distance to go.

Where do we go now?

To reach independence from design, there are two basic methods that I know of. One of them is followed here. But before we get into that, a small primer on the two basic layout methods used by designers today. The first one is using Tables. This has been there since web pages have existed I believe. Everything used to be arranged in Table rows, and the width and height attributes tweaked to give you the look you desired. Quite a few sites still use this, and this is probably the only method that works perfectly for IE, Firefox and Opera. The problem? The coding itself. If you look at the source code, you'll see nothing but Table tags. Rows and rows of them. Debugging them can really become a pain, and unless you're a whiz, they're usually one shot templates.

The second way, and the modern (smarter?) way of doing it is using DIVs. DIV elements can be (using proper CSS) made to do your bidding perfectly, and they show up with littleWhatever difference is there will be most visible only in IE. IE handles dimensions and positioning values quite differently. For example it doesn't handle em values well at all. This template uses mostly that and %. You can see the result in IE yourself difference in the three browsers. DIVs contain all three attributes of 'height', 'width', 'position' (left/right/bottom/top) that you'll ever need to position something. Now, onto the two methods themselves. Though I have been guilty of not following them in the past, I am trying to improve visibility and resolution independency of my templates everyday! :)

The first method is following a fixed width design. There is no real trick to doing this. Just use fixed positioning units, usually pixels (px) when setting position and dimension attributes. What you'll actually do is fix everything, which means in different resolutions, everything will show up with whatever pixels you provide, in accordance with whatever pixel spacings the resolution offers. Which means if you use an 8px font size in 800x600, it'll become 4px or lower in 1600x1800, making it virtually unreadable. But a resolution that high is seldom come across, hence if you can ignore the few setbacks, it's a good thing to follow.

The second method is to make dimensions and positions relative. This is done by generally using 'em''em' dimensions are decided by the current font size set in the browser, not the pixels themselves directly. and '%' when defining them. This will scale almost perfectly across different resolutions, however, you'll have to check them up to make nagging little changes here and there. I don't recommend this, because positioning might be fine, but dimensions can really go for a toss, sometimes reducing containers to sizes that can't hold their content. Hence, everything seems to be spilling out.

What I do

What I follow here is a little loophole that I spoke earlier about. I use a part of fixed width, and the rest relative. I have made my BODY tags fluid, so that the page can expand with the window size, but the content is all stuffed in a fixed width DIV at 1007pxThat's the width of the visible part of a page in a browser at 1024x768., since that's the resolution my screen is on, and according to W3schools, is the resolution of choice for almost 60% browsers out there. Then I use 'em', which depend on the font width, to make everything scalable. So if you use your zoom in and out key combinations, you'll see everything scale in and out, with more or less looking the same, just zoomed in.

So you see, there is no real perfect way of making sites degrade gracefully across different resolutions. You just have to find a compromise that suites you better than the others. I hope this will help you make your designs better for those who are still left behind, or who have advanced in resolutions beyond you! :P

Get listed a little quicker

I wanted to quickly throw in a post about how to get your blog changes listed in Google's Blogsearch a little faster than normal. You can do this in a few ways. You might know all this, and might not. If you do, well, congratulations! If you don't, read on! :)

Around the beginning of October I believe, Google released their blog pinging service to the public. It basically provides a little documentation about how to manually tell Google crawlers that your blog has been updated, and they should come running and scan. Google already monitors all top pinging services automatically, so chances are these methods won't help your cause too much. But, it's always a good idea to do it yourself, if not for the viewers, then for your peace of mind.

So, the first way and the easiest, is to hook up to Google Blogsearch using Feedburner. They have a service known as 'Pingshot' under their 'Publicize' tab. This lists out various services that Feedburner can automatically ping for you whenever it checks your feed and sees an update. This is the most powerful thing you can have, with having no work to do on your own, and from personal experience, I can tell you that this does increase your feed readership. Feedburner checks your feed every half an hour, which might be too long for some people. Hence, Feedburner also provides a manual way of pinging them, so that they ping all those services quicker.

The second and harder method is set up your own REST call to Google Blogsearch, or an XML-RPC ping call. These will immediately send off their crawlers to your page (or sooner than normal! :P ) These are slightly harder to get going, especially since Blogger lacks a native pinging mechanism. The documentation can be found here if you're interested!

I personally prefer using Feedburner, since it automates the task. I'd never want to manually go fill up a form after writing a long 'long' post. Too much of a brainwreck! And, tries to manually ping Google using the form they provide didn't yield any results You can see the list of latest crawled pages here. This is updated very quickly, so don't wait too long between reloads, or else you'll miss your site (if it gets there!), so best of luck with that!

Get pinging and get noticed! :)

---

Here's another reason to start using Feedburner for more than offering your feed in all the formats as requested per services. Feedburner now offers site statistics, for free! Yep! And it's quite good, and shows incoming as well as outgoing links. It shows how much traffic has come in from searches, and how much from other sites. All you have to do is add a small Feedflare code to your template to track the stats. The code they offer contains the post permalink tag from the old Blogger, so change it to data:post.url when you put it in. You can hide it later using CSS if you don't want people to see it. They update the stats every 30 minutes (like their feeds). However, there is no per page statistics in the free version. For that, they ask you to upgrade to their Total Stats Pro. But this is good enough for anyone not professionally into blogging, I think. Go ahead, try it out!

Making designs work for you

What is the first thing that catches your eye when you land up on a page? The text? Maybe second. The page title? Close. It's something that's so natural and background-ish, that you've probably never consciously paid attention to it. And that is the mark of the success of the developer. Yes, I'm talking about the design of a web page. If you sit in awe of how a page looks, 9/10 chances are you won't pay much attention to the content, and something else will strike you, distracting you away from it. It's happened to me tons of times, whenever I land up on a beautiful looking page! I see something, then I run off to figure out how it was done. By the time I get it, I've already forgotten what I went to that page originally for. You see? The purpose of the page was defeated.

So! How do you design a page that will keep visitors on it, and make them focus on the content? I'm glad you asked!

Why candy? Why not eye-lollipops?

The first thing you have to understand is that the more flashy, the more distracting. Sure, it's really nice to put up a few things that look beautiful and attractive. Like a really nice background wallpaper, or a shiny widget here and there, maybe a cool little script! But the keyword is few. Never over do something that you can do without in the first place. Analyse the function of something (a graphic/content element), and see if it's dispensable. If it is, don't add more than one of it, in case you really want one.

Your design should divert attention to your content, not away from it, as I said before. So any element you add, should compliment the content. If it's a flashy object, put it as close to the content as you can, so that there takes place what I like to call, an attention flow or transfer. That's when the eyes gently pass from one thing to the object close to it. It's pretty easy to achieve, and I'm sure you've faced it sometimes too. It's time to use that on your viewers.

Realise which spots viewers see first.There are many tutorials on the web which help you pinpoint the 'hotspots'. A few resources to start with are Eyetracker, Web Page Hotspots and Eye tracking. This is important, since you'll want to place maximum content in those places. One good strategy would be to use attention catchers to maintain the flow of attention. This will give you the pleasure of using your eye-candies, and not compromising on viewer attention. It's the perfect ploy! :D And it works to maintain that continuity in your page, and will cause people to read everything and then move onto other things.

Use nice and strong colours to highlight important parts of the content. It doesn't matter if it might break the attention. That's what you're trying to do. Take them out of the monotony of reading simple content, by giving them something related, but not expected! And make sure their attention goes towards it :) It's a tried and tested method.

Simplicity goes well too! You can actually make things as simple as possible, in which case your text will definitely stand out and will immediately catch the viewer's attention. The perfect example for this is Daring Fireball. His site is a beautiful dark gray, with light coloured text on it. No frills attached. Your attention goes straight to the content, and stays with it! If you don't get besotted by the look, you can call it a near perfect design! :)

You must have your greens

Alas, there is no real substitute to good and proper content. But lack of good content can be covered up for to a little amount by coming up with an eye pleasing design, since it'll make viewers stay that much longer, and hence (hopefully) cause them to see something they like. Don't try to substitute for lack of content with good design though, that is sure to fail.

Happy designing! :)

---

Update: This is 'not' something that you should do. I am sure you don't need to be told that :P I found this off Digg.