Dear Friends,
You know how it works: you spend hours trying to find a workaround for a problem that you have encountered, just to realize that it doesn't quite work in, you know, that browser. Having a box of front-end goodies to refer to can be quite a time-saver, so you don't have to waste time on solutions that will never see the light of the day.
Since technologies emerge and evolve permanently, keeping track on what's going on is often difficult, especially since specifications change and so does the browser support. For a replacement talk at SmashingConf Oxford last week, I've collected some of the useful techniques from various articles, conversations and my workshops in a slide deck — now published for everybody to use, as PDF slides.
Hopefully you'll find them useful. We keep scouting for valuable techniques all the time, you know. In fact, we have a few conferences coming up: SmashingConf San Francisco is coming up in two weeks (nearly sold-out) and New York is coming up in June, now with a brand new UX For Start-Ups workshop.
Well, perhaps see you in Vancouver, BC or San Francisco in two weeks? ;-)
Keep learning!
Vitaly (@smashingmag)
Table of Contents
1. Free Fonts: Yrsa and Rasa
Good free fonts don't come around frequently, but once they do, they are always a great addition to an existing library. Yrsa and Rasa are open-source type families published by the Rosetta type foundry, kindly supported by Google. The family comes in 5 weights, and the fonts support 92 languages in Latin script and two languages in Gujarati script (Gujarati and Kachchi).
The family is an experiment in remixing existing typefaces to produce a new one. The Latin part is based on Merriweather, which features a very large x-height, slightly condensed letterforms, a mild diagonal stress, sturdy serifs and open forms. The Gujarati is based on David Březina's Skolar Gujarati, which we use on Smashing Magazine's headings.
The fonts are available for private and commercial use, and released under the SIL Open Font License. You can download the fonts in OpenType and TrueType formats right away. (vf)
2. A Free Animation Plugin For Sketch
Whenever you're designing and prototyping in Sketch, don't you just wish that Sketch would offer some animation tools? Nothing too fancy, just some basic move, rotation, scale or transparency animations? To spare you the move to another application if you just need a simple animation, you might want to give AnimateMate a try. The free plugin lets you produce and export animations straight out of Sketch.
Even though it won't transform Sketch into a fully-fledged animation tool (it's also still in its prototype phase), it still does the trick for simple demands. AnimateMate is based on keyframes, provides a variety of easing functions and supports grouped layers to a certain extent — if they aren't too complexly nested, that is. Handy. (cm)
Advertisement
3. Styling Broken Images
Broken images are ugly, and they should be avoided, beyond question. But did you know that you can actually use CSS to apply styles to the img element and provide your users with a more pleasant sight in case an image gets lost or is otherwise broken?
The attr() expression, for example, lets you display the link to the broken image and provide the user with a custom message. And if you want to get rid of the default broken image symbol for good, you can use pseudo-elements to replace the alt text and add some extra styling to the broken image. Opera Mini, Safari and iOS Webview won't display the pseudo-elements, but they don't break anything either which makes it a nice option to at least serve users on supporting browsers a more decent experience. (cm)
4. A Responsive Product Comparison Table
Big e-commerce websites often call for comparison tables that allow users to compare products. A simple HTML table usually does the trick, but if you have more than six products to compare and try to make the table responsive, too, things can get tricky. The responsive comparison table pattern by CodyHouse relies on a simple HTML structure and some CSS and JavaScript to provide an elegant solution to the problem.
The CodyHouse solution was inspired by the comparison tool found on the Sony UK website, but it chose a different path in UX, though. The table lets users select and filter the products which they want to compare instead of letting them remove products from the list. A user-friendly approach, and a real time-saver for everyone working on e-commerce websites. (cm)
Advertisement
5. Getting Mobile E-Commerce Right
When it comes to mobile e-commerce, the state of affair is quite sad as the Baymard Institute's recent research shows. But there are also some great examples of how it can be done right, with the electronics retailer B&H Photo leading the way. The site ranked the first place in the mobile usability benchmark database that summarized the 5,000+ mobile UX scores of the 50 highest grossing US e-commerce websites. B&H's outstanding mobile UX performance is rooted in a well-rounded product navigation and search experience. No site is perfect, of course, but why not draw inspiration from what B&H gets right?
Christian Holst has compiled the seven mobile implementations that make B&H best in class in a comprehensive write-up. Giving users the chance to infer the type of site from the homepage content is among them, as well as providing thematic search, displaying selected accessory products, and a flawless implementation of the touch keyboard. Home Depot, Sears, Target and Nike turned out to be close runner-ups to the first place, by the way. (cm)
6. What Will The Future Of Passwords Look Like?
Sign-up forms are one of the trickiest things to design. To prevent failed logins, password resets and user frustration, one common design decision is to provide an obligatory "confirm password" field. But, as a case study found, the additional field is also responsible for a significant drop in conversion rate. So how to deal with this? Do we really need the "confirm password" field?
An article on UX Movement suggests to remove it. But excluding it is not enough. Since the main function of the field is to catch typos, it's important to offer the user an option to unmask the password input if you plan to remove the field so they notice errors instantly and don't get frustrated.
When it comes to passwords, Justin Balthrop even goes one step further. In his opinion, the Heartbleed bug highlights the fact that websites should stop using passwords altogether. "Passwordless authentication" is the magic word. Instead of asking users for a password, websites could generate a temporary authorization code on the back-end, store it in their database, and send the user an email or SMS with a link containing the code (very much like Slack or Twitter do it).
Once a user clicks the link, the backend server can verify the code and exchange it for a token to be stored on the user's device. This way, the user stays logged in and doesn't have to repeat the process. An interesting approach, yet it still leaves some question unanswered. It's enough to peek someone else's email to log in for a long period of time. (cm)
Advertisement
7. Rethinking The News Ticker
Since the rise of mobile devices, we have learned to design and develop for the constraints that small screens bring along. But what if you take things to the other extreme and have to design for overly large displays instead? The design team behind the Financial Times has taken on this challenge with Big FT, a UI for viewing Financial Times news in a non-interactive, non-scrollable environment.
The idea behind the project: FT customers often work in corporate offices with large video walls that are tuned into a rolling news channel like CNN or BBC News. The user experience of this solution, however, is quite inconvenient, since news channels only make real sense when you can hear the audio. So the goal of Big FT was to bring The Financial Times' quality content to these screens while fully adapting to and embracing the constraints that come with them.
To ensure that the content works when viewed from a considerable distance, FT Labs decided on a simple layout with a single article image with the top three article titles from FT.com and the remainder of the homepage's titles in the ticker. The UI is brought to life by Node.js, running on Heroku (you can take a closer look at it in the accompanying GitHub repository). To dive deeper into the topic, FT Labs published an insightful write-up summarizing their approach. (cm)
8. The Beauty Of Vintage Control Panels
An old phone with a dial plate, a tape deck with a grid of buttons, an electricity control room with hundreds of bulbs — vintage electronics have a fascinating charm to them. In praise of all those dials, toggles and buttons that made and shaped the tech design of the past century, Stephen Coles and Norman Hathaway dedicated a Tumblog solely to vintage control panels.
As you'll see, browsing the collection feels like opening a time capsule. Apart from car dashboards and tech magazine covers of the 80s that still seem (fairly) familiar, you'll find gems like four-buttoned remote controls from the 40s or retro-futuristic concepts, among them a smartwatch from the 80s that is essentially a shrunken PC worn on the wrist. A fun journey through the history of interface design. Leaves us with the question what people will think about our state-of-the-art gadgets and UIs in 50 years from now. (cm)
9. Upcoming Smashing Workshops
With so many techniques, tools,
style guides, 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 classes are all about:
practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Full-Day Workshop in Vancouver, BC (March 30th, 2016)
Workshops at SmashingConf New York (June 2016)
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 costs — we’ll find a fair price for sure. Get in touch — it’s that easy! (vf)
10. New On Smashing Job Board
Here are the recent job openings published on our
Smashing Job Board:
- Product Owner E-Commerce at Booking.com (Amsterdam)
"Do you want to redefine the way travellers explore the world? Join us in beautiful Amsterdam as a product owner! As product owner, you will work diligently with designers, developers, copywriters and other POs to make our traveller's journey through both our site and their destination easier."
- Information Designer at Infographic World (New York or remote) "Infographic World, a growing NY-based visual communications agency, is seeking a creative, energetic, detail-oriented graphic designer with experience creating a wide range of deliverables, from reports and e-books, to infographics, logo and branding, animated videos, to PowerPoint design and more. Starting from the very beginning of a project to the very end of it, our ideal candidate would be able to move seamlessly between crafting sketches and wireframes to designing amazing visual content."
- Chief Designer/Front-End Developer at Vidados (London, UK)
"Love travel? Can't get enough activity holidays? Creative, driven, focused on great UI and UX? Surfing, photography, painting, cookery, yoga, jewellery making, hiking, cycling holidays and more activities appeal to you? This is the front-end developer/designer job for you. We're Vidados, an activity holidays marketplace where ordinary holidays don't get a look in. We have an exciting opportunity to join us and become our front end developer/designer."
11. Smashing Highlights (From Our Archives)
- Design Principles: Dominance, Focal Points And Hierarchy
Has a client ever asked you to make the logo bigger? Maybe they asked that just after you completed their request to make a heading bigger. The new heading stands out, but now the logo is too small in comparison and isn't getting noticed. The client wants to make the logo bigger.
- Taking A Second Look At Free Fonts
Once thought of as amateurish by professional designers, free and open-source fonts have gone through something of a renaissance in just the last few years. The quality of available free fonts has increased dramatically. To be frank, free fonts don't have a good reputation, and often they are knock-offs of thoroughly crafted, already established typefaces. So is it time for professional designers to take a second look?
- Logical Breakpoints For Your Responsive Design
There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn't scale well. There are no "common" screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks.
12. Recent Articles On Smashing Magazine
Coding Articles
Design Articles
Freebies, Inspiration, Misc.
No comments:
Post a Comment