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 | Aug 4, 2009 | Tips & Tricks |
DCM lives in the Applications/Utilities folder on your mac When you open it you are presented with a small window, the left of which shows a small zoomed image of what’s under your mouse and the right allows you to choose the type of colours you are interested in. For our purposes as a web developer we want hex codes, so we choose RGB in Hexadecimal (8bit). The true secret to working this tool into your workflow is the keyboard shortcut to copy the colour as text. To do this, you just hit Apple-Shift-C while the correct colour is shown, this will copy the text of the hexadecimal colour into your clipboard.. something like: “#186231”. This can be pasted directly into your CSS or HTML. It’s somewhat annoying that it copies with quote marks… but still a real...
