Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Posted by: Peter Andrease

Posted on: February 8, 2011 11:10 am

-

This tutorial will show you how to make a div box hide and show with a simple line of jquery.

Firstly make sure you have the latest version of JQuery installed, then you need the following piece of javascript code:


function toggleDivName(DivNameIndex)
{
$("div[id^='DivName']").hide();
$("div[id='DivName"+DivNameIndex+"']").toggle();
}

function Close()
{
$("div[id^='DivName']").hide();
}

Here you can rename ‘DivName‘ to your desired title. The function toggleDivName basically reads in the DivNameIndex and depending on that index passed it will hide all other divs and then show or ‘toggle‘ the one passed. The close function then simply hides all divs.

Now in your html all you need is the following:

Here we have the div that will be hidden, the link to show it and also a link to close it. In your css, you simply need to make sure that the ‘DivName‘ is set to display: none.

You can now add more divs with more links without having to alter your javascript, like that shown below:

Posted by: SEO Positive

Posted on: July 1, 2010 8:12 am

-


To further the tutorial I did on scroll boxes I have decided to show you how to build a drop down box with JavaScript and css, this method is great if you want to add more content to your page but don’t want it immediately visible to any user. Below is an example of this script in action.

Example:

Read More »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt scelerisque scelerisque. Vestibulum in est eu purus fermentum scelerisque. Mauris laoreet tristique ipsum, ac congue justo rutrum sed. Suspendisse venenatis facilisis enim, non venenatis lacus ultrices a. Donec consequat porttitor velit. Maecenas porta libero vel lorem posuere porttitor. Sed in accumsan quam. Nam tincidunt venenatis ligula. Vestibulum quis est massa, nec euismod nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nulla mollis vestibulum mollis. Nulla quis dui et augue hendrerit viverra. Nulla vitae nulla eget velit pulvinar blandit. Sed at arcu vitae metus pretium elementum. Cras at velit sed leo ornare laoreet. Aliquam lacinia cursus ante, pellentesque malesuada est tincidunt ac. Phasellus ut condimentum mi. Vivamus tincidunt elementum eleifend. Vestibulum viverra nisl eu diam sodales non cursus urna gravida. Cras lobortis commodo risus, quis adipiscing est faucibus non. Mauris lobortis nisl nec lectus adipiscing nec auctor risus tincidunt. Ut ornare sollicitudin viverra. Nulla facilisi. Integer sed justo quis urna ornare consequat id sed tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer arcu quam, congue vitae suscipit vitae, consequat at risus. Vivamus a quam lorem, ut tempor nibh. Quisque vitae leo id tortor tristique tristique id et urna. Sed semper justo eget ligula tempor id convallis lectus sodales.
Read Less «

The code behind this is actually really simple and is below with an explanation underneath it of each part

<script type="text/javascript">
function setHeight(height){
       $element = document.getElementById('moreinfo');
       if($element.style.height == '0px') $element.style.height = height+'px';
       else $element.style.height = '0px';
       return false;
}
</script>

This is the JavaScript function which changes the height of the div you have your content in, the first line (beginning with $element =) is simply assigning the element we want to hide to a variable, its less code and tidier to use throughout the script.

The second line (beginning with if( ) is the piece of code which decides wither to expand or contract the element we’re hiding, and the line underneath (beginning with else) is the decision if the “if(” returned false

The return false is simply there to stop our page redirecting to www.example.com/# (url with the hash)

Below is the piece of code you need to add to any link, span, p element or whatever it is you want to use as your button (works on images too)

onclick="setHeight(250);"

Hope you find this tutorial useful, this is a great technique for adding content for SEO Purposes

Posted by: SEO Positive

Posted on: June 21, 2010 8:10 am

-

With HTML 5 and XHTML 2 just round the corner more and more developers are getting excited at the new possibilities available on the web. But are these new technologies actually good for your website.

The simple answer is.

YES

HTML 5 and XHTML 2 are great for your SEO, but building with them can be difficult with non standards browsers *cough* Internet Explorer *cough* not being prepared for these new elements.

A short list of some of the new elements to help better segregate your pages is below:

Tags for layout segregation

  • article – the main content of the page
  • aside – extra content
  • figure – peripheral content with caption
  • footer – the footer of the page
  • header – the header of the page
  • nav – the page navigation
  • section – any section or portion of the page

Tags for media segregation:

  • audio – denoting an audio stream
  • source – the video or audio source files
  • video – denoting a video stream

Tags for DHTML, Ajax and general web application

  • canvas – a place to draw dynamic graphics
  • command – denotes a command button that has information sent to the server or script
  • datagrid – references dynamic data in a tree form or tabular data form
  • datalist – references a list of data in a drop-down list
  • details – provides additional details of a page element, like pop-up help text
  • output – references the output of a script or calculation
  • progress – represents a progress bar in the completion of a process

There are more tags but these are what will make your web development change and your thought process behind building your website will alter for a more semantically correct website.

But as I mentioned above, there are still some browsers (a browser) falling behind (never caught up)

But there is a work around using JavaScript. See below for how to make these elements work with Internet Explorer versions 5+

document.createElement('article');//create a dom element "article"
document.createElement('footer');//create a dom element "footer"
document.createElement('header');//create a dom element "header"

As you can see, its pretty simple and it simply tells Internet Explorer based browsers to create these elements in the dom ready for use, So far I have not tested this with validation. But validation is nothing more than a little badge at the bottom of your pages these days, its almost as overused as the Glider (see below)

Hackers Glider

So HTML 5 and xHTML is good for SEO because search engines can now tell what section of your website is for what, such as header and footer give the search engines a rough idea of what kind of content to expect and article/section tell the search engines that this is where the main bulk of your content lays.

So a more semantic web should mean a more relevant web and less SERP spammers destroying positions.

With that, HTML 5 and xHTML2 are just around the corner and so is the more semantic, clever and aesthetically pleasing web.

Posted by: SEO Positive

Posted on: June 8, 2010 4:04 pm

-

So, many of you like and use jQuery. Its a fantastic JavaScript library, built for designers and beginners to learn and quickly roll out massively interactive applications on bombastic scales.

But is it really necessary?

Well it depends on what you plan to do, are you using the Ajax functionality or simple tweens like fade’s and slide’s if so, then you’re better off writing your own JavaScript as the jQuery library is a massive lump in your downloads, whether your page is optimised no matter how many parallel downloads you can achieve this is still a large product to be downloading for all first time visitors. Sure there are work arounds like putting your script tags at the bottom of your page and other common optimisation techniques.

But does it make sense to have thousands of lines of code you know you’re never going to use for the sake of convenience?

For instance

document.getElementsByTagName('div').style.visibility='hidden');

Is exactly the same as

$('div').css({'visibility':'hidden'});

Except with the jQuery example, you’ll find theres a look up, function calls, instantiation etc slowing the whole process down. So in terms of convenience, is it actually that convenient?

At SEO Positive we use a mixture of jQuery, MooTools and bog standard JavaScript.

But I prefer to build all my own JavaScript tailored to the project, of course I do keep a library of my own tucked away for use which in future tutorials I will post as tutorials on here.

For convenience jQuery and MooTools are fantastic, for helping optimising your website they actually aren’t that great.

At SEO Positive we think really hard about convenience, speed and overall optimisation which all helps with the development of any project and the search engine optimisation which ultimately gives you the best product tailored to your needs. jQuery and MooTools are great, but building your own JavaScript is much more rewarding and overall better for your website.

Posted by: SEO Positive

Posted on: May 28, 2010 7:41 am

-

Here at SEO Positive we had an issue with one of our blogs, an unresponsive script preventing the editor from working. After some digging around in the shroud that is WordPress’ code I worked it out to be an issue with the wp_postmeta table.

The error occurs in this file, ‘/wp-includes/js/jquery/jquery.js?ver=1.3.2:19′

We updated our site a number of weeks back and re-imported all of our blogs, when you import a blog it would appear there is a glitch that inserts into the wp_postmeta table rows with a postid of 0.

This is what causes the unresponsive script, below is the code that we used to fix it, all you have to do is log into your database, back up the wp-postmeta table (just in case) and enter this into SQL input

delete from wp_postmeta where postid = '0';

After you run that on your table you should find that your WordPress blog works just as well as a new blog.

If you found this blog helpful, leave a comment and visit the SEO Positive blog for up to date news on the SEO and internet Market.

happy blogging!

Authors
Categories
Archives
Blogroll