First lets set up the html buttons. I plan to have 4 versions, the normal state, one with an arrow indicating a dropdown/sub menu another with css3 animation on hove and lastly a coloured version just for fun.

<div id="youtube">
<button class="button">Regular</button> 
<button class="button parent">Dropdown</button> 
<button class="button animated">Animated </button> 
<button class="button color">Colored</button>
</div>

I’ve added the extra class for the differing versions. Let’s now look at the css.

The initial state as follows:

.button {
 border: 1px solid #DDD;
 border-radius: 3px;
 text-shadow: 0 1px 1px white;
 -webkit-box-shadow: 0 1px 1px #fff;
 -moz-box-shadow: 0 1px 1px #fff;
 box-shadow: 0 1px 1px #fff;
 font: bold 11px arial;
 padding: 6px 10px;
 white-space: nowrap;
 vertical-align: middle;
 color: #666;
 background: transparent;
 cursor: pointer;
 margin-bottop:10px;
}

Nothing special here. A solid 1 pixel border with a white drop-shadow to mimic a recessed state. Next we add the hover state…

.button:hover, .button:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}

And a last bit for the active state.

.button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6);
background: -moz-linear-gradient(top, #E6E6E6);
background: -ms-linear-gradient(top, #E6E6E6);
background: -o-linear-gradient(top, #E6E6E6);
}

That’s it for the youtube buttons. If you want a bit of css3 animated goodness add this bit…

.animated {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

And finally make it coloured with this snippet.

.color, .color:hover {background:#E9BB8F;}
 
.color:hover{
background-image: linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -o-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -moz-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -ms-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);}

For the dropdown arrow we’re going to use the what I like to call the zero size transparent border technique, like so.

.parent:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin: 0 0 0 4px;
position: relative;
top: -1px;
}
.parent:hover:after {
border-top-color: black;
}

There you have it, css only youtube style buttons. Play around with the code in the fiddle below, remember with great power comes great responsibility.

cupcake

Poland

tiger lily

romanesco

stripy fabric

the Caribbean

cream rose

fruit tartlets

cantaloupe melon

paper crafts

rice salad

pub

water drop

crab’s eye beans

peach seed

mini flowers

Hello Kitty cake

Bermondsey, London

green peas

flower stall

chocolates

To change the FB cover photo:

• First click to open and save one of the above images to your computer.
• Then in your Facebook account go to your profile page -> Change Cover -> Upload photo.
• Browse and choose previously uploaded image to your computer and then “Save Changes”.

We will be updating this post with more timeline cover photos shortly, so follow as on Twitter or Facebook to be the first to know.

Smashing WordPress Themes by Thord Daniel Hedengren

First let me say that Smashing WordPress Themes focuses solely on WordPress theme development, it is for those who have an adequate understanding of CSS and PHP and are looking get under the hood of a WordPress theme. If you are looking to learn about building websites then this book is not for you.

Having been disappointed with a previous offering from Smashing Magazine I had low expectations going into this book – I shouldn’t have. This book is great, it really gets down to the nuts and bolts of a WordPress theme. Everything from simple tweaks to the default Twenty-ten theme, to creating your own theme. It even touches on Buddypress.
Not only will you learn how to build themes but it helps you with design, layout and planning issues that other books of this type tend to ignore.

Expect to get your hands dirty but don’t be daunted by the technical stuff as the author explains whats going on every step of the way. The explanations are clear and makes things easy to understand.
Again it is for WordPress beginners, if you don’t have some understanding of PHP, CSS and HTML then this book will not be rewarding. However if you do and your are looking to delve into WordPress, then it is highly recommended.

“Smashing WordPress Themes: Making WordPress Beautiful”

AUTHOR: Thord Daniel Hedengren
PUBLISHER: John Wiley & Sons
FORMAT: Paperback
SIZE: 23.5 x 18.7 x 2 cm
PAGES: 368
LANGUAGE: English
ISBN: 978-0470669907
PUBLISHED: 11th February 2011

A good book for getting under the hood of WordPress.

4 out of 5 stars

Disclaimer: We have received this product free as a part of Amazon Vine™ Programme and you can find this article between our other reviews on Amazon website.

Photos: courtesy of Amazon.co.uk.

Smashing JQuery by Jake Rutter

Smashing jQuery is aimed at beginners, with sound explanations of the basic concepts of jQuery, from selectors, filters, working with events and effects to more advanced stuff like handling ajax requests with jQuery and plugin development.
It provides best practices tips and pointers. Beginners using this book will come out with a good understanding of jQuery and how to put it to use. Items are explained and followed by a practical example using the item being explained.

The presentation is great, with lots of pictures which you would not necessarily expect in that type of book. Especially nice are the images with the Firebug panel open.

It’s not all good news though. It’s sad to see that coding examples in the book contain errors, the type that should not make it’s way any book. Simple things that would be caught by the simplest of proofing.
When most of the explanations presented in the book is backed up by code examples it is a worry that any of those examples are broken.

I can’t compare it to anything else on the market as this is the only jQuery book I’ve read but I’m willing to bet that there are better buys out there.

“Smashing JQuery: Professional Techniques with Ajax and JQuery”

AUTHOR: Jake Rutter
PUBLISHER: John Wiley & Sons
FORMAT: Paperback
SIZE: 23.5 x 18.9 x 1.9 cm
PAGES: 336
LANGUAGE: English
ISBN: 978-0470977231
PUBLISHED: 4th February 2011

Coding examples in the book contain errors.

3 out of 5 stars

Disclaimer: We have received this product free as a part of Amazon Vine™ Programme and you can find this article between our other reviews on Amazon website.

Photos: courtesy of Amazon.co.uk.

recommended background colour: #ffffff (white) & links colour: #c1248f (pink)

recommended background colour: #ffffff (white) & links colour: #e3105b (reddish pink)

recommended background colour: #ffffff (white) & links colour: #4d9a9f (duck egg)

recommended background colour: #ffffff (white) & links colour: #bb5b74 (beetroot)

recommended background colour: #ffffff (white) & links colour: #958860 (khaki)

recommended background colour: #ffffff (white) & links colour: #d9327a (pink), #28b38e (green) or #4165c8 (blue)

To change the Twitter theme:

• First click to open and save one of the above images to your computer.
• Then in your Twitter account go to Settings -> Design -> Customize your own.
• Browse and choose previously uploaded image to your computer, do not tick “tile background”.
• Change colours of the background and links as recommended.
• Save changes.

We will be updating this post with more Twitter backgrounds shortly, so stay tuned.

colour palette used on this blog

retro cream, red and brown colour theme

fresh salad colour theme

summer colour palette

green, grey and deep orange colour theme for Bèlbagay website

web colour palette with pink, brown and turquoise

black, red and blue old poster colour theme

floral colour palette

autumn colour palette

aquamarine & olive colour palette for food blog coffeeandvanilla.com

red, yellow and green colour theme for online shop giftsbymarissa.com

baby blue & purple colour palette for micro site gocha.co.uk

pink, yellow and green folk colour palette

red, grey & navy retro colour palette

four seasons colour palette for bigos-uk.com

pink & aqua colour palette

web colour palette in retro green, yellow and blue

colour palette for bedroom lamp project

colour theme for football blog wengerball.com

retro colour palette with red & beige

web colour palette with yellow and blue

This post will be updated with new colours so feel free to bookmark it for future reference.

The liquid used for the shots is plain water and the colour is determined by the reflection from  the containers / plastic basins we were using, it was also a little bit enhanced afterwards in post production.

Little Blue Water Drop Macro

Purple Water Drop Macro

Green Water Drop Macro

Long Blue Water Drop Macro

• Photography: Michael DYER of 416 Studios.
• Some of the images can be purchased via Gifts by Marissa.

ZTE Tania Windows Smartphone

If you are thinking of a budget smartphone the ZTE Tania would be a good candidate but it’s not the best in it’s price range.

BUILD

Simply put, it’s a budget phone so physically it’s budget quality. Plastic, plastic & more plastic. Which is not necessarily a bad thing, but it shouts cheap.

ZTE Tania is surprisingly light for it’s size.­ It is a bit bigger than the HTC Desire HD which for me is a quite a big phone  I have small hands so I find it a little uncomfortable to use it with one hand but it fits much better my husband’s hands.

SCREEN

The phone’s size allows for a nice large 4.3inch display. The touch screen is very good, bright, even outside in the sun you can see everything clearly on it.

SOUND

The in call volume and sound is OK, you can hear the person very clearly both with headphones and without, but you must use the ones provided with the phone. We tired several headphones from other smart phones and the quality of the sounds was not the same. The low side is the loud speaker, it is weak and you can hear distortion, even before reaching peak volumes

CAMERA

Nothing much to say here except budget.

MEMORY

The phone does not have a much memory, it has 4GB total with no memory card slot. After allowing for the system files and installed apps only a little bit more than 2GB is available for your use.

RADIO & INTERNET

I find that wi-fi connection on ZTE Tania is much better than with couple other smartphones we have in the house. Mobile reception is also better than the HTC HD, I am able to use the phone in places that I can’t get connection with the other phone. Overall the radio on the Tania is quite impressive compared to the other in the house.

BATTERY / CHARGING

Powering up a large screen smartphone is no easy task on a battery, and the Tania is no exception it does not last long. That isn’t to say battery life is poor but it isn’t anything out of the ordinary. A plus is that uses a standard mini usb connection for charging so I don’t have to worry having yet another charger around the house.Unfortunately to connect to your PC—something you must do do to update or simply to add music— you must use the one provided with the phone, otherwise your computer may not recognize the device.

INTERFACE / OS

The WP7  interface is very nice, smooth and easy to use, even with lower powered phones such as this one response is smooth nimble. As it’s a sim free phone you don’t get the usual junk applications bundled onto the phone, which is a boon and in this case necessary given the meagre memory.

If you’re expecting to add loads of apps to the phone, you may be disappointed given the current lack of choice in the Marketplace coupled with the lack of space on your phone.

One major gripe I have with Windows Phone 7 is the dependence on Zune. WP7 doesn’t expose it’s file system to the user. Nor does it connect as a USB Mass Storage device, so you wouldn’t be able to copy files to it as you would another storage device. In order to copy pictures, music, and videos to your phone you must use Zune or the Mac connector.

ZTE Tania Windows Smartphone

VERDICT

I am fully aware that at the price (£209.99 at the time of writing) expectations must be lowered. There is nothing glaringly wrong with it besides the small amount of memory but there are a lot of little things that grates even for a budget phone.

Budget smartphone – not the best in it’s price range.

3 out of 5 stars

Disclaimer: We have received this product free as a part of Amazon Vine™ Programme and you can find this article between our other reviews on Amazon website.

Photos: courtesy of Amazon.co.uk.

Bermondsey, London

Big Ben, London

Somewhere in North London

HMS Belfast at Thames River

Old Routemaster Bus, Central London

Tower Bridge, London

Autumn in North London

Regent's Canal, Camden Town, London

Hornsey Road in North London

Canary Wharf, London

London at night, Canary Wharf

Seven Sisters Road, North London

Fountain at Trafalgar Square, London

Mayor's Office, London

Tower Bridge, London

Elthorne Park, Islington

Winter 2010, Sussex Way, London

• Photography: Michael DYER & Margot DOLEWSKA DYER of 416 Studios.
• Some of the images can be purchased via Gifts by Marissa.

According to research carried out by OnePoll, on behalf of BaseKit, 70 per cent of people claim they would not buy from a company with a badly designed website, yet many small businesses enterprises(SME) seem to think that any old website will do. Even worse is the misconception that their business can not benefit from a website.

It is vital that you represent you company professionally online. In this Internet age companies are expected to have a well thought out online presence and it is crucial that a website gives the correct impression of a business.

When you consider that the first stop to find a product or services is Google. Can SME’s really afford not to have an appropriate site when it’s so easy to go back to Google and choose a different company, one that has a better looking site?

The ease of finding businesses online means it is also very easy to find a business that’s not yours. Where you business is located is not as important as how it looks online. A website is the first impression a potential customer gets of a business, and a judgement on whether or not to use the services is usually made in a few seconds. In those few seconds aesthetics is the most influential factor in making that decision

The website is now the digital expression of the business. It is essential to marketing and sales, communications, branding and reputation, and customer service and support.

By allowing their business to be represented by a shoddy website, SME’s are running the risk of:

• Losing market share to competitors who have recognised the value of a good website, and have acquired a better site.
• Damage to reputation and brand caused by the association of a bad website to the brand
• Harming customer relationship when customers have difficulty completing tasks, caused by bad planning and design
• Financial loss associated with customers turning away from your business, caused by poor web execution.

SME’s must stop throwing away money, turning away customers, and damaging their reputation, paying more attention to their oft neglected website. In these austere times can we really afford to be represented by a bad website?

So how do we implement this on a wordpress blog?

The short answer. Copy the following to you functions.php file.

function reading_time() {
$mycontent = get_post(get_the_id())->post_content;
$wordcount = round(str_word_count(strip_tags($mycontent)), -2);
$upper = round(($wordcount / 250), 0);
$lower = round(($wordcount / 180), 0);

if ($wordcount $output = __(“Estimated reading time: less than 2 mins”);
} else {
$output = sprintf(__(“Estimated reading time: %s – %s mins”), $upper, $lower);
}
if ($return) {
return $output;
} else {
echo $output;
}
}

to use this in a post or index of posts simply invoke the function like so.

if (function_exists('reading_time')) {reading_time(); }

Were simply taking the number of words in the post and dividing it by the average reading words per minute(180-250wpm).

You see having written several articles over the years, a client wanted to upload some to his new wordpress site. However he found that once he published those articles they would take on the current date, when what he wanted was the date those articles were originally written.

So how do we get wordpress to show the dates he wants and not the date it was actually posted on?

That’s where the post publish box comes in to play.

The buttons in the post publish box are self explanatory, however it’s pretty easy for new wordpress users to miss the edit links next to Status, Visibility and Publish. Even if they do see the link it is not immediately obvious what those links actually do.

For the purposes of this post we are interested in editing the publish date. Clicking on the edit link next to the Publish immediately text will bring up date fields which we can change to reflect the post date we want show on the blog, providing that the blog is set up to show post dates. This also allows you to schedule posts for future publication.

As with most things wordpress is pretty well thought out, and changing the date on your post is as simple as you would think.

Those stupid Flash ads that expand over content.

It’s not enough for some ads to be flashy and irritating but just as you start reading the article they have to expand and cover what you were reading.

What do those people think? The only way I’d click you ad is accidentally, maybe that’s the point. Getting in my way is not the best way to endear me to your product.

What’s even worse are those with no immediately discernible close button aarrgh! In that case I close the window and vow never to return to that site again.

Snap-shots.

I hate snapshots, whoever came up with that idea should be shot. You see the link, you make the effort to move your mouse over it and… it’s not a link. What irritates me even more is when I use the middle button to scroll the pointer will inadvertently move over one of these dastardly things.

Why oh why use snap? It sucks resources, increases page loading time and has all that advertising that your visitors don’t really want.

Speaking of useless unnecessary ads

What’s with those disgusting teeth whitening ads.

You know the one, yes that one with the mouth full of nasty rotten teeth. The funny thing is that I mostly see that particular ad when visiting Food blogs. Not what I want to see next to pictures of food.

At the very least make sure the ads are relevant to your site’s niche.

Comment systems.

Why do comments have to open a new window?

Why do I have to sign in with a twitter, facebook, openID, Disquss account? Suppose I don’t have or want one.

Why is the Last comment first?

I understand the need for pagination, but every 10 comments? Seriously what are you trying to pull?

Having have to scroll back up to the top of the post to leave a comment.

You are kind enough to put the full posts on your front page, and I really appreciate that. However after reading your well written article don’t let me scroll all the way back to the top to leave a comment. A link to the comments at the bottom of the post would be lovely.

Have more?

I know I’ve missed out some —share yours.

A better way or as the wordpress codec says a safer way to use the jQuery libraries or any of the included scripts is to use wp_register_script or wp_enqueue_script.

WordPress comes loaded with several libraries and scripts for your enjoyment, including:

• Scriptalicious
• jQuery
• Prototype
• Thickbox
• jQuery UI

The easiest way to load the jQuery library for would be to add the following code before the wp_head() function,

wp_enqueue_script('jquery');

It’s important to note that the wordpress loads the internal version of the jQuery library in “no-conflict” mode which means the “$” shortcut will not work. You could use “jQuery” instead of “$”, however if you really want to use that dollar sign then in your jQuery scripts use the following code.

jQuery(document).ready(function($) {
// do jQuery stuff using $
});

You can also specify the source of the script if it is not included with wordpress and load dependencies using wp_enqueue_script, the path to the script should be relative to the root directory of wordpress. The following example loads candy.js which depends on “scriptalicious” and “scriptalicious-slider”.

wp_enqueue_script('candy', WP_CONTENT_URL. '/themes/name-of-theme/js/candy.js', array('scriptalicious, scriptalicious-slider'), false, true);

The first paramenter is the script name, the second is the path to the script, the third parameter array() will load the files that candy.js needs. The names in this array are not the filenames but rather the handles, these will be loaded before candy.js

After the dependencies parameter comes the version option, it’s a string specifying the version number of the script used if there are more than one version of the script.

The last parameter is the wp_enqueue() function is an option to load your script wherever the wp_footer() hook is located, it should be in the, uh —footer.

If this post helps you better understand the wp_enqueue function, let me know in the comments below.

• A:Arsenal.com
• B:Boagworld.com
• C:Coffeeandvanilla.com
• D:Daren Hoyte
• E:Ebuyer
• F:Slideshowpro forums
• G:Guardian.co.uk
• H:heartinternet.co.uk
• I:iPlayer
• J:Jquery.com
• K:Kuler
• L:lite.facebook.com
• M:Marco Bolognesi
• N:Noupe
• O:Oyster
• P:phpmyadmin on localhost
• Q: nothing for q
• R:Radio times
• S:ssp Director on localhost
• T:twitter.com
• U:UX booth
• V:veetle
• W:Wengerball
• X:XKCD
• Y:Youtube
• Z:Zeldman.com

The solution is found in the rounded rectangle options,

Rectangle snap to pixels — Snaps edges of a rectangle or rounded rectangle to the pixel boundaries.

The image above shows two square created with the shape tool, the shape on the left was done with the snap to pixel option checked, while the one on the right wasn’t.At this size there is no difference between the 2 shapes, but we can zoom in to see what really going on.

Add a single pixel stoke to the shape and it really goes haywire.

Notice how the stoke at the bottom is much thinner than the other sides. This is not magnified just a single pixel stroke on a rectangle created without the rectangle shape snap to pixel option.

Compare the two below.

The same option is available for the rounded rectangle tool as compared below

Now for the grand finale, it should be a snap to make a 1px line. Select line tool , set the weight to 1px and voila a perfect 1px line  —of course not.

There is no snap to pixel option with the line too, so how to fix this?

Ok so I cheated, this happens when you attempt to use the line tool with the document zoomed to more than 100%. Just make sure when you’re drawing that 1px line that the document is at 100% or less.

Hope you’ll find this post useful.

This is the first in what we plan to be a regular instalment of free wallpapers for your screens. This wallpaper is inspired by the work of Krak Fox (Garick Middleton) .

• 800×600
• 1024×640
• 1024×768
• 1152×864
• 1280×960
• 1280×1024
• 1440×900
• 1600×1200
• 1680×1050
• 1920×1200
• 1920×1440
• iPhone
• iPhone alternate

Keyword Use in Title Tag

Placing the targeted search term or phrase in the title tag of the web page’s HTML header.

Good titles help everyone. They help the search engine categorise your site, they help the searcher know what to expect from your page, thus helping to increase Click-Through Rate and they get better SERP (Search Engine Ranking Positions).

An Efficient internal linking structure.

Link Popularity within the Site’s Internal Link Structure – Refers to the number and importance of internal links pointing to the target page.

A good linking structure makes certain that important pages get enough emphasis in the same way good navigation structure on the web page helps visitors get around your site slickly.

Global Link Popularity of Site

The overall link weight/authority as measured by links from any and all sites across the web.

Visit popular sites in your category, leave comments and a link to your site. Spread the word, tell your friends, family, anyone who will listen to visit. Make use of social networks like Facebook, linkedin etc.

Keyword Use in Body Text.

Using the targeted search term in the visible, HTML text of the page

Yes, this is important, but do NOT, whatever you do, ‘spam’ the targeted keyword(s). Only use the keyword phrase throughout the page where it makes sense. Search engines are sophisticated beasties and will apply topic analysis to learn what is truly relevant.

The web is ruled by content, and while it takes time to build a great body of content these simple tips can push our website a little bit further.