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...

UIEtips: Code Sketching – A Stretch Goal for Your Design Superpower

There was a time that providing a simple sketch on paper conveyed enough information to the stakeholders on the intent of a design. Now, with the plethora of devices a person can use, a sketch lacks the detail needed to convey how the design will appear on various devices. Today’s article discusses the benefits of sketching in code and why you shouldn’t fear it. If showing your designs on multiple devices is important to you, you’ll want to explore Nate Schutta’s full day workshop, Coding Prototypes, Even if You’ve Never Tried at the UX Immersion Mobile Conference this April. He’ll ease you into mobile prototyping–from using HTML and CSS in a text editor to debugging what you have built. Here’s an excerpt from the article: Our designs flow and move. Expressing the subtlety and nuance of how we imagine our designs is hard to do with a static sketch. Microinteractions are essential for a good experience, but difficult to imagine by just looking at a picture. We compound by desiring to express how the design will change as we move across platforms. We need to see if we’ve made something too complicated. Maybe we’ve left something important out? Maybe it’s too clumsy when there’s no keyboard? Building the entire design to discover an important flaw is a time-consuming and expensive process. We want to get our ideas out there for review and reflection. How do we make it easy to do and cost effective? Read the article Code Sketching – A Stretch Goal for Your Design Superpower. Have you added sketching in code to your design toolbox? Tell us about it...

Sign up by 2/11 for UXIM Mobile Conference and Save $300

The increasing use of mobile devices makes designing sites and apps more complex. To design for the user, you have to completely change the ways you work and learn new tools, techniques, and patterns for success. We built the UX Immersion Mobile Conference in Denver, CO April 7-9 to help you meet those challenges. You’ll be exposed to UX luminaries through intensive full-day workshops specifically focused around the skills and techniques you need to become better at designing for the user. The price to attend all three days of the conference goes up $300 after February 11 (it goes up $100 if you’re just attending for one day). Put the money you save by registering now towards your flight or accommodations. Explore the workshops and video trailers to learn more about each...

Coding Prototypes, Even if You’ve Never Tried

An hour of prototyping can save days of meetings and misunderstandings. Collaborate with developers earlier to refine interactions; your team — and users — will thank you for it. Let Nate Schutta take the scare out of using JavaScript and jQuery to build mobile prototypes, using HTML and CSS in a text editor, and debugging what you’ve built. Come and see for yourself that you don’t need JavaScript expertise to build a simple application. Nate’s workshop, Coding Prototypes Even If You’ve Never Tried, will cover: Demystifying JavaScript Digging into jQuery Mobile Using jQuery Mobile Building a mobile app Fitting the parts together Showing your vision to developers Stepping beyond basic CSS and HTML Nate is one of those people who makes everyone feel comfortable. His expertise in prototyping comes from working with cross-functional teams. As a senior software engineer, Nate focuses on making usable applications — the ideal end-result of any project. He’ll teach you how to: Use browser tools and a text editor, comfortably Debug what’s screwed up Address often-overlooked pieces like error messages Use the not-so-mysterious dollar sign ($) with ease Understand and navigate a document library Simulate a mobile interface right on your laptop Nate Schutta will help you build out the pages for a prototype, use tools like lists, create a detail page, decide how to handle transitions, and experiment with different themes. After his workshop at UXIM14 on April 9 in Denver, CO you’ll have everything you need to get your mobile prototype up and running. See you at...

Nate Schutta – Coding Mobile Prototypes

[ Transcript Available ] Nate is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Nate’s and the other 5 workshops, visit uxim.co. The “designer who can code” has been dubbed the elusive unicorn of the UX realm. But more important than being equally good at both skill sets is being able to communicate with the other side. If designers understand even a little bit about code it breaks down silos within the team. Greater communication leads to shared understanding. This collaborative environment allows for faster iteration and better design. Nate Schutta believes that prototyping in code helps solidify this communication. Being able to visualize and demonstrate your ideas not only provides for greater understanding, but a faster workflow. Even though this code won’t make it into the final product, it gets a representation of the final design in front of users and stakeholders. Prototyping in code isn’t as daunting as it may sound. Nate believes that making the transition from using HTML and CSS to exhibiting functionality in JavaScript and jQuery isn’t all that difficult. Even if you’re throwing something quick and dirty together in less-than-production-ready code, the important thing is to get that feedback early and iterate on the design. Recorded: December, 2013 [ Subscribe to our podcast via ?This link will launch the iTunes application.] [ Subscribe with other podcast applications.] Full Transcript. Jared Spool: Welcome everyone to another episode of the SpoolCast. This is Jared Spool, your host. And today I am talking with Nate Schutta who is...