Resizing and Cropping Images with Canvas

In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications. In a real world example a website or app might use a technique like this to resize and frame a profile picture before uploading. Whilst we could do this on the server, it would require the transfer of a potentially large file, which is slow. Instead we can resize the image on the client side before uploading it, which is fast. We do this by creating an HTML5 <canvas> element and drawing the image to the canvas at a particular size, then extracting the new image data from the canvas as a data URI. Most browsers have good support for these methods, so you can probably use this technique right now, however just be aware of some limitations unrelated to browser support such as quality and performance. Resizing very large images can cause the browser to slow down or in some cases, even crash. It makes sense to set reasonable limits on the file size just as you would when uploading a file. If quality is important you may find the resized image looks undesirable due to how the browser resampled it. There are some techniques to improve the quality of images downscaled with canvas, but they are not covered in this tutorial. Take a look at the final result in this demo or download the ZIP file. With that in mind, let’s get started! The Markup In our demo we’re going...

Finding New Solutions in Old Philosophy

As a graduate student at Harvard University, one of my main influences was the Austrian philosopher, Ludwig Wittgenstein. Wittgenstein argued that many philosophical statements, and indeed, much of philosophy itself, became preposterous when applied to the real world. Since completing my doctorate in philosophy, I have been a professional programmer for more than twenty years, and I have learned a lot about applying philosophical thinking to design and development. Philosophy offers deep and profound insights about subjects like knowledge, meaning and justice. Insofar as computer programs concern these subjects, philosophy can be a fantastic source of ideas – and often is. Reading philosophy books has given me ideas for writing useful computer programs that span multiple industries, from healthcare to business, which contradicts Wittgenstein’s belief. After all, if philosophy can guide the design of profitable products, it must be meaningful. Ideas and techniques from such varied philosophers as Ludwig Wittgenstein, Jean-Jacques Rousseau, Rene Descartes, Karl Marx, and W.V.Quine can advance UX development and design. In this article, we’ll explore three software challenges, and the solutions philosophy inspired. Solution#1: Descartes and Austin complete sales Every point-of-sale (POS) transaction faces the same challenge: how do we bring users through the sales funnel and complete a sale? We know we must provide enticing content and a positive experience, but how? A certain number of prospective customers are expected to leave without purchasing, but the designer of a POS system wants to keep that number as low as possible. In order to reduce the number of times users abort a POS transaction, we consider an idea from the philosophy of knowledge. Descartes, in...

Code QA and UX, sitting in a tree. Kissing.

Jamie Appleseed recently wrote a brilliant article on bugs and user experience. It won’t help you magically prove the ROI of QA testing, but you should definitely read it because… It’s about accepting that things do go wrong sometimes. And that therefore, we should design systems that degrade tolerably and fail gracefully when they are actually broken. It argues that we should keep simplifying and using progressive enhancement. Think of accessibility in the widest sense, and design for the least capable people & technology first. Not everyone has good vision, good motor skills. Not everyone has a powerful computer, a fast broadband connection. It happens. Simple, lean, fast… then add the funk I know that as developers we already think about contextual impediments. Our task models sometimes show that not everyone has time to really concentrate on the information we present to them. Designing for degradation and failure is the same thing –  stuff gets in the way. So make it simple, make it lean, make it fast. Then layer up the funk. Spec it out good and proper. Like the other ‘premium’ (ie. done properly) things we try to do, this approach may initially take more time and therefore cost more than you expect. It’s a relatively easy thing to sell-in on public sector projects – those where accessibility in the traditional sense is a stated requirement. We’re working on a number of projects with Bristol City Council, and the teams for taking this approach already: keeping things simple and designing transactional forms that work well, with or without JavaScript; leveraging GPS capability on your phone, but not...

Best Practices for Medical App Development Go Beyond Standard UX

October 27, 2014Mobile healthcare app development poses a set of challenges very different from mainstream apps. Not only is security an area that requires a considerable attention, compliance with regulatory standards is also absolutely crucial. Here are things app developers should pay close attention to during the development process.1. FocusA successful mobile medical application should be able to demonstrate clinical benefits and offer real value to its users—whether they are patients, healthcare practitioners, or both. Using medical apps for routine self-monitoring and feedback is a cost-efficient strategy for self-management. The app should have only those functions and features relevant to its audience. Therefore, it is extremely important to understand and master the needs of all relevant stakeholders, ...read more By Mithun Sridharan...

Quickpanel: More UX Futures

October 23, 2014UX Futures is a one-day virtual conference that will take place November 5. Hosted by Rosenfeld Media and Environments for Humans, the event features six inspiring speakers—Steve Krug, Jesse James Garrett, Margot Bloomstein, Andy Polaine, Nathan Shedroff and Abby Covert—all focusing on what’s next for...read more By Mary Jean Babic...