Category Archives: Web Development

Mum Testing

Just been trying out a new site on my Mum’s friend.

Doesn’t need to be your Mum any other user is fine as long as they match the profile of the users you expect to see. I’m trying the site out on my mum and my mums friends because that is the age group we expect the site to be most used by. I’ve built sites before for school age kids and we tried it out on them and their teachers.

Part of it is just to get a new view, often you get so used to how something works ‘because you built it’ that you forget how other people use the interweb. Your friends often have similar levels of familiarity with the technology as you so use things in the way you would expect. Mums are quite good because they don’t use things how you do, just sitting behind someone using your site/application can teach you a lot. The technology they use may be different as well you might use a nearly new massively monitored Mac and they are using a venerable small screened PC. Or perhaps they are part of the majority of the population who use something other than an iphone. That can be quite revealing as well. Much of the benefit though is just the first view effect, they like perhaps the majority of the visitors to your site are seeing all this for the first time. If your tester can’t figure something out its probable a large group of your potential customers won’t be able to either.

Example

For example I watched someone fill in a form and miss out the email field, I thought I’d made it really clear the field missed changed colour to make it stand out as it did its label and its border. It even added a block of text at the top of the form explaining that the field had been missed. The tester didn’t notice any of that so I added in a movement when you clicked submit the page scrolled up to the missing field to draw you attention to it.

It also brought up another issue for me though as I found myself saying “don’t worry you won’t get any junk emails”. That led to adding a little note at the top of the page to clarify how the details you enter will be used.

Different folks

Different groups of users may have different levels of skills and familiarity with the subject. Something that may make a lot of sense for school teachers won’t may not make sense for others, but if your customers are school teachers then that is fine.

You need a few people though just to get a range even if the first couple of people show up the vast majority of the issues. Users do the craziest things which is explained quite well by Steve Krug in “Don’t Make Me Think!” its not consider page in depth its more a smash grab, super market sweep style. They almost certainly won’t use your site in the way you imagined.

A book that got mentioned by Tarek at my local Ruby user group when we were talking about human machine interaction and the assumptions that users bring is ‘The Design of Everyday Things’ by Donald Norman. I have not read it yet but it sounded like it could be useful.

Blackboard collaborate

I’ve just been working on a site that integrates with Blackboard Collaborate. I just thought I would say something about it here as when I looked for information from a developers point of view there wasn’t a lot online.

What Blackboard Collaborate is

Its a conferencing solution where you can voice/video chat and share desktop and a white board divide members of a meeting into rooms and have sub meetings etc. So like a conferencing solution. Its probably easiest to actually try it out rather than me describe it. They have a testing/configuration room here.

If you interested you can sign up for a demo via their site that gives you your own room you can play with and invite delegates to.

The Good

  • You get a video and voice sharing sessions that aren’t affected by web browsers. Its all written in Java and you launch via a java web start file. So in theory you shouldn’t have to install software on anyones machine.
  • Its ment to be quite undemanding on the specification of client machines and the quality of the internet connection.
  • You can be hosted on their servers so you don’t have to deal with hosting software on your own machines.
  • They have an api so you can set up sessions remotely and add attendees and moderators leaders. And give each attendee a url to login directly with no passwords/usernames.
  • Because they have an API you should be able to integrate with it via your programming language of choice as long as you can use SOAP. I guess in theory it would be easiest to use Java, but I used PHP and it was fine.
  • You do get a contact who you can ask questions directly.

The Bad

  • Cost – I’m not sure how much exactly (the client is paying but they said a lot) on the other hand Adobe Connect is more.
  • Location – their servers seem to be based in North America so it can be slower if your outside of the US. Seems most of their clients are based in North and South America but that might just be my perception. That can make there maintenance times our UK morning and their people start work our lunch time.
  • If you search online there isn’t a great deal of experience online dealing with their API. On the other hand they do provide you with good pdf documentation of the API and requests once you have signed up.
  • It uses java and downloading the java web start file can confuse people its not a massively common file type. The thing is to always open/run the ‘meeting.jnlp’ file.

Notes for other developers

These are some of the things that threw me a little.

  • You want to be using a 64bit OS to develop on as they specify session start times with a specifity that goes beyond what you can achieve on 32bit. If you use a 32bit OS all your session start times appear in the past to their server as they get truncated.
  • The information they give you to login to the web control interface is different from that which you need to use to access the API.
  • The .wsdl file isn’t available at all on the live server. On their test server it is. When they say to cache the wsdl file they don’t mean temporarily. Grab it from their test server and then use that local copy permanantly.
  • In their web interface you need to have java enabled in your browser or you end up with some blank admin webpages. Which was a bit confusing until I viewed source.

The alternatives

I don’t know a lot about the alternatives my client only investigated Adobe Connect and Blackboard Collaborate. I’d be interested if anybody does know of an alternative. It seems that Elluminate which got taken over by blackboard and became blackboard collaborate had fans.

Testing a new website with Siege

Been building a site recently which although quite small now will eventually grow to be quite large. When your originally building a site you tend to have a relatively small amount of data. This means you can ‘get away with/accidentally produce’ some less than optimal SQL queries. Its quite difficult to tell where your site will fall down or perform slowly when it has a more realistic amount of data. Or under a more realistic multi user load which by definition as a lone developer its quite hard to simulate.

I tried load testing the site with a relatively old style tool called siege mainly because its quite simple to set up. Sieges makers describe it so

Siege is an http load testing and benchmarking utility. It was designed to let web developers measure their code under duress, to see how it will stand up to load on the internet. Siege supports basic authentication, cookies, HTTP and HTTPS protocols. It lets its user hit a web server with a configurable number of simulated web browsers. Those browsers place the server “under siege”.

You just give it a text file with a list of urls and the POST/GET requests you want made to them, then specify the number of users and how long you want the site sieged for. Then just leave it running at the end of a run it tells you, how many requests it made, how many were unsuccessful etc. Not lots of data but enough to be useful. Mainly I was interested in slow performing SQL so I left my MySQL logging slow queries.

I left siege running for 5 hours whilst I was out and then came back to see how it had gone. Obviously its not absolutely accurate as to what ‘real users’ will do but its a starting point. I found some useful issues that I could then use to target which queries were performing badly. Problems came up where I had never expected. It gave me a chance to improve the performance of some queries before they cropped up in the wild. Also allowed me to check my other queries with a reasonably sizeable set of data.

One thing I did come up though if you do want to set up a relatively long running test like this you probably want to set up any logs your writing on your test server to rotate otherwise like me you will end up with some massive text files that are quite difficult to deal with. But that was OK because I got something large to chuck at splunk …

Obviously you should only do this at your own server/test server otherwise you will just be evil.

Related stuff:

SQL injection attacks

Was talking to my friend about a site he is working on that had been attacked by SQL injection. Its something that makes you think hes not an idiot, I better recheck I’m not creating sites that are vulnerable to attacks. If the client is annoyed if some idiot can put his weird video up over their homepage thats nothing to how embarrassed the developer of that site feels.

What is a SQL Injection attack

A SQL injection attack is where someone manages to inject SQL into a database query on your site in order to alter that query so they can modify the database for your site. They can then go on to inject undesirable data, delete your data or expose data you don’t want exposed.

What to do to stop it

There are a number of steps you can take to reduce the likely hood of a SQL injection attack happening to you. If your using ready made software such as WordPress or another CMS the manufacturers should have dealt with these vulnerabilities. That is one of the best reasons to use ready made software but you should keep it up to date.

  • Check input, filter it and escape it
  • Set the database up securely – so that that user can only access the information they need to and has the lowest amount of privileges they need
  • Parameterize your queries – so even with weird inputs the intent of the query can’t be changed.
  • Don’t display useful error information – to a user, but do log it for you to analyze later.
  • Encrypt sensitive data – even if someone gets into the database they won’t be able to use it.
  • Know your database – SQL injection can be pretty clever, and different databases have different vulnerabilities. SQL SERVER for example has some quite esoteric features that can do some pretty weird stuff, you need to be aware of that if your going to use it.

You can hire specialists to do penetration testing1 which may be worthwhile depending on your budget and the value of your data.

Its a great idea to review your database backup regime. The morning you wake up and find your database has been compromised is bound to be the day when you find there isn’t a backup to restore to.

1) They do insist on calling themselves ‘pen testers’ which just makes me laugh.

Flexible stylesheets

Been working on some flexible style sheets for someone else so I thought I should do some for me so I’ve started on the homepage of this site (its the one most people look at). As ever its a work in progress I have not done this blog yet.

This is the homepage at 900px wide:

Homepage at 915px wide

This is the homepage at 300px and 500px wide:

Homepage at 500px and 300px Wide

Why

People are using a wide range of devices of different screen sizes and resolutions. You want your content to look good on all those devices don’t you?. Even if its only for legibility. Designing a site to only work on a huge great desktop monitor will please the art director when he prints it out but it isn’t going to please a customer who is using a 1060px wide screen or even a customer with his browser window set as a small portion of a larger screen.

How

I’ve been using media queries support does vary somewhat across desktop devices. The most notable one I found didn’t work for me was Internet Explorer 8. You can get around that one if you include a js script. You can get an idea of the support offered by various browsers on When can I use.

What sizes? devices

It depends on your circumstances, what kind of devices are people using to visit your site with. If you have a load of visitors using massive art director style monitors you might want create a very big screen set of styles. If lots of people are using small screen devices then you need to look at those. If only a very small number of people use that very odd dimension then it might not be worth bothering.

Desktop browsers

This is reasonably easy you can resize your browser window and see how you site adapts in your various browsers. Opera is good for this as they have a simple tick box that allows you to turn on ‘show webpage dimensions in titlebar’ which gives you a simple way to see the current depth and height as you resize. On a Mac its under Opera > Preferences > Advanced > Browsing.

Mobile devices

You can check your site in emulators as starting point but support does vary from device to device and ideally you want to test on real devices. They have settings that alter how they display your content that might be set to zoom out a larger site or ignore the media queries you have made completely.

bashing a stylesheet to flexibility

When

Ideally you should do this stuff when your putting a site together to start with and consider it when designing the site. Some things are awkward to scale, I’ve found tables awkward in the past.

You can bash an existing site into a more flexible approach or just the most used parts of the site.

Web Application Security Checklist

Been assessing the vulnerabilities of a site I’m building at the moment and trying to come up with a list of potential vulnerabilities so that I can check that I’ve dealt with them all. This is where I’ve got to so far please point out any you think I’ve missed.

Errors

  • errors aren’t displayed, other than we just had an error if really necesary, not the details
  • errors are logged
  • if logged to files those files aren’t accessible by visitors

Only public viewable files are visible

  • access to any non public folders are restricted
  • includes, class definitions settings files etc.
  • if you were to try and access they would act like a resource that doesn’t exist

Parameter filtering

  • input isn’t trusted
  • input is filtered, escaped etc
  • output is escaped

SQL injection

  • query params are quoted, bound dealt with according to your database
  • the security of access to the database itself
  • database users
  • database server access

Vulnerabilities of software included

Any ready made systems, libraries used in the site are at the latest version and they don’t publish what version they are at. Including language and server software versions e.g. say ruby don’t say ruby 1.9

Cross site scripting

Origin of requests

  • where origin of requests should be via self make sure it is.

Brute force

  • login points throttle repeated requests in order to slow down dictionary attacks
  • log repeated login attempts by ip and useragent
  • block abusers according to blocking policy

Passwords

  • passwords are non dictionary words and of adequate length and variety of case and character
  • passwords are stored encrypted in a way that makes unencrypting them awkward if they were ever accessed.

Spam

  • all public forms have some form of captcha device
  • all public email addresses are obscured in some way

File system access

  • ftp, sftp, ssh users
  • file permissions are correct

Access with curl and more bot like access paths mirror that of normal browser based viewer or are more restricted.

Login

  • unsuccessful logins and successful logins are logged.

Monitoring of access and file modification times to check files havn’t been modified when they shouldn’t have been by some other than authorised source.

Well that is my first attempt I guess I can always add to it as I think of new issues and read more. Hopefully without getting too paranoid.

References

Websites in Translation

I’ve done a few websites in translation now and they are usually more interesting than doing a normal single language site. If your product/organisation is available in a different region its the thing to do. If you want to expand into that area its a great start. I’m very much less likely to use your product if its not even presented in my own language.

Often people who speak several languages can get by in English but they shouldn’t have to. I’m sure even a multilingual Dutchman would appreciate the effort if you tried putting some of your content in Dutch. If you can’t translate the entire site you could start by translating just the core functionality. You could add a google translate select box which is a pretty simple/cheap way of adding survival translation. A translator will point that this, while good for a machine, may not translate content in a professional way.

Maintenance of international sites

Maintaining sites in multiple languages is more complicated but if you do things in the right way you can minimise the extra work and also reduce the effort that will be required if you want to expand your site into another language in the future. So its worth having a think about if your sites content management system will accommodate different languages. Also as your site is built you want to avoid text as pictures as that would mean every language having a different picture.

Detection and Switching of translation

If you build the site in the right way the person visiting the site won’t have to choose their language as you auto detect this from their browser. That is the best way although you should give them the option of choosing to view the site in a different language from that auto detected. If you do offer switching something some sites do is lose your state, if you have come into a site twenty pages from the homepage, via search for example, you want to click a translate flag and see that page in your chosen language not be redirected to another page or another sites root.( that really annoys me! and people do it grrr!).
Its worth considering what flags you use as well I built a site that had versions in Chinese and English for the English part of a company owned from the U.S. so we ended up with a flag for English that was a merge of both the stars and stripes and the union jack. The Americans were thought to be in the majority even if the language is English.

Regions

Its more than just a language though, some sites can benefit to localisation so If your trying to appeal to Americans you would use different terms or spellings to those that you would choose for residents of the UK. Its worth talking to a professional translator even if you have people in your organisation with the relevant languages as they may have access to someone who lives in the region. A site aimed at French speaking Canadians might be slightly different to one aimed at French speakers in Europe.

Links Out

Think about the sites you link to some regions of the world may not get the same content as you do, if I follow a link from an Australian site to a page on the BBC sometimes that content is blocked for me but an Australian would see the content as intended. You can get an idea of this if it is an issue for you by using web proxies in the audiences region.

There is a quite a lot to think about when creating translated sites not just the translation but the regionalisation, localisation, currencies, hosting location and local regulations. It really isn’t so bad though and when you think of the size of the new markets you could be opening your self up to its a big winner.

Mobile web design

Android have published a guide to developing applications, despite being an advert for Ice Cream Sandwich, it is quite useful and provides good tips for how to design any small screen based application be that mobile apps or web sites to be viewed on handheld devices.

I’m trying to get my head around how to design things for very small screens at the moment so I found it quite useful.

  • Size of your fingers – aim to make usable bearing in mind the size of the end of your finger is 7-10mm, and you need to maintain a clear gap between each item.
  • Feedback – on interaction to try and indicate that something will happen, they suggest using percentage shades of the same colour.
  • Consistancy – across interface of the same visual clues if touching the arrow makes you move from screen to screen on one part. It shouldn’t suddenly switch to being a edit cue on another screen.
  • Describe only what is necessary – you only have a small screen and people don’t want to know the details. If you have an error message they don’t want to know that you have a parse error or some such.
  • Headline first – “Aliens have landed and you have 6 messages” rather than “You have 6 messages and Aliens have landed”.
  • Be familiar to the devices interface – don’t try and make your android app use iphone design elements, or vice-versa you should be taking advantage of your users familarity with their own device.
  • Pictures being more obvious than words -Real objects are more intuitive than buttons and menus, for icons I guess this comes down to not making people think.* They extend it into pictures being more obvious than words. Guess there is less brain action needed to go from picture of steve > steve! than from “steve the monkey” > oh yeah > steve > steve!. **
  • Only show whats necessary – don’t show whats not needed for that screen. This is ok as long as items are placed in familiar locations. You don’t want everything shuffling position when you go from page to page.

Most of this is the same as its always been but its always good to remind yourself. Sometimes I’ve ignored design reading this made me wonder how much of this is really about toys for adults.

* Never really been sure about using an envelope for an email icon but I suppose if that is what everything else uses then its the right thing to use.
**Wonder if this is the logic behind a visual search engine like Oolone.

References

Cookie Law

cookieIn May 2011 the law on cookies across the EU changed this being the EU its not simple though and different countries across the EU implement this in different ways. In the UK this was delayed for a year so you could tell anyone asking that you had a plan for what you were going to do. I was randomly talking to a solicitor last night and it reminded me I should probably look in to how to comply by the 26th of May.

It seems as I understand it from reading the information commissioners site that the only cookies you need to get users permission for are the ones not essential to the functioning of the site. Which means mainly the problem is with cookies set from third party sites. Such as google analytics which I’m not sure the information commissioner really provides any useful solutions for.

I guess people main concern is when they are tracked by an advertising network. You know those ads the ones where the same advert appears across several sites. They know you visited that weight loss site earlier so you get ads for flab busters on the next site you visit which is bizarre since that site is about Meerkats.

Obviously all this law is dumb and if you are worried about people tracking you you can set your browser to block cookies from the domains you don’t like or use a blocking plugin for your browser. Newer browsers have options for blocking tracking, The version of Firefox I’m using today (9.0.1) has a tick box under ‘tracking’ saying ‘tell websites I do not want to be tracked’.

I’m just reading the beta version of the new government website on cookies at www.gov.uk/help/cookies that seems friendly and ‘I guess’ they know what they are doing so perhaps the way forward is to follow what they do. At least that way I can point out they got it wrong too.:)

18th of April – After I wrote this I had a brief poke at using google analytics for basic mobiles to see if that used cookies, it does, so don’t bother it also seems to error muchly.

Make WordPress site faster (part 2)

This post carries on from a previous one make wordpress site faster. In that post I did the easiest stuff to do from now on it gets slightly more difficult. At some point if your not a geek it gets to be too much hassle. I’ll let you decide when that is.

After I finished writing that post I enabled mod page speed on my site. On my hosting its a yes/no thing but there are lots of options if you can fiddle. I had to do some testing but nothing was actually broken at least as far as I’ve discovered so far.
So now I have

  • Google pagespeed tool : Page Speed Score of 86 (out of 100)
  • Yslow Overall performance score 83

Which is quite weird because Yslow hasn’t really changed where as mod page speed upped the google page speed score by 20. But yslow contains some pointers on where I’m going wrong
This page has 7 external Javascript scripts. Try combining them into one.
This page has 3 external stylesheets. Try combining them into one.
So thats what to do next……