by Alex Holt | Aug 28, 2009 | Rants, UI/UX, Web |
Adding a target=”_blank” attribute to an A tag has long been seen as a way to keep users on your site. This logic is fatally flawed (i was under the impression that this was commonly agreed upon, however i’ve had to argue the point with a few people recently). Firstly, what does target=”_blank” do? this attribute makes a link open in a new window (or new tab in some more modern browsers) – the thinking used to be that the user was therefore STILL on your site as well. However this concept breaks the standard usability in the browser: the back button stops working – often times leaving the user confused. Furthermore, advanced users will automatically use CTRL/APPLE click to open links in new tabs anyway, so this functionality has no real purpose. Keeping a copy of your site open as well as the link that your user wants to see was often seen as leading to longer visit times on your site – however this statistic means nothing if there is a window in front of your site that is showing the user different content. Also, if a user clicks on an external link from your site and they don’t want to come back and keep reading your content, then you having sneakily left a copy of your site open behind the link they clicked is more likely to irritate them than help them – and the last thing you want to do is irritate your audience. So don’t target links to...
by Alex Holt | Aug 14, 2009 | Dev, Web |
So, suppose you want to embed the headlines from an RSS feed into your site. Assuming you’re not so fussed about SEO, but rather are looking for a useful piece of content for your users, you can use Jquery and Yahoo Pipes to easily embed the headlines (and summaries if you like) into your page. Step 1: Create a Yahoo Pipe for the RSS feed (or feeds) that you want to include. You need a Yahoo account to use pipes, so if you don’t have one, you’ll need to get one. Once you have it, just log into the pipes site here: http://pipes.yahoo.com You want to choose, Sources > Fetch Feed – this will add a Fetch Feed box into your pipe editor, now link this with the Pipe Output. That’s it (Pipes are extremely powerful, however this i all we need for this particular example). Here’s how the final pipe looks: Save the Pipe. Go “Back to My Pipes” and get the URL for the new pipe as JSON. Mine pipe URL is: http://pipes.yahoo.com/pipes/pipe.run?_id=b5c348713f1c84193acf3723d4d148a9&_render=json Now that you have the JSON url, we can use jquery to render these results into a useful widget on our page. Firstly, we need to make sure that Jquery is being included on our page. I do this using the google hosted solution, so basically it is loaded from google’s servers (and cached). So, in the head of your page (if jquery isn’t already there) we add this: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Step 2: Set up our markup and CSS Now we create the necessary markup to hold our results. Where you want the widget to appear, we...
by Alex Holt | Aug 14, 2009 | Dev, Web |
So lets try and clarify what semantic markup is and what significance it has to the web designer. Semantics is the study of meaning. Semantic markup is markup that has meaning, the idea is tha the tags you choose add to the overall meaning of the content you are marking up. The earliest (and simplest) example of this is the argument between strong and b tags. Semantically the strong tag has meaning, it implie strong emphasis, and thus conveys added meaning. Whereas the b tag just implies bold, a purely visual characteristic. A second example is the markup for the nav of your page. Semanticly it makes more sense to mark the navigation elements up inside a unordered list, because nav is in fact a list of items on the site. So.. <ul class="nav"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li></ul> ..is semantically more correct than using DIV tags or even just A tags in a paragraph, like this: <p> <a href="#">Item 1</a> | <a href="#">Item 2</a> | <a href="#">Item 3</a></p> Semantically relevant code also allows screen readers and other machine based clients to better understand the meaning of the content in your markup. Hopefully that clears up...
by Alex Holt | Jan 2, 2009 | Dev, Web |
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. My Solution 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. So what are they? Timestamping 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 willvery 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...
by Alex Holt | Oct 1, 2008 | Rants, Web |
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...
by Alex Holt | Aug 15, 2008 | Dev, Tips & Tricks, Web |
To start with, we create the markup for our navigation.. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="about/">About</a></li> <li><a href="contact/">Contact</a></li></ul> Obviously you can put as many or few items as you need into the list. Now to style the list…. first we’ll style it horizontally: ul.nav,ul.nav li,ul.nav li a { display:block; float:left; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-right: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} and now vertically, just to show how it works… ul.nav,ul.nav li,ul.nav li a { display:block; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-bottom: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} Obviously, you have the freedom to apply any CSS you want to...
