Are you a font fiend? Check out the free downloadable Google fonts!

I love fonts image

Are you a font fiend trying to find free fonts fitting for your fabulous website? Okay enough with the alliteration!

But read on if you want a low down on a few things typographical.

While I’m inclined to use one of the default typefaces such as Arial, Verdana etc. for all the written content on a website, when it comes to graphics and design, more often than not none of those ever really fit the bill. And that’s when I go looking for more.

While there are many resources that you could use, usually my first stop is: Google fonts. A personal favorite, if I may add.

And they are so easy to use! Simply visit their website, go through the huge collection that they have (and are constantly adding to) and hand-pick your favorite ones. The “Preview Text” feature (see #1 in the screenshot) gives you a glimpse into how the exact text that you are looking to pretty up will show up.

So, for example, let’s say you are creating a website header which contains the text “My Pretty Website Header”. That’s the text you’d want to preview:

Choose They Style From The List

A quick scroll down the results will help you narrow down the list; hit the “Add To Collection” button for all the fonts that you think are suitable for the job. Just don’t go too crazy. Or what the heck, knock yourself out. But if you are in a hurry, you could use the filters to the left to hasten the selection process (#2 in the screenshot).

Once you are done shortlisting, click on the “Review” button the in the “Collection” panel that you will find on the bottom of the page.

This will bring up the shortlist side by side for your comparison pleasure.

All right. It’s time to get a bit ruthless now: do away with all except that one font, the most perfect of them all for the task at hand. Actually, it might be a good idea to have 1-2 backups as well.

Let me explain.

The problem with free, downloaded stuff is that when you use it in an image editor, there’s an outside chance that it will not render as expected.For example, if you take your gaze up to the image right at the top of this page and look close enough, you will notice that the “?” shows up a bit weird. That’s okay with me, I don’t need my graphics totally perfect. But if you are a graphics purist, it might be absolutely unacceptable to have that irksome “?” on your website! So just to play it safe, have a back up or two.

When you have whittled down your list (say you chose “Diplomata” and “Niconne”) and ready to download, click on the tiny arrow button on the top right (#3 in the screenshot). Choose the option that downloads as a zip file. When the download is complete, look for Diplomata and Niconne on your computer (the “Downloads” folder or similar), unzip and paste the unzipped “TrueTpye” files into the right folder. If you are on a PC, you should find it here:


That’s it! Now the two latest additions to your typographical treasure should be available for use through image editors such as Photoshop, GIMP, Pixlr etc. You might have to restart the editor for them to show up though.

Now get designing that gorgeous header, will ya!

The All New WordPress 3.8 Dashboard

With the release of WordPress 3.8 the dashboard got a major facelift in terms of color; the components stay largely the same however. You will find a quick before and after comparison down below.

The dashboard prior to WordPress 3.8:

WordPress 3.6 Dashboard

The brand new WordPress 3.8 dashboard:

WordPress 3.8 Updated Dashboard

I remember when I updated to WordPress 3.8, initially I found the all black left hand menu a bit jarring, but gotta say that it has grown on me these last couple of weeks. In fact, now in comparison the older dashboard looks somewhat dated (I guess it is!) and somewhat dowdy.

But dowdy ain’t always bad. Especially when it spells comfort! So if you are resisting the new look and prefer the familiarity and comfort of the WordPress 3.6 dashboard, you can actually go back!

No time travel needed.

What is needed is the WP Admin Classic plugin.

Note: This tutorial lays out how to retain the look of the 3.6 dashboard while running WordPress 3.8. That is to say we aren’t touching the WordPress version, that stays at 3.8 (as it should). Just thought I’d point that out to avoid any confusion.

And here are the steps:

(1) Log into your WordPress dashboard and go to Plugins>Add New
(2) In the search box, type in “WP Admin Classic” and click on the search button
(3) Click on “Install Now” for the wp-admin classic plugin (author: Mindo Mobile)
(4) Once installed, activate the plugin and your dashboard will magically go back to what it used to look like before WordPress 3.8
Note: You can always deactivate the plugin if and when you want to switch to the new look.

But there’s another option. Did you know that WordPress 3.8 gives you several color choices for the admin panel? If you go to Users>Your Profile, you will find various options under “Admin Color Scheme”. If you select the “Light” scheme your dashboard will look a lot like the 3.6 days. Take a look:

Color Options in WordPress 3.8

And here’s what the menu panel will look like with the “Light” theme:

The Light color scheme for the admin panel in WordPress 3.8

Pretty close to 3.6, I’d say!

WordPress Updates And Default Themes Explained & How To Update To 3.8

WordPress released its latest version, that is version 3.8, in December 2013. Accompanying WordPress 3.8 is the very cool Twenty Fourteen theme. To commemorate the new theme I thought it’d be a good idea to provide a brief explanation about WordPress updates and default themes.

To begin with, each version of WordPress will have a default WordPress theme associated with it. The table below lists the default themes associated with different versions of WordPress.

WordPress Version

Default Theme


Twenty Twelve


Twenty Thirteen


Twenty Thirteen


Twenty Fourteen


How often does WordPress provide updates?

WordPress updates are released several times a year. A  jump from WordPress 3.7 to 3.8 represents a major update. If the update is a minor one, instead of jumping a whole gargantuan 0.1 the update will look like 3.8.1, 3.8.2 etc.

What is a WordPress theme?

While the WordPress version refers to the version of the software that’s running your website, the theme is simply the design template that your site dons. Also get this: while each version of WordPress will have a default theme, there is no obligation to remain tethered to that theme.

So let’s say you have installed WordPress 3.8 – in this case your website will show up with the default theme i.e. Twenty Fourteen. But if you feel that Twenty Twelve is more a more suitable choice for your needs, you can choose the Twenty Twelve theme for your WordPress 3.8 website at Dashboard>Appearance>Themes.  Of course, you can go back to Twenty Fourteen (or any other theme) at any point.

Will updating WordPress impact your theme selection?

Another point to note is that the default theme is of consequence only when you install WordPress for the first time on your website. When you are just updating your WordPress website, your theme selection remains intact.

For example, say you are currently running WordPress 3.6 with the Twenty Twelve theme and you update to WordPress 3.8, in this scenario your website will continue to use the Twenty Twelve theme till you decide to switch to another theme. But if you are installing (as opposed to updating) WordPress 3.8 on your website either manually or using an auto-installer such as Quick Install or Fantastico, in that case, your website will automatically show up with WordPress 3.8’s default theme i.e. Twenty Fourteen.

In short, applying an update to the WordPress version will not have an impact on your theme selection.

How often does WordPress release new themes?

As is evident with the information presented in the table above, every major WordPress update is not necessarily accompanied with a new default theme; WordPress 3.6 and 3.7, both, have Twenty Thirteen as the default theme. In fact, the release of a new WordPress theme is an annual event and since the year 2010, the tradition has been to name each year’s theme after the year itself!

How to determine the WordPress version and theme of your website:

When you install WordPress on your website for the first time, using the manual installation method will ensure that the latest version of WordPress is installed.

However, if you choose to use an auto-installer such as Fantastico instead, it will not necessarily install the latest version. In order to determine the WordPress version and theme: log into WordPress, scroll down the dashboard region till you find the “At a Glance” panel (called the ‘Right Now’ panel in some versions of WordPress):


This panel will give you information about the exact version and theme installed on your website.

WordPress update notification

When a new version of WordPress is released, users are notified through the dashboard. Keep a lookout for a notification along the top of the dashboard:

Update notification in the dashboard area

How to update WordPress to the latest version:

You can easily update to the latest version of WordPress by clicking on the “Please update now” link in the notification. Alternatively, go to ‘Updates’ in the dashboard and then click on the ‘Update Now’ button:


Note: If your website has content, please create a backup before attempting an update.

How often should you update WordPress?

Theme selection is purely a matter of personal preference; it’s perfectly okay to run the Twenty Twelve theme even if we are in 2014 (as long as the theme is compatible). But for security purposes, it is best to update to the latest version of WordPress available.

When You Open Yourself To Art…

Street Art For Design Inspiration

One of three things can happen when you drag an out an out tropical person (read:me) into one ski store after another. The said person can grow crazy, throw whine-y tantrums or start to hallucinate about the sun, sand and blue waters. Since it was too freaking cold to even hallucinate about anything warm and since I am trying really hard to “harvest the good” (very wise words by I don’t really know who) in any situation I wondered what I could do to keep my sanity.

Then it struck me..

I was in this really scenic place, surrounded by quaint little shops embellished with charming artwork. What better place than this to get some design ideas?

Now even though I like to build websites, I have to confess that designing doesn’t come naturally to me. I am more into the geeky side of website building. Very rarely does a super design emanate from my imagination alone. More often than not, I need to look at great designs already out there to get a burst of creative inspiration.

And so I decided to pop out my trusty iPhone and capture any design, logo, pattern, color- anything at all that could serve as a design inspiration. Once I started to look around, as in really look around I couldn’t believe the sheer creativity that I found myself surrounded with. I even found a couple of art galleries and some really cool street art.

Who da thunk it eh?

Really, when you open yourself to art, art opens itself to you.

So, as experiment here is what I am going to do. In this post I will put up a couple of designs that I really liked (you know all those images that I clicked) and give a short explanation of why I liked them and then in a subsequent post I will use one (or maybe more) of the designs to make a website header or a logo or any other graphic.

And guess what, you can do something similar the next time you’re feeling all design blocked!

Alright! Ready for some wicked designs?

This was one of the first pics I clicked and I was in a bookstore then. At first glance it might not be obvious why, but take a closer look and do you see the lovely use of colors on the mug? I loved it! A great example of how too many colors don’t always spoil the design.

I also like the notebook cover with its dark colored background with bright text over it.


This next one is one of my favorites. I remember reading somewhere that one should never use more than 3 font styles in a piece of design. For the most part I do agree with that, but there are always exceptions as demonstrated by this cafe display board. 4 fonts and all of 2 colors = simple yet striking!

cool fonts on  display board outside a cafe

This next one looks eerily familiar, does it not? Heck ya! Take your gaze up to utterly web’s header and you will see a similar graphic. That’s the only reason I clicked this one!

Utterly Web's Header Design

These next two were also taken in the book store. I thought the flower pattern embossed on the journal cover was really pretty.

Journal Cover Pattern

What colors! Pattern on a bag

Hows that for some inspiration huh?

Stay tuned for some more interesting clicks in the next post!!

Getting Started With The Google Keyword Planner

(1) Log into your AdWords account

(2) Click on Tools and Analysis and select ‘Keyword Planner’ from the drop-down

(3) Select ‘Search for keyword and ad group ideas’

(4) Enter keyword candidates under ‘Your product or service’. You can enter multiple keywords, one per line. At this stage, just use common sense and conjecture to come up with a few ‘seed’ keywords that represent the content of a particular web page or blog post. Try and get into the shoes (minds?) of your potential audience and think from their perspective. But at the same time your keyword candidates should be broad enough to let the keyword tool generate promising keyword ideas. For example, you could start with a broad keyword such as “Lebanese Restaurant Englewood” and the keyword ideas in the next step might include a more specific terms such as “Lebanese Restaurant Englewood NJ”, “Best Lebanese Food in Englewood” etc. which you could then shortlist (if the search volume is high enough).

(5) You can leave ‘Your landing page’ and ‘Your product category’ fields blank

(6) Under ‘Targeting’ click on the pencil icon to change settings.
Tip: If you click on the pencil icon for the country tab and then select ‘remove’, you can target all locations. However, it’s better to focus on a single country instead of all locations, because it’s unlikely that you will be able to rank for a keyword on the search result pages for all countries. Remember, the results that show up for a particular keyword in one country are likely to be different from the results for the same keyword in another country. For example, say you are in the UK and search for a term such as “online groceries”; Google will try to present you with results that make sense for the UK (as opposed to another country such as the USA).

(7) Click on the ‘Get ideas’ button

(8) Select the ‘Keyword ideas’ tab and you will be presented with the search volume data for your keywords and keyword ideas. You should consider keywords that have an average monthly search volume of at least 1000 for a given country and that have low competition.

(9) Competition analysis of keywords is a bit of an advanced topic. Please know that the “Competition” in the keyword tool is not an indication of how hard it will be to rank your website for a particular keyword. This metric is for those who are looking to buy ads on Google, that is AdWords customers. There are keyword tools that give you the difficulty level for ranking for a particular tool at the push of a button, but they are paid tools such as Long Tail Platinum.

(10) For a free solution – you could use Traffic Travis, which is a free tool. Install the tool and when you are ready open it up and create a new project. Give the project a name and then move on to the next step. Select the “SEO” tab in the horizontal bar and then on the “Competition” sub-tab. Enter the keyword(s) that you want to analyze competition for and then click “Fetch”. You will be prompted to provide your AdWords account login information so do that and then just wait for the results to load up.The “Difficulty” column will tell you how easy or hard is it going to be to rank for a keyword.

How To Make A Website Banner

******UPDATE: I wrote this tutorial a few weeks ago. I have changed Utterly Web’s header graphic since. For reference, here is what the previous header looked like:

older graphic

New tutorial coming soon for the current header! *******

Okay! In this post I will go over how to make the kind of banner you see on this website. The banner is a mix of text, some coloring with a tiny little image thrown in for good measure. You can also check out  how you can make a custom background for your website using GIMP.

But coming back to website banners..

The written instructions in this post will go best with the video:

Pull up any image editor that you fancy but for the purpose of this tutorial I am going to head to Pixlr. It’s a free, online image editor that’s accessible by one and all! So as a first step open up pixlr in a browser tab  by going to and select the ‘Advanced’ option. Then, click on ‘Create a new image’.

Website Header Step 1 in Pixlr


Then, enter the header dimensions. The one I am making is 1021 pixels wide, with a height of 150 pixels. Also, I am choosing to make a ‘transparent’ banner (by checking the “Transparent’ option) which in effect means that that the banner’s background will be the same as the website’s background.

Dimensions for the banner

When you click on ‘OK’ you will find a checkered layer open up in pixlr. A checkered is layer indicative of a transparent layer. On the left you will find the vertical toolbar, see image below. I have marked a few easy to use tools that will come in handy. And we’ll be using them shortly.

Pixlr Tools

Okay now your arsenal is full of some really good tools.

Add Text To The Web Banner

Lets start with the text tool (the “A” in the image above) and use it to make the text “Utterly WEB”. So, go ahead and click on the text tool and then click on the checkered layer. When you do that you’ll be presented with the text dialog box where you will make the selection pertaining to font type, size, color and so on. The image below shows the selections I have made –

Font Type : Cherry Swash

Font Size : 70

Bold Font

Color: #555555

Text Tool In Pixlr To Make Graphics

Then use the text field to type in the text you want on the header. You could even go the other way round. That is, first type in the text and then choose the font-related attributes. In fact, I think the latter will be a better way to do it.

With that done, before we move to the next step please take a look at the ‘Layers’ box on the right hand side –

The Layers Box In Pixlr

The box indicates that the image has two layers as of now. Layer 0 is the default layer which was created as soon as you created the image. The other layer ‘Utterly WEB’ was created when I used the text tool to type in the text on the image. Whenever you use the text tool, a new layer is automatically created. For other tools you will have to create the layer first. See the two icons at the bottom right of the Layers box? The first one is for creating a new layer and the second one is for trashing a layer.

Let’s use the ‘New Layer’ icon to add in another layer. Click on it and a ‘Layer 2’ will pop up-

Pixlr Second Layer

Tip: Double click on Layer 2 in the ‘Layer’s box and give it a name such as ‘background color’.

Okay then! Next, lets make the background for “WEB”.

With the Layer 2 selected in the ‘Layers’ box (just click on it to make sure it’s selected), take your cursor to the ‘Marquee’ tool (3rd tool from the top) and make a rectangle big enough to encompass the “WEB” text.

Make Graphics For Web Banner

Throw In Some Color Into The Header

Now, back in the tool bar click on the color box that you’ll find towards the bottom. and make a color selection in the dialog box. This is the color you want in the background of the text “WEB”.  I have chosen a shade of orange i.e. #e56100. With the color selection done, click on the bucket tool in the toolbar and take it to the rectangular area and click. The image should look like –

Use Bucket Tool To Add Color

Oops! The color has blocked out the text. That’s no good, is it now? Let’s fix that. In the ‘Layers’ box drag down ‘Layer 2’ so that it’s below the ‘Utterly WEB’ text layer. And there you go –

Free Image Editor For Web Design

On to the next layer. Let’s do the description text that appears below “Utterly WEB”. Just click on the text tool again and then click on the image. In the box that pops up, type in the text and choose the font attributes as before.

Font Type : Pacifico

Font Size : 30

Color: #bababa

At this point, the position of the text would probably be all messed up.  So before you hit OK in the text dialog, click on the ‘Move tool’ (second tool in the toolbar) and then click on the text again, drag it around to get its position right.

Add description text to website banner


Superimpose An Image On The Website Banner

We are almost done. All that’s needed is an image in the header. This step is a little tricky, but probably the one that will be most useful in your Pixlr adventures. The ability to combine images in Pixlr opens up a world of options for you! Save the best for the last, eh?

Here’s what we need to do in a nutshell –  first of all have the image you want to use in the banner ready on your computer. Next, we will use Pixlr to open the image on your computer and resize it if need be. Then we select the part of the image that we want to use, copy it and go back to the original image to paste it. Remember, we will paste it in a new layer. And that’s it.

Let me use a different image from the one you see in the current utterlyweb web banner. I’ll use an image of the WordPress icon. In Pixlr horizontal menu, go to File>Open Image and browse to the image you want to use. The image will open up atop the original image (the one we have been working on).

Superimpose an image of the WordPress Icon In the Header


If you look down at the bottom left corner of the WordPress logo, you will see that the image is 440 x 440, which is way to big for our header. I guess a bit of resizing is in order then! So in the Pixlr horizontal menu go to Image>Image Size and make the dimensions 100 x 100 instead. Now click on the Marquee tool in the tool bar and select the part of the image that you want to select. OR you could do Edit>Select All as well since in this case you need the entire image. In the Pixlr menu, go to Edit>Copy.

Now, click on the original image we were working on to activate it. Use the Layers box to open a new layer and with the new layer selected, go to Edit>Paste. You might need to use the move tool to position it right.

Final Pixlr Graphic

Finally, to save the image go to File>Save and in the dialog give the image a name and be sure to use a format extension as well such as PNG (for transparent images), PXD (if you want to save your work in layers and use Pixlr at a later point to work on the image) or JPEG (non-transparent images). Also, choose a format even though you have specified it in the name.  (I recommend you save it as PXD and PNG/JPEG so that you have the option of making changes to the image in case you need to).



And that’s that! Your website banner is all set!

How do you like that, huh?