Websites to help with Colour Schemes

Posted on January 25, 2012 by Alex Wells

Colour schemes are important when creating a large number of things from websites to business cards and can be costly to change later on, that’s why it important to get it right at the start. Why not help out your Creative Agency by selecting a colour scheme you like via these free to use online tools

Kuler

http://kuler.adobe.com

Good points: has pre made colour schemes available to help people starting with nothing

Color Scheme Designer 3

http://colorschemedesigner.com/

good points: can simulate what the colour scheme will look like for people who are colour blind.

Blog post by Alex Wells
Working as a Website developer I love nothing more then working waist deep in code, I have specific interests in PHP and WordPress development but mostly working with local businesses to provide them with a website that meets their needs. Contact me if you have a project in mind and would like to get an input from an experienced website developer.

Show and hide content with Jquery

Posted on January 17, 2012 by Alex Wells

a easy to implement jQuery show/hide plugin for websites, all you need to do is add the code to your head & then place a div with the correct class around the content and the plugin does the rest!

http://rpardz.com/blog/show-hide-content-jquery-tutorial/

copy a webpages title and description – firefox plugin

Posted on January 13, 2012 by Alex Wells

this handy little plugin lets you right hand click on a page and copy its title and description – perfect for doing an SEO review!

https://addons.mozilla.org/en-US/firefox/addon/copy-title-and-description/

Convert between em,px, pt and % for CSS fonts

Posted on January 11, 2012 by Alex Wells

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

source: http://www.getallfix.com/2011/11/convert-empxpt-and-in-css/

HTML form – remove default values on click / focus

Posted on January 11, 2012 by Alex Wells

I found this handy little bit of javascript while creating a HTML form,

1	<input type="text" value="Email Address" name="email" onblur="if (this.value == '') {this.value = 'Email Address';}" onfocus="if (this.value == 'Email Address') {this.value = '';}" />

what it does is when a user clicks on the field it will remove the default value – this means you dont need to label all of the fields

source: http://www.brightcherry.co.uk/scribbles/2008/12/04/html-form-effect-remove-default-value-on-focus/

Getting images ready for use on the web

Posted on January 11, 2012 by Alex Wells

Introduction

Images are fundamental to the modern web and they are used on nearly every single website you visit however it is important that images are saved correctly to make sure they will work correctly on the web.

Preparing images for use on the web is easy and possible to do with freely available tools meaning you can get your images ready quickly and for free!

the tool we will be using to resize the images is called the GIMP which stands for GNU Image Manipulation Program, it is a freely available program for editing images and has similar functionality to commercial programs such as Photoshop. The GIMP is available for Windows, Mac and Linux meaning everyone can take advantage of this brilliant tool.

Download The GIMP here

After downloading and installing the GIMP open the program (note: this may take a while the first time you open it) next we will need to find an example image to use. if you dont have one you can use this image: alex3410.com/wp-content/uploads/2012/01/Example_Image.jpg (right hand click and save target as – note file size is 5.7MB )

Step 1

The first step is to open the image we want to prepare for use on the web, to do this open the GIMP and select file and open and then locate the image

Step 2

with the image open the next step is to reduce the image size to do this click on: image -> scale image

this will bring up a box asking for some values:

The important values on this box is the resolution and the width, the first thing we need to do is ensure that the resolution is set to 72 (or 72.000 its the same) as this is the resolution images on the web use. The next value we need to change is the Width this will determine the size of the image in this example we will use 800px as a generic size that should be suitable for most images but if you know the size you need enter it here. When you enter the width the height will be updated automatically to make sure the aspect ratio is not changed (this prevents images from looking squished) if you need to enter a specific height and width then click on the chain icon to the right of the values which will unlink the two values and let you enter anything you want.

with these values entered press scale to continue.

the image will then resize, it may appear smaller in the preview window but you can change the preview to 100% by changing the value at the bottom of the window.

Step 3

now the image is the right size we now need to save it, to do this click File -> Save as

you will then need to enter a file name, the important thing here is to give it a unique name and add .jpg to the end if it so that it is saved as a jpeg image ready for use on the web.

next you will need to define the quality of the image you will be saving, this is done as a percentage, the lower the value the smaller the file size but the lower the quality of the image something around 50% should be suitable but if you are worried/unsure put 70%

the new image is now 53KB which is small enough to use online and will load much faster then the original image of over 5BM (there are 1024KB for 1MB so the new image is 1/10 of the size!)

this is the final image saved at 70% quality

this image is saved at 15% and is 25KB

from this you can see the image has a smaller file size (about 1/2 the size) but the image quality is poor

any questions or comments let me know

Firefox spell check single text lines

Posted on January 10, 2012 by Alex Wells

Firefox has a built in spell checker that simply put is a life saver but it has one problem – it does not work on single line text input fields! this problem is easily fixed: http://tech.chandrahasa.com/2010/06/07/firefox-spell-check-single-line-fields/

Bring up your about:config page. You can do this by typing “about:config” in your address bar and clicking on “I’ll be careful, I promise” button
In the “Filter” field type layout.spellcheckDefault.
As you can see, the integer value is 1. Double-click on it, then enter 2 as its new value.
Click OK.

Simple as that!

Website SEO with WordPress

Posted on January 10, 2012 by Alex Wells

What is SEO?

Search engine optimization is vital for the success of websites of all sizes as it directly affects the number of visitors the website will receive from search engines such as google. Every website should have a SEO strategy in place to ensure that everything possible is being done to increase visitor numbers to the site, to start with it is important to ensure every page on your website has the correct meta information most importantly the Title and Description meta tags.

The Title description tag appears at the top of the users browser and if they bookmark your website it will be the title of the bookmark

but more importantly for SEO this is used as the title of your page in search engine results

This means that from a user ability point of view this information needs to be informative and encourage users to click on your link in a page of search results however it is also important that the title gives search engines the information they need to rank your website for relevant searches.

so lets look at some examples for a pizza restaurant in Cambridge.

‘the supper dupper amazingly fun place to eat’ - this is a bad example as it does not give any informaton on what the page is about

‘Harry’s pizza place, best pizza and pasta in Cambridge’ – this example gives users and search engines the information they need, search engines will know to rank the page for searches for pizza in Cambridge.

the next example is for a letting company in Harlow.

‘property number: 124656e3 from the essex office’ – This example is bad because it does not provide any useful information to users and sets the location to the agents office but the property could be anywhere within that offices region.

‘large office space in Harlow south street from Harrys lettings’ – this example lets users and search engines know that the page contains information on an office space that is located in Harlow.

these examples only illustrate the way in which title tags should be worded in reality they should be longer – around 50-80 characters

The description of the page is shown in search results under the title of the page

This means that like the title tag it needs to encourage users to click on the link but with information that will appeal to search engines as well, it follows the same methods as the title but should be a summary of the information on the page and slightly longer at around 140 characters

How to implement SEO using WordPress?

WordPress lets users update websites quickly and easily and as such is a popular Content Management System used on thousands of websites worldwide, implementing SEO on a WordPress website is very easy all you need to do is install a WordPress SEO plugin, my favorite example is SEO-Ultimate available on the WordPress plugin website.

with this plugin installed each page and post will have the option for adding the title and description.

all you need to do is enter the title and description into the fields and WordPress will handle the rest.

WordPress admin bar not displaying correctly?

Posted on January 9, 2012 by Alex Wells

after updating to wordpress 3.1 with its new admin bar it has not shown up correctly on this site,

after looking at other peoples solutions i still could not fix the issue so i have overwritten it with the CSS to force the menu up by 57px

1
2
3

#wp-admin-bar-wp-logo {display:none;}

.ab-top-menu { position:absolute; top:-57px; left:0px;}

which now gives me this

while not 100% correct it at least means i can use the admin bar as i can see everything, if the above does not get it to display in the correct location play around with the values until you get something you can live with

add the code to your style.css theme file

Creating a functionality plugin for WordPress

Posted on January 9, 2012 by Alex Wells

I have read a few interesting articles on creating a plugin for adding additional functionality to wordpress websites for dealing with shortcodes etc, the idea behind it is when you change the theme of the website you can simply install the plugin and not have to extract informaiton from the functions.php file in addition to this it would mean a single functionality plugin could be installed across several websites meaning you will end up only updating one plugin and not sveral functions.php

Create a Functionality Plugin Instead of Using Functions.php

How to create your own WordPress functionality plugin