Posted by: Peter Andrease

Posted on: July 10, 2012 4:16 pm

-

Last week I talked you through the benefits of using Less.css in your next web project. If you missed part one click here to read it first. I’ll be rounding up the tutorial with info on “Nested Rules” and “Functions & Operations.”

Nested Rules
Nested rules allow you to specify child selectors to keep your stylesheet smaller and easy to navigate. It also forces you to keep your stylesheet much more organised. See below how it works:

Functions & Operations
With Functions and operations you can add and subtract numbers in your stylesheet. It’s complicated but can save you a lot of time and dramatically reduce the size of your less stylesheet. This just touches on what’s possible with functions and operations in the less css. See below:

As you can see less.css is a very useful css language and a lot of people are using it now. After a small learning curve you’ll find yourself using it often, it saves time and makes your css much more easy to go through when re-visiting.

Posted by: Peter Andrease

Posted on: July 6, 2012 2:00 pm

-

The benefits of Less are clear as soon as you understand it.

So what is it?

Less speeds up css development in several different ways. It can be used for the following:

  • Variables
  • Mixins
  • Operations
  • Functions

Variables

If you’re any kind of web designer you’ll know what a variable is. You specify something and then call it later somewhere else as many times as you like and once you’ve changed the variable all the calls will change too. So imagine having all your titles across a site in the colour black, the site is huge and you’ve used all the h’s and added special classes to target special circumstances. Imagine being able to change it one line of code! Well you can with less…

variables

Mixins

Mixins means you can put all of the properties of a class into a different one. This means instead of writing out the code or copying and pasting it again. You can use a mixin which works a lot like the variable. Mixins also allow you to add functions, see below….

mixins

Next week we’ll round up the tutorial with Nested Rules and Functions & Operations.

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

Posted on: February 17, 2011 9:14 am

-

This tutorial will show how to add curved corners to boxes using the curvycorners.src file, which you can download here.

Save the file to your root folder and point to the .src file in your html.

Now all you need to do is add a few simple lines of css to add curves to your div box.


-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;

You can now adjust the size of the curvature by amending the pixel amount, the bigger the amount the bigger the curve. You can even remove some of the corner curves so for instance only the top of your box has curves.

This css works fine in firefox, however as Internet Explorer is a different breed you may also require the following css to make sure it is cross-browser friendly:


-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

So your div would then be:

#curved-corners {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

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 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.

Authors
Categories
Archives
Blogroll