Visit Web Site

I designed the site based on the 960 grid system. Having not been a fan of grid systems in the past I found the framework quite refreshing. I have also utilised the new CSS3 technology @font-face into my design. Web safe fonts are just too boring.

Visit Web Site

@font-face allows designers to set custom fonts on their web pages. The technique is added to a style sheet to embed fonts in the page without using images, Cufón or hoping the font is already installed on the visitors computer. I must say this is an awesome new feature of CSS3 and there is no doubt it will be popular. Unfortunately I have found the current state of @font-face to be a little disappointing. After spending much time at Font Squirrel downloading and testing fonts I discovered their is no consistency among web browsers that support @font-face.

Microsoft has actually implemented this feature many years ago. To embed a font capable of rendering in Internet Explorer it must be converted from a TrueType or OpenType font into Embedded OpenType (EOT). It's biggest disappointment is that is must currently use this format and does not support anti-aliasing like Clear Type. Comparing Gecko and WebKit isn't much fun either. What looks fine in Firefox maybe very different on Chrome and vice versa.

Here is a example combining a text shadow. Notice how Chrome has rendered the font much more clearly. Yes it is the same style sheet.

Fertigo Pro

Here is an example of the difference in rendering between the 3 major browsers. Notice the difference in the font-weight between Firefox and Chrome and the lack of font smoothing in Internet Explorer. Click the image for a larger view.

Vegur Regular

Because I love this feature so much. I will probably continue to use it. But its important not to expect the typography to look the same in all CSS3 compliant browsers. For now just be aware of the inconsistencies and hopefully things will be a bit more standard in the future. It's also important that you test your typography in fall back fonts. What may fit into your columns for Quicksand at 16px may not with plain Arial at 16px.
In a perfect world all fonts would look smooth and evenly shaped throughout all browsers. As designers we know this probably will never happen!

1. Find your icon set

   Smashing Magazine have a terrific article: 50 Beautiful, Free and High-Quality Icon Sets. For this article I am going to reference the Handycons which I am currently already using on this site.

2. Create your social media sprite

   

   Handycons by Janko (Click for full size)

   If your not sure how to create image sprites, I suggest you have a look here. I find creating sprites with Adobe Fireworks to be the easiest because you can calculate the X and Y coordinates much easier using the Properties panel. For an effect I have selected all the icons in the first X coordinate and chosen and opacity of 70%. This is so I can easily create a hover effect for my icons. I have also used PNGCrush to reduce the size of the PNG file.

3. The CSS

   Here is an example of the CSS code used currently in this site:
   

   .rss, .rss:hover, .twitter, .twitter:hover, .facebook, .facebook:hover,
   .linkedin, .linkedin:hover, .flickr, .flickr:hover, .email,
   .email:hover, .delicious, .delicious:hover, .google, .google:hover,
   .reddit, .reddit:hover, .digg, .digg:hover, youtube, youtube:hover {
   background:url('images/social.png') no-repeat;
   display:block;
   width:48px;
   height:48px;
   cursor:pointer;
   border:0
   }
   .rss {
   background-position:0 0
   }
   .rss:hover {
   background-position:-48px 0
   }
   .twitter {
   background-position:0 -48px
   }
   .twitter:hover {
   background-position:-48px -48px
   }
   .facebook {
   background-position:0 -96px
   }
   .facebook:hover {
   background-position:-48px -96px
   }
   .linkedin {
   background-position:0 -144px
   }
   .linkedin:hover {
   background-position:-48px -144px
   }
   .flickr {
   background-position:0 -192px
   }
   .flickr:hover {
   background-position:-48px -192px
   }
   .email {
   background-position:0 -240px
   }
   .email:hover {
   background-position:-48px -240px
   }
   .delicious {
   background-position:0 -288px
   }
   .delicious:hover {
   background-position:-48px -288px
   }
   .google {
   background-position:0 -336px
   }
   .google:hover {
   background-position:-48px -336px
   }
   .reddit {
   background-position:0 -384px
   }
   .reddit:hover {
   background-position:-48px -384px
   }
   .digg {
   background-position:0 -432px
   }
   .digg:hover {
   background-position:-48px -432px
   }
   .youtube {
   background-position:0 -480px
   }
   .youtube:hover {
   background-position:-48px -480px
   }
   

4. The HTML

   Style it as a horizontal list. I am using it in single.php before the comments section.

   RSS

   <a class="rss" title="Subscribe to RSS feed" rel="nofollow" href="&lt;?php bloginfo('rss2_url'); ?&gt;" target="_blank"> </a>

   Email

   <a class="email" title="Email Article" href="mailto:?subject=&lt;?php the_title(); ?&gt;&amp;body=&lt;?php the_permalink() ?&gt;"></a>

   Facebook

   <a class="facebook" title="Facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink() ?&gt;&amp;t=&lt;?php the_title() ?&gt;" target="_blank"> </a>

   Delicious

   <a class="delicious" title="Delicious" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent('&lt;?php the_permalink() ?&gt;')+'&amp;title='+encodeURIComponent('&lt;?php the_title() ?&gt;'),'delicious', 'toolbar=no,width=550,height=550'); return false;" rel="nofollow" href="http://delicious.com/save"> </a>

   Google Bookmarks

   <a class="google" title="Google Bookmarks" rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;&amp;annotation=&lt;?php the_excerpt(); ?&gt;" target="_blank"> </a>

   Reddit

   <a class="reddit" title="Reddit" rel="nofollow" href="http://reddit.com/submit?url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;" target="_blank"> </a>

   Digg

   <a class="digg" title="Digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;amp;url=&lt;?php the_permalink(); ?&gt;&amp;amp;title=&lt;?php the_title(); ?&gt;" target="blank"> </a>

There are obviously many more sites that can be possibly be added. WPBeginner has started a cheat sheet. This strategy will save on HTTP requests and optionally add a hover effect without JavaScript Pre loading. Perfect for optimising your site for speed

1. Space out your text wall! Make sure you use your paragraphs tags and specify margins in your CSS.
   

   p { 
   margin-top: 15px;
   }
   

2. Forget text-align: justify. Left alignment is much easier to read.
3. Don't get stuck on Times New Roman! It's so boring...
4. Think about a larger font size. Screen resolutions are bigger than they are 5 years ago. 12px on 1680x1050 is tiny. Not all of your visitors know what 'Control +' keys do.
5. Specify line height! I use pixels. I find its optimal to use 6 pixels more than the font size specified. For example:
   

   font-size: 14px; lineheight: 20px;

6. Experiment with word-spacing and letter-spacing with your font face.
7. Use ordered and unordered list tags when necessary.
8. Make sure the font colour is easily viewable on the background.
9. Are page animations distracting your viewers attention?

Baby Nights a business by Australian sleep consultant Peter Garrett; is a business that educates mothers and fathers establish sleeping patterns for their baby. The concept helps households overcome the burden of insomnia.

Before employing my services. The original site design did not suit the business. The site was employing a search engine optimiser with high monthly fees and was no where to be found on any of the major search engines. Upon employing my services the site has appeared on second page of Google Australia's results on it's second week. The site also has a blogging feature where Peter can share he's thoughts with site visitors and clients.

Visit Web Site

Cake Mania is a Parramatta based company dealing in wholesale, retail and restaurant quality pastries and cakes.

Cake Mania needed a website to display a large variety of cake designs whilst also promoting gluten free products. Customers were also unfamiliar with the store location. The site was designed using the store front's colour and logo design. It features a gallery and Google maps integration to help the customers find the store.

Visit Web Site

My client needed a website to showcase her latest work and also include a gallery archive. My client also wanted to to integrate social networking sites like Facebook. The goals were met and the client is receiving more business mainly for real estate photography as she can show case and even help sell properties through the website. Social networking sites are now responsible for 60% of Absolute Images traffic each month.

Visit Web Site

Social Media Optimisation is the process of expanding your websites visibility to social media networking websites without relying on search engines alone to increase internet prevalence. Information is shared from websites to third party communities to replicate the technique of viral marketing. Word of mouth advertising is created by users through the use of blogs, message boards, photo and video sharing, podcasts and social bookmarking. SMO is also used in Search Engine Optimisation to increase page rankings through inbound links published by users.

The goal is to help sell products or services and even create online reputations for businesses. There are large amount of businesses now integrating social media into their marketing campaign to increase brand building, customer satisfaction, business development and research and development. Social Media Marketing can also burn products and services. If the subject is not marketed correctly or if it doesn’t have any interest at all the marketing scheme can fail.

There are many social media websites. The most popular are YouTube, Facebook, Twitter, Digg, Delicious, and LinkedIn. Successful optimisation engages niches for brand building, mind share, links and customers specific to the social media site.

Meta Tags

There are several methods of increasing your page relevance. The most common and outdated form is to add Meta data to a web page. The Meta data tags elements involve knowing HTML. A language used to write web pages. The Meta data is used to specify page descriptions and keywords. This data is not visible to the user unless they choose to view the source code of a web page. Here are some examples of Meta tags:

<meta http-equiv=”Content-Type” content=”text/html” />
<meta content=”southern cross web design” />

Indexing

Most search engines now use crawlers or spiders to find relevant pages for their results. A crawler is a computer program run by search engines that validates and indexes web pages. A web master will normally define a crawling policy of their sites with the use of an XML Sitemap. The sitemap can assist feeding information to the crawlers by defining how often a page should be indexed and if a page should be indexed at all. It is possible to prevent crawling on a set of pages or the whole website. The crawler it will also identify links to other websites which it can also crawl. This is a useful method of getting a commonly indexed website to index another website(s) through the process of hyper linking. It is not uncommon for web crawlers to duplicate content.

Search Engine Marketing

Another form of SEO is Search Engine Marketing or SEM. Typically it is considered a strategy of Internet Marketing. Clickable advertisements in search engine results are examples of buying paid search listings from keywords. Prime examples of SEM are sponsored links that appear in search results. Web marketers will usually bid on relevant searched keywords to help promote their site. Other SEM schemes involve web banners and paid advertisements.

Page Ranking

Page Ranking can also increase the relevance of web pages. It is the process of hyper linking sites to increase your relevance among search engines. There are many types of linking. The most common links are cross links, one way links and reciprocal links. Cross linking is the process of linking to different pages in the same website. One way links are links that link to another website’s page and reciprocal links are mutual links back and forth from two or more website. The more incoming links to a page the higher its prevalence will be in search engine results.

Social Media Optimisation

Another page ranking strategy is the process of linking web pages with social media websites like Twitter, Facebook, Reddit and YouTube. This process is known also as Social Media Optimisation (SMO). This method is used to promote products and services through social media websites. Published correctly, this method of marketing can generate extra traffic to your site. It can also establish a following or fan base through viral marketing. Forms of SMO can be blogs, reviews, social bookmarking, video and image sharing. This method done incorrectly can have a negative affect on products or services.

Black Hat SEO

SEO strategies that conform to search engine guidelines are considered as white hat SEO. This SEO strategy produces long lasting relevance and does not deceive web crawlers or human users. Grey hat SEO strategies include schemes that have some risk associated with them like the buying and purchasing or links also known as Link Farming.
Black hat SEO techniques attempt to improve rankings in which are disallowed by search engines. Mostly these techniques involve deception, hiding visible web page elements, cloaking, and spamdexing. Cloaking is the process of a website providing a different page to human visitors and a different page to the crawlers. Spamdexing involves repeating unrelated keywords and phrases to manipulate the search index. Other spamdexing methods are called keyword stuffing where keywords are strategically placed throughout a page to raise the keyword relevance. There are other forms of Black Hat SEO like cookie stuffing and page hijacking. It is very common for search engines to drop sites from rankings or delete sites from their index for black hat SEO techniques.