10 techniques for an effective ‘call to action’ Design: The estimated time to read this article is 7 minutes Jeff from Brighton recently wrote to me asking: Occasionally I hear you talk about the importance of having a call to action on the show but you never go into much depth. I recognise the importance of having a call to action but how do I encourage users to complete them? Having an effective call to action is an essential part of any website. A call to action is not just limited to ecommerce sites. Every website should have an objective it wants users to complete whether it is filling in a contact form, signup for a newsletter or volunteering their time.
A call to action provides… Focus to your siteA way to measure your sites successDirection to your users How then do you create an effective call to action? 1. Before a user is willing to complete a call to action they have to recognise the need. You also need to communicate the benefits of responding. Take for example the VoIP service Skype. 2. 3. Take for example pbwiki.com. 4. 5. Pure CSS Clickable Events Without :target.
The other day I received a tweet from Marcos Navarro about CSS-only click events without using JavaScript. I told him about the :target method, but he could not use that for what he was trying to accomplish. Unfortunately, this CSS-only approach didn’t really work for his needs. However, there is a lot of cool stuff you can do with this method. Click on the drop downs above. That’s done all in CSS; no kind of javascript whatsoever. Tutorial First we’ll need to make a wrapper that will hold both the button and the content it toggles when clicked. <div class="wrapper"><div class="content"><li>Lorem ipsum dolor sit amet. We want .content to be invisible unless .wrapper is clicked on.
It should output as: Lorem ipsum dolor sit amet. Toggle Button Now we’re just going to add a bit more styling to make it function slightly better and make more sense visually. A Modern Web Development Syllabus. If you have programming or Computer Science experience, want to take the plunge into web development, and don’t know where to start, then start here. Before you signup for Pusher and Twilio and start copying and pasting Ruby and JavaScript code, you should have a firm understanding of how the many pieces and layers of your first webapp work together. While not required, I recommend the following pre-reqs: Buy a Mac or install Ubuntu on your dev machineRead The Pragmatic ProgrammerLearn Vim or EmacsLearn Git & make a GitHub accountUse Firefox with the Firebug extension or Google Chrome for development Understand this protocol or prepare yourself for perpetual confusion. Read the RFC, or at least the following sections: Ruby Read The Pickaxe if you don’t know Ruby or could use a refresher.
Rails Read Agile Web Development with Rails 4th Edition Rails Guides is an excellent free companion resource to the official Rails api docs Do this Twitter clone Rails tutorial Read CSS Mastery 2nd Edition Fin. One Man’s HTML5 Developer Workflow | Emerging Tech Talk. We are now squarely in the age of HTML5; or the age of HTML5, JavaScript, and CSS3, if you prefer. That being the case, it amazes me that for those poor souls who are new to the world of front-end development, there is little written on what their developer workflow might look like.
With them in mind, I am offering up a starting point, based on my own experience and preferences. EDIT: I just added all of the links mentioned in this article to my Master List of HTML5, JavaScript, and CSS Resources. Be sure to check it out and submit your favorite links. Hardware/OS I spent the better part of 20 years on Windows-based machines, and I don’t have one fond memory to share. However, aside from my personal preference for Macs, there is one very good reason why you should seriously consider doing all of your development on one: iOS development. Design For design, I use two tools extensively. For all of my graphics design work, I rely on the excellent Pixelmator. Development – Editor Speed Plug-ins. HTML5 Demos. What's New in HTML5 Media. Eric Bidelman Legend: Not quite ready. Keep it on your radar. Relevant Chrome/WebKit bug. Bug has been fixed/resolved.
Specification link ( Press 'n' for additional notes on some slides. Who? +Eric Bidelman @ ebidel Blog: ericbidelman.com Agenda Multimedia Helpers Media Capture Web RTC Web Audio API Multimedia Helpers Using cross origin media Some HTML elements (img, video) have a crossorigin attribute (.crossOrigin property in JS) to indicate that the resource should be fetched with a CORS request. Var img = document.createElement('img'); img.onload = function(e) { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); var url = canvas.toDataURL(); // Succeeds. Demo Page Visibility API Determine if your media is visible or not: Demo requestAnimationFrame - Smarter animations Common technique for JS animations: window.setTimeout(function() { // move element. Preferred technique: Example function draw(time) { // update models. paintScene(canvas); window.requestAnimationFrame(draw, canvas);} draw(); Demo Demos.
The Edge of HTML5. The Edge of HTML5 Eric Bidelman · Legend: Not quite ready. Keep it on your radar. Relevant Chrome/WebKit bug. Bug has been fixed/resolved. Specification link ( Press 'n' for additional notes on some slides. Agenda CSS & Beyond JavaScript APIs for and Multimedia APIs Media Capture Web RTC Web Audio API ( the undocumented parts ) Multimedia Helpers For 2011: The Latest in HTML5 Stuff you probably missed: AppCache mimetype removed from HTML spec cancelRequestAnimationFrame renamed to cancelAnimationFrame.
Typed Arrays Learn them! XHR2 xhr.responseType = 'arraybuffer' File APIs reader.readAsArrayBuffer(file) WebGL ( textures ) Binary Websockets ws.binaryType = 'arraybuffer' <canvas> ctx.getImageData().data == Uint8ClampedArray Transferable Objects webkitPostMessage() Media Source API video.webkitSourceAppend(new Uint8Array(...)) CSS & Beyond 2012 is the year for CSS! More: "Six CSS Layout Features To Look Forward To" Style elements mid-document, confined to immediate parent: Add one-off CSS styles. Make your 404 pages more useful. Your visitors may stumble into a 404 "Not found" page on your website for a variety of reasons: A mistyped URL, or a copy-and-paste mistake Broken or truncated links on web pages or in an email message Moved or deleted contentConfronted by a 404 page, they may then attempt to manually correct the URL, click the back button, or even navigate away from your site.
As hinted in an earlier post for "404 week at Webmaster Central", there are various ways to help your visitors get out of the dead-end situation. In our quest to make 404 pages more useful, we've just added a section in Webmaster Tools called "Enhance 404 pages". If you've created a custom 404 page this allows you to embed a widget in your 404 page that helps your visitors find what they're looking for by providing suggestions based on the incorrect URL.
Example: Jamie receives the link www.example.com/activities/adventurecruise.html in an email message. Can you change the way it looks? Everything you always wanted to know about touch icons. “Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy, and I’m sure you already know how this works using HTML: It’s a shame Apple didn’t just implement the standard <link rel=icon> and chose to come up with a more verbose proprietary link relation instead.
Chrome v31+ for Android does support this syntax, though! Use it as follows: If no such HTML is found, Chrome for Android falls back to the Apple touch icons instead. Apple iOS has supported touch icons since iOS 1.1.3. What’s weird is that Android 2.1+ also has apple-touch-icon support (with a few quirks). For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Fancy effects iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen (as it does with application icons).
Rounded corners Drop shadow Reflective shine I’d recommend to always use precomposed icons. Different icon sizes.