Some points to remember when considering a domain name change!

You Don’t Have To Be Nuts To Worry About Changing Your Domain by Jonah Stein

The first thing we will need to do is sign up for a Dropbox account here

with an account created we can then install the software on our computer which is available here for both Windows and Mac

During the instal you will be asked for a location you want Dropbox to use as its ‘home’ folder – if you don’t select one it will be in My Documents.

Now the software has been installed and the folder set up anything you place in this folder will then be copied onto the Dropbox servers, if you update any of the files they will also be updated on the server.

So whats the benefit of all this? the most useful feature for most people is anything placed in this folder is now automatically backed up online so if anything happens to your computer you know your files are safe ans secure. Other uses for this service is using files across several computers, if you set up the software on 2 or more computers using the same Dropbox account anything added or updated on one computer will be automatically updated on all of the other computers as well.

To transfer files into your mobile device first place the files into the Dropbox folder on a computer, then install the Dropbox app on your mobile device after inputting your account details you will be able to view all of the files that are currently stored on your Dropbox account.

if you find any other good uses for Dropbox let me know in the comments

To get started you will need to visit: https://twitter.com/about/resources/widgets

This website will let you create and customise a twitter widget and at the end give you the code you will need for your website.

In the first screen we need to select ‘Profile Widget’

Next we need to enter our twitter username so the widget knows who we are:

With this information in you can press ‘Test Settings’ which will then let you see how the widget will look on the right hand side  – each time you make a change you can press this button to update the preview.

Next we will customise the appearance – enter colours that will match your websites colour scheme – need some help with your websites colour scheme? try these useful webistes

Finally we need to define the size of the widget, if you are unsure on the width of it try auto width

With all of the settings entered we then need to get the code to insert into our website via the ‘Finish & Grab Code button’ :

With this code you can then paste it into your website where you want your feed to appear.

This website uses WordPress so the next steps will show you how to add the feed to a WordPress powered website.

To add the twitter feed you will need to insert a ‘text’ widget to a sidebar where you want the twitter feed to appear, this is done via ‘Appearance’ and then ‘Widgets’

you will then need to locate the ‘Text’ widget and drag it into the sidebar

With this placed in the sidebar the next step is to paste in the code we created via the twitter website and save the changes.

This will then insert the feed into your WordPress powered website

I have collected a list of RSS feeds while researching and just browsing the web and wanted to list them so others interested in website development / design might find them useful, if you know of any good feeds please let me know.

In this post i am going to share some of the RSS feeds i use to find design resources and website design examples:

1. http://365psd.com/
2. http://bestwebgallery.com/
3. http://creativenerds.co.uk/
4. http://csscreme.com/
5. http://designblurb.com/
6. http://designchair.co.uk/
7. http://www.smashingapps.com/
8. http://freepsdfiles.net/
9. http://www.fuelyourcreativity.com/
10. http://www.shapes4free.com/

I have collected a list of RSS feeds while researching and just browsing the web and wanted to list them so others interested in website development / design might find them useful, if you know of any good feeds please let me know.

In this post i am going to share my top 10 WordPress feeds (in no particular order):

1. http://www.doitwithwp.com
2. http://www.wpbeginner.com/
3. http://wpcandy.com 
4. http://www.wptavern.com
5. http://wp.tutsplus.com
6. http://www.wplover.com 
7. http://www.wpmayor.com
8. http://wpengineer.com
9. http://wphacks.com
10. http://lorelle.wordpress.com

but today i came across the best example i have see, its the hobby craft emailer and the link at the bottom of the email takes you to this:

what i like about it is that it gives you the option of trying a few more emails to see if you are sure you want to unsubscribe, if not it removes you from the system right away defiantly something i will implement.

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.

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

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

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

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/

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

• 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!

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.

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
4

#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

Create a Functionality Plugin Instead of Using Functions.php

How to create your own WordPress functionality plugin

this is the HTML code we want to insert when the users inserts the shortcode

1
2
3
4
5
6
7

<!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4ce5433d3b7c0a7b"><img style="border: 0;" src="http://s7.addthis.com/static/btn/sm-share-en.gif" alt="Bookmark and Share" width="83" height="16" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ce5433d3b7c0a7b"></script>
<!-- AddThis Button END -->

the first step is to insert the follow code into the functions.php theme file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//shortcode code
function ammf_links ()
{
return '<!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4ce5433d3b7c0a7b"><img style="border: 0;" src="http://s7.addthis.com/static/btn/sm-share-en.gif" alt="Bookmark and Share" width="83" height="16" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ce5433d3b7c0a7b"></script>
<!-- AddThis Button END -->';
}

add_shortcode('ammflink','ammf_links');

the first section (the function) is what will happen when the shortcode is found, in this example we just want to return the HTML code for the social media links.

the second section deturmines what the shortcode will be and links it to the function above, in this case the short code would be

[ammflink]

and it is connected to the ammf_links function.

the shortcode can be set up to output any HTML information you need, for example a twitter feed, flicker gallery links or adverts

Wptuts+

The WordPress Theme Frameworks Starter Guide.

SpyreStudios

32 Pixel Perfect UI Element PSDs.

SEOmoz Daily SEO Blog

via SEO Pricing: 600+ Agencies Share Costs of Services & Pricing Models.