Green Office Week 2011

This week is Green Office Week 2011. We took part last year to help raise awareness among the staff at BSS and our customers and are happy to be involved again this year.

We blogged throughout the week last year and intend to do the same again this year, sharing the changes we are making. If you are also taking part, let us know & check back on this blog to leave your tips.

To find out more & take part yourself, visit http://www.greenofficeweek.eu

How to find a web designer

Following on from our last post, 5 questions to answer before speaking to a web designer, you should now be in a position to start looking for a web designer to talk to. You have so much choice it can be difficult to narrow it down to the handful you want to start speaking to. And, because of the internet and email, you aren't necessarily restricted to local companies either. However, this can be one way to narrow down your options and it can be reassuring to know that you can call in to meet your web designer if you have any questions - sometimes there is no replacement to face to face meetings.

If you don't have a friend, relative or friend-of-a-friend who's a web designer, you are most likely to find your web designer via one of the following three ways:

1 - Word of mouth: 
Ask who friends, colleagues, customers, suppliers have used and what they thought of them. A web designer can look great on screen, but if you can speak to someone who has been through the development process you'll find out a lot more about whether you'll be able to work with a particular designer or company.

You can also ask for recommendations on Twitter & Facebook, but be aware of anyone you don't usually communicate with or spammers who may be paid for recommendations.

2 - Sites they have designed:
If you come across a website you like the look of, find easy to use, or want the same functionality as, try to find out who designed it. Usually there will be a link towards the bottom of the website to the web designer. You should then be able to see more examples of the designers work.

3 - Search engines:
Enter your search term and you are likely to receive millions of results and possibly hundreds of companies to choose from (unless you're looking for something very specific in your web designer). So while you are looking through their portfolios, try some of the checks below and see if this helps to narrow down your options.

• Look at the websites they have designed - not just the pictures, but go and use them. Do you like the look of the sites? Are they easy to use? 
• What size are the websites they have developed? Would you be happy they could manage what you need?
• Do all the websites look very similar or would you be happy they could do something different for you? If that's what you want!
• Have they done sites in a similar field to you? If so, they are likely to have done previous research and will have some knowledge of your industry. 
• Maybe perform some searches to see how the websites are doing in search engines.
• Have they done sites with similar functionality to what you want?

Much of the time it will come down to instinct and a gut feeling. If you like the look and feel of a web designers website, then get in touch. Try to provide as much information as you can so that they can give you the best advice and if you can spare the time to meet with your web designer, do it. If you go to them you can see where they work, how they present themselves and you'll get an idea of whether you'll be able to work together.

Next week I'll cover questions to ask your web designer at your meeting.

So, how did you choose your web designer? How many did you get quotes? Did you meet your designer? Let us know your stories below.

5 questions to answer before speaking to a web designer

If you do not currently have a website, you may not know where or how to start. This series is intended to help you ask the right questions of your web designer and to give you a bit of a head start for when the designer starts asking you questions.

Part 1 will cover things for you to think about.

1. Why do you want a website?

Have you been told you should have a website or do you have a genuine need for one?

If you’re doing it because you’ve been told you need one, the chances are you won’t buy into it, and a website does require some investment from you. Not just in terms of cash, but time and thought too.

Aside from that, what specifically do you want your website to do for you? Some examples are to:

· increase enquiries online and offline

· sell your product online direct to the retail or wholesale sectors

· provide company information to save costs printing brochures & leaflets

· manage customer support and improve customer communications

· launch a new product, service or brand

· provide information to clients or potential clients

Knowing what your website needs to achieve makes a big difference to how the website is designed and built.

2. Who is your audience and what do they want?

This could be one of the most difficult questions, but can give you the most benefit. Think about who the website is targeting and put yourself in their shoes. Remember that your primary aim and your visitors’ aims could be very different. If you are trying to sell a product, they may just be looking for information – the website is there to convince them to buy.

In the example above, if you want to sell your products and a visitor is likely to be looking for information it makes sense to make sure you have enough information available so that the potential customer feels satisfied, and may purchase online or has the information they need to purchase offline.

3. What content will the site include and how much?

Ideally, you should think about this from 2 points. The launch - how much content do you want to start with? Then a few weeks, months or years down the line - how much could your website grow? Again, this will vary depending on the answer to point 1. A company brochure site is likely to stay fairly static, whereas an e-commerce site or information site could start small and expand rapidly.

Think about the type of content too. Will there be video? PDF documents to download? Or will it be mainly text?

4. What functionality do you need from your site?

Do you want to be able to update the website yourself? Which content will you need to update?

Do you wan visitors to fill in forms online?

Will you have online payments? Or full e-commerce functionality?

The possibilities are endless, and you do not need necessarily need to have a complete features list written down, but thinking about the kind of thing you want your website to do will help your designed lead you in the right direction.

5. How do you want the website to look?

Design is subjective and open to countless possibilities, so while some designers love to be given a complete carte blanche when it comes to web design, it is often better to have some ideas of what you want.

As an example, we designed a website for a client. It was very dark, with greys and blacks, that made their orange logo & branding really stand out. The client hated it because they wanted a white, very light design – which unfortunately they hadn’t mentioned!

More often than not it can be what you don’t like that can be more helpful than what you do. Do if there’s a particular colour or type of image you don’t like, or you don’t like your menu on the left hand side of the screen, you don’t like a very minimal website – tell your designer!

Now you’ve hopefully thought about what you want from your website and have some notes to talk to your web designer about. In part two we’ll look at questions to ask your web designer.

How to...link to your Facebook page

One of the most popular posts on this blog is 'How to add a Find us on Facebook button'. As it was written back in November 2008 it is now out of date. We have had a number of requests to update it, so here you go.

The Find us on Facebook button

Essentially the button was a marketing tool provided by Facebook to enable you to link to your page and you needed to know how to add an image & a link to your website for it to work. This is still the case and, as far as I am aware, you can still use the button if this is your preferred method of linking.

Facebook Icons

Another popular choice, if you use a number of social networking sites, is to line up a few icons and add a different link to each of them. There are plenty of people offering free icons for download for every site you can think of! A search for 'free social networking icons' will give you plenty of options. Or you can design your own to match in with the theme of your website.

The icons above were found on the following sites:
1, 4 & 5: http://blueblots.com
2: http://tydlinka.deviantart.com
3: http://www.blog.spoongraphics.co.uk/

There's also a wide variety of Facebook icons on www.facebookicons.net.

Facebook Badges & Boxes

Facebook has made a few pages to enable you to link from your website to your page. We have covered adding a Facebook 'Like' box in a previous post, and another option you have is to add a badge.

If you follow the tutorial above, get to step 3 and instead of 'Add a Like box to your website' click 'Get a Badge'.

on the left hand side you have a number of options to choose from - Profile badges, Like badges, Photo badges and Page badges. Click on Page badges (if you aren't already on the right page).

To see how you can change the badge, click on the 'Edit this badge' to the right hand side to see the options available. Then just copy the code and add it to your website (or send it to your web developer).

This is just a very quick overview of the options available to you with the new Facebook pages, so if you'd like any more details or have anything else to suggest please comment and let us know.

How to....add your business to Google Places

When you perform a search in Google you may have noticed that you now get a few different types of results. So before I carry on with this guide, I'll explain the differences.


(1) & (5) are paid for ads. You'll notice that (1) is in a slightly shaded box and that both tell you they are 'Ads'.

(2) is a natural or organic search listing, so these people are there thanks to SEO.

(3) are the results based on Google Places and conincide with the map (4) to show you physically where, in this case, each shoe shop is located. These results are not based purely on your location and you still need to optimise your website to ensure you're placed towards the top.

However, as the Google Places results often appear above many of the natural listings and take up most of the first page of results, if you rely on local searches and haven't added your business now is the time to do it!

In the example below, we’ll set up a cake making business in Swansea.

Step 1

In your web browser go to http://www.google.co.uk/places, if you have a Google account sign in. If you don’t yet have a Google account click on the ‘Sign up now’ link.

(If you already have a Google account, skip ahead to Step 2.)

All you need to set up an account is an email address. Enter your details and follow the on-screen instructions. You will need to validate your email address in order to continue.

When you validate your email address you should get the following message:

Use the 'Click here to continue' link and you should be directed back to the Google places page.

Step 2

Click 'Add new business' to get started, then on the next screen add your phone number and click 'Find business information'.

If your business is already on Google Maps, you'll see a message similar to this:

If this is your business, you can claim the listing by clicking 'edit'. If it is not your listing, click 'Add a new listing' to enter your details.

If you are setting up a new busines, it is unlikely that Google will have any data about your business, so you will get the following screen for you to input all of your information.

As you enter your details you'll notice the map on the right hand side move down the screen with you and update to match your details, see example below:

When you are happy, click the 'Submit' button.

Step 3

In order to publish the listing you need to validate it. At the moment Google offers validation by postcard, which unfortunately can take a few weeks!



Click Finish & you'll get the following message:



Within the next two weeks you should recieve a letter with your validation code. When you receive this, log in to your Google Places account and enter the PIN where indicated.

I'll update this post with further details when our validation letter arrives!

MODx Revolution Tutorial for beginners – Part 3 - Your first MODx site

Introduction
Ok, so in the last tutorial, we had a nice introduction to the MODx manager, looked at some important System Settings, had a quick look into Templates, and installed our first add-on.

Today, I’m going to look a little further into Templates, and actually build a new site (based on a free CSS Template).

Building Sites with MODx
In most cases, you’ll design you site in Photoshop, or your graphics program of choice, slice up all the images, then start coding it with squeaky clean XHTML and CSS. Or at least, that’s what we do! One of the nice things about MODx is that it’s incredibly flexible. You can build a site almost completely static, with just a few little MODx features used, or you can go the whole way, producing a dynamic website jam-packed with interactivity and space dust.

By using a CSS template, I can show you how to get your site up and running once you’ve coded it, then add in all those nice MODx features afterwards. The template I’m going to use can be found here. This template contains several different features that lend themselves well to a MODx site, like a site search, recent posts, recent comments, tags, categories and archives.

So after unzipping the template, I can see that it has an index file, folder for the images and a CSS file. These are the only files we’ll need to get the site up and running.



File Upload
So we want to transfer the images into our MODx installation. There are a few different ways that we can do this with MODx Revolution. We could either use an FTP client and simply drag the folders into the “assets/images” folder, or we can use the new file upload feature of MODx Revolution. Seeing as we’re here to learn, let’s do it the MODx way!

In your Manager, click on the Files tab. In the top right-hand corner, you’ll see a little blue and white icon.



This is your MODx Browser! A quick and easy way to see all of the files associated with your installation of MODx. So click on the icon, and your MODx Browser will open up, overlaying the manager screen.

On the left, you’ll see a number of folders. If you go into assets, then click on images, you’ll see all of the files in that folder on the right. Don’t have any images? Good. Me neither. We’re about to sort that out.



Click on the small icon that’s furthest right out of all the icons above the document tree on the left. This will open up the MODx file upload facility. When the file upload box has appeared, click the ‘Add’ button, and browse to the images in the free template.



Once you’ve selected all of them, you should see them all listed, ‘Queued for upload’. Then just click Upload, and you’re done. You should now see all of your images in your images folder.



So that’s the images done, let’s just get the CSS and pop that into our styles.css file. We already linked up our index file and our CSS in the last tutorial, so it makes sense just to copy the template CSS, and paste it into our CSS file. Once you’ve copied the CSS from the template file, you can use the MODx text editor to paste it into. One thing to note here is that the image paths shown in the Template CSS file are slightly different to what we’re going to need, so we need to amend them slightly. Instead of having ‘images/image_name.jpg’, we’ll need to change them to ‘../images/image-name.jpg’. Once that’s done, we’ll go and make the final change to the template.

Template editing
Open up your BaseTemplate (under the Elements tab, and then inside the Templates folder) and copy the contents of the index file from the template file. Paste all of this over whatever you already have in your BaseTemplate. If you hit Save, and refresh your website in a browser, you’ll see that we have a load of ugly, un-styled content. We need to adjust the path to our CSS file in our BaseTemplate.

The line that reads:


<link href="default.css" rel="stylesheet" type="text/css" media="screen">


Needs to be altered to:


<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">


Refresh your site now, and you should see something pretty similar to the template we downloaded.



Update the image path of the flowery image in your BaseTemplate, and you’ll be done.



CodeMirror
Going off on a little tangent, I just want to introduce this fantastic add-on. Its best to get this in now, because it can really help you while you’re building your site.

The add-on is called CodeMirror. It makes the MODx text-editors much more user-friendly from a coding point of view. You can download it from Package Management (Remember when we installed TinyMCE in the last tutorial??) and it can be found in MODx Add-ons > RichTextEditors. Once you’ve downloaded and installed it, you’ll notice that your BaseTemplate now has text highlighting and line numbers. It may be small, but it’s much easier to manage all of your coding inside MODx with this add-on.

MODx-ing your template
Now, we’ve essentially got a one page static site, with all of the code being stored in our BaseTemplate. But we’re using MODx, so we should take advantage of some MODx tags to help us along the way.

In all honesty, the coding shown in the BaseTemplate (that we got from our free template) is a little outdated. I’m going to update it, and add a few MODx tags in one sweep.

The current head tag looks like:


<meta equiv="content-type" content="text/html; charset=utf-8">

<title>Premium Series by Free CSS Templates</title>

<meta name="keywords" content="">

<meta name="Premium Series" content="">

<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">


I’ve changed mine so it reads:


<meta charset="[[++modx_charset]]">

<base href="[[++site_url]]">



<title>[[++site_name]] | [[*pagetitle]]</title>



<meta name="description" content="[[*description]]">

<meta name="keywords" content="">



<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">




Apart from adding a few MODx tags, I’ve added an HTML5 DOCTYPE, a base href tag and a meta description tag. This keeps things nice and up to date. We’ve also removed some of the bits that aren’t required when a HTML5 DOCTYPE is declared.

So let’s just take a look at each of the MODx tag and explain what they’re doing:

[[++modx_charset]] – This is the character encoding that is used for your site. You selected it during installation. MODx primarily works with UTF-8.

[[++site_url]] – This is the URL of your site and was determined when you installed the site.

[[++site_name]] – This is the name of your site, as specified in the System Settings.

[[*pagetitle]] – This is the title of each of your resources. The only one we have at the moment has the title of ‘Home’.

[[*description]] – Again, this is specified in your resources. This tag is very handy for the SEO of your site as generally, the content of the description tag is shown in the Google search results (other search engines are available!)

So if you now Save your BaseTemplate, and refresh the website, you won’t see too much change, but if you view the source, you’ll be able to see exactly what we’ve done.



Summary
In the next tutorial, we’ll look further into Chunks, and why they’re so cool.

If you have anything to say about this tutorial, or how it could be improved please feel free to leave a comment.

If you need help with a MODx website, why not give us a call or get in touch?

How to....Add a Facebook 'Like Us' Box to your Website

Happy Friday Folks!

Today I'm going to show you how to add a 'Like Us' bos for your Facebook page to your website. It's a bit of an update from our 'How to add a Find us on Facebook button' post.

Step 1: Go to your business page on Facebook.
(If you haven't already got one, see our guide on how to create a Facebook page for your business.)

Click the button labeled 'Edit Page' in the top right hand corner of the page.

Screenshot of Picseli's Facebook page

Step 2: Click on the Marketing link

From the menu on the left hand side, click on the 'Marketing' link.

Step 3: Get the box

Here you will see a list of the options available to help you market your Facebook page & get more 'likers'.

 

Click on the 'Add a Like Box to youu Website'

Step 4: Customise your box

On this page you'll see an example box that you can customise to suit your company.

As you make changes to this little form you should see the example box on the right update to reflect your changes. 


- Facebook Page URL: In this box you need to enter the URL or web address of your facebook page. In our case it is http://www.facebook.com/picseli.

(If you don't have a customised or vanity URL yet, then you'll need to open up another browser window or tab, so you don't lose your current place, and navigate to yoru Facebook page. Then in the address bar at the top of the browser copy the whole text that appears starting with http://www.facebook.com/....., then paste this into the Facebook Page URL box.)

- Width: If you have a special place for your Facebook box to go, you'll know how wide it needs to be, so enter this width - in pixels - in this box.

- Colour Scheme: You can either have 'Light' (which leaves it white) or 'Dark' (which turns it black), so select dark, see what you think and make your decision. For Picseli, we'll be leaving it as Light.

- Show Faces: If you untick this option, you won't see the icons or avatars of the people who currently like your page.

- Stream: If you untick this option you will be left with just the people who like your page, not the latest posts to your page.

- Show Header: Untick this if you don't want the 'Find us on Facebook' banner at the top of the box.

So you can make your box as complicated or as simple as you like, showing your latest posts and 'likers' - as we have done in the right hand bar on this blog - or just have a simple 'Your Company on Facebook' link, as in the image below.

When you're happy with your box, select the 'Get Code' button.

Step 5: Display on your website

You'll get a pop up box with 2 code options, so copy whichever one suits you best (or copy both & send them to your web developer) and add them to a suitable place on your website or blog.

And there you have it, visitors can Like your Facebook page from the comfort of your own blog. Hope it helps!

P.S If you do enjoy these posts, please do come and like us on Facebook - don't foget to say Hi!