jQuery Rejuvenated by @rem - mjcpk web design and development

jQuery Rejuvenated by @rem

May 30th, 2011

I must confess that I tend to shy away from jQuery and javascript in general. I know that javascript can do amazing things and I know it can really enhance the user interface of a site but I tend to avoid it. In my defense part of the reason comes from the historical problems with javascript prior to the advent of the modern libraries. Javascript could cause problems and was an effort to implement and maintain. As a result I kept things deliberately simple to ensure browser compatibility and for my own sanity.

Nowadays there is no excuse to avoid javascript and, when necessary, I use jQuery plugins to provide what I need in a site. However, I haven’t been moving beyond using plugins and the initialisation code provided by the developers on their websites. Other than changing a couple of variables I’ve not been writing any code. That’s not programming, it’s copy and pasting!

Something has happened to change everything. I recently stumbled across jQuery for Designers which is a site by Remy Sharp (@rem) with a whole load of great tutorials on using jQuery to achieve real world tasks.

It is the real world nature of the tutorials that has made the difference to me. It is not suitable for absolute beginners as it doesn’t introduce you to the basics of jQuery. I know the basics, I’ve watched and read tutorials about them before, but what I needed was some more concrete examples of jQuery in action.

What’s good about jQuery for Designers is seeing how you can use the various selectors and functions built in to jQuery to achieve things quickly and simply. Remy does a great job of making you want to get coding. As a result I threw together a little animated carousel in only a few lines of code. Previously I would have searched the web for a plugin that exactly matched my requirements and would probably ended up with more code when you added together the plugin code and the initialisation code that goes with it.

So, all in all, I’m feeling both inspired and empowered. I’m looking forward to taking my designs to the next level with what I’ve learnt. If you want to do the same head on over to jQuery for Designers and get started!

Using Copyrighted Images: Don’t Risk It!

February 28th, 2011

Using copyrighted images that you don’t have permission for can cause you serious trouble. What seems like and easy way to avoid paying for images can end up costing you a lot more.
Using Copyrighted Images
Every image is copyrighted by default. The copyright is owned by the person who produced that image. They can sell the rights to that image in many different ways or they could license it for use for free. Just because a website doesn’t have a copyright statement doesn’t mean that you can use their images for free.

I found this image on a website…

Clients often come to us with images that they want to put on their website that they have found on other peoples websites. Sometimes they find them by using Google’s Image Search.

These images all belong to someone else and if we were to use them we would be stealing them and passing them off as our own.
Don't Hotlink Images

Hotlinking

It is possible to show an image from another website without actually having it on your web server. This is called hotlinking. Your web page displays the image directly from they other website’s server. This isn’t an infringement of copyright but it is still a very bad idea.

Using images like this uses bandwidth from the other person’s website. It may actually be costing them money to show images on your website. This is known as bandwidth theft and is considered a very rude thing to do on the Internet.

The other problem with this is that you are always at the mercy of the website that is hosting the image. If they remove the image or block your site the image will disappear from your website without notice. Sometimes website owners like to get their own back when you hotlink to them. Some do this by changing the image to a notice that says something like ‘Don’t Hotlink!’ but others have been known to be more extreme and swap them for offensive images and pornography. Do you want that on your website?

Penalties for Copyright theft

If you are using someone’s images without permission they can send a takedown letter to your ISP. Internet Service Providers like to avoid the legal complications of copyright and often comply immediately with takedown notices without contacting you. The first time you realise there is a problem is when people start complaining that they can’t get to your site anymore. The ISP has probably pulled your entire site due to breaching the terms and conditions of their hosting agreement.

Beyond this you could be sued for your use of copyrighted images depending on whether doing so made you money or caused the copyright owner to lose money. However the potential loss of your site (even if for a short time) should be enough to make you avoid stealing images.

Alternatives to using copyrighted images

There are a number of sites on the web that will let you use their images for free. Some of them will do so on the understanding that you link back to them but they don’t often have very many or very good images in their collections.

Another option is images that have been licensed as Creative Commons (CC) by their creators. These can be found on both Flickr and Wikimedia Commons. There are different types of Creative Commons license that allow you to do different things with them. Make sure you check the details of the license before you use an image.

Royalty Free Images

Royalty Free Images are not free. You have to pay an initial fee to use the image but you don’t have to pay a royalty every time the image is used. The good thing about royalty free images is that you don’t have to include an attribution to the image creator on the web page.

Lately we have been getting Stock Photos from 123rf.com who have a large catalogue of images that are available in different sizes and very reasonable prices. This is a much quicker option than having to trawl through free images sites and Creative Commons sites for the image you want.

Never, ever, ever

So there you have it. There is never a reason to use copyrighted images. It is illegal, can cause you loads of problems and there are much better alternatives available.

Keywords and Keeping Track of Them

February 18th, 2011

Keyword Monitoring Service - Sevenoaks Web DesignKeywords are an essential part of websites and how they rank on search engines. The only way to really gauge the success of a site is to monitor where it ranks in the major search engines for certain keywords. Here at mjcpk we offer a Search Engine Rank monitoring service that tracks your main keywords and where your site ranks for them.

There’s more than one important keyword

You may be a cleaning business but ‘cleaning’ is not the only keyword you want to rank for. ‘cleaning ’ is one your shouldn’t ignore as this is often more important than ‘cleaning’ on its own. In addition there will be any number of other keywords you’ll want to rank for: cleaners, floor cleaning, house cleaning, domestic cleaning, office cleaning, professional cleaning, affordable cleaning, industrial cleaning etc. may all be applicable to your site too. A small site should have a list of at least 20+ keywords that they are targeting.

This is important because you may find that it is too expensive or difficult to compete for your main keyword and it would be better to spend time and money on other keywords.

Monitoring keyword rankings

The only way to know which keywords are worth spending time on is by knowing where you rank for them. If you rank 23rd for a keyword on Google it may not take much effort to get onto the first page. However, if you rank 479th then things are going to be a lot harder and not always worth the effort.

The more information you have the better you will be able to choose an effective strategy for your site. Once you have begun work to improve your rankings then the only way you can be sure it is working is by tracking your keywords rankings.

Making it easy

If all you want to do is get on with your business and don’t want have to spend your time gathering statistics about your website then mjcpk can help. For only £25 per month we will prepare a report detailing your rankings in all the major search engines. We will monitor up to 100 keywords (or key phrases) for you.
We will begin by establishing the keywords that people use to get to your site now and where they rank. If you can improve the rank of these keywords you will definitely increase traffic to your site. We will then prepare a more complete list of keywords (incorporating any that you would like to rank for) and will monitor their rankings.

We will point out suitable candidates for easy improvement and can also offer advice, when required, on how best to improve the ranking of your site.

Contact Us now to start tracking your keywords and making your site more successful

If you have any questions or would like to discuss things further then please feel free to Contact Us.

Psychology in web design

February 2nd, 2011

Design is all about psychology. We must understand how people are going to respond to what we show them. We know that a website for a daycare centre that uses only the colours red and black and is covered with pictures of skulls is not going be received well. This is quite obvious but there are more subtle things that we shouldn’t overlook.

A simple mistake that I used to make when I first started designing websites was to not use photographs. I used graphical images to add gradients, curved edges and any number of nice looking touches but I often left out photographs.

So why is this a problem? Any design without photographic images tends to look quite impersonal and as a result some of my designs ended up looking like sites for soulless corporations rather than the small businesses they were actually for. Something as simple as a photograph of the building the business is in or some of the products they provide can counter this.

The next step is to add some photos of real people. Showing the visitor a picture of a person engenders trust. We are a very visual species and we like to look at the person we a dealing with. A smiling face is even better because that keys into our natural psychological responses. A smiling person means they are our friend and mean us no harm. We also respond to smiles with one of our own (or at least a relaxing of our frown). This causes us to release some of our happy brain chemicals and makes us even more likely to trust the site.

You will tend to see that the photos of people displayed on websites tend to match their target audience. A site for teenagers will show pictures of teenagers rather than old people, a Chinese site is most likely going to show those of Chinese ethnic groups and a site for new mothers is going to show women rather than men. When we see an image of someone that we feel is like us then we identify with them and, again, are more likely to trust them.

This can present a problem for sites that have general and/or worldwide appeal. It isn’t possible to show photos that equate to everyone who is likely to visit a site and often those that try to be too PC and multicultural end up looking totally contrived. We all have our own preconceptions, likes and dislikes when it comes to gender, race, ethnicity and age. However much we’d like to be able to treat all groups the same (especially when it comes to generalities and stereotypes) we don’t. Remember this is occurring mostly on a subconscious level and is not something we are always directly aware of.

To get around this problem of bias towards and against certain groups there is a surprising solution. Cartoon images can achieve all of the positive aspects of smiling faced photos without the problems of bias. The reason for this is that a cartoon image is very simple and lacking in detail. We supply the detail in our minds and superimpose our expectations onto the cartoon. This could be a simple stick figure or even an animal or bird.

Twitter is a prime example. A smiling anthropomorphised bird works as well as a human face. It also has the benefit of being cute and non-threatening. The choice of animal can also be used as statement about the company. A bird may be fast, a dog dependable and so on.

the psychology of smiling faces

Even a stickman can trigger our automatic responses to smiling faces

So photos are essential to key into our natural preference for seeing who and what we are dealing with. Smiling faces set us at our ease and engender trust. A single happy cartoon character can be more use than a slew of varied human images. We are programmed at the deepest levels to look for faces and we see them everywhere.

Cutting out the Middle Man – Part 1

January 25th, 2011
The Internet: Cutting out the Middleman

The Internet: Cutting out the Middleman

The benefits of the Internet seem self evident:

  • it provides easy access to a massive amount of information. Like an enormous library that is open 24 hours a day and is available where ever there is an internet connection.
  • It makes communication easy via free email. It is now cheap and simple to stay in contact with friends and family no matter where they are in the world.
  • Shopping has been revolutionised. You can choose from any number of suppliers and get the cheapest price and the goods are delivered to you. It has made supermarket food deliveries possible. Books can be bought online with ease and be delivered to you door or even supplied as an ebook.

All of these points take an existing thing and make it easier and cheaper for use to do it but what is more interesting is the ways in which society is changing due to the internet.

Wikileaks

The internet so often cuts out the middleman from tradition transactions. We have seen this most strongly recently with Wikileaks. Ten years ago an individual with sensitive information would find it very difficult to release it to the public. They would have to risk a great deal to cultivate a relationship with a journalist and hope that the journalist was willing or even allowed to print it. The media is heavily controlled from the top and publications have strong political and moral leanings that effect their content. There is also only so much of an impact that one publication in one country can make. If the news isn’t picked up by others then it is quickly forgotten about when the next thing comes along.

The internet made Wikileaks possible. It provides a platform for them to communicate. Email and a website have allowed Wikileaks to promote themselves so that people know who to send things through and also provided a platform to publish the information they have received. As we’ve seen with the attacks on the Wikileaks site that alone wasn’t enough. The international nature of the internet and its cheapness to use meant that the information could be easily distributed across many sites thus making it impossible to put the genie back in the bottle.

The internet cut out the middleman for Wikileaks. They could provide information directly to ordinary people without being stopped or censored by the mainstream media and/or governments. The media were involved and did publish stories but they we only part of a web of information. No single outlet had an exclusive and everyone was free to check their information against the data online.

Fighting oppression

Politically we’ve seen the internet remove the middleman a lot lately. From China to Iran, from Burma to Tunisia we are seeing people circumvent the controls put on the flow of information by using the internet. It has enabled ordinary people to tell their story to ordinary people in other countries. Without the involvement of government diplomacy and media sensationalism people are finding common ground with those from far away. Their plight has driven people to act or demand action from those in charge.

The general populace is now more aware of global affairs due to this free flow of raw uncensored information. Governments are now finding it hard to cover up their dirty little secrets due to the eyes of the world being upon them. Accountability like this may counter corruption in a way that no previous methods could.

As we’ve seen with the Wikileaks saga nothing is clear cut. Opinions are divided as to whether the cable releases were right or wrong and whether or not anyone was put in unnecessary danger by the revelations. What we can say, however, is that there is no going back. Society is changing as a direct result of our ready access to information. It is now in the hands of all of us and we’ll have to see what we decide to do with it.

Guest Posts

January 21st, 2011

I’ve been writing a few guest posts lately and the first one has been published over at Netchunks.com.

The link is: http://www.netchunks.com/essential-tips-to-ensure-site-visibility-for-webmasters-and-designers/

I’d like to thank Shiva Chettri for giving me the opportunity.

I’m also looking into getting a few guest writers to add a couple of blog posts here.

New Site Design

January 16th, 2011

The site has just received a new design. The old one was looking a little dated and the blog design didn’t exactly match the main site design.

The content is still the same for the moment but over the next month the portfolio is going to be updated and some new features will be added.

This is all part of a number of big changes happening at mjcpk. So watch this space!

Essential Tools for new web designers

January 11th, 2011

The term Web Designer is quite loose. You might be a designer who never codes, a coder who dabbles in design or, more often, someone who is a jack of all trades. Freelance Web Designers can often be a one person band. The client expects you to handle everything to do with their website: domain registration, hosting, email, design, coding, databases, seo, site submissions, promotion, visitor statistics and more.

So how do you handle all these extra jobs and keep your clients happy? The trick is to use a number of free services and applications to take the load off. Here’s 10 to get you started.

1. Dynamic Drive Favicon Generator –  http://tools.dynamicdrive.com/favicon/

It is the little details that are important in site design. Professional sites have a favicon and so should yours. This tool creates a favicon from a image that you uploadand provides the .ico file and code to use it.

2. Stripe Generator – http://www.stripegenerator.com/

A single colour background can be flat and unimpressive but making your own tiling striped background isn’t always a quick and easy process. This tool allows you to create them quickly, preview your results and even try out a number of different ideas.

3. Background tile generator – http://bgpatterns.com/

If stripes aren’t your thing how about a patterned background (with or without a texture)? Again, it is quick and easy leaving you time to worry about the bigger issues.

See http://singlefunction.com/15-online-background-generators/ for more background tools

4. Google Webmaster Tools – www.google.com/webmasters/tools/

For essential info about your site Webmaster Tools is a must. Register for a Google account and sign your site up for free. Highlights include: number of inbound links to your site, submit a sitemap to ensure Google finds your pages, any errors Google found while indexing your pages, what people are searching for when your site appears in the listings, keywords on your site and much more. All of this is collected for you and in one easy place. It will take a bit of time and learning to be able to make use of some of the data but it is worth the effort.

5. Google Analytics – www.google.com/analytics/

How many visitors has your site had? Which sites did they come from? How long did they stay? What were they searching for? Did they perform any specific tasks while they were there? What browser did they use? What language do they speak? Which country do they come from?

If you want to know the answers to these questions and, more importantly, be able to tell your clients then you need Google Analytics. Add a small bit of code to every page on your site and then Google does the rest and displays pretty graphs and statistics for your viewing pleasure.

6. Google Adwords + Adsense - http://adwords.google.com/ and www.google.co.uk/adsense

These tools build on the previous two. Once you have reliable data about your site you can do something with it. If the number of visitors is low then maybe you could use an Adwords campaign to bring in more traffic. If you have lots of visitors maybe you can use Adsense to generate some income. With statistics to back you up it is far easier to sell an idea to a client (or even yourself).

Like all the Google tools they save you time and money which are both precious to a freelancer. Google also provides a lot of information on how to use their tools effectively. This includes written and video tutorials and guides.

7. W3 Schools validator – http://validator.w3.org/

Ensure you have kept to the standards with this tool. It is a good way to improve the standard of your code. Don’t just validate at the end of a project though. Check repeatedly as you go and fix errors as you find them. Most importantly try and understand why something was an error and learn from the experience.

8. FireFTP – http://fireftp.mozdev.org/

FireFTP is a plugin for the Firefox browser that lets you transfer files to your website by FTP. There are lots of FTP clients out there but this one is always with me, in my browser. It is quick and simple to use and it is easy enough to transfer the FTP account details between computers if you use lots of different ones.

9. FireBug – http://getfirebug.com/

I first started using Firebug to check for errors in javascript but I quickly learned that it could do so much more. One of the handiest features is the ability to edit the CSS of a page directly and see the results in the browser. The is helpful both to learn how things work and tweak your designs without having to go back and forth to a text editor and then refresh the browser every time. It can also edit HTML in the same way.

10. Rank Checker http://tools.seobook.com/firefox/rank-checker/

Rank checker allows you to enter a number of search terms and to check where your site ranks for those terms on a number of different search engines.  I routinely check the rankings for multiple sites across 5 search engines. With about 20 keywords each, checking them would nearly be a full time job without Rank Checker.  The results can be exported as a spreadsheet for conversion into graphs and charts to show clients if you want.

So there we have it, 10 tools I wouldn’t be without. They’re all free to use and save me a massive amount of time. Not only will using these tools help you do your job but they will also teach you new things on the way. The only way to be a good Web Designer/Developer is by continuing to discover and understand new things. The web changes quickly so it is important not to be left behind.

In the eye of the beholder

January 10th, 2011

Working on computers everyday, as I do, I worry about eye strain. In fact, I only started to need glasses when I began using a computer everyday at college. To keep your eyes healthy they recommend that you take a break from the screen every 15 minutes and, ideally, look out of a window. It is important to get your eyes focusing at different distances to keep the focusing muscles in shape.

The only problem with this is that it isn’t easy to take a break every 15 minutes. When I’m in the flow I can lose hours just like that. For a while I had solved the problem by having my desk in front of a view that looked out towards the North Downs in Kent. It was a pleasant view that drew my eyes away from the screen often enough to give my eyes a work out. Unfortunately I now have to work in a room with no window. There is a rooflight window for natural light. Now that I’ve lost my view I have started to worry about my sight again.

I’ve always though it a shame that we can’t just put a photo of a nice view next to the screen to achieve the same results. Obviously that won’t work as there is no depth to a photo and your eyes only need to focus at the same distance as the screen. Then I hit on the next best thing!

psuedo-view - anit-eyestrain device

A very basic diagram of how it works.

I call my little invention the psuedo-view. I haven’t had a chance to make one and anyone is welcome to take my idea and market it if they want to. If you do could you please send me one or two of the finished product and token payments are always welcome!

The idea is that for each eye there is a tube to look into. They are separate from each other and contain three transparent plates in them. A foreground image is printed on the closest plate to the eye, a mid-ground one on the second and the furthest one has the background on it. The three images combined show a photo of a nice view. Both eyes see the same images.

Here’s the clever bit. By adjusting the positions of a pair of plates (left and right) we can make it so the eyes have to refocus to go from looking at the foreground to looking at the midground or background. Just like in real life.

I haven’t been able to test this but it seems like it should work given my meagre understanding of how the eyes work. Essentially I was envisioning a set of binoculars with adjustable images inside them. It would be more practical (and possible I think) to slim them down to a pair of glasses you could pop on and off easily for a break now and then. You could even sell executive versions that play you soothing music.

If you have and comments or suggestions I’d be happy to hear them.

Avoiding the DDOS plague

December 23rd, 2010

Distributed Denial of Service (DDOS) attacks have been in the news a lot lately. Wikileaks was attacked and then their supporters launched attacks of their own in retaliation. It seems to be an increasingly popular way of hitting out at your enemies online. A number of news article have made mention that it is now often used as a way to censor human rights groups. DDoS Attacks Aim to Censor Human Rights Groups – InfoSec Island

ddos - distributed denial of service

ddos - distributed denial of service

Weathering the storm of a DDOS attack can be a costly business and is often beyond the budget of Human Rights Groups and charities. Hosting companies don’t like their servers to be battered due to the knock on effect on their other customers. Groups can be asked to switch from shared service to a dedicated server or find alternative hosting.

The whole problem stems from having a single point of failure. Any server, no matter how well prepared, can only deal with so many requests. Expensive load balancing set ups can alleviate the problem but, ultimately, faced with sufficient numbers they too will be overwhelmed.

The standards for DNS allow for multiple IP addresses to be assigned to a domain name. It has always been considered a poor man’s equivalent of load balancing due to the fact that there is no analysis of server load before giving out the IP address. Addresses are dispensed in a round robin method. Whilst this doesn’t suit conventional load balancing I believe it can be used effectively to reduce the impact of DDOS attacks.

To ensure that their message wasn’t lost in the DDOS barrage Wikileaks duplicated their content on over 500 other web severs world wide. The main site went down but the information still remained available elsewhere. If we combine this approach with round robin IP addresses we have a method spreading the load of a DDOS attack across many servers and, thus, reducing its impact. Hackers from Anonymous had to give up their revenge attacks on Amazon, Mastercard etc. because they didn’t have the numbers to be truly effective. The more servers involved and the harder it becomes for the attacks to mount an effective attack.

What is required to make this suitable for charities and other groups to use is an organisation to provide them with a single ftp upload point and the rest is dealt with for them. The organisation would need to rent server space from as many hosts as they can (using basic reseller plans this would be easy to do), manage the DNS details and duplicate the content across the servers.

There are many people looking at other methods of managing DNS. The Distributed DNS project is an example. Any change to the DNS infrastructure of the web is a major undertaking and requires the agreement of many groups and organisations but, in the meantime, this looks like something that can be done to mitigate the effects of online attacks on free speech.