Dear Friends,
Jet lag. After a truly incredible Smashing Conference in LA that took place at the shores of the Pacific Ocean in Santa Monica, we've just got back home to Europe, totally exhausted, tired and sleepy, but at the same time very happy, and of course, jet lagged. Ten hours time zone difference can be quite an overhead, not only for your body, but also for remote work. It requires planning, discipline and just being able to rely on your colleagues.
Just a regular Smashing Conference. 3D glasses were required for a 3D laser show by Seb Lee-Delisle and Val Head.
To manage jetlag efficiently, it's a good idea to stay awake until "local" night time and stick to any regular activities during that "local" time, be it gym exercises, meals or playing a round of scribble. It isn't easy, but it is remarkably helpful; just don't get stuffed with horrible in-flight food! Sleeping on the plane is fine, as long as you keep yourself tired enough to get some more sleep at the "right" local times. So to keep yourself awake, you could draw a cartoon, or read a book, or perhaps watch a few Smashing Conference videos. In fact, over the last months we've been releasing many talks, so you'll find a few nifty and useful gems in there for sure. Please keep in mind that the videos can be quite addictive — you've been warned!
Talking about conferences, we do have a few coming up (workhops, too!): SmashingConf New York 2015 on June 16–17th and the tickets for the SmashingConf Freiburg 2015 will go on sale (with a few early-birds!) on May 12th, at 2:00PM CET. That's a legendary one, so please set up alarm and don't be late!
We'd love to meet you in some parts of the world, so if you have specific requests of where our next event should take place, please tweet to us @smashingmag — we love special and unique locations (Llanfairpwllgwyngyll, anyone?).
See you around!
– Vitaly (@smashingmag)
Table of Contents
1. Cutting The Mustard, Revisited
Some things get outdated and deprecated, others remain relevant over the years. Progressive enhancement is one of the latter. In fact, starting with basic HTML/CSS and enhancing for capable browsers is a simple yet powerful concept that makes extremely fast, robust, resilient and responsive experiences easier to craft and maintain.
But how do we send enhanced JavaScript to enhanced browsers? To decide whether a browser is smart enough to get "enhanced" experience, we could use a server-side device detection via WURFL or DeviceAtlas, or client-side libraries like Modernizr or YesNope. However, in many cases, we can use the Cutting the mustard technique instead, first popularized by the BBC team. All we need to do is check whether the browser "cuts the mustard", i.e. supports specific features that modern browsers support.
Jake Archibald has recently discovered that we can use the support of the Page Visibility API as an indicator whether a browser is modern or not; in fact, IE<=9, Opera Mini and Android <= 4.3 don't support it, while all the modern browsers do. We could also just test the feature and fork the loading of assets accordingly. Michael Scharnagl has published an article explaining how exactly we could use it to cut the mustard even faster and easier. Pretty useful for pretty much every project. (vf)
2. Free Payment And Avatar Icons
The web is full of freely available icon sets, but once we search for something very specific, we often don't find just what we need when we need it. Having a few icon sets at hand can be quite useful. For example, PaymentFont consists of 95 icons of all main payment operators and methods in three different styles. You can simply include the font and CSS files in your project and assign appropriate classes, and voilà, you are pretty much done.
Also, Material Design Flat Avatars is a handy and unique avatar set that can be used for different purposes: from creating personas to picking random default images for your comment section or dashboards. The icons are available in AI, PSD and PNG formats, and can be used without any restrictions whatsoever. (ml)
3. Designing Better User Interfaces
Unfortunately, we're confronted with inefficient user interfaces more often than we would like, even in the most ordinary situations. Simply take a look at the cluttered control panel on your washing machine, or those distracting treadmill interfaces at the gym. However, there's one good thing about these bad examples: they can teach us to do better with our own, digital products.
Designer Imran Parvez, for example, took the washing machine with its overabundance of choices as an opportunity to rethink how we create settings and preferences for our digital products. In his article "Designing Settings", Imran shares his thoughts on what should (and what shouldn't) become a setting and how settings can be structured for better usability.
Fellow interface designer William Song, on the other hand, came up with an efficient and intuitive design solution to improve the treadmill interface. A nice reminder on how clarity affects the usability of a product. But what about a world after buttons and flat screens, when today's logics don't apply anymore? Matt Sundstrom takes his considerations about creating interfaces to the next level. His article "Immersive Design: Learning To Let Go Of The Screen" captures his key takeaways from experimenting with virtual reality. Interesting thoughts on how we as human beings experience the world and how this knowledge can be used to build virtual experiences. (cm)
Advertisement
4. Performance Matters: A Perf-Analysis Bookmarklet
When dealing with performance budgets, we often see them as a separate goal that we optimize for as we design. However, it can also be a part of the workflow, e.g. wouldn't it be nice to be able to quickly check how a prototype performs, just to ensure that we are on the right track when designing an interface? Well, that's what performance bookmarklets are for.
Peformance-Bookmarklet is a handy little tool that analyzes the current page through the Resource Timing API, Navigation Timing API and User-Timing to review the requests by type, domain, load times and marks, also available as a Chrome and Firefox extension. Mobile Perf bookmarklet by Steve Souders provides an overview of a few useful tools within just one bookmarklet. And Perfmap generates a front-end performance heatmap of resources loaded in the browser using the Resource Timing API. Helpful. Useful. Bookmarked! (vf)
5. A Beautiful Test Of Endurance: Long-Term Design Projects
100-, or even 365-days projects are a wonderful playground for experimentation, an opportunity to break out of your daily design routine and let your creative juices flow. So, if you have ever thought about launching your own long-term mission, then the following two projects are not just beautiful eye (and ear!) candy, but they might even give you the final push in order to get started yourself.
San Francisco-based designer Do-Hee Kim emboarded on her personal 100-days challenge, #100daysoffonts, about a month ago. The creative showcase features a new Google font pairing each day. A beautiful little gem that is sure to provide you with a lot of fresh typographic inspiration.
Everyday Jazz, on the other hand, is the 365-days creative journey of Mytton Williams. The UK-based design agency collaborates with Adam Rogers, a digital artist specialized in innovative web and mobile experiences, and Tom Berge, jazz pianist and composer, to create an ever-changing calendar that merges technology and music. Each day features a real-time animation with particles appearing and disappearing to form the date, all in response to the accompanying jazz music. Impressive! (cm)
6. Speaking The Language Of Iconography
Iconography isn't easy to get right. The premise of icons is obviously a universal, consistent user interface which works well with different languages and in a variety of contexts, e.g. for small and large views, with or without supporting labels. However, it's probably impossible to find icons that have exactly one meaning and could be interpreted in just one way. Even "well-known" icons aren't necessarily clear to everybody, e.g. Android and iOS do share some icons such as the infamous hamburger icon, but you often see different variations of those icons. So often a clear label ("Menu") with a clear affordance (button shape) seems to be a bit more reliable.
Text isn't always an option though, and in fact it's just one part of the story. Some icons are verbs, some are nouns, and some could vaguely be both. If you speak the right language of iconography, choosing only verbs or only nouns (e.g. in tabs and floating action buttons), you could get closer to an interface design that is a bit more consistent, predictable and well-understood. An interesting consideration to keep in mind when selecting an icon for the next project. (il)
Advertisement
7. Supporting Many Languages, With One Library
So what if a website you are building has to support a few dozen of languages? Navigation could be one of the challenges, as well as selecting an appropriate universal web font, and so is formatting micro-content such as time, date or phone numbers. Luckily, the jQuery Foundation announced that it's been working on Globalize, a comprehensive internationalization (i18n) library with support of time, date, digits, currency and message formats (with gender and pluralization support).
With the library, you can pretty much make sure that whenever you have a proper local defined, all those tricky components that would normally look awkward and incorrect throughout different languages will follow the right formatting. Globalize provides number/date/time formatting and parsing for any interface, and is being actively developed, so if you need adjustments or find a use-case which isn't covered, it might be added soon, too. The library supports modern browsers and IE 8+ (needs ES5 polyfill). The team is also currently working on runtime optimization and non-gregorian calendar support. (vf)
8. Free Space Photography
Some projects are so different that it can be hard to find appropriate assets. On the other hand, the web almost provides something for everyone and every case — you just have to find them at the right time. So, what about space photography? Peek.space is a project that provides free photography for any space-related project.
Patrick Goethe collected some of the better freely available space-related pictures from a pool of thousands of images so you don't have to. It includes photos of stars and galaxies, but also images of astronauts and related disciplines. Head over to Peek.space and choose from some beautiful imagery for your next astrology site or educational project. (ml)
9. Keep Calm… And Attend A Smashing Workshop!
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.
Image credit: Marc Thiele
Upcoming Workshops in NYC, USA:
Upcoming Online Workshop:
Upcoming Workshop in London, UK:
You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy!
New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Senior UX Designer at YP (Glendale, CA)
We're looking for a passionate candidate who has the ability to produce top-notch wireframes.
-
Animation Director at Rising Tide Games (Austin, TX)
We're looking for talented and passionate artists to help build the next generation of social casino games in our new Austin studio.
-
Web Developer at Lamar University (Beaumont, TX)
We're looking for a web developer with extensive knowledge of and skills with web technologies and best practices while delivering solutions contributing to user experience and the user interface.
Smashing Highlights (From Our Archive)
-
Showcase Of Web Design In The Arab World
and, magic carpets, Islamic art, Mecca, turban, luxury, camels, incense, Ali Baba and the 40 Thieves, arabesque art and cous cous are just a few of the images that spring to mind when thinking Arab world. But there is actually a misconception of what is the 'Arab world'.
-
How To Benefit From CSS Generated Content And Counters
Generated content was first introduced in the CSS2 specification. For several years, the feature was used by relatively few Web authors due to inconsistent browser support. With the release of Internet Explorer 8 in 2009, generated content was rediscovered, and many interesting implementations were adopted for the first time. In this article, we'll discuss some possible uses of generated content.
-
Hidden Productivity Secrets With Alfred
Good developers are always looking for ways to be faster and to automate their workflows. Today, we present a series of workflows in Alfred that will boost your productivity and rock your world.
Recent Articles On Smashing Magazine
