<link rel="icon" href="/favicon.png" type="image/vnd.microsoft.icon" />

What is becoming just as popular is to add a custom iPhone icon that will appear on your iPhone’s Home Screen. Again this is very straight forward with one line of code in between your header tags, as shown below:

<link rel="apple-touch-icon" href="/iphone_icon.png"/>

If you use an image of anything around 50px by 50px in size that will be, as the iPhone will resize and round off the corners for you on the fly. To add your site to your Home Screen, simply visit the webpage on your iPhone, then select the plus sign, followed by Add to Home Screen. You will get a prompt now and your icon should show, to finish, simply click add.

You will now be taken to your Home Screen where the icon should now be appearing. Here is the example below for Design Woop:

Now if your a picky sod like me, you will notice the horrible gloss effect that Apple adds to the icon by default. Until today I was using jQTouch to remove this until I came across this page on Apple.com which brought my attention to the additional -precomposed option. This stops mobile Safari adding any effects to the icon which is just what I was after! The line of code we use for this is now:

<link rel="apple-touch-icon-precomposed" href="/iphone_icon.png"/>

After refreshing the page and re-saving it to my iPhone Home Screen I was left with the much nicer…

I hope you agree with me but I think the no gloss icons are nicer!

Here are some related posts:

• Popout Details on Hover w/ CSS
• Supersize that Background, Please!
• Code an Email Newsletter from PSD to HTML
• iPhone Made With CSS3 Only
• jQuery Text Change Event

I decided to convert to Shaun Inman’s simple URL shortener Lessn, which is a self hosted script available for free! Now I have this handling my links and have managed to not only integrate it with my WordPress install but I can also track my views via Mint, here’s how…

Setting Up Lessn

1. Create a new database on your Web Host
2. Download Lessn here and unzip the files.
3. Open config.php and amend to include your database details, a login username and password and save the file.
4. Upload the full lessn folder via FTP.
5. Visit http://domain.com/lessn/-/ to start shortening URL’s*

*Please note that the lessn folder can and probably should be renamed to something shorter. For example, I use /s/-, which gains me an extra 4 letters. Make sure you rename the folder before step 5.

Setting Up WordPress To Work with Lessn

Now we have Lessn working and you have a self hosted method for creating short URL’s not relying on anyone else, we can integrate it with WordPress thanks to the WP-Lessn plugin by Jay Robinson. This plugin simply creates a short URL using Lessn when a post is published and saves it to a custom field that can then be displayed on your post page wherever your wish.

1. Download the plugin here.
2. Upload wp-lessn directory to /wp-content/plugins/ directory.
3. Activate the plugin.
4. Go to the WP Lessn submenu underneath the Plugins menu.
5. Enter the location of your Lessn installation (eg. http://domain.com/lessn/-/).
6. Enter your Lessn API key, which can be found on your Lessn homepage (see image below).
7. Click Save

Now, fingers crossed if everything has been setup right then when you save your next post you will find a custom field type called wp_lessnd_url just under the trackbacks section on your edit post page.

Integrating Lessn Into Your Post Pages

Next step is to use this within your site to allow users to tweet your post using the shorter URL. To do this we will need to first add a Tweet This button or link to your single page template linking it straight to Twitter like this…

<a href="http://twitter.com/home?status=STATUS TO GO HERE" title="Tweet this post">Tweet This Post</a>

Notice where I have put STATUS TO GO HERE, this is where we will need to add the post title and the short url that users can then Tweet straight to Twitter. To add the title this is pretty straight forward, we just use the_title template tag that comes with WordPress, like so….

<a href="http://twitter.com/home?status=<?php the_title(); ?>" title="Tweet this post">Tweet This Post</a>

Next step is to add the short URL that users will see on Twitter and be able to click to see the post. Now we call the wp_lessnd_url to display this but we also need to add a backup incase there isn’t a short URL setup for this post. For this backup we will use the_permalink template tag. Using a simple if statement, this is how we achieve it…

<a href="http://twitter.com/home?status=<?php the_title(); ?> <?php if(get_post_meta($post->ID, "wp_lessnd_url", true)) { echo get_post_meta($post->ID, "wp_lessnd_url", true); } else { the_permalink(); } ?>" title="Tweet this post">Tweet This Post</a>

Thats all thats to it! I know bit.ly links are nice and compact but for me, been able to shrink from…

http://designwoop.com/2010/04/show-me-whatcha-got-html-5-vs-flash-showcase/

To this…

http://designwoop.com/s/3a

Mean’s I can still promote my brand Design Woop but still allow room for the post title in my Tweets. Now when I click on the Tweet This button that I created previously I get taken to Twitter and the post title and short URL are already there and I can just hit Tweet! Boom!

Have Mint?

If you also have Mint installed on your site then you can install Shaun Inmans Lessn Pepper to allow tracking of each URL.

Let me know if you have any trouble installing Lessn Pepper as I won’t be going over it in this post. Any other questions or problems then leave a comment below.

Here are some related posts:

• How To Make Your Theme WordPress 3.0 Compatible
• How to Add Twitter @anywhere in WordPress
• HOW TO: Integrate Google Buzz Into Your WordPress Blog
• Tutorial: Display your Latest Tweet on your Website
• Working with Custom Fields in WP

Moustache Mugs!

Visit Source: http://www.peteribruegger.com

Safe to say this is on my next to buy list! I will no doubt be the coolest kid at work! Just need help deciding which one to go for?

20 Super Clean Fonts Perfect for Minimal Style Design

Visit Source: http://webdesignledger.com

Web Design Ledger posted this great article showcasing 20 great font’s that are especially good for minimalistic designs. Another great point to make is they are all free! Go Nuts…

Chomp iPhone App

Visit Source: http://chompapps.com

A new iPhone App that attempts to take on Apple’s app store genius feature. Called Chomp, it is based around giving you app recommendations based on the reviews you give other apps. Probably not the best explanation their but its free so give it a try!

Nine Techniques for CSS Image Replacement

Visit Source: http://css-tricks.com

Chris Coyier wrote this great tutorial article I came across looking at nine techniques for CSS Image Replacement. I myself was only aware of a couple of these so its good read for anyone who actively uses this technique to freshen up on possibly better methods of doing the same thing.

Better html anchor, a jquery script to slide the scrollbar

Visit Source: http://www.position-absolute.com

Great jQuery script that gives you a smooth page jump anchor effect replacing the standard jump to links. This is really cool and you will probably have seen in on various sites around, well now you can use it on your site too.

50 Most Amazing Beautiful Blog Designs

Visit Source: http://creativenerds.co.uk

Creative Nerds posted this article showcasing 50 inspirational blog designs. Some great sites here and one to keep on record when your looking for some inspiration yourself!

30 Gorgeous iPhone App Interfaces & Icons

Visit Source: http://iphone.appstorm.net

The Appstorm guys posted this article last week and for an aspiring future iPhone app developer (nice title indeed) its a keeper! The post looks at 30 apps all look amazing! Not only good for inspiration but there are some good apps I didn’t know about here so take a look!

Right thats it for this week but be sure to check back next week! Tweet me @stugreenham if you find any interesting articles that I can use or you think is interesting and I will take a look!

Here are some other posts:

• Lost Finale Explained Well!
• WP .XML Test Data Import
• Tutorial: Display your Latest Tweet on your Website using SimplePie
• Tutorial: Display your Latest Tweet on your Website
• (Nerd)Press Theme Released

Margin and Padding

You may currently be setting your margin/padding like this:

.class-name {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-right: 10px;
   margin-left: 10px;
}

Shorthand allows you to shrink these four lines down to just one. Think of the margin as four values in clockwise order Top, Right, Bottom, Left. In the above code we have assigned a margin of 10px to each individual side of the element, but what you can do is change the four lines to just one line using the margin property and assign it four values in the clockwise order I mentioned just before (top, right, bottom, left) leaving us with this:

.class-name {
   margin: 10px 10px 10px 10px;
}

Taking this further we can again shrink this down even more depending on the margin values. We can group specific items together, such as Top / Bottom and Right / Left. Below are some examples of how you can shorthand margins in your css:

Example 1

• Top: 10px
• Right: 15px
• Bottom: 20px
• Left: 15px

This would be displayed using just three values because the left and right values are the same, so we just define top, right+left and bottom values, shown below:

.class-name {
   margin: 10px 15px 20px;
}

Example 2

• Top: 10px
• Right: 15px
• Bottom: 10px
• Left: 15px

This can be displayed using just two values because both the top+bottom and right+left values are the same, shown below:

.class-name {
   margin: 10px 15px;
}

Example 3

• Top: 10px
• Right: 15px
• Bottom: 10px
• Left: 20px

When in a situation where the top+bottom values are the same but the right+left values are different, we still have to display all four values as you cannot group the top and bottom values together because the left value would be read as if it was the bottom value. We can still use shorthand to display the css on one line, shown below:

.class-name {
   margin: 10px 15px 10px 20px;
}

Right that’s margin’s covered and for padding it is exactly the same method. All you have to remember is which order the four values go in then its pretty much common sense from there.

Backgrounds

Background’s are again a popular property that you are likely to assign at least once on each of your stylesheets, sometimes multiple times in which case this will come in handy. When assigning a background you may set an element any number of the following properties:

.class-name {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
}

Again using shorthand we can combine all of these values into one using the background property. The order I usually put them in is as follows:

• color
• url (if required)
• position
• repeat / no-repeat / repeat-x / repeat-y

This means our code will now look like this:

.class-name {
  background: #fff url(image.jpg) top left no-repeat;
}

If you miss out a value then it will be rendered with the default, so if you don’t assign a background position then it will default to top left.

Fonts

Next up is fonts! Now I’ll have to admit that this is one I tend to just set line by line out of habit, but again there is a cool shorthand method to save you writing lines and lines of the same code.

Here are the more commonly declared font properties:

.class-name {
  font-size: 1em;
  line-height: 1.2em;
  font-weight: bold;
  font-style: normal;
  font-family: Arial;
}

We can take the five lines above and again make them into just one using shorthand. The main thing to note when shorthanding font properties is that you must declare both the font-size and the font-family or the whole thing will be ignored. Lets start by shortening just them two properties:

.class-name {
  font: 1em Arial;
  line-height: 1.2em;
  font-weight: bold;
  font-style: normal;
}

Within the font property we can also include line-height, font-weight and font-style. If you don’t declare these values then like the background property, the values will be set to the default values of normal.

Here is what the whole thing would look like going with the values above:

.class-name {
  font: 1em/1.2em bold normal Arial;
}

As you can see, using shorthand will save you having to write four extra lines of code and if you have a pretty major stylesheet this could cut it down dramtically!

List Styles

Lists are another property that can be shrunk down using shorthand. Typical List properties would include:

.class-name {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: url(image.jpg)
}

These three lines can be made into one simple line by defining the type, position and image source under the property list-style. Please note, if any of the values are not defined then they will display as the default. Here is what the shorthand will look like:

.class-name {
  list-style: disc outside url(image.jpg);
}

Fairly straight forward and thats about it for List Styles.

Borders

Border’s can be defined in several ways, if you are currently defining a width, color and style on seperate lines in your stylesheet (which is unlikely) then you can quickly edit this into one nice clean line of code, taking this:

.class-name {
  border-width: 5px;
  border-color: #000;
  border-style: solid;
}

and ending up with this instead:

.class-name {
  border: 5px solid #000;
}

If you want to define several sides of the element with different values then you can do so like this:

.class-name {
  border-top: 5px solid #000;
  border-right: 10px solid #000;
  border-bottom: 5px solid #000;
  border-left: 10px solid #000;
}

The example above contains four lines, which could have been twelve had you defined seperate style, width and color values. You can (if you want to) get the same effect as the above example by using the following:

.class-name {
  border: 1px solid #000;
  border-width: 5px 10px 5px 10px;
  border-color: #000;
}

Although this will achieve the same effect, personally I prefer the first method as I find it easier and quicker to type as it requires less thinking lol.

Conclusion

Whether you use it or not, you must agree using CSS Shorthand does make sense when thinking you can cut down the number of lines you have to code, as well as making your CSS Stylesheet smaller in size (maybe a little but still!) then it’s the obvious choice. Let me know what you think and which one’s you use or if I have missed anything!

Here are some related posts:

• The 960 Grid System Made Easy
• The definitive guide to formatting CSS
• Create a Color Changing Website Using CSS3
• CSS Tips I Wish I Knew When I First Started
• 5 Ways to Instantly Write Better CSS

50 Beautiful Long Exposure Photos

Visit Source: http://www.pxleyes.com

Pxleyes have posted this amazing article showcasing 50 amazing photograph’s taken with a long exposure. As I am shortly heading of to get my first SLR today, I thought it was only right I included this post.

120 Tips, Tricks, and Tuts from 2009 Worth your Time

Visit Source: http://net.tutsplus.com

Nettuts+ published this mammoth of a post containing 120 tips, tricks and tutorials from last year. This is a great article and a fantastic resource!

Feet First

Visit Source: http://www.tomrobinsonphotography.com

Photographer Tom Robinson composed this great set of photo’s specifically of his and his partners feet whilst on travel. Sound’s odd, but every cool place they’ve been they have a shot and the gallery is immense! Soo jealous of where he has been!

100+ Seamless Patterns Great for Creating Website Backgrounds

Visit Source: http://webdesignledger.com

Web Design Ledger posted this article showcasing 100 seamless patterns great for creating website background. Some great resources here and a good bookmark to refer back to when need to find a good background.

40 Brilliant Type-Only Logo Designs

Visit Source: http://webdesignledger.com

Another one from Web Design Ledger, this time logo’s! A great set of type only logo designs and there are some really clever ones here! I think the branding one is amazing hence it been displayed below but take a look for yourself.

Tweexchange

Visit Source: http://tweexchange.com

This site looks interesting combining the hassle of having to search for both free Twitter usernames and free Domain Names into one nice search. Thinking of starting a project then this tool will become handy in helping you decide which domain to choose ensuring you can get the Twitter username too.

In-Field Labels jQuery Plugin

Visit Source: http://fuelyourcoding.com

Fuel Your Coding show you how to achieve inline form labels using jQuery. The link contains sample forms, including a tutorial of how to do it yourself and links to download the plugin.

Showcase Of Modern Navigation Design Trends

Visit Source: http://www.smashingmagazine.com

Smashing Magazine explore the latest navigation design trends in web design looking at many different styles with this article. A great source for inspiration and something I always struggle with so very handy for me!

Here are some related posts:

• Must Read Inspirational Blogs and Websites for Creatives
• Favourite Links 1

New Growl Styles

Visit Source: http://fixedgear.ca

Christopher Lobay has posted two new notification styles for the popular Mac app Growl which can be downloaded for free.

10 Fresh Must Read Blogs For Creatives

Visit Source: http://www.inspiredm.com

InspiredMag have posted a great article showcasing 10 ‘Must Read’ blogs that are great for us ‘Creatives’. There are some great reads here and lots of useful resources worth bookmarking.

Exobotics

Visit Source: www.exopolis.com

A very clever site built in Flash that lets you build a robot (Cool I know) and then bust some moves with it to a nice dance beat. Give it a try, very cooly designed!

35 CSS-based Layouts that Look Awesome

Visit Source: http://net.tutsplus.com

Nettuts+ posted a article showcasing 35 awsum CSS based websites! Another great article to bookmark for inspiration at a later date. There is a whole range of differently styled sites here so something for everyone.

Outstanding Website Background Guide: 60+ Impressive Resources

Visit Source: http://www.noupe.com

Noupe’s article on Website Background’s offers tonnes of great links and resources for getting the perfect website background. There are plenty of Tutorials, Texture Packs and Links where you can get loads of free background tiles/images.

30 Website Navigations that Make You Wanna Click It

Visit Source: http://webdesignledger.com

Web Design Ledger (One of my favourite subscribed to websites) posted this awesome article showcasing 30 Websites with class Navigation menu’s. A great post and really good source of inspiration when building a design concept.

Hacked STOP Signs

Visit Source: http://www.urlesque.com

Great set of Stop Sign’s that have been modified and there are some funny ones! My favourite is “STOP! Hammertime!”.

Rio Ferdinand Online Magazine

Visit Source: http://www.rioferdinand.com

Not design related but a cool site anyways. Footballer Rio Ferdinand has started an online magazine which is a great read. He interviews different celebs each edition and covers alot of general stuff.

24 Ways: CSS Animations

Visit Source: http://24ways.org

Tim Van Damme posted this cool article on 24ways about CSS Animations, showing you how to create one yourself. A great read and this is definately going to be something that we will start to see more and more of.

7 Open Source And Free URL Shortener Scripts To Create Your Own

Visit Source: http://www.webresourcesdepot.com

Web Resource Depot posted this article reviewing 7 open source URL Shortener scripts that are all free. I went for Yourls myself but a handy link for anyone else wanting to get on the URL Shortening bandwagon :)

Here are some related posts:

• iPhone Made With CSS3 Only
• The 960 Grid System Made Easy
• Give Your Website A Custom iPhone Icon With/Without The Gloss Effect
• HTML5: An Introduction From a Designer’s Perspective
• Different Stylesheets for Differently Sized Browser Windows

There is a simple line of code that will fix this and clear your message when they click on the textarea box. First you need to create your form, below I have included some sample form code:

<form name="test_form">
	<dl>
		<dt><label for="field_one">Field One</label></dt>
		<dd><input type="text" name="field_one" value="" size="100" /></dd>

		<dt><label for="field_two">Field Two</label></dt>
		<dd><textarea name="field_two" rows="10" cols="100">Type your message here...</textarea></dd>
	</dl>
</form>

To make the text disappear on click we use the event handler onFocus which will basically run once the Textarea is in an ‘active’ state. We need to add in the following to our form:

onFocus="this.value=''; return false;"

Add it inside the opening textarea tag so you will end up with a form looking like this….

<form name="test_form">
	<dl>
		<dt><label for="field_one">Field One</label></dt>
		<dd><input type="text" name="field_one" value="" size="100" /></dd>

		<dt><label for="field_two">Field Two</label></dt>
		<dd><textarea name="field_two" rows="10" cols="100" onFocus="this.value=''; return false;">Type your message here...</textarea></dd>
	</dl>
</form>

Thats it done, nice and simple! You can download the source code for this below or view a demo here.

Here are some related posts:

• Give Your Website A Custom iPhone Icon With/Without The Gloss Effect
• HTML5: An Introduction From a Designer’s Perspective
• Best Practices for Hints and Validation in Web Forms
• Favourite Links 1

I’d given up hope that would happen and that I’d have to wait till early next year when Google pull there finger out, but I am happy to say I have found a solution and you can have extensions working in no time!

The Steps

First you need to head over to here and download the latest build of Chromium (At time of writing I am using 34164) and then install it to your Applications folder.

Next run Chromium and enter the following in the Search/URL bar:

chrome://extensions/

You will be redirected to the extension page which will be looking pretty boring right now. To find some extensions to install go to this website:

https://chrome.google.com/extensions

Once you reach an extension that you want to install you will notice that the ‘Install’ button is greyed out. Open another tab and head over to:

http://grack.com/blog/2009/12/08/re-enable-install-button-for-mac-chrome-extensions/

Scroll down to where it says ‘Enable Extension Install’ and drag this to your Bookmarks toolbar. Now flip back to the Extension you just found and click on the bookmark you just dropped. This will enable the ‘Install’ button at which point you can install the extension!

You will have to do this for each extension as Google will disable the ‘Install’ button but thats a fair price to pay for a working Chrome!

Bookmarks Synching

Another nice little treat is that the latest Chromium build has Bookmarks Synching as you will probably have seen on Windows versions which means for someone like me, you can Sync your bookmarks between both operating systems Boom!

You can find this option by clicking on Chromium in the top left and then ‘Bookmarks Synched…’ at which point it will ask you for your Google username and password.

Here are some related posts:

• Dribbble – Introducing My First Chrome Extension
• Designing Campaign Monitor iOS Icons
• Chrome: Unconventional speed tests for the browser
• The Importance of Cross Browser Compatibility: Tips and Resources
• 25 Free Mac Apps That Will Boost Your Productivity

Beginning

To begin with and before I even touched my Self Conclusion (SC), I logged into my web hosting account and setup the new domain, created my new database and installed the latest copy of WordPress. Once this was done, I ran through the WP installation.

Next I logged into my current database that SC was using and backed the whole lot up exporting it to a .sql file. Although WP offers an Export/Import function I have had difficulty with it on previous occasions and there is also a limit on what file size you can import. Finally, take a full backup of your WP files which will include any custom themes, images, plugins, etc.

Uploading

Now take these backed up files and upload them to the new WP installation keeping the locations the same (for eg. If you have images in the root of your directory they will need to be in the root of your new directory). You don’t need to log into the WP admin area yet because once you transfer over the old database it will sort out all the users/posts/active plugins etc the whole lot just like you are used to from your existing domain. Once all the files are in place, log into your new database and drop all the tables in the database then import the sql from the old site that you have previously saved. This should import all your tables for you and populate them with all your settings.

Here is where the first tricky bit comes in. Whilst you are still in the database open the table wp_options and update the siteurl to the new URL (as shown in the picture below) of your website and save it.

Now login to your new URL WP admin area (http://www.domain.com/wp-admin/) using your old username and password that previously worked on the old site. Once you are logged in you should see all your posts, comments, plugins, etc.

Head to Settings page and make sure WordPress address (URL) and Blog address (URL) are both correct to the new URL. Once they have been changed should they need to then your blog should be up and running (nearly).

Configuring

Hopefully you have made it this far with me and no errors at which point we will need to check through each of the posts to make sure there arn’t any links pointing to the old URL. Thankfully there is a plugin which will do this all for you! The plugin Velvet Blues Update URLs is available for download here. Upload the plugin and activate it and follow the instructions. Its basically like a search and replace tool and very simple.

Whilst I am talking about plugins, it might be worth mentioning that if you are running Google Sitemap plugin that you will need to tell it to recreate your sitemap as it will still be using the old one with all the wrong URL links.

Redirecting using .htaccess

Now you have your new blog up and running as if it were the old one but with a new shiny URL you will need to make sure any users from the old site get redirected to the new URL. There are many ways in which this can be done but as I have alot of bookmarked links and posted my links in many places I needed to ensure that any link from selfconclusion.co.uk would redirect to my new URL and keep the same structure (for eg. http://selfconclusion.co.uk/test would go to http://designwoop.com/test).

After searching around I came across a great post from Nish Vamadevan over at fnode.com where he explains how to do this. On the root directory of your old domain, you will need to create a .htaccess file and put the following inside….

# BEGIN WordPress
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.olddomain.com
RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]
# END WordPress

This should hopefully do the trick! Make sure you change the domain names to your and give it a full test and make sure but for me it was spot on so thank you Nish for your great post!

Final Tidying Up

Were almost there now, just a few bits to sort out if you use feeds or analytics then this will also apply to you. Obviously both your analytics script and your feed links will be wrong as they will be pointing to your old URL. For me, I use Google Analytics and all I needed to do was log into my account and ammend the profile to the new address. With Feedburner, again I logged into my account and updated the address, I was too scared to change my feed URL incase I was to lose my subscribers so for now it is still called selfconclusion but I will look into this someday soon!

Right that should be it! I hope this has been helpful for you, if you have any problems then post a comments and I will do my best to assist you!

Here are some related posts:

• WordPress Fat-Loss Diet to Speed Up And Ease Load
• Best Resources for Learning WordPress Development
• Integrating Lessn with WordPress to Create Future Proof Short URL’s
• 40 WordPress-Powered Websites With Awesome Designs
• How To Make Your Theme WordPress 3.0 Compatible

If you have already setup your Gcal and/or Gcontacts as per my guide here to your phone then adding the mail to it is super simple….

• Go to Settings
• Go to Mail, Contacts, Calendar
• Click on the Exchange account you currently have setup to your Gmail Cal and/or Contacts
• Flick Mail to Yes
• Now choose which folders you want to sync at the bottom of the current page

Now when you go to Mail from the home screen you will now have your Exchange account listed in your accounts list.

It’s really that simple! :) any probs let me know in the comments.

Here are some related posts:

• Designing Campaign Monitor iOS Icons
• iPhone Made With CSS3 Only
• The 960 Grid System Made Easy
• 50 Gorgeous Wallpapers for iOS & iPhone 4
• Give Your Website A Custom iPhone Icon With/Without The Gloss Effect