Posted by: Peter Andrease

Posted on: May 18, 2012 9:23 am

-

This tutorial will show you the best way to add a simple gradient backgound to your website using photoshop and css.

Open a blank document in photoshop at the height you want the gradient to be and add a new layer, then fill with any colour using the ‘Paint Bucket Tool’. Now double click the layer to bring up the Layer Style options and select Gradient Overlay, create the gradient you wish, for example:

-

This gradient uses the colours #075068 at the bottom to #0f7da1 at the top. Make sure to keep a note of the bottom colour (i.e. #075068) as this will be used in the css to blend into the rest of the background.

Now go to Layer > Flatten Image, then go to Image > Canvas Size and make the width 1px, hit Ok and then hit Proceed. Now save this image for web, a .png file is probably the ideal file format for quality and file size.

With your image created all you need to do now is simply add the following script to your css:

.background {
background: #075068 url(images/background-image.png) repeat-x;
}

Then simply change the colour hex code to your code and rename the image name/location to yours, you can now add that class to any html element to have your repeated gradient, like that shown below:

Posted by: Peter Andrease

Posted on: May 15, 2012 4:22 pm

-

Media queries have appeared in web development quite recently and are a brilliant way of making a site looks good across all devices. Whether the site is being viewed on a television, desktop, computer, tablet or telephone it will dynamically change to be best suited to the screen size.

The difference between a phone which can be only 320px wide and a large monitor which could be 2000 pixels wide is huge and paying attention to this will enhance the user experience.

Most of the big sites use responsive web design and media queries to specify the width across the different devices. Websites like Amazon are accessed on phones and tablets daily and thus it is essential for them to be able to provide a mobile friendly version.

Media queries will add development to your scope but for a little extra time, it can make a lot of difference.

So to add media queries to a site you’ll need to add them at the end of the stylesheet so it overrides all the other styles specifically for each device.

So what would you use it for?

  • Change a 3 column site into 1 column for a mobile screen.
  • Loading higher resolution images for bigger screens
  • Line-height and font sizes.

So if you’re ready to add it put this html in the head section of the site.

This will make the site be zoomed into 100% rather than it fitting the whole page to the screen.

The next code snippet is a good grounding to get started your different screen resolutions. Add it to the end of your css sheet and start coding!

@media screen and (min-width: 1200px) {}
@media screen and (max-width: 760px) {}
@media screen and (max-width: 550px) {}
@media screen and (max-width: 400px) {}

768px x 1024px is the resolution of an ipad
320px x 480px is the usual resolution of android and iphones (portrait and landscape)

A great place to check to see how the site looks is here.

Some examples I like, make sure you resize the window to see the media queries take effect:

Posted by: Ben Austin

Posted on: January 16, 2012 4:44 pm

-

facebook

If you want to increase the amount of traffic to your website, you are most likely using social media to not only do that, but increase sales and build customer relationships. On top of using social media for the above purposes, you can also use them to drive direct traffic to your site. More specifically you can use your Facebook page to drive direct traffic to your site.

 

Adding The Tab

The first part you will want to do is add a custom tab to your page, this is called a static HTML page and can be found by using the search bar atop Facebook. Simply add the application to your desired page then go onto the selected page.

There should be a new tab on your Facebook page which says welcome with a star as the icon. When you click on the icon, you are taken to the backend of the application, this is where you can add the correct HTML code.

The standard code that is required for pulling a website into a custom tab like this is: <iframe src= “ENTER URL HERE” width=600 height=1000> .

The width and height settings are the best specifications for Facebook because the space provided is 600px wide and 1000px seems like the easiest size to have, although this is customisable. The “enter url here” is obviously where you enter your address, but you need to keep the quotation marks around the web address.

Conclusion

Although iframes do not pass on any SEO value, as page rank is not flowed by the use of iframes. However, for customer usability and many other reasons such as traffic, they are highly beneficial. This is another case of social media optimisation and how an agency can greatly increase your social media campaign.

Posted by: Shofiur Rahman

Posted on: November 29, 2011 11:04 am

-

flash player We all know how amazing flash is, it is possibly the nicest looking type of website out there. However there are a few problems with having flash on your site. The first is that it is invisible to Google, the second is that they can take a long time to load and finally they cannot be used on mobiles.

Google has released a tool called Swiffy, which may be because it requires a SWF file to convert. Swiffy takes the SWF file you have uploaded and then the tool converts the file. It shows you the coding and the flash file next to each other so you can compare the two.

At the bottom of the page there is a link which sends you to your uploaded flash file in HTML, all you then have to do is view the source code and copy the script, your code is now ready to upload to any site you want.

I have already tested the HTML 5 conversions on a mobile device (iPhone 3 GS) and they do work, even the games that Google provide, I have also uploaded my own flash files. Flash games do work when converted but the more complex the game is, then the laggier the html version is for mobile devices. This may not be the case for phones such as the iPhone 4s, but unfortunately I have not had the opportunity to test this. Converted flash animations are quite fast and are only a little slower than what is displayed on a PC.

All in all, Swiffy is going to be of great use to all web design and animators, now their work will be easily displayed on not only computers but also mobile devices. It is only a matter of time before Swiffy becomes more popular and all flash files become converted into HTML for speed, SEO reasons and across the board usability.

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: Peter Andrease

Posted on: February 3, 2011 3:17 pm

-

I have always found it a pain adding footers to the bottom of the page, either the footer wont push down with the page or it just wont sit where it is supposed to. This tutorial will show how to effectively add a centrally aligned footer that sticks to the bottom of the page and follows the content when it scrolls down.

Firstly, create a new HTML document and set up the page as follows:

Now in your stylesheet all you need is the following:

These styles basically give the whole page a forced width and height of 100%, then gives the wrapper of the content a minimum height of 100%, so that even when there is no content it will still force to 100%.

This would obviously push the footer below the 100%, so the margin of 0 auto (to align center) and -80px is there to bring the footer back up. So the 80px would be whatever the height of the footer is.

With this configuration the footer would then sit over the content so the push div was created as the same height as the footer to resolve that issue.

Finally, in order for the footer to push down with the content the height of the content has been set to auto, so it will adjust accordingly.

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 24, 2010 7:40 am

-

So you want to add more content to your website, but you only have a limited space to do it in. The solution is a scroll box!

Scroll boxes are an easy, clean way of adding an unlimited amount of content to a website without damaging the aesthetic looks at all.

An example of a scroll box is below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor diam feugiat neque porta sollicitudin. Suspendisse vitae ligula metus, a convallis velit. Donec ornare auctor augue nec rutrum. Duis ut massa a elit convallis vestibulum id non mauris. Suspendisse risus diam, pellentesque ac sagittis ac, mattis vel enim. Sed at dolor in neque mattis elementum. Aenean ornare aliquam malesuada. Morbi adipiscing, urna ac placerat venenatis, mauris libero mattis odio, at vestibulum libero nulla nec sem. Proin ultrices sagittis nulla, vitae malesuada augue congue et. Nulla nec porta felis. Praesent tristique laoreet est, vitae cursus purus lacinia eu. Nulla iaculis massa vel erat lacinia quis adipiscing libero molestie. Nulla sem sapien, dignissim ac venenatis vel, auctor et erat. Nam sollicitudin, mauris eget blandit pulvinar, dolor enim tincidunt justo, eget feugiat purus odio id lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ornare purus rhoncus dui fermentum viverra. Nulla posuere mauris accumsan erat ornare vel tempor lacus auctor. Proin id lorem arcu. Donec at lobortis eros. Proin id magna lacus, sit amet viverra ligula.

Donec id ligula et dui molestie euismod. Ut lacus justo, tincidunt a ultricies vel, rhoncus vitae neque. Aliquam erat volutpat. Donec porta, dui non egestas mollis, justo sapien accumsan metus, quis fringilla mauris leo eget dolor. Donec pretium varius enim a pharetra. Maecenas dictum, nibh vitae ullamcorper mattis, neque lectus gravida nibh, et convallis tortor enim consequat lectus. Proin blandit eros metus. Sed vestibulum odio a ipsum adipiscing lacinia. Etiam odio nunc, consectetur tristique consequat et, fringilla in felis. Maecenas et sagittis orci. Nulla facilisi. Morbi volutpat magna et orci pellentesque fringilla.

Quisque ac libero ac metus tristique consequat. Curabitur euismod, ligula et luctus adipiscing, magna dolor ultrices ligula, nec fringilla neque tortor in sem. Ut ornare ipsum a lectus tempor iaculis. Donec auctor molestie orci vel ultrices. Integer semper faucibus orci, et tempus velit tincidunt eget. In gravida ligula eu libero mollis feugiat. Aliquam pulvinar congue velit, eu tincidunt nibh euismod eget. Donec vel lorem orci. Maecenas sit amet diam tortor. Sed sit amet tincidunt ante. Donec lorem sapien, congue placerat elementum sit amet, varius a mauris. Proin ac arcu nec tellus feugiat vestibulum.

Donec at lorem ut elit ornare imperdiet eget id augue. Morbi interdum facilisis sodales. Sed in erat est. Cras porta accumsan mollis. Morbi eu massa quis enim suscipit sollicitudin. Vestibulum a leo risus, non dictum purus. Nam at nisi lacinia massa molestie auctor. Fusce dictum nulla eu nunc mollis eu egestas velit malesuada. Integer commodo lobortis ligula quis porta. Fusce porttitor ullamcorper nisi at auctor. Integer tempus tempus posuere. Vivamus iaculis luctus hendrerit. Cras a orci nec erat placerat ultricies et eu ante. Nullam nec lacus nibh, id molestie ipsum.

As you can see, there’s an awful lot of content in that box, but its only a set height. See below for the code used in this tutorial.

<div style="height:100px;width:100%;overflow:auto;">
        <p>Your content here...</p>
</div>

All you have to do is change the height and width to match your requirements and its as easy as that!

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: June 1, 2010 8:06 am

-

Hi, welcome to the SEO Positive tutorials blog, today I’m going to be discussing the pro’s and cons of CSS layouts and table layouts with regards to ease of use, ease of validation and page speed.

In SEO Page speed has become an important factor in getting your page high on the SERP’s so its important to try and do everything you can to get your page loading as fast as possible, here at SEO Positive we only use CSS to build our websites as this gives us a big advantage on page speed and layout flexibility. While some companies still like to use tables for a quick ‘get it out of the door’ website, this is just awful for anyone wanting to do any future work on it in the future.

Tables are, well, what it says on the tin. They’re an arranged collection of rows and columns fitting to your need and while it may be quick to get out of your hair  you have to think of the future use of the site, validation will be much harder and much more time consuming with tables in your layout and the actual code involved is very cumbersome which causes your page to load a lot slower than said CSS layout.

But the title of the blog mentions ‘xHTML’? whats that?

Tables are HTML based, there’s nothing custom about them and you’re limited as to what you can do with them, especially if you plan to use a strict DTD, CSS is primarily for laying out your page in a more custom manner, with absolute, relative and fixed positioning available and using divs, span, fieldsets etc as members of your layouts children is classed as xHTML.

In terms of ease, CSS will take longer to learn as it is property based, so for example if you wanted a div aligned to the middle of your page you would need to use the below code

<style type="text/css">
div{
display:block;
width:150px;
background:green;
margin:0px auto;
}
</style>
<div></div>

Which obviously looks more cumbersome than the blow table version

<table align="center">
     <tr>
          <td>Table stuff</td>
     </tr>
</table>

But when you consider the scale of a div and a block of CSS is compared to the size of a table and all of its contents, its all of a sudden much more convenient.

Also, validation will pass first time on both CSS and xHTML strict where as you might have a lot more trouble with a table based layout as this has a lot more elements with inline style and we all know that search and replace in any editor is dreadful.

So, the winner of the web development face off. Is most definitely CSS and xHTML.

happy blogging!

Authors
Categories
Archives
Blogroll