Facebook Tabs – How to and Showcase

Following on from my previous post on how to create a Facebook Fan Page, I’m going to show you how to create your very own tab on Facebook using FBML. You may have noticed recently that many companies are creating their own tabs on their Facebook Fan Pages. These are used to promote products, give extra information about the company, but it can be used for literally anything.

In my example I will create a simple ‘About Me’ tab, explaining just how wonderful I am!

First I create a very simple HTML document in Dreamweaver (or any other HTML creator)

Everything you do when you’re designing your Tab has to be sourced externally and you can’t assign http://www.webdesign-gm.co.uk/news/web-design/quick-tip-9-css-min-height.html http://www.webdesign-gm.co.uk/news/web-design/quick-tip-9-css-min-height.html#comments Thu, 11 Mar 2010 09:27:09 +0000 Martyn http://www.webdesign-gm.co.uk/news/?p=832

Have you ever had the problem with your page layout because there is not enough content on the page, I have a solution for you!

To keep a page balanced and neat and tidy can be hard sometimes if there is little content on a page. A solution to help keep the height of the page to a minimum height can be done by specifying a few simple rules.


.minheight { min-height: 550px; }


Internet Explorer Hack


.minheight { min-height:550px; height:auto !important; height:550px; }


Related posts:

1. Quick Tip 5 – Compact CSS
2. Quick Tip 6 – CSS Shorthand
3. Quick Tip 7 – CSS !Important

As a web designer you are always trying to push the boundaries of design and what the browser can do. Sometimes the work you produce will not work in all browsers (Internet Explorer) but you don’t want to have to comprise on the other browsers that display your design how it was mean’t. So what can you do?

Well, because of a few issues in IE there is the ability to set your document to retrieve certain styles dependent on the browser. Here are the style sheet links below.

IE 5.5 Alternate Style Sheet

<!--[if IE 5.5]>
	<link href="IE-5-5.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE 6 Alternate Style Sheet

<!--[if IE 6]>
	<link href="IE-6.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE 7 Alternate Style Sheet

<!--[if IE 7]>
	<link href="IE-7.css" rel="stylesheet" type="text/css">
<![endif]-->

IE 8 Alternate Style Sheet

<!--[if IE 8]>
	<link href="IE-8.css" rel="stylesheet" type="text/css">
<![endif]-->

All IE Alternate Style Sheet

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

Print Style Sheet

Here is an also very handy print style sheet.

<link type=”text/css” media=”print” rel=”stylesheet” href=”/print.css” />

Related posts:

1. Quick Tip 5 – Compact CSS
2. Quick Tip 6 – CSS Shorthand
3. Quick Tip 7 – CSS !Important

The Benefits and How to Set One Up

I’ve been on Facebook for sometime now, after finally giving into my friends and family’s nagging (Feel free to add me). Back then I didn’t realise the potential Facebook offers to businesses both large or small. The web is buzzing at the minute with the importance of Facebook to business. This is because Facebook has had a recent redesign focusing highly on its search box, which puts it in competition with the likes of Google and other search engines.

The benefits of having a presence on Facebook are obvious, with over 400 million users (1 in 4 people in the UK are on Facebook) – there are a lot of potential clients for your business. Facebook is also the website people spend the most time on (people spend close to 6 hours a month on Facebook – thats more than 3 times longer than people spend on Google!)

Having a Facebook group is now becoming a necessity for any business and getting people to become your fan is even more important. There can be some confusion about whether to setup a profile, group or page. A profile isn’t advisable as it is only accessible by people you are already friends with – it should be your personal presence on Facebook. A group is used primarily to galvanise an idea or show support to a common belief or opinion – best shown for example in the Rage Against the Machine of Christmas No1 Group in the UK and numerous others.

For a business the best solution is to create a page which enables you to keep in touch with and interact with clients and attract potential ones. The aim is to get people to become a ‘fan’ of your business, once they have done this they can suggest your business to their friends and most importantly; any content you promote on your Facebook will appear in their news feed (example below).

How to Create a Facebook Fan Page

Obviously to create a Facebook Fan Page you will need a Facebook profile. Once logged in go to another Fan page (www.facebook.com/websitedesignbristol) and on the left column at the very bottom, click on Create a Page for My Business

Choose which Area best describes your business, and fill out Name of Page and click Create Page. Now you have your own Facebook Fan Page.

Now your Facebook Page is created you can begin to fill out the information about your business – click on the Info tab and select Edit information, fill out the boxes and click Finished editing. You can add photos by click on the Photos tab, Create a Photo Album and upload photos from your computer.

Finally to personalise your page it’s important to change your pages’s main picture. Click on the question mark in the top left corner, click Change Profile picture and upload a copy of your company’s logo, check the thumbnail version and click Save Thumbnail Version. At the top click go back to your Fan Page. You can also write something about yourself by click the link on the left – perhaps you web address, twitter or short description of your business.

Now your page is looking how you want, you can suggest it to your existing friends by clicking on the Suggest to friends link on the left of the page. Pick on the people you want to be your fan and click Send invitations.

You can now start posting content onto your Wall by filling out the What’s on your mind? box – it’s important to regularly do this to keep your page up to date, attract more fans and keep them coming back again and again.

The more Fans you have the better and once you have 100 fans you can choose you own vanity URL eg. facebook.com/mybusinessname

To get one for your group go to www.facebook.com/username

Part 2 Coming Soon! Facebook Tabs – Take Your Fan Page to the Next Level!

To take your Facebook Fan Page to the Next Level, keep an eye out for my next post on Facebook Tabs – to give your Facebook Fan Page the professional edge!

Related posts:

1. Twitter Video Tutorial!
2. Apple Release New iMac
3. Happy Birthday Firefox!

Apple has now set the date for the release of the iPad in the U.S and the U.K for April. The Wi-Fi version will be released on the 3rd in the U.S and in late April for the U.K but the 3G model will be released in late April for both countries. Apple have now released a video all about the iPad, which debuted at the Oscars.

There has been a lot of hype and news coverage about the iPad since it was announced by Apple in January but not everyone was impressed especially some of the big name companies.

Basically the iPad is just like an over sized iPod Touch with a sleek black screen and a thin profile, which still makes it appealing for the potential users. Users of the iPhone will be used to its functionality and use of finger swipes and jabs to navigate the applications.

With the larger screen of 9.7 inches it will feel more satisfying and easier to see everything on screen. Surfing the web is easily accomplished, video playback is smooth and the games are handled pretty well. Applications made for the iPhone can also be used on the iPad but since the screen is much larger, users will notice pixellation because the application has to fill the screen.

The iPad will be ideal for people who want a simple browsing experience around the home and all round entertainment while on the move. For people who browse the internet for more than just videos will be disappointed as the iPad does not support Flash and probably never will.

This could mean that anyone wanting to develop sites for the iPad will have to use an alternative to Flash such as jQuery or HTML5 and it’s possible that Flash will be used less on websites overall.

Another disadvantage of the iPad is the lack of running more than one application at a time so users can’t listen to music while browsing their favourite sites or while playing a game, but that never stopped the iPhone becoming popular.

Even though the iPad lacks some functionality that might be expected by everyone it has been predicted that about 4 million will be sold worldwide in the first year. It will appeal to people who want an easy way to browse the internet, listen to music or view videos and photos without a complicated interface used on PCs.

Click here to see a spoof advert about the iPad.

Related posts:

1. Apple Release New iMac
2. Happy Birthday Firefox!
3. Bing Vs Google

This isn’t something to use on a regular basis but a very useful tool when you need it.

Another simple tip today, the !important rule in CSS. This little snippet will help you override any rule that is already assigned. For Example:


body { background-color:#000 !important; background-color:#CCC;}


Now the background colour of Black will be assigned over the Grey even though Grey is assigned over Black.

Related posts:

1. Quick Tip 5 – Compact CSS
2. Quick Tip 6 – CSS Shorthand
3. Quick Tip 9 – CSS min height

CSS Shorthand is another method which is regularly used to help cut down the size of Style Sheets, however trying to remember all shorthand tricks can be a bit tricky sometimes, so here is a handy list of the ones I use on a regular basis.

Boxes

Long
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

Shorthand (Every Value Different)
margin: top right bottom left;
margin: 0px 0px 0px 0px;

Long
margin: 20px 10px 20px 10px;

Shorthand (Equal Top and Bottom, Equal Left and Right)
margin: top-bottom left-right;
margin: 20px 10px;

All Values
margin: 10px;

Colour

Long
color: #FFFFFF;
color: #33CCFF;

Shorthand
color: #FFF;
color: #3CFF;

Backgrounds

Long
background-color: #000;
background-image: url (bg.jpg);
background-repeat: no-repeat;
background-position:top left;
background-attachment: scroll;

Shorthand
background: #000 url(bg.jpg) no-repeat top left scroll;

Fonts

Long
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 0.8em;
line-height: 1.6em;
font-family: Georgia, Times New Roman, Times, serif;

Shorthand
font: italic normal bold 0.8em/1.6em Georgia, Times New Roman, Times, serif;

Borders

Long
border-width: 1px;
border-style: dashed;
border-color: #000;

Shorthand
border: 1px dashed #000;

or

border-width: top left bottom right;
border-width: 1px 2px 3px 4px;

List Styles

Long
list-style-type: circle;
list-style-position: inside;
list-style-image: url (img.jpg);

Shorthand
list-style: circle inside url (img.jpg);

Outline

Long
outline-color: #000;
outline-style: dotted;
outline-width: 1px;

Shorthand
outline: #000 dotted 1px;

Related posts:

1. Quick Tip 5 – Compact CSS
2. Quick Tip 7 – CSS !Important
3. Quick Tip 9 – CSS min height

Are you finding that sometimes you are writing out the same rules multiple times for classes, id’s or tags?

A very simple tip today, but one that can help dramatically reduce the amount of CSS Styles you create.

This, For Example:


.col_1 { width: 330px; height: 400px; padding: 20px; background: #ccc; }
.col_2 { width: 330px; height: 400px; padding: 20px; background: #666; }
.col_3 { width: 330px; height: 400px; padding: 20px; background: #999; }


Should Be:


.col_1, .col_2, .col_3 { width: 330px; height: 400px; padding: 20px; }
.col 1 { background: #ccc; }
.col 2 { background: #666; }
.col 3 { background: #999; }


Therefore you no longer have to repeat any code that has already been assigned.

Related posts:

1. Quick Tip 6 – CSS Shorthand
2. Quick Tip 7 – CSS !Important
3. Quick Tip 9 – CSS min height

The functionality, layout and design of a website has a huge affect on it’s popularity. Below we have listed a few simple rules to implement when designing for web in order to create a successful site.

1. Z Flow/Positioning

The eye naturally scans the page from left to right in a z formation, so on that basis the top left corner is prime position and will be where you first meet the page, before scanning across the remainder of the header. Therefore it’s important you populate this area with something you regard important. This is why it’s so common for companies to display their logo top left, followed by a brief description or contact details.

2. Navigation

It has been discovered that navigation is more effective  when positioned towards the top of the page and running horizontally rather than listed down the side of the site or towards the bottom of the layout. So with this in mind i would suggest to only use side navigations when products or pages are going to be added or removed regularly.

3. Headings

After the initial glance of a site we are naturally drawn to noticeable, dominant headlines. You’ll find that larger text usually results in the visitor adopting a scanning approach whereas smaller text will encourage a more focused reading behaviour. Visitors will on average spend under a second reading a heading, so anything over 6 or 7 words is wasted and won’t be absorbed unless you’ve already grabbed their attention.

4. Imagery/Flash

The bigger the image the longer the visitor will fixate on it. We find that particularly effective images will generally include people, as they tend to keep your attention for a little longer. Any interactivity or animation is also a big plus where images are involved, this can keep sometimes keep the users attention up to x10 longer.

5. Advertising

In terms of advertising it goes without saying bigger ads are more effective than smaller ads. However the position of the advert can pay dividends. Adverts positioned – as mentioned earlier – towards the top left are particularly successful as are ads placed next to popular content. This may seem obvious but many people don’t follow these simple principles.

6. Site Content

The layout of site content is very important. You need to keep paragraphs short and include plenty of sub-headings, this also needs to be combined with good column widths. Generally 2-4 columns works best as 1 column is too long and any more than 4 begins to look a little messy and difficult to read.

7. Colour

The final element but certainly one of the most important is colour. The trick is not to use too many colours and select colours that are opposites in the colour wheel so that they compliment each other, i.e. blue and orange, just as you would with tones going from light to dark. If you feel this is something you struggle with try visiting sites such as www.colourlovers.com as these have hundreds of colour palettes that have been tried and tested and work really well together.

Related posts:

1. Web Designers Guide To CSS 3
2. Web Designers Guide To HTML 5
3. Web Designers Guide To jQuery

When I work on a design when developing in Dreamweaver, almost the first thing I do every time is apply a Reset to my Style Sheet. So what is a CSS Reset?

To get things kicked off let me explain the CSS Reset and why I use it. By default Tags such as h1, li, ul, form, a and many others already have predefined styles on margin and padding which personally I have found can be quite difficult to keep consistent across browsers. To combat this you can take off all predefined styles with a simple slice of code.

While there are many to choose from you may wish to modify them to suit your needs. The CSS Reset I consistently use is below:


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
img { border: none; }


However it is always evolving. If you would like to see others have a search in Google as there are plenty around.

Related posts:

1. Quick Tip 5 – Compact CSS
2. Quick Tip 6 – CSS Shorthand
3. Quick Tip 7 – CSS !Important