Yes, WordPress is undeniably the current king of blog platforms- but Google’s Blogger is certainly a top contender. Some of the best blogs online are Blogger blogs, such as the addicting Post Secret, the beautiful Orangette, the official Twitter Blog, and- of course- all of Google’s blogs.

Now, while there are already many beautiful Blogger templates out there, there’s always room for more. Here, my tips on getting started designing your very own templates for Blogger:

Dissect an existing Blogger template.

This, of course, being the advice I give anyone wanting to learn how to code any type of theme or template: learn from something already existing. It’s how I- and many other designers- started. A quick way to do this is to click on the “Templates” tab in your Blogger dashboard:

Select any of the templates listed- best to stick to a simple one, of course. Then click on “Edit HTML”:

From here, you can copy and paste the source code to your favorite code editor for further dissection.

Get to know the Blogger layout tags.

One of the best things about Blogger’s templates is how simply their tags are coded. For example, the data tag for the URL of your homepage is “homepageUrl”. Spend some time reading through Blogger’s Layouts Data Tags page. There’s also a CSS guide of sorts available for download in PDF format that you might find helpful.

Ask for help.

Sometimes the best place to learn is among other Blogger developers and users. For that, you can’t really beat the Blogger Help Group, which is a goldmine of information for any Blogger user, developer or not. While you’re at it, visit the Blogger Help YouTube Channel for some good, though very basic, video tutorials.

Get inspired.

Learning to design for any new template system can be daunting, so don’t let yourself get discouraged. Check out some of these wonderful Blogger template designs others have made:

• bTemplates
• Final Sense
• Fresh Blogger Templates
• Yummy Lolly

Do you design for Blogger?

This week on Friday Focus: websites featuring worlds that will fit right in your browser. It’s an interesting trend and a good exercise in 3D modeling and illustration.

Designs of the Week

A very beachy color scheme here to match the featured image. I really like the treatment done to the buttons, but I wish the style carried over to the other form elements below. The logo’s really interesting, isn’t it?

I really love the dark gray mess of icons below the very colorful world above it. But really, every illustration on this site is superb.

Very simple image-centric design, but the presentation is excellent: clean, full-screen, AJAXy.

The header image slash world serves as interactive navigation for the site, but there’s also a “formal” navigation menu if the former is too intimidating. As usual the Japanese make use of cuteness (“kawaii”) to communicate ideas, but if you look closer and browse further, you’ll find great attention to detail, usability, and all.

A very straightforward portfolio that is peppered with tiny illustrations as you scroll down. I wish for more quirkiness, but only by a little bit.

Very blue, very clean, very pleasant. I love that the world is a more creative representation of the original logo. Well-done custom lightboxes everywhere.

This site looks very similar to the previous one, but it’s very distinct at the same time—in fact it’s bold rather than clean and calm. I like that the upper half of the page is basically an animated poster, and if you’re curious about further details, you can find them below, in the equally fancy footer.

Social Media Weekly

Design – Top 10 UX Myths

Programming – Konami Code: Overview, Examples and Best Practices

Productivity – 10 Awesome Websites That Help You Discover the Best Web Apps

It's time to get to work on our HTML5 chops. We've had plenty of theory. Now let's get to it.

Here is the code that we are going to work with. Take a minute to copy and paste it into a text editor and give it an html extension. Once you've done that, go ahead and give it a spin... Looks nice doesn't it. That's your proof of concept. It works. Now let's go through it section by section.

DOCTYPE

The doctype is easy now. Just specify the technology that should be used to render the page. For now all you need to use is html. It's still a pain in the ass to serve a page as xml so forget that.

Script

We don't need a full script tag anymore either. The default type is Javascript, yay. So what is that big block of Javascript then? It's for the IE's go figure. Unfortunately IE won't recognize those as CSS elements unless we do that. Stupid, I know, but relatively painless.

Style

Did you notice anything different about the style tag? Right. No type. Guess why. Right. The type defaults to CSS. Thank the W3C for making our jobs at least a little more efficient. That first line of CSS is important. You have to set the HTML5 elements to display:block or they will render as inline (at least for now). All that other stuff is just there for your benefit but it isn't required, so we'll skip it.

Part 1 Conclusion

The W3C has done a great job of simplifying syntax in HTML5. Apart from the various IE fixes it's quicker to write than ever before. Now go, go and look at your HTML5 page and be in awe.

As web developers, the browser is essentially our "canvas"- it's where we spend most of the testing stage of our development work. Which is what makes these browser tools so useful: not only do they help tremendously when we're tweaking code and troubleshooting, they can also give us insight into the coding of other websites. You know, for moments of "inspiration".

Firebug

Example of Firebug in action- on Devlounge!

Firebug's tagline is "Web Development Evolved"- and indeed, if you use Firefox and you're a web developer, this is almost essential. It's an extension for Firefox, so it works on any platform that runs the browser, and it allows you to do everything from inspecting and editing a site's HTML and CSS, to exploring the Document Object Model (DOM), to- my favorite of all- debugging, executing and logging Javascript.

XRAY

The black window is XRAY. This is how it looks when you first open it on any page.

XRAY in action!

XRAY from Westciv is an elegant browser tool that you install as a bookmarklet and use to get more information on any element on any website. In the example above, I've clicked on the Devlounge logo. XRAY highlights it (by darkening everything else), gives me the logo size, inheritance hierarchy, and other specifications. Very awesome. Works in IE6 and above, and all Webkit and Mozilla based browsers.

Web Developer Add-on

The menu you get when you install the extension.

It's these types of add-ons that have most developers using Firefox despite all the other great browsers out there. The Web Developer Add-On (currently at Version 1.1.8), as you can see from the screenshot above, installs an additional menu on your browser that allows you to instantly disable CSS styles, view CSS, and more- not as powerful as Firebug or XRAY, but very quick and gets the job done.

IE Only Tools
If you use IE for development testing, check out these tools: IE Watch is very similar to Firebug, featuring things like HTTP and HTML analysis, and including useful goodies such as instant screenshot captures, window resizing and transparency control. From Microsoft there's the Internet Explorer Developer Toolbar - which is exactly that, a toolbar you install on IE that lets you inspect DOM elements and view HTML and CSS among others.

What browser tools do you use for web development?

Because being a designer comes before being a developer for me, I'm the first to admit that there's a lot I need help with when it comes to programming. Which is why I'm so grateful for the wealth of resources on the web. Internet, I love you. If you're looking for some good development help and advice, here are some places to turn:

Stack Overflow
Tops the list for me, and anyone who uses Stack Overflow knows why. Their FAQ reminds users to be "nice and honest"- and from my experience, almost all the developers helping out here are. Questions and answers cover a range of programming topics, from C# to jQuery to plain old HTML. The first place you should look with your burning programming questions.

Yahoo! Answers and WikiAnswers
Sure, there's a lot of junk on Yahoo! Answers, but the truth is that I've found help on quite a few development topics here. To go directly there, go to Computers & Internet » Programming & Design. Another similar site is WikiAnswers, which I've found deals more with general programming questions rather than specific ones.

Ask Metafilter
It costs $5 to sign up for Metafilter, and you have to be a member for at least a week before you can post a question in Ask Metafilter- so this might not be the best place to go if you're not a member and need your answer immediately- but I do think it's worth it. Whether or not you decide to join, browsing their archives is free, and you'll find a lot of information tagged Programming.

CodeProject
This site has enough development related articles to keep you busy reading for a long, long time- and they're mostly well-crafted and easy to understand. A search through their Forums always produces results for me.

Google Groups
Finally, this is where I turn to if I'm looking for more one-on-one help with a development topic. For example, when I first started accessing the Twitter API, I joined the Twitter Development Talk Google Group, and what I've learned there has been invaluable. And because it's all done by email, it feels less public.

Where do you turn for programming and development help?

Web publishers and developers today are luckier as they can enjoy so many advanced and affordable tools readily available on the internet in upgrading their websites. One of these is the menu maker which allows users to provide a site to their visitors that can easily be navigated when searching for specific categories.

The AllWebMenus is a popular name when it comes to creating menus. It is a DHTML/JavaScript menu maker that can be used even by an amateur web master or publisher. Whatever type of menu you want, it can help you create one that suits your style. No need for any experience on Dynamic HTML or JavaScript as long as you follow instructions correctly.

AllWebMenus is capable of creating different types of menus in absolutely unique designs and shapes such as the popup, hidden and drop-down. For the drop down menu, you can customize it to be the vertical or horizontal type and according to the designs you like at a very minimal fee. You can choose whether you’d want your menu to remain visible while scrolling, feature static or animated images, borders or be the movable type. Users also have a choice when using special effects such as the CSS, AJAX and the sliding effects.

The best part is the availability of attractive themepacks and templates you can use, many of which you may have not seen before on websites. They boast of great color combinations very unlike the usual white background you see on many sites. Additionally, you won’t have to worry about compatibility issues with platforms because this tool supports the DHTML of all platforms – Windows, Mac and Unix. It also works well with all browsers such as the Internet Explorer, Firefox, Mozilla, Safari and Chrome.

It’s simple to create a menu using DHTML or JavaScript as you only need to apply the tree-like approach. Customization can then be achieved using several features via the Properties Pane or by selecting a predefined look from the theme gallery. When you have finally completed your settings for your menu, it’s quick to do the finishing touches. You just use the Compile menu and Link menu commands so that your newly designed web menu shows on your web pages. It’s really that easy. No complex codes needed, just your patience and creativity.

This tool, you should know, can help in search engine optimization as well through its sitemap feature. It lets you create an optimized page with all the links found in your menu. All you need is to add a link to this page from your site’s index page and the search engines will be happy to crawl all the URLs in your menu.

Indeed so many amazing things are happening these days on web development and this AllWebMenus menu builder is definitely one of them that should not be taken for granted. If you’d like to increase your site’s traffic and earn more profits, you have to take a closer look at your menu and consider using this latest menu builder to achieve your goals. This is truly a must have tool for any web developer.

(Sponsored Post)

This week on Friday Focus, we're featuring light on dark sites with little to no use of color, just the neutral gray, brown, and black.

Designs of the Week

Clean, dark, blocky one-page site with just a touch of light blue for accents. I like it!

Nice use of photographs for blurbs, descriptions, and even navigation in the inner pages. And of course the background pattern reinforces the "interior decor" motif.

It's really the details that nail this layout---typography, alignment, and the border effects. Plus, using gray and black is always a good idea for portfolios to let the works stand out.

Another super simple design, but the splatter effect on the subtle landscape background is an interesting combination and contrasts with the minimalist type and layout.

You know how sometimes content just dictates what a layout should turn out to be? I feel this is one of those times.

Love the texture, love the fonts! Except for the slogan at the top left---the designer could've gotten away with something more ambitious for that little blurb.

Social Media Weekly

Design - Beautiful sets of environment and nature icons
Icons that'll make you go green.

Design - 59+ Amazing (and jaw-dropping) web design-related lists with titles that will rip your face off, blow your mama's mind, and make you cry under the crushing pain of their inspiration
A list of lists. Hilarious!

I'll admit: I love video games. From my "first love" Space Invaders, to various Nintendo games in my formative years, to spending hours with my husband playing Civilization on our network, I'm a gamer through and through.

There's a downside to playing too many games, of course- they're notorious time-suckers, and if you don't watch out, can kill your work productivity. But some types of games can help you develop certain skills- and I present them to you here. Also, keep in mind that all these games will improve your problem-solving skills. Ready?

Plants vs Zombies
What it is: Defend your home from hordes of Zombies by placing plants in outside areas of your house.
What it improves: Based on the classic "defend the tower" game formula, PVZ (which is what addicts like me refer to it as) requires developing strategies to ensure the security of your home. When you work with code and programming, security is always an issue- and applying basic security methods learned from the game can help.

Cooking Dash
What it is: Help Flo cook dishes and run several restaurant kitchens against the clock.
What it improves: Cooking Dash is a time management game, so that's what it should help you with: prioritizing what's most important, and scheduling your to-do list properly so that you get the most productivity. It's all about working smarter, not harder.

Fairway Solitaire
What it is: It's solitaire with a twist: you're playing on various golf courses, with wild-shot cards and "clubs" you collect.
What it improves: Most card games help you develop your mathematics skills, and Fairway Solitaire is no different. Trying to figure out how to count how many of which cards are left covered, and which cards to play, can really work your analytical skills.

The Sims 3
What it is: A life simulation game, where you create and develop characters, control them, and develop relationships.
What it improves: This awesomely addicting game is great for improving your micromanagement skills- and, because a lot of the game deals with developing relationships with Sims who aren't necessarily friendly, it can help you improve your interpersonal skills.

World of Goo
What it is: Use "goo balls" to construct things like bridges and towers, defy gravity, and get to the pipe in the sky.
What it improves: That this game is all about physics becomes obvious within the first few minutes of playing it. Because it has you building across chasms and cliffs, it's also good for improving structural planning.

What are your favorite problem-solving games?

It's time for another five free fonts, and this time I'm featuring a style that's very close to my heart. I got my first typewriter when I was seven, and still have a small (but very loved, and very well cared for) collection of antique typewriters. Using typewriter fonts in design work can produce wonderful results- especially for vintage designs or distressed styles. Here are my top five typewriter fonts, showcasing some of my favorite quotes. And they're all free, so download away!

Carbon Type by Vic Fieger tops the list, mostly because I think this is the one I use the most. It's nice and bold, making it a good choice for logo or poster design, and has just the right amount of "dirtiness" to it, so that it looks like it was, indeed, typed on a piece of paper with a sheet of carbon paper (remember what that is?)

If you look closely at Vintage Typewriter, you can see that it looks like the letters have been typed on textured paper- very important if you want to avoid that "typewriter computer font" look. This one's a little cleaner than Carbon Type, but very well executed and vintage without looking too distressed.

Splendid 66 is what I use when I want something a lot cleaner than the typical typewriter font. This one reminds me a little of type produced on an electric typewriter (also in my collection!), and because it's so clean, it's much more readable than the other fonts here.

Mom's Typewriter is the classic old typewriter font, nice and dirty and perfect for mildly grungy design work. Its letters are large and round, but because of the amount of "dirt" on this font, it's best suited for larger elements such as headlines and announcements.

Finally, Kingsthings' delightfully named Trypewriter is described by its designer as a "deconstructed typewriter face". Made with wonderful attention to detail, Trypewriter is a little more uneven than the other fonts here, with a nice decaying effect. It is nevertheless clear and easy to read, even at small sizes.

Do you use typewriter fonts?

Although I understand why potential clients might dislike the thought of single page sites, they can often be the best implementation choice and many sites prove that less can equal more.

A short while back, we chose to redesign & restructure a multi-page site into a single page and our desire for perfection insisted that we account for the IBLs it had accumulated. Ignoring them would have effected human users as well as search engines.

So we put together an htaccess file which I am now presenting to you. It was necessary for that project, but I think it can surely benefit all single page sites as a cherry on the cake.

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} -f
RewriteRule ^.+\.(css|js|png|gif|jpg)$ - [L] #Include file extensions as needed
RewriteCond %{THE_REQUEST} !\ /(\?.*)?\  [NC]
RewriteRule . /? [R=301,L]

What does it do?

In a nutshell, the script does away with 404s so that any attempts at visiting sub-pages get redirected back to the main page. Doing so...

1. Cuts down design time otherwise wasted creating 404 pages.
2. Improves UX by saving users from dealing with needless 404 pages.
3. Protects SEO value being lost on IBLs that point to 404 pages.
4. Does away with the non-canonical derivitive of the site's url (i.e. example.com/index.html).

Is it really useful?

Yes! Before setting out to publish this article, we did a little check on just over 100 randomly selects sites of the 800-odd listed at One Page Love handled non-existant pages. 85% returned 404s, suggesting that the idea was only considered by a few!¹

Summary

Clients are easily pleased with visuals and have little idea about technicalities. As their developer/designer, you're being trusted to do what's best for them. So, even if they don't understand or appreciate it, applying this htaccess file will definitely add to the perfection (which you should always be delivering).

Have you ever develop a single page site? Will you find this useful? Be sure to let me know as I'd love to hear about it.

This entry was written by Fahed Bizzari. Fahed is a British-born entrepreneur and the master-mind behind Online Associates, a newly created internet consultancy in the UAE trying to revolutionise the Middle East's online landscape.

1. Download the results of this survey here [↩]

It's Friday once again and this week on 'Focus we're looking at very "domestic" looking sites, like they were put together with fabrics, thread, and craft supplies!

Designs of the Week

This site is a prime example of a successful collaboration from concept to branding to execution. "Stitching" together a feed is a great metaphor, and consequently a great brand name, and now a great site design. This site is cheerful, has the right amount of texture, and will leave a good impression on those who visit.

Beautiful typography, color combinations, and graphic details. The etched text effect here doesn't look forced as it fits the look perfectly. Perhaps the only thing I'm not 100% keen about (just 99%) are the icons used. They're a bit impersonal and out of place considering how homey and crafty looking this site is.

Now this is what you call coming up with an idea and running away with it! The use of real fabrics, embroidery, and other sewing materials are just a joy to look at.

Great use of whitespace in the header. The image carousel is great too---gives a nice, 3-dimensional feel to it, even if they're just images. And the zigzag edge effect (like they were cut by pinking shears) found at the top and bottom keeps the look consistent.

I very rarely feature Flash sites here, but this one's nice enough: it has permalinks, which makes inner pages more accessible and navigable. Aside from the background and broken line borders, the animated transitions for each section of the site look like you're flipping through a collection of fabric swatches, completing the metaphor.

The subtlety of the site's design---subtle hues, subtle gradients, subtle edges---is what makes the look so delightful. And it pays to have a mascot, especially ones that interacts with you. Hoot!

Social Media Weekly

Design - The evolution of web design
The kind of history lesson us web designers need.

CSS - Away With Widths / Use and Abuse
An in-depth discussion about the right way to declare widths in CSS.

CSS - CSS Deconstruction: Atebits
Take notes on all the little details used to built Atebits.com.

SEO - Optimize your crawling & indexing
Google gives advice on optimizing website URLs

I like to print stuff out. Not that I have print outs of every email I receive or anything- it's mostly recipes for testing in my home-based bakeshop. The point is, I am so grateful whenever I print from a website with a print stylesheet. Imagine not having to print out pages and pages of huge banner images or ads, or resorting to copy and pasting into a separate document!

If you don't use print stylesheets yet, here's a quick and easy way to get started:

Create a new stylesheet.
Save it in the same directory as your other stylesheet(s) as "print-styles.css".

Don't display unnecessaries.
Your visitors usually won't want to print out the header image of your website (pretty as it may be), so you want to set that to display:none. Other elements you might not want to include are your sidebar, comments, or section for ads. So you do something like this:

Remove borders on linked images.
Some browsers print out images with links with unsightly purple borders around them. So:

Change anything else you want.
You could leave it as is, or vary the styles- such as increasing text size- according to however you think the printed page should look. I suggest testing by printing out a page or two, and go from there.

Once your print stylesheet is ready, make sure to link to it in the header of your website like so:

And that's it! Pretty painless, eh?

Do you use print stylesheets on your websites?