Internet High Five
Hehe. I love geeky humour… but the funniest thing is that I almost did it, then decided I didn’t wantto put smudges on my screen.
Hehe. I love geeky humour… but the funniest thing is that I almost did it, then decided I didn’t wantto put smudges on my screen.
Down for everyone or just me is a super simple website. Basically, it lets you check if a web server is down from a third party location. The idea being, you panic because you can’t hit your web site, so you go and check it through Down for everyone to see if it’s a problem with your connectivity, or the web server - super useful!
I posted a message a while back about spam in comments and Django. I don’t agree with a lot of the opinions I held at the time, however one point I raised that I believe holds true is that the responsibility for spam provention should be the developers, not the user. In short, I hate and completely disagree with “captcha” style spam protection on forms. As a user I find sometimes, in attempt to make the image in unreadable by a computer that the text is so obscure I find it difficult to read myself. This isn’t good enough.
This point holds especially true for the project I am currently working on, which has only a simple email contact form. I do not want a valid, human client to have to tackle entering a captcha image or solving a math problem just o send the company a contact. So I set about reading about ways to catch spam on the server side.
The solution that i’ve come up with marries two fairly old concepts together with some fairly simple logic (the success of this is untested, however I think it should be fairly effective - time will tell.. and i’ll keep people posted here)
The two techniques I will be using are: timestamping and honeypots.
The concept of timestamping involves sending a timestamp to the form and storing it in a hidden field, effectively allowing us to know when the form was rendered. This is useful for two reasons:
1) We can check that the user spent a reasonable amount of time filling out hte form. The theory here is that the user is unlikely to instantly post the form, however a spam bot that has scraped the data down will very quickly be able to scrape out the form fields and post the page. So: for example in this current project, my contact form is asking for a name, email, subject and message. A human cant type these into a form in less than say 5-10 seconds, so when the form is submitted i can check the timestamp in the hidden field against the current time and thus reject a submission that is too rapid.
2) We can force the form to expire after say 1 hour, provide the user with a simple message that says something like “sorry, the form has expired.. please try again”.
Obviously the too fast time would depend on the size of the form that you are requiring them to fillout.
The secret here also is to NOT redirect to the form page, but to store the form values they have created into session, so that we can provide a link saying click here to re-submit the form, and explaining that the client needs to wait 10 seconds before sending the form.
Honeypots are used to trick spambot engines into telling us they are a spam bot. Basicallly the logic is as follows: a spambot tries to guess the values for the inputs in a form when it submits it. SO: if we use CSS to completely hide a honeypot text field, then the spambot is likely to try and guess a value for that field - then we assume that any submission with a value in that field is a bot, and display a message suggesting as much, if they are not a bot, we allow them to click a button to submit the form - this should in theory prevent a bot successfully submitting the form.
Time will tell how well these two techniques will work together to cut back on spam. If anyone is interested, i could probably tidy up the django code and release it as an app for people to play with…
Disclosure : Clicky, my new web stats best friend, offer an affiliate scheme (another reason I like them). So if you are going to sign up.. follow my links when you do it?? ;)
Everyone knows Google Analytics is free. It’s extensive. It works well. Like all Google applications, it’s interface is dull.. filled with primary colours and non customisable.
Well, I was drifting around the internet a few months back.. and I found Clicky - they offered a free account, so I figured “what the heck, I’ll give it a try”. I installed the clicky JS right after the analytics JS, figuring i’d still have my statistics in analytics (in case clicky couldn’t do what I wanted).
So for a couple of months, my blog tracked statistics in two places. Clicky and Google Analytics. Clicky’s paid service includes a killer feature that Google lack.. live data reporting (this feature is part of their pro accounts, but new trialists get access to it to trial - it’s worth it… so useful in fact, that I ended up paying for it to be reactivated.)
Analytics is very aptly named, it’s great for analysis of numbers.. after the event. But it doesn’t give a good interface or insight into how users are interacting with the web site as they interact. Clicky offers a feature called Spy - which allows me to watch (via AJAX) as people click into my site, click on elements and click out.. if nothing else.. it’s great for the voyeur in you.
BUT that’s not all. The data at Clicky is live updated, so you can analyse your results when you want, how you want. if you’re running a feature campaign, running an ad on a site, etc you can SEE people clicking through AND see what they are clicking on.
However that’s not where the joy ends (no, you don’t get a free set of steak knives).. BUT Clicky has API access as well and most importantly, for me anyhow, they reveal javascript functionality so you can generate interactivity logs for interactions that you program.
Huh? English please! What this means is, that with a couple of lines of javascript you can get Clicky to log a click into the stats system EVEN when the user hasn’t followed a link or changed pages. This is especially useful in the new “web 2.0” world where AJAX plays such an important role in web interactivity.
An example: the hive mind uses AJAX to gather visitor’s votes on its three questions. These votes were previously untrackable, however inside the Javascript function that fires the AJAX request I have now added a line like:
click.log(‘#vote-‘+qid+’-‘+voteValue,’Vote!’);
Now, I can see a visitor clicking on the AJAX buttons and casting a vote, in real-time inside Clicky’s spy. In fact, if i didn’t want live graphing of poll responses, I could have used Clicky’s export capabilities to get away without writing ANY code for the voting system in favour of just logging the click in Clicky and then exporting the values.
Clicky counts my outgoing link clicks and clearly labels them as such, which is absolutely wonderful when you run ads or other campaigns trying to drive traffic from site to site. This is a killer feature in and of itself.
The final point I have to make is that, after paying my $3.99 for a blogger’s account with Clicky - they removed their ads from the top bar and placed them only in the footer (the higher accounts have no das) - and as a result, the Clicky interface is FAR prettier and more aesthetically appealing than my Google Analytics account.
So, without further ado, i highly recommend that if you have a web site with more than 5 visitors a day that you go and try Clicky.
Something I’ve noticed recently which makes me wonder about people’s understanding of how web design works is the designer/developer obsession with validation. I’m definitely not the first to realise this (i’m pretty sure i read an article not so long ago at jeffcroft.com - where Jeff made the same point), but i’ve been surfing the web a bit this weekend, and noticed how rampant this issue really is.
Validation of web sites is a good goal(a best practice), however it is not something that requires you to put a badge on your site.. or a link saying that you are CSS2.1 valid. Customers, clients etc don’t care… they care about whether or not your web site works (preferably in all browsers).
Valid code is something all web designers ought to be producing, but you shouldn’t put a badge up on the site.. it’s like putting a badge that says “MY WEB SITE WORKS” - of course it does, the person reading your little badge is viewing the page. This site validated while I was building it, but i think now the CSS is technically invalid (i use the opacity: property a bit). But when a site i build is valid, I’m not screaming it from the rooftops, what if something I add breaks the validation later? Besides.. I take it as a given that a site I produce will validate (at least the XHTML - I sometimes use similar CSS hacks to save time.. shrug).
It comes down to a question of pragmatics. In any real world project there comes a time where you have to sacrifice what you KNOW is best in order to meet deadlines and budgets. This is how the world works, and as a freelancer it is painfully apparent. When I used to work in studios, for other people, I found i was a little more like the standard designer/ostrich - always sticking my head in the sand. Web sites serve a purpose, a client uses them to fulfil a business need, NOT to show off some application of technology.
Maybe this article would better be called, “why I hate what grid systems stand for in the design world”. Designers (especially web designers) these days seem obsessed with grid based design. While I LIKE the look that grid based designs I disagree with this formula based approach to web site design.
To demystify what I’m driving at here: I think that that good designers should be able to balance a page without using a PSD grid template. I get the point, and 960.gs (for example) is a great resource (i don’t personally USE their grid system - at least not consciously) but it’s like providing tools to people who really ought to be able to balance a page without a grid in a PSD. I know that some people who ARE capable will use these grids also, but something about trying to simplify the design process to this degree bothers me. The issue here is that we (the industry) are trying to apply a formula to web site design.. which devalues the designer (this really irks me, since I AM the designer and this is how i feed myself!).
It’s like giving photographers digital cameras that can take 20 frames a second at 12 megapixels.. the mentality becomes “who needs a professional photographer?” - we’ll just photograph EVERYTHING and then edit out the crap later! Formulaic web site design conforms to the same paradym, people have a list of rules that they follow in order to create a good design for a website. This idea works very well for a while, but you end up with a portfolio of websites that only differ in colour - which in the long run, is silly. No one wants the entire internet to look the same (in different colour casts)!
Each design should be prepared to match the brief. It should be well thought out and designed to complement any existing brand. While this is perfectly possible using an online colour scheme generator, PSD grid system, CSS Framework etc … these are NOT necessary components in the process - sometimes they are useful tools to complement your eye as a designer, but i really believe that too many people are interested in how well a site fits a grid - whether it’s colour scheme can be justified mathematical etc.
I’ll openly admit that this website does not fit a grid (at least not by design) .. and i think part of the reason for this is, as a designer, I like to judge the balance of my design by (shock! horror!) looking at it. Photoshop’s nudge functionality is your friend, and I often nudge things back and forth until they feel like they are balanced. And given that the brain often plays tricks on you I actually believe that whether I think that a page looks and feels balanced is far more important than each element being equidistant from it’s surrounding elements with 1% padding and a 28% width.
To illustrate this, i’ve attached a small screenshot of the central section of my recent work page, with overlaying grid lines, which I obviously didn’t use when designing the site. The point here is, the dark grey section where my CV/timeline exists is supposed to recede into the page, hence the drop shadow. In order to further accent this effect the space for content has 1em less width on either side (from memory.. don’t hold me to that) - they’re called vanishing points; perspective kids!
After reading a post over at Jonathon Snooks blog about CSS resets (which I also don’t use) - and also seeing this site. I found myself thinking about whether I care if my designs are implemented pixel perfect in all browsers. The short answer is: no.
Having learned design for web around the same time as print, rather than being a converted print designer - I’ve always been a fan of gridless or semi-gridded design. I like fluid layouts that aren’t reliant on exact positioning. Partly this stems from early in my career when people would window switch between nutscrape and ie and ask me to rectify “bugs” where a block of text was starting 1 pixel too high or low. To me (so long as its lining up isn’t a design feature) I couldn’t care less about these so called bugs.
The way I see it, unless I can find that design flaw WITHOUT checking both browsers then I see absolutely no reason to “fix” it. After all, day to day users of a web site don’t check the site in multiple browsers, so so long as the page doesnt scream “I shouldn’t look like this” I am happy, the audience are happy and the client ought to be happy.
Of course there will always be perfectionists who chant for pixel perfect, cross browser design (I have some clients who still ask for it - and like a good mac monkey, I strive to oblige) but the truth is that as designers and devleopers it is our responsibility to educate our clients about the pros and cons of these sorts of issues. After all we are supposed to be professionals. We are supposed to be experts. And we should behave (and be treated) as such.
I firmly believe thay my profession as a web developer is almost as specialised (although slightly more accesible) than that of a surgeon - but I guarantee that my clients won’t tell their surgeon how to remove their appendix…
So swinging back around, the direction that changing web standards, over recent years, has brought my design style, would seem to me to be moving me towards web designs whose aestheitc is deliberately geared towards fluidity and flexibility (the element of web design that many print designers fail to comprehend) - so that at the slicing stage I (or the guy cutting my design) won’t have to deal with these issues. To me, on a day to day basis, I want my sites to be usuable, information focussed designs whose aesthetic complements usability, rather than overshadowing it.
Having been a web developer (professionally and for fun) for the better part of ten years now, I’ve watched the art of making websites change significantly.
In my first job, the majority of front end development time was spent trying to get horrible nested table layouts to render in both IE and Netscape 4. Thankfully the browser world (and more importantly the standards world) have progressed since then (at least a little). Browsers have taken a role reversal, with IE now dragging the chain in place of good old nutscrape.
However despite the leaps and bounds that have been made towards standardising the web, the development environment really hasn’t changed that much. We’ve gone from placing invisible pixels inside nested tables to juggling CSS hacks - all to maintain a consistent look and feel across the range of browsers.
So despite my feeling that our CSS tableless layouts are slightly more elegant (and less code heavy) I can’t help but wonder why we haven’t already achieved standardisation - and the only explanation I can come up with is that some goon in suit at Redmond doesn’t want it for some reason.
But that’s not all there is to it, standardisation is something that rarely comes about through conscious intent, and usually comes to pass for the wrong reasons (take qwerty keyboards.. There are more effective options you know..)
I’ve heard people suggest that the non-compliance of browsers kept the entry-level of the industry higher, however this is absurd. The quality of web design is really a combination if interface design, information design -and lastly, aesthetic. Whoever said “content is king” was onto the right idea.
So where are our web standards heading? Hopefully to a standardised place (wishful thinking, I hear you say) where we can focus all our design and development time on the higher values of our work; namely: presenting our information in a concise and user friendly way, while still achieving a pleasing aesthetic.
Anyways, Web 2.0, in my opinion, is just a way of grouping a bunch of technologies that have been around for ages (ie: AJAX) under a single umbrella term that marketers and idiots can bandy around in order to sound cool! It’s a buzz word… like the use of dot com was in the 90s and Flash has been for the last 5 years (or so) :)
