Query7 » Design

Blogger Template Wizardry

Chinmay Chiranjeeb — Fri, 04 Jun 2010 03:46:49 +0000

Google’s Blogger is the eighth most popular site on the entire Web today, and by far the most popular free blogging site. According to Google, Blogger now hosts over 300 million blogs and publishes 388 million words per day – simply staggering figures. Let’s look at some of the more compelling reasons for Blogger’s popularity.

Google’s services are ubiquitous, and you’ve probably already got an account for say, Gmail, Docs, YouTube or Calendar. So when you land on the Blogger homepage, all you need to do is enter your login info and off you go! No registration required.
It’s powered by Google, so there’s a better chance of placing high on search engine rankings. From an SEO/SEM (search engine optimization / search engine marketing) point of view, that’s quite the big deal.
Users can create multiple blogs. For Web developers or designers with diverse portfolios it’s easier than ever to start your own blogging network.
Blogger has a limited but respectable directory of templates with plenty of options for customization. Inveterate tweakers should clear the afternoon.
Users can create and configure their own templates for upload, or download an existing template, customize it, then re-upload and use it.
Rather than keeping the off-the-shelf yourname.blogspot.com domain, users can register their own custom domain and point their Blogger page to that.

Sure enough, there are plenty of good reasons Blogger’s gained traction the past few years, but it’s become a hell of a crowded field and for anyone looking to grow their audience it’s increasingly hard to stand out.

The fact is, even if you’re posting killer, must-read content you’ve lost the lion’s share of readers before their first click with a page designed from a yawn-inducing Blogger template.

So besides great content, you’re going to want a template with distinctive design. Read on to follow this basic tutorial and create your own fresh Blogger template.

Create an HTML Template for Your Blog

Go to the Blogger homepage and log in with your Google info to create a new blog. With or without a Google account the signup is pretty painless.

If you’re an existing user, you’ll also get the status of your current blogs.

Head to Layout and then Edit HTML

Developers love code, but sometimes even laymen want a peek under the hood. If you’re up for it, just scroll down and click View Classic Template.

Keep in mind that Blogger can only use XML-formatted templates, so you’ll need to create a blank XML file on your hard drive as .xml.

Now add the following code to your XML document:


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Let’s start with the Blogger code to add a header element.

Generally, Blogger code starts with

Now we’ll add the title of the blog and post:

<data:blog.pageTitle/>

Referencing the blog skin:

And template details:

http://www.sourcebits.com
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- */

Now let’s hide the default navigation bar.

/*-- (Hiding the navbar) --*/
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

And add some custom CSS to stylize the blog.

/*-- (CSS for Blog ) --*/
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
margin:0px;
padding:0px;
background:#dedede;
}

:focus {
outline: 0;
}

.clr{
clear:both;
}

.wrap{
margin:0 auto;
padding:0px;
min-width:1200px;
}

.head{
background:#cde3e4 url(your path to header image) repeat-x;
margin-top:-1px;
}

]]>

If you don’t have a domain to host images then you can use Picasa, Flickr or any other image hosting services. Just make sure that image viewing permissions are set to public.

To generate feeds and archives for your blog:

You can also insert external JavaScript files:

Now let’s replace the default Blogger favicon with a custom jobbie that suits our taste.

Include your HTML code from the blog template created earlier and let’s add a widget to your header.

Note that you can use multiple widgets in the template but they should have unique id= ‘Your Unique ID’ and maxwidgets=’No of widgets’

Now add navigation:

And the conditional statement to show/hide navigation is:

And include feed links:

To display content only on the main and archive pages, include this tag with your content:


<1-- Your Content for Home and Archive Page-->

Phew! Almost there. Now after saving the XML file, it’s time to upload to Blogger.

Back on the Layout tab, under Edit HTML, you’ll find:

After uploading, save the template so now you can edit the file online and preview changes as you go.

And feel free to experiment! You can always hit the Clear Edits button to revert to the last saved version.

Let’s take a look at an outline of the page elements used in the template:

We can also place widgets with just a few clicks.

Clicking one of the Add a Gadget links drops you into a vast pool of Blogger and third party gadgets. Pick a gadget and add it by clicking the +, however many suit your needs.

And… VOILA!

Here’s a sample template we did up awhile ago with a basic but unique design, just FYI.

http://macdevelopmentbits.blogspot.com/

Feel free to drop us a line with any of your Blogger templating issues. We’re happy to lend a hand. For that matter, we’re keen to discuss any Web development projects you’re interested in. Get in touch any time!

HTML Email Compatibility Across Mail Clients

Prakash Mohanty — Mon, 17 May 2010 00:29:25 +0000

Lots of compatibility issues occur when HTML developers deal with HTML-formatted emails generated using server side languages like PHP, PERL, JAVA, etc. in their projects.

From time to time you’ll find the odd gobbledygooked message in your Web-based email app, but generally speaking HTML-formatted messages render flawlessly on the Web. On the other hand, desktop mail clients such as Outlook on Windows, Mail.app on OS X, and the rainbow flavors of desktop Linux (Ubuntu, Centos, and so on) routinely have rendering issues with HTML-based email.

Despite the incredible advances in modern software, why does this continue to happen?

The answer is quite simple: certain mail clients ignore certain HTML tags. Now there’s no universal rule as to which ignores what, but the more you code the more you’ll learn, so for now let’s take a look at one case with Outlook.

For many users, email ‘stationery’ conjures up late 90s memories of Incredimail and a general, unsavory n00bishness. But for marketing purposes a well-designed mail template, consisting of a stylish background image, thoughtful font selection, layout and copy equates to sales. Perhaps thousands of people – from prospective clients to the media – will view mail on this template and associate it with your corporate brand, so perfection is key.

Now let’s focus on the background image. Many HTML developers will begin by putting CSS styles in the header of the HTML email directly, or when that fails try working around the problem using div tags and inline CSS. But either way the results are borked. Why? Because Outlook ignores the CSS property “background-image”.

After so much trial and error, the solution we finally decided on was a pure table-based layout with inline CSS – with the CSS being restricted to each individual table cell since Outlook does not ignore those. We’ve found this not only renders properly in Outlook, but all the other major desktop and Web clients, too.

And here’s how good it can look.

For your reference, here are few examples of HTML tags that are compatible with almost all desktop and Web-based mail clients.

CSS style property -

word-wrap: break-all;

With the absence of a background tag, images can be used inside the

and

tags.

Happy HTML email coding!!

See, Yes! Yes! – GO

Dilip Shukla — Tue, 09 Dec 2008 21:35:10 +0000

ID vs Class Vs Tag Vs Pseudo selectors

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources

See, Yes! Yes! – STEADY

Dilip Shukla — Wed, 12 Nov 2008 10:27:58 +0000

Hello Readers,

Here I am with second part of 3-part CSS primer.

In my previous post, I briefly described importance of planning and resetting CSS, some possible ‘Do’s and ‘Don’t’ s. I believe in outlining thing and let your mind fly in free space. My outline for CSS primer can be visualized by connecting following dots.

Object Oriented approach:

Adopting object-oriented philosophy is always beneficial for development…and CSS is no exception. How? I tell you. Object oriented approach in terms of CSS translates as knowing and taking advantage of parent-child relation in DOM and inheriting CSS rules, by designing CSS optimized way, less repeated and multiple times used code indicates more object oriented CSS.

Progressive Enhancement AKA Graceful degradation:

There is a term progressive enhancement, that is “incremental addition of elements”. Which means we should categorize content and content containers, parametrized by accessibility of content, covering target audience.

We should first care about, any content should not be missing which our target audience must get, by keeping in mind what would be possible access terminal for navigating the web page. e.g. PC, PDA etc. It includes low configured and not up to date browsers. Afterward one can enhance page by adding CSS and Javascript cylinders.

Categorization, flexibility and re-usability:

By thinking this way we can get mostly auto categorized content. From here we can start implementing re-usability. We can aaply progressive enhancement with CSS by dividing one big-fat-utf8 CSS into multiple CSS files. e.g. IE specific CSS and print CSS and also CSS responsible for particulars like color and typography css.

If project demands we can keep ‘themes’ too in mind. CSSZenGarden is extreme example of this. To implement this we should deeply think about DOM structure, basic skeleton X/HTML and naming of class/ids. naming of class/id should be content dependent, not on how its going to render or where its going to positioned.

Always try to minimize the unnecessary tags. e.g. wrapping everything in a div or adding extra wrappers for display purpose only. I suggest to add extra divs to stylize things by Javascript in run time, e.g. rounded corners, or multiple background images, or its not always required to wrap ul and set of inks or img tags into any box level container like div…since CSS rules can be applied on any X/HTML element.

Use multiple class and loosely coupled classes massively. Multiple classes help to increase re-usability.

example:
Multiple class

use of ‘!important’ keyword is very useful in case of using multiple class, where we might need to override few css rules. but ‘!important’ should be used carefully. Personally I prefer to use ‘!important’ with loosely coupled classes declared against inherited property.
e.g.: following will always work disregarding its position in CSS file against inherited bold property of font.

font-weight:normal !important;

Code Management:

Organize your code in properly commented grouped sections…e.g. header, body, navigation, footer etc.

here we know the importance of neutral class names. If naming of CSS classes will be accoring common template not according page wise us its easy to group related CSS.

example:

What if we name common right panel of web page ‘homecol’ without thinking too much? either we have to rename it on every page its appearing and duplicating same css to render it identicaly, or we have to use ‘homecol’ even in contact page.

After all…

Always try to understand any rendering issue, before throwing some random code to increase vertical length of your CSS file. Every browser supports CSS (If I am not wrong 90% identically) if application of CSS is pure and CSS rules are plugged in right socket. So think twice before re-searching on Google for some hacks to override something which might fill dirt on your accessible web page. Ya of course there are many of known bugs (e.g. IE6 PNG) but id doesn’t mean every issue, you are facing is a bug and you can’t overcome them until import some hack from Venus.

The last word before I end this second post from 3 part series on CSS, I want to say is…

Not every validated web page is accessible or ideal but every invalid web page is bad. So always try to validate. First by validating from validators and then by common sense, because technically a page with thousands of nested DIVs are valid. button stimulated out of div is valid. But question is… Is it really?

Think on it, till I am cooking third post CSS Go

Philosophy of Object Oriented Programming and Software Design

yaapa — Sat, 01 Nov 2008 14:33:25 +0000

Now, I am no expert in OOP or software design, but here’s a philosophy which might help you make the most of what you know about OOP and software design. I have observed and have read reports that people absorb most information when it’s presented in lists, preferably bulleted. So without any further ramling, I present you my bulleted philosophy of OOP and Software Design.

It’s not how much and what you know; but what you can do with what you know, which’s important.

Ability to implement Polymorphism, Inheritance, private, public namespaces, static methods etc is no guarantee you are a good OO developer.

OOP is useless if you don’t use it to create good software design (architecture).

Using packages, classes, etc does not guarantee good software design.

When designing your software, think of it as an electronic device you are designing.

Sketch out the ‘electronic device’. Label the different components, list their functionalities.

Stay hungry, stay foolish.

That’s it for today. I hope you are blessed with more knowledge, and the ability to make the best use of them. Adios!

See, Yes! Yes! – READY

Dilip Shukla — Tue, 28 Oct 2008 15:58:08 +0000

In today’s web arena, CSS has proved its importance in rigid way. Web content is no more targeted to web browsers only, Web content is been served for a verity of media now days. To efficiently handle such situation CSS plays a very crucial role.

In order to extract maximum pulp from CSS fruit there are few things needs to keep in mind. Although rule of thumb is efficiency is directly proportional to experience but I’ll point out few options 3-part post series See, Yes! Yes! – READY, See, Yes! Yes! – STEADY and See, Yes! Yes! – GO. which can help novice CSS developers to take right diversions.

All of following points are optional and one can modify them according to needs and/or simply drop the idea.

Big Picture:

Planning is a must for mid or big projects…for small projects one can instantly start coding.

While coding for new design, web designer must analyze the design mock-up and slice the design by keeping in mind the facts which are resultant of observation and guideline of website/blog/web application.

e.g.

What portion of design mock can be translated by using CSS rules instead of image?
Whether background is repeating? Design is fixed width or liquid?
What element of design is going to change dimension dynamically?
Re-usability issues needs to be addressed so back-end developer (if any) don’t face any difficulty to plug reusable components.
Sliced images need to save as optimized for web, as PNG if element is using alpha transparency and if it uses square shape without tranparency JPG images work better in most cases.

CSS Reset:

Purpose of using CSS Reset is to neutralize default rendering of browser, in order to equalize rendering of web page across different browsers.

Its entirly optional for web developers whether to use one or not. Even if Web Designer is very keen to use one, s/he must consider the big picture where the CSS is going to be used (including some future prediction).

In few cases i prefer not to use CSS reset as in Blogs where content is generated by user and web designer don’t have exact control over X/HTML tags.
Following is my reset.css. I have cooked this starter dish by borrowing some spices from here and few from experience.

/* Common CSS and CSS reset Start */ html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; } /* remember to define focus styles! */ :focus { outline: 0; } /*links*/ a{ text-decoration:none; } a:hover{ text-decoration:none; } /*List*/ ol, ul { list-style: none; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } /* Common Display Rules*/ .block{ display:block; } .none{ display:none; } .inline{ display:inline; } .clear{ clear:both; } .relative{ position:relative; } .absolute{ position:absolute; } .floatleft{ float:left; } .floatright{ float:right; } .center_div{ margin:0 auto; } .bold{ font-weight:700; } .normal{ font-weight:normal !important; } .underline, .underline:hover{ text-decoration:underline; } /* Headings*/ h1, h2, h3, h4, h5, h6{ font-family:Arial, HelveticaNeue, Helvetica, sans-serif; font-weight:700; } h1{ font-size:18px; } h2{ font-size:17px; } h3{ font-size:16px; } h4{ font-size:14px; } h5{ font-size:15px; } h6{ font-size:13px; } /* Font Size */ .fs8{ font-size:8px; } .fs9{ font-size:9px; } .fs10{ font-size:10px; } .fs11{ font-size:11px; } .fs12{ font-size:12px; } .fs13{ font-size:13px; } .fs14{ font-size:14px; } .fs15{ font-size:15px; } .fs16{ font-size:16px; } .fs17{ font-size:17px; } .fs18{ font-size:18px; } .fs19{ font-size:19px; } .fs20{ font-size:20px; } .fs21{ font-size:21px; } .fs22{ font-size:22px; } .fs23{ font-size:23px; } .fs24{ font-size:24px; } .fs25{ font-size:25px; } .fs26{ font-size:26px; } .fs27{ font-size:27px; } .fs28{ font-size:28px; } .fs29{ font-size:29px; } .fs30{ font-size:30px; } /* Remove Inherited Style*/ .no_margin{ margin:0 !important; } .no_padding{ padding:0 !important; } .no_border{ border:none !important; } .no_dec{ text-decoration:none !important; } /* Common CSS and CSS reset End */

Hmm…I think its a good breakfast.

So guys allow me to take a break…I’ll be digging further into CSS mine very soon on my next post See, Yes! Yes! – STEADY .

A Tableless Table – Exploring the power of CSS3

Chinmay Chiranjeeb — Mon, 27 Oct 2008 11:26:55 +0000

The recent browser versions like Firefox 3, Google Chrome, Internet Explorer 8, Opera 9.5 and Safari 3 are now coming with a great and brand new support: CSS3. Some of the new properties are introduced and here I am going to describe the table value for the display property.

To align data in a tabular structure we can use a common table using the HTML tags

, ,

nonetheless we all know that by using that we are violating the latest web standards, right?But hold on for a second. I’m just going to introduce you a hot new way to code it using nothing else than div tags with the great CSS3 and the data will appear just like a table. Believe, that’s true!

Here is an example:

Some Page

Web Development PHP & MySQL Ruby on Rails ActionScript 3.0 / Flash / Flex / Adobe Integrated Runtime Amazon Web Services Zend Framework JavaScript / AJAX XHTML & CSS Scripting Content Management System

Windows Development

Mac & iPhone Development

Screen shots:

Firefox 3

Google Chrome

Internet Explorer 8

Opera 9.5

Safari 3

Internet Explorer7

Working Principle:
The display property specifies a range of table-related values to make elements display and behave as they were table elements.

The new available display values for drawing tables are:
table to make the element behave like a table element
table-row to make the element behave like a table row (tr) element
table-cell to make the element behave like a table cell (td) element
table-row-group to make the element behave like a table body row group (tbody) element
table-header-group to make the element behave like a table header row group (thead) element
table-footer-group to make the element behave like a table footer row group (tfoot) element
table-caption to make the element behave like a table caption element
table-column to make the element behave like a table column (col) element
table-column-group to make the element behave like a table column group (colgroup) element

The table element in HTML is a semantic structure: it describes what data is. Therefore, you should only use the table element if the data you are marking up is tabular – for example, a table of financial information.

On the other hand, table value of the display property is simply an indication of how something should look in the browser – it has no semantic meaning. Using a table element for your layout tells the browser, “This data is tabular.”

Also we have to take care of, not to use display: table; property on a bunch of div elements when the data needs to be present in tabular format. Else simply avoid to use this property.

The main advantages on using this new structure are:

Place the data in tabular manner without violating the latest web standards.
No need of specify the cellpadding="0" cellspacing="0".
No need to make the border="0".
No need to make the margin and padding 0 of table, tr, td.
Print the page in tabular format without wired.
No need to specify the height, as the content added it will automatically adjust the height of the row and columns with specified background.

As we’re not living in Wonderland, we also have some disadvantages, as follow:

Only latest browsers support this property.
Mainly IE 7, IE6 are not supporting this property. They show the data in wired manner.

The solution would be to use this property only when we are going to develop a website for latest browsers and just ignoring the older versions. But as the statistics shows, most of the users still using IE6 and IE7.

To implement this in realistic world won’t be feasible to use CSS3’s advanced layout features for at least 4 or 5 years, once users need to upgrade themselves from the stone age of Internet to our beautiful high-tech development world.