Today I gave a talk at Fluent 2014 entitled Supercharge Your Mobile Emails, in which I talked about how to add animation, dynamic content and interactivity to your email templates to improve the mobile email experience. These HTML & CSS techniques were discovered as part of building LinkedIn Intro, but my talk focuses on how anyone can leverage them when authoring HTML email templates.
SLIDES DOWNLOAD: Supercharge Your Mobile Emails
Below is a brief summary of the highlights. Continue reading
tldr; you can create razor-thin lines for retina displays using CSS, but it takes some hackery. retinahairlinegenerator.com is a site I built for quickly selecting a color and getting the CSS code for a retina hairline.
Last year Thomas Fuchs published a detailed look at how to create a web app that looks like a native iOS7 app. He revealed a great trick for creating single-retina-pixel “hairline” images. These razor-thin lines can be used as section dividers, to underline headings, to draw boxes, and much more. Continue reading
In my previous post about CSS regions, I showed off some of the basic capabilities that regions provide, described which browsers you can expect to try them out in, and what the future potentially holds.
Regions have such great support in some cutting-edge browsers, that even though they’re so new, they’re loads of fun to play around with. For this post I wanted to focus on some of the fun things we can do with regions when we combine them with other CSS specs like transforms and animations. Continue reading
[This article is also available in Russian]
CSS Regions is a W3C working draft that allows you to flow text between different areas of a page. The simplest use-case might be column layouts, where each column is an explicit region, but the powerful part is that the regions don’t have any constraints on their position or size. This means that columns barely scratch the surface of the full power of regions, as evidenced by having their very own w3c spec.
The quickest way to see how powerful regions are is with a window-resizing example. This example contains a single div of content that flows across four regions. The re-flow between regions occurs as the window resizes, ensuring that each word of the content seamlessly renders in its correct region. This screen capture shows the finished result:
To try it out yourself on codepen, follow along with the following Continue reading
I was on vacation for most of the last two weeks: rather than having some front-end tips or tricks at my fingertips, I’ve been touring around east coast cities! They’re cities with a tremendous amount of activity happening all the time, especially construction work. This got my newly-relaxed mind thinking about how city engineering relates to maintaining large-scale software projects.
There are several parallels: Continue reading
It’s hard to use the web without coming across “Your Session Has Expired” at least a few times a year. Maybe you’re trying to book a flight, or reserve tickets for a concert. You could be trying to do some online banking, submit an application to a university, or use some enterprise software. When a session expires, you’re typically dumped at an error page (not even a login page!), all the data you’ve entered so far is dropped, and you’re forced to start over. When it occurs, it’s one of those user experiences that makes me, the user, feel incredibly stupid, even though it’s the site that’s at fault. Continue reading
Last October, myself and Conrad Irwin spent 48 hours (give or take a couple of starbucks runs) in my apartment for Rails Rumble 2012. The result was Rescue.js! In case you missed it, we created a Javascript error catcher: by integrating a snippet of Javascript, a website owner could see and get insights into all the Javascript errors that were affecting the site’s users.
We were very excited about it for a few reasons:
After spending 2 evenings and 2 full days hacking, we were done. We promptly submitted our result and went out to celebrate. While we were out, Continue reading
The Developer tools I really love are those that help me reduce the time that elapses between a bug occurring and a bug being fixed.
One of the more obvious types of bug is a top-level unhandled exception. The message “I’m sorry, something went wrong” is how these manifest themselves on real-world sites. But during development, most languages and web frameworks will give you something better – you’ll probably get a page with a reasonably formatted stack trace. It’ll probably have line numbers and file names in the trace entries. It might even have some contextual data, but that’s usually about it.
And that’s just not good enough.
A stack trace is a reasonable start when debugging – it’s a decent signpost towards the error in your application – but we can do much better, especially in a rails webapp. With that in mind, let’s look at two different ways to improve the default experience of unhandled exceptions in development in your rails app: Continue reading
Over the last few weeks I’ve shared links to several small libraries, all of which have a coincidental theme running through them: they’re all simple ways to enhance usability by taking advantage of modern or cutting-edge browser capabilities. I wanted to elaborate on some of them here and talk about why I think they’re especially relevant to anyone building consumer-facing interfaces.
Creating iOS 7 effects with CSS3: translucency and transparency is a thorough look at how to use opacity and CSS filter effects to build the iOS control center widget, (the new panel that appears when you swipe up from the bottom of a device running iOS7). Continue reading
When building outstanding consumer products, a mix of design and development is always required. Maybe you’re a designer that also codes, or maybe you’re a developer implementing a designer’s pixel mock-ups. Either way, you’re going to be working hard if you want to ensure the final implementation perfectly reflects the design, pixel for pixel.
Getting a design implemented to a world-class standard takes hundreds of tiny iterations and persistently sweating the details. To do your best work, you need great tools to help you. What follows below is a list of tools I frequently return to when I’m building a great UI, either for the web, or for mobile apps: without them I might have gone insane long before a project was finished. Continue reading
fonicmonkey 