Depending on how a user browses the Internet, modal windows can be downright confusing. Modals quickly shift visual focus from one part of a website or application to another area of content. This scenario is more common than it should be. And it’s fairly easy to solve, as long as you make your content accessible to all through sound usability practices. In this article, Scott O’Hara has set up a demo of an inaccessible modal window that appears on page load and that isn’t entirely semantic. First, interact with it using your mouse to see that it actually works. Then, try interacting with it using only your keyboard.
Read more…
JavaScript-based animation is often as fast as CSS-based animation — sometimes even faster. CSS animation only appears to have a leg up because it’s typically compared to jQuery’s $.animate(), which is, in fact, very slow. However, JavaScript animation libraries that bypass jQuery deliver incredible performance by avoiding DOM manipulation as much as possible. In this article, Julian Shapiro will smash some myths, dive into some real-world animation examples and improve your design skills in the process. If you love designing practical UI animations for your projects, this article is for you!
Read more…
As responsive design has evolved, we now more often start with the content and then set breakpoints when the content “breaks.” This means that you might end up with quite a few content-centric breakpoints and no particular devices or form factors on which to test your website. However, we need to continually monitor a design’s performance with real traffic. Content-centric breakpoints are definitely the way to go, but they also mean that monitoring your website to identify when it breaks is more important. In this article, Jon Arne Sæterås and Luca Passani will demonstrate how WURFL.js and Google Analytics can work together to show performance metrics across form factors. No more guessing.
Read more…
Most plugins try to do too many things, which makes it difficult for designers and developers to integrate them in their projects. Apple introduced the iPhone 5S, which was accompanied by a presentation website on which visitors were guided down sections of a page and whose messaging was reduced to one key function per section. Pete Rojwongsuriya found this to be a great way to present a product, minimizing the risk of visitors accidentally scrolling past key information, and he set out to find a plugin that does just this. To his surprise, he didn’t find a simple solution to integrate in his current projects. That is when One Page Scroll was born.
Read more…
To make the right choices for your project, you need to start with a general approach, or methodology. You probably already know of BEM, one of those methodologies developed by a big company, but Maxim Shirshin decided to try BEM on a smaller scale. He wanted the same benefits that Yandex gets from BEM: code sharing, a live style guide, scalability, faster development. He is now convinced that BEM applies to small projects as well. Maxim has written down his findings, in case you find them useful!
Read more…
Responsive web design has turned out to be somewhat of a case study in the law of unintended consequences, with one of them being breakpoint paranoia. But even without the undue influence that media queries exerts on your selection of these breakpoints, these might not be the droids we’re looking for. In this article, Obinwanne Hill will look at breakpoints beyond screen size and explore different possibilities and practical approaches to using them to create truly adaptive experiences on the web.
Read more…
Stricter functional programming languages are typically used when a system’s performance and integrity are both critical — i.e. your program needs to do exactly what you expect every time and needs to operate in an environment where its tasks can be shared across hundreds or thousands of networked computers. These languages have a steep learning curve for most front-end web developers; however, many more approachable languages incorporate features of functional programming.
Read more…
Responsive Web Design and tools like Modernizr have become very popular. Recently, combination techniques, where optimization is done both server-side and client-side, has become a trend. The recently launched WURFL.js tool, fits into this category. In this article, Jon Arne Sæterås and Luca Passani will look at some basic use cases of how to use WURFL.js to optimize the user experience both in HTML and CSS, and an example of how to choose the right ads to display on different devices.
Read more…
In this article, Maksim Chemerisuk describes his approach with better-dom to solve the internationalization problem. Since the last article about this, “Writing a Better JavaScript Library for the DOM,” he has revisited the concept to solve the issues raised through feedback. The solution was originally intended to be a set of internationalization APIs for plugins, extensions, etc. It doesn’t rely heavily on the better-dom library, so it could be adapted to any existing JavaScript library.
Read more…
In this article Julian Shapiro will demonstrate that websites can benefit from the same level of interactive and performant motion design found on mobile apps. In the following examples, he’ll be using Velocity JS — a popular animation engine that drastically improves the speed of UI animation. In particular, Velocity.js’ UI pack, which allows you to quickly inject motion design into your pages.
Read more…
