• Font size – 14px
• Line height – 23px
• Margin bottom – 23px

1. Custom favicon

Creating a custom favicon is one of the most simple and popular ways of strengthening brand identity. Having a custom favicon allows user to quickly distinguish your site from others, which is especially helpful if they have multiple tabs open. You can create a custom favicon in Photoshop using this plugin, or from an online generator such as Faviconer.

Once you’ve saved your .ico file, link to it in the header of your website with the following code:

<link rel="shortcut icon" href="path-to-favicon/favicon.ico">

2. iPhone and iPad home screen icons

When someone adds a website to their homescreen on an Apple device, an icon is created. The default icon is a snapshot of your website, with Apple’s trademark glossy sheen and rounded corners. To create an icon for Apple devices, create a 144px x 144px png and save it as apple-touch-icon.png, or apple-touch-icon-precomposed.png if you wish to remove the gloss and have a matte icon.

Once you’ve uploaded your icon, link to it in the header of your site using the following code:

<link rel="apple-touch-icon" href="path-to-image/apple-touch-icon.png" />

or

<link rel="apple-touch-icon-precomposed" href="path-to-image/apple-touch-icon-precomposed.png" />

3. Custom highlight colour

Using a custom highlight colour when text is selected on your website is a subtle but effective touch.

Add the following to your stylesheet, changing the background property to a colour which strongly reflects your branding:

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

4. Custom login screen logo (WordPress)

If visitors to your website have the option to log in, customise the login page so they are greeted with your own logo, instead of the default WordPress logo. This builds trust, reinforcing that fact that users are logging in to your website, and not just another generic website.

Add the following to your theme’s functions.php file

function custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo-login.png) !important; height: 115px !important; }
</style>';
}
add_action('login_head', 'custom_login_logo');

Alternatively, you could use a plugin such as Custom Login Screen.

Step 1 – Add dividers to each menu item

To create the dividers between each menu item, add a border to each side of the link. For the best effect, use a lighter colour on one side, and a darker colour on the other. The background of my menu is #555, so I will use #777 on the left side, and #333 on the right side.

#access li {
 float: left;
 position: relative;
 border-left: 1px solid #777;
 border-right: 1px solid #333;
}

Step  2 – Remove the left border from the first menu item

The menu is looking good, but now there are one pixel borders on the first and last items which don’t look great. WordPress automatically applies classes to all menu items, making it very easy to target particular links.

In order to remove the left border from the first item, all we need to do is find out the ID of the <li>, and remove the border in CSS. The easiest way to do this is to view the source code, or use a browser based inspector, like the one in Chrome.

Using this class, we can now remove the border to the left of the first menu item

#access li.page-item-389 {
	border-left: none;
}

Step 3 – Add a right border to the last menu item

Because my menu items don’t fill the entire width of the menu, I’m going to add a right border to the last menu item, ensuring all dividers have a consistent style. I will add my right border to the <a> this time, as there is already a right border on the <li>.

#access li.page-item-49 a {
	border-right: 1px solid #777;
}

Alternative method

Alternatively, you could use CSS child selectors to remove and add the borders. You can target the first and last items using li:first-child and li:last-child.

#access li:first-child {
	border-left: none;
}
#access li:last-child a {
	border-right: 1px solid #777;
}

Final CSS

#access {
	background: #555;
	clear: both;
	display: block;
	float: left;
	width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.4) 0 1px 2px;
	box-shadow: rgba(0,0,0,0.4) 0 1px 2px;
}
#access ul {
	padding: 0 10px;
}
#access li {
	float: left;
	position: relative;
	border-left: 1px solid #777;
	border-right: 1px solid #333;
}
#access li.page-item-389 {
	border-left: none;
}
#access a {
	color: #f5f5f5;
	display: block;
	padding: 0 37px;
	line-height: 46px;
	text-transform: uppercase;
	font-weight: bold;
}
#access li.page-item-49 a {
	border-right: 1px solid #777;
}
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 37px;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #454545;
	border-bottom: 1px dotted #333;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a, #access ul ul :hover > a, #access a:focus {
	background: #454545;
}
#access li:hover > a, #access a:focus {
	background: #454545;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access .current_page_item > a, #access .current_page_ancestor > a {
	background: #454545;
	color: #fff;
}

Check out the 7 tools listed below to save you time and  speed up the development process on your next WordPress site.

1. WordPress Custom Post Type Generator

Just fill out each of the fields to create a custom post type for your WordPress site. Takes literally one minute and is very easy to use. Simply paste the provided code into your functions.php file and you’re good to go! I’ve used this on many sites and it’s definitely a time saver.

http://themergency.com/generators/wordpress-custom-post-types/

2. WordPress Custom Taxonomy Generator

Also from Themergency, this generator creates custom taxonomies which you can use to categorise the content on your website.

http://themergency.com/generators/wordpress-custom-taxonomy/

3. WP FUNCTION ME

If you are creating a theme from scratch, or simply wanting to add functionality to your existing theme, then this is a very useful tool. It allows you to select the functions that you want, then provides you with the code for your functions.php file.

http://www.wpfunction.me/

4. WP FILL ME

Quickly and easily generate filler content for your WordPress site, including images, lists, headings and more. Very handy when you are creating image and typography styling.

http://www.wpfill.me/

5. Simple WordPress Shortcode Generator and Some Useful Shortcodes

This tool allows you to create simple shortcodes for use in your WordPress theme, and also list a few useful shortcodes. For more advanced shortcodes, see this article.

http://pythoughts.com/wordpress-shortcut-code-generator-useful-shortcodes/

6. CSS3 Generator

Create rounded corners, box shadows and even transitions in seconds with this easy to use generator. Provides multiple browser prefixes and compatibility.

http://css3generator.com/

7. CSS3 Gradient Generator

Using this generator you can create impressive, image free gradients. There is a wide variety of pre made gradients, or you can create your very own from scratch.

http://www.colorzilla.com/gradient-editor/

Minimalism is one of my favourite design movements. To me there is nothing more aesthetically pleasing than a website which presents what is necessary, and nothing more.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Saint-Exupéry

Your Friend’s House

Visit www.yourfriendshouse.com

Net-A-Porter

Visit fashionfix.net-a-porter.com/newsflash

The Boston Globe

Visit www.bostonglobe.com

Eric Paul Snowden

Visit www.ericpaulsnowden.com/blog

Image Mechanics

Visit www.imagemechanics.com.au

Altius

Clean, grid-based design which still manages to be unique. Some nice details such as the footer navigation mirroring the one in the header.

Visit www.altius.net

Anna Safroncik

Stunning website which combines stylish typography and circles with slick CSS3 animations.

Visit www.annasafroncik.it

Chris Cross

One of the nicest looking and functioning Magento stores I’ve come across lately. Great use of jQuery and branding elements throughout the site.

Pinterest

A newcomer on the social media scene, Pinterest allows users to create boards, and pin items to create beautiful online pin boards. The login page features some very nice social media buttons. Notice the subtle gradient and 3d effects, all done in CSS3.

Visit www.pinterest.com

Salt Surf

Responsive e-commerce site with great typography and full screen photographs.

Visit www.saltsurf.com

That Book Place are a boutique book store located in Jimboomba, QLD. Since opening in 2010, they have grown radiply, and already won two awards for being a new and emerging business. The website features a blog to display all of the latest news and book reviews, and a photo gallery of the store. View website

After months of planning and work, I am proud to be able to present my newly designed site today.

I first launched my site (below) in May 2011, after completing projects for some freelance clients, as I needed an online presence and wanted to showcase the work that I was doing. Whilst it has served its purpose,  since late last year I’ve wanted to create a new site which would establish my branding, and also enable me to start blogging about web design and development on a regular basis

The entire site was designed in-browser, with any images and icons edited in Photoshop.

In line with the minimal look that I chose, I made  use of The Golden Grid and Hashgrid.js to create an aesthetically pleasing grid to build upon.

I also used the Golden ration for the site’s typography. The site was developed using WordPress and also takes advantages of the new features that HTML5 and CSS3 has to offer.

Websites that I used as inspiration

• Block Branding - www.blockbranding.com
• Image Mechanics - www.imagemechanics.com.au
• Mark Lawrence Design - www.marklawrencedesign.com
• 3 Degrees Agency - www.3degreesagency.com

Tools I used

• WordPress
• HTML5 Reset Theme
• The Golden Grid
• Hashgrid (Press G to see it in action)
• Icons by Naomi Atkinson and Sallee Design

Below are 3 way to enhance the experience for clients while they are using WordPress.

1. Add styling to the Visual Editor

The default styling of content in the WordPress visual editor is not very appealing. The font is serif, black and runs all the way along the screen. When editing content like this, it is difficult to determine how the finished product will actually look. Luckily, there is a way to add styles from your website to the visual editor, meaning that what you see in the admin area matches what you will see on the website.

Add the following code to your functions.php file.

add_editor_style();

Create a new .css file in your theme folder called editor-style.css.

Add the styles which your content will be using. Below is an example of styles used on this site.

html .mceContentBody {max-width: 640px;}

* {font-family: Georgia, "Times New Roman", Times, serif;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
h1 {text-transform: uppercase; font-size: 70px; line-height: 119px; letter-spacing: 7px; text-align: center; color: #111;}
h2 {font-size: 24px; line-height: 38px; margin: 0 0 30px 0;}
h3 {font-size: 18px; line-height: 29px; margin: 0 0 23px 0; border-bottom: 1px solid;}
h4 {font-size: 18px; line-height: 29px; color: #444;}
p {font-size: 14px; line-height: 23px; margin: 0 0 19px 0;}
.border {border-bottom: 1px solid;}

ul, ol {list-style: disc; margin: 0 0 24px 0;}
li {margin: 0 0 10px 36px;}
p a, li a {border-bottom: 1px solid #d5d5d5;}
p a:hover, li a:hover {background: #dcf5ff; border-bottom: 1px solid;}
hr {display: block; height: 1px; border: 0; border-top: 1px dotted #aaa; margin: 24px 0; padding: 0; clear: both; float: left; width: 100%;}

img.alignright {float: right; margin: 0 0 14px 14px; background: #fff;}
img.alignleft {float: left; margin: 0 14px 14px 0;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}

a img.alignright {float: right; margin: 0 0 14px 14px;}
a img.alignleft {float: left; margin: 0 14px 14px 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

Upload functions.php and editor-style.css to your site, then take a look at your content in the visual editor.

2. Add more buttons to the toolbar

Add commonly used text editing buttons to the toolbar, to assist your clients with the transition from programs such as Microsoft Word.

function add_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'del';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");

Thanks to Chris Coyier for the code.

3. Educate your clients

Let your clients know about things such as:

• Shortcuts 
  Ctrl + B will bold text, Ctrl + 2 will create a Heading 2 style. See more shortcuts here.
• Preview Button
  This will allow clients to preview their content before it is published onto their website.
• Full Screen Editor
  In versions of WordPress 3.2.1 and above, this allows clients to edit content in a full screen window  free of distractions.
• Internal Linking
  The insert/edit link button allows clients to choose from existing content on their website, instead of having to manually copy and paste links.