Ensuring dynamic image captions are legible

Added on: Wednesday 3rd February 2016

It is quite common these days for the home page of a website to have scrolling images to introduce the site. If you are displaying a caption on these it is hard to ensure that the fixed caption colour doesn't end up on part of the image that has the same colour.

We recently completed a website for a wedding directory and the design used white for the caption colour. This works well on most images because they usually include a good mix of colours. On a wedding directory website however, there are a lot of white dresses!

Below is a sample of an image with its caption:

No Text Shadow

As you can see the end of the caption is completely lost in the white of the image.

The fix is very simple and involves adding one line to the css:

text-shadow: 1px 1px #000;

The image now looks like this:

With Text Shadow

The word High now really stands out.

So this is a really useful tip if you are serving images and captions from a database and don't know what will end up on top of what.

Open yourself up to comments

Added on: Saturday 24th May 2014

Many webmasters are wary of adding discussion forums to a website because of problems with spam and the need to keep software up to date. If you write your own software then you have to include features to allow users to register and administrators to block or ban users and to moderate comments.

As a developer I have always preferred to use my own software rather than trying to integrate third party applications into a website. It is a bit like reinventing the wheel but at least it gives you total control.

Then there is the problem of spam filtering. You really need to use a service such as Akismet which is free for non-commercial sites but requires a monthly payment for any other sites.

I've recently come across Disqus which is a free to use blog commenting system. It seems to be in use on lots of sites now including Sitepoint - so if it is good enough for them it is good enough for me.

Installation on a website couldn't be simpler - just sign up for an account and identify your site with a unique 'shortname'. You will even get an email with the code you need to add to your web pages!

The code can also be accessed from your admin area.

Discus

There are options to style the comment area but I found that the default was nice and unobtrusive and fitted well with my site design.

I've just created a simple html file that I can include on any page so that a typical entry looks like the one below.

Comments

Although you still need to moderate the comments this can all be done from a simple admin area.

I've installed it on this site so please feel free to add comments.

Happy Responsive New Year

Added on: Saturday 18th January 2014

During 2013 mobile and tablet usage continued to grow at a phenomenal rate so that between them they now account for 25% of all internet usage. I think this can no longer be ignored by website developers.

One of my resolutions for 2014 is to make sure that any new websites or applications I build are responsive.

I will convert some existing applications but there is an additional cost involved with this that might not be able to be absorbed.

Although designing and building responsive websites is more expensive than creating a traditional desktop website, it is worth the time and effort involved.

I don't use my phone that much for web browsing but when I do I get frustrated with the amount of zooming and panning I need to do.

Responsive design involves a completely different design process because there may be options you don't have on a mobile - hover for example - or there are some things that are more difficult to do - selecting options for example.

So you really need to have different content displayed for different devices - for example on a phone you don't really need to download a huge banner image.

I think a responsive design calls for a framework to help with some of these elements of the build process and Zurb Foundation or Twitter Bootstrap are two that are now extremely well developed.

I favour Foundation at the moment and am using this wherever a new project requires it.

As a way of getting familiar with the functionality of Foundation this site is now responsive so have a look on a mobile or tablet and see what you think.

Google releases a font directory

Added on: Thursday 20th May 2010

Google has just released their font API which allows anyone to embed a variety of fonts into a webpage without any licensing issues.

Currently the directory offers 19 different fonts. An example of one of them is shown below.

This is the Tangerine font

All you need to do is link to the library via a simple stylesheet statement.

Then you just use the font within your element styles.

The other advantage of this method is that the fonts are hosted by Google so you don't need to worry about your bandwidth.


<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

5 books for the price of 1

Added on: Thursday 24th September 2009

Following their free PDF book giveaway last week, Sitepoint are at it again. This time it is five books for the price of one.

Yes, thats right! Five books in PDF form for .95.

Having bought quite a few titles over the years I can vouch for the quality of the content and there is a wide range of titles covering all aspects of web design and development from fairly technical to the business aspect.

I'm heading over later to get my order in as it is available for one week only.

The hardest part is going to be choosing which five to get!

Get your books now

Google Static Maps

Added on: Monday 20th April 2009

Google Maps have been around a long time now and have been integrated into numerous websites and applications but in some cases are overkill.

A little while back Google released their Static Maps API which basically takes a set of parameters and generates a 'static' image of the map.

This requires no javascript at all so the solution is ideal where you want a lightweight page or where users might not have javascript turned on.

On the downside you can't interact with the map - zooming, panning or clicking markers but in many cases there is no need to.

For example, on many websites the Contact Us page may have a standard Google map - but is that really necessary? All you need is a marker on the map at the location of the office or premises - no one wants to zoom in or out and any additional information (directions etc) can be supplied in the narrative os there is no need to click on the marker.

We've now added Static Maps as an option to the Maps module in our content management system and this page advertising the Chagford Two Hills race shows it in action.

Unfortunately at the moment it is not possible to add customised markers but I think that will probably come.

Google Maps

Added on: Friday 6th March 2009

Since Google released their Google Maps application and the API to allow developers to add maps on their own sites it seems that nowadays a website isn't complete without an interactive map.

All the bigger open source CMS applications now have a Google Maps plugin and I thought it was time that our CMS offering did the same.

So, I'm pleased to say that there is now a new Map module within our CMS that allows users to create their own maps and display them on any page.

With it you can set the default zoom and centre point for the map and then add markers by clicking on the location and filling in the details on a form.

There is also the ability to add lines and closed shapes to a map - again by clicking the points on the map.

Markers can also be associated with content already stored in the system so for example you could add a marker for all photographs in an image gallery or show the locations of events.

Any markers that are added are stored separately to the maps so that they can be used on any map without having to add them again.

Currently this only produces an interactive map but I'm working on a facility to create a static location map (image only) for use on contact pages etc.

Heres a link to one I made earlier (screenshot below) for Accommodation in Chagford.

Accommodation in Chagford

Fantastic Book Offer

Added on: Wednesday 11th February 2009

If you want a good deal on books about web design and marketing take a look at the fantastic offer on Sitepoint at the moment. But HURRY its only on until this Friday.

As the owner of half a dozen Sitepoint titles, I can vouch for the fact that all their titles are very informative and of a high standard.

Their offer is for 5 books for the price of 1. These are PDF downloads and Sitepoint are giving 100% of the sale proceedsto the Australian Red Cross Victorian Bushfire Appeal.

So hurry over to take advantage of this time limited offer. I know I will be!

RSS Autodiscovery

Added on: Wednesday 28th January 2009

RSS autodiscovery is a technique that makes it possible for browsers and other software to automatically find a site's RSS feed.

I found the following article on how to add RSS Autodiscovery to your site when I noticed that a feed on one of my sites wasn't coming up whilst using the search facility in Google Reader.

I had been testing the various ways of subscribing when writing a previous entry in this blog on using RSS feeds.

Within a day of adding the relevant code to the home page of the site in question the feed appeared in the search results!

Needless to say our CMS now has autodiscovery written into it by default. See the source code for the home page on this site.

Spam filtering in online forms

Added on: Saturday 10th January 2009

I have several enquiry forms on some reasonably high traffic web sites and I have been getting a daily bombardment of rubbish from spambots automatically filling in these forms. One of the forms even has CAPTCHA on it but this isn't very effective.

I came across this great article on reducing the amount of spam in online forms the other day and thought I would try a few of the techniques myself.

So the other day I implemented the following (in the order below) on one of my forms.

  • Hidden form element - The form now includes a text box (hidden using CSS) with an explanatory label in case it does display. If this is filled in during the form submission then its likely to be spam.
  • Detection of  suspicious code - this checks the submission for the [url code which signifies that someone is trying to include links to other sites.
  • Detection of multiple links - this checks the number of times a hyperlink is used within the form. If more than three are detected then this is likely to be a spam entry.
  • Detection of keywords - we have all had the emails or form submissions that include links to the more dodgy sites so you know the sort of words I'm talking about!

The PHP script that processes the form submission checks for the above in the order listed and adds some text (SPAM) followed by the reason (one of the methods above) to the subject of the email. For the time being I'm only monitoring these submissions so they are still coming through to me but I'm pleased to report that it seems to be extremely effective with all the suspect emails correctly identified.

I'll continue to monitor for a while and then change the script so that it doesn't let any spam emails through.

However, we've already written the hidden field into the form building routine of our Content Management System.