Tuesday, March 22, 2016

Smashing Newsletter #155: Front-end tools, clever tricks and eye candy

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.
Issue #155 Tuesday, March 22nd 2016 184,298 readers View in the browser

The Smashing Email Newsletter

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.

Editorial

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
2. A Free Animation Plugin For Sketch
3. Styling Broken Images
4. A Responsive Product Comparison Table
5. Getting Mobile E-Commerce Right
6. What Will The Future Of Passwords Look Like?
7. Rethinking The News Ticker
8. The Beauty Of Vintage Control Panels
9. Upcoming Smashing Workshops
10. New On Smashing Job Board
11. Smashing Highlights (From Our Archives)
12. Recent Articles On Smashing Magazine

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

Free Fonts: Yrsa and Rasa

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.

A Free Animation Plugin For 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
Ad


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?

Styling Broken Images

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.

A Responsive Product Comparison Table

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
Ad


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?

Getting Mobile E-Commerce 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?

What Will The Future Of Passwords Look Like?

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
Ad


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.

Rethinking The News Ticker

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.

The Beauty Of 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)

Upcoming Smashing Workshops

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.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), (), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser


Tuesday, March 1, 2016

Smashing Newsletter #154: Masonry Layout, User Interfaces And Air Travel

What if you were asked to compare the state of the web industry today with what it was like a decade ago? We probably would praise the evolution and diversity of web technologies, smart browsers and the sheer amount of smart front-end techniques out there. Issue #154 Thursday, March 1st 2016 182,602 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

What if you were asked to compare the state of the web industry today with what it was like a decade ago? We probably would praise the evolution and diversity of web technologies, smart browsers and the sheer amount of smart front-end techniques out there. But what about the people working in the industry?

In one of her recent blog posts, Sarah Parmenter has noted that it is becoming more difficult for freelancers to make the same living that they were making a few years ago, and the work seems to be drying out. The main reason: companies decide to bring in expertise in-house rather than relying on (often expensive) freelancers.

Brooklyn Beta
Some conferences come and go: Brooklyn Beta has been celebrated for years, but isn't organized any longer.

Besides Smashing Magazine, I spend a good share of time working with smaller and bigger companies that engage freelancers to some degree. Indeed, the shift for companies to move away from hiring freelancers towards in-house teams is prevalent; yet at the same time, I see many companies struggling with hiring skilled professionals — and as a result, working hard on attracting talent and often creating internal schools and training for newcomers.

Hiring a dream team of well-known designers and developers might sound like a great idea, but most companies can't afford it unless the budget is generous, and even if they do, hiring a respected, ambitious designer to work alongside the good ol' in-house team often isn't enough. Reason? Because the workflow and the processes in place are often inefficient or even contradictory. From this perspective, hiring a consultant to work on a project-by-project basis appears to be less risky, more goal-oriented, and also less expensive (long-term).

Great ideas are born in war rooms.
Some of the best design ideas are born in "war rooms". Hiring best designers is often not an option though.

I also see companies realizing that with in-house teams, the input from outside is critical to discover uncharted territories and push the entire team out of the comfort zone — or just break the walls in the companies. In many of my projects, in-house teams are working closely together with external consultants. It might differ a lot depending on whether your expertise lies in front-end or user experience design or visual design, of course.

I do believe that the situation is quite difficult for newcomers to the industry, and a usual way is to get into a good company for a few years to gain experience and then become a freelancer. If you've been working in the industry for quite some time and are experiencing issues, in my experience, public speaking, writing and open sourcing tools work best to raise your profile and draw attention to your work.

Many of my projects come exactly from these sources. Most companies need hard-working and knowledgeable people: so when networking at conferences, don't be too humble to ask about working together. Nothing beats the good ol' word of mouth advertising. Underpromise, overdeliver and stay true to your quality marks.

What has your experience been so far? We're running a poll on Twitter, so feel free to participate. And perhaps see you in Oxford in two weeks? ;-)

Good luck and stay smashing,
Vitaly (@smashingmag)


Table of Contents

1. Can You Code This Concept?
2. Let Gutenberg Take Care Of Your Macro Typography
3. The Faster Masonry Layout Generator
4. CSS Element Queries... With JavaScript
5. Every Journey Begins With A Good Packing List
6. Become A Cartographer Of The Lost New York
7. A Trip Back To The Golden Days Of Air Travel
8. Upcoming Smashing Workshops
9. Recent Articles On Smashing Magazine
10. New On Smashing Job Board
11. Smashing Highlights

1. Can You Code This Concept?

Animations and transitions matter. Over the last few years designers have been carefully sprinkling little spots of delight in their interfaces — both in mobile apps and on websites. Obviously, Material Design has contributed to it as well.

Can You Code This Concept?

Yet it's one thing to design those little delights; crafting them in HTML/CSS is an entirely different story. Can You Code This Concept? (also check Volume 2) is an ongoing series of challenges in which the MaterialUp team picks a few nifty animations and concepts and encourages developers to implement them on CodePen. The result is 10 beautiful UI concepts, usually built with HTML/CSS alone. Interesting techniques that you can play with and incorporate in your own design. (vf)


2. Let Gutenberg Take Care Of Your Macro Typography

More than 500 years ago, Johannes Gutenberg invented a printing press with movable type that revolutionized printing and took books to the next level. In times when publishing is supposed to be fast, web typography often lacks that sense of meaning and craftsmanship that typography in print has benefited from since Gutenberg's invention. And what could be more meaningful than choosing Gutenberg as the name for bringing a more meaningful typography back?

Let Gutenberg Take Care Of Your Macro Typography

The Gutenberg Web Typography Starter Kit is one of the work-in-progress projects with the aim to simplify the step towards better web typography. Gutenberg sets the baseline grid to establish a proper vertical rhythm and makes sure all elements fit into it harmoniously. It comes with two predefined themes based on the Google Fonts Merriweather and Open Sans, but custom options also allow loading custom typefaces. The project is open-sourced and based on Sass, which makes it easy to reuse most parts of the code. Need more options? Check out Typeplate, and don't forget Modular Scale as well! (cm)


Advertisement
Ad


3. The Faster Masonry Layout Generator

Current masonry layout solutions come with a downside: they are often bloated and, thus, lack performance. Not so Bricks.js. The masonry generator for fixed-with items caters for fast packing times, no matter the number of items. In contrast to other generators, it gets by without dependencies such as jQuery, and it doesn't even require any extra HTML markup or CSS to work.

The Faster Masonry Layout Generator

Besides a better performance, Bricks.js also offers optional resize handling and optimized handling of dynamically added items. Developed to fit into a modern JavaScript workflow, it's recommended you have a build system in place that can transpile ES6 and bundle modules in order to use it. Don't feel like using JavaScript for masonry? Well, you can use Flexbox and multi-column layout to achieve the same effect.


4. CSS Element Queries... With JavaScript

When it comes to responsive web design, the measure of all things is still the width and height of the browser window. But they only give us access to the global scope — the viewport, not the parent's width, for example. Element queries fill in the gap here: they allow you to apply responsive conditions to elements on the page, for situations like how wide or tall child elements of a parent container are. CSS doesn't support element queries yet, but this doesn't mean that you can't make use of them already today. The EQCSS.js library is a handy polyfill to close the existing gap. You can add the small library to your HTML, and you're ready to write element queries inside your CSS.

CSS Element Queries... With JavaScript

EQCSS supports conditions such as width and height queries, count queries (such as the number of characters, lines and children), scroll queries, meta selectors and CSS functions. By default, the plugin loads once when the content loads and then whenever it detects browser resize. No worries about performance, though: EQCSS was built in vanilla JavaScript and doesn't require jQuery or any other libraries to function. Yes, it's one extra JavaScript, but for maintainability and scalability of your design systems, it might be well worth it. (cm)


Advertisement
Ad


5. Every Journey Begins With A Good Packing List

Did you ever get to the airport and didn't find your passport? Did you ever arrive at the hotel after a long day of traveling with a drained phone battery to realize that you forgot to bring the charger? Well, then you should check out Packing Essentials. The site has committed itself to making your packing less stressful.

Every Journey Begins With A Good Packing List

"Every journey begins with a good packing list", so the credo. To help you pack more appropriately, the site takes into account the weather at your destination place, the purpose of your journey (after all it makes a difference packing-wise if you're going on a business or a camping trip), as well as the means of transport that will get you there. Apart from the obligatory clothing and gear lists, it also reminds you of things like turning off the heater and closing the windows before you leave home. A nice bonus feature: you can choose if you want the packaging list to be minimal, normal or perfectionist. Happy travelling! (cm)


6. Become A Cartographer Of The Lost New York

Our cities are constantly evolving. Green areas make space for new buildings, old ones are torn down, new streets are being built, others renamed, entire neighborhoods redrawn. And now imagine how big the impact of urban change must be for a metropolis like New York. It becomes most obvious if you compare a city map from today to one from decades, perhaps even a century, ago. To make this change visible, The New York Public Library has a very ambitious project going on. And they need your help to make it reality.

Become A Cartographer Of The Lost New York

For years, the New York Public Library has collected maps of New York. Originally commissioned by insurance companies to assess the value of properties or the risk of fire, the street atlases are a treasure chest of detailed information about a city now largely lost. The aim is now to make these lost places, destroyed buildings and renamed streets findable via contemporary digital maps to create a time machine that takes us back to the old New York.

Computers can do some of the work needed to digitalize and harvest information from the old maps, but it also requires a lot of manual work. And that's where you come in. You can support the project by helping to check the computers' work and capture other valuable information. No worries, the tasks are easy and bite-sized so it's the perfect thing to do when you're feeling bored. You can, for example, check and fix building footprints, enter addresses, classify color or find placenames. Kill time, make history. Sounds like a good thing, doesn't it? (cm)


7. A Trip Back To The Golden Days Of Air Travel

Ah, the golden days of air travel… When flying was still a luxury, and long distances suddenly became a journey of a few hours. Airlines of that time promoted their services with colorful posters showing those technical marvels that brought the world closer together in all their glory. Exotic countries, famous landmarks, foreign beauties, proud pilots, smiling flight attendants — that's what travelling dreams were made of.

A Trip Back To The Golden Days Of Air Travel

Looking at these posters today is like taking a trip back in time. So, are you ready for a flight to the past? Well, then buckle up: Yulia Yudintseva has collected more than 200 vintage airline posters. They are not only a journey back to the early days of flying (and to the stereotypes linked to it) but also offer an inspiring look at the graphic design trends of that time. Bon voyage! (cm)


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

Upcoming Smashing Workshops

Workshops at SmashingConf Oxford (March 2016)

Workshops at SmashingConf San Francisco (April 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)


9. Recent Articles On Smashing Magazine


10. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:
  • Product Designer at Contentful GmbH (Berlin, Germany)
    "Contentful is a different type of CMS. In fact, Contentful is more than one thing on its own. It's a content management system, a content backend, a content API, a web content editor – not to mention a team of 40 enthusiastic people. [...] You will be fourth member of our product design team who does the user research, persona development, user journey mapping, usability testing so some familiarity with beforementioned is welcome. You will also work within one of the teams and take responsibility for one of the segments of our application."
  • UX Specialist (Entry-level or Experienced) at Nielsen Norman Group (Anywhere)
    "Nielsen Norman Group is hiring user experience specialists. We currently have job openings for two types of candidates. Entry-level: fresh out of university (or graduating soon), with a relevant degree. Experienced: 1-9 years experience working professionally as a full-time user experience specialist."
  • UI Developer at Move, Inc. (San Jose, Ca)
    "We are seeking a UI Developer with proven interface layout skills to come join our team in developing our fully responsive flagship site realtor.com® and our suite of products. Candidates must have expertise in HTML5/CSS3, JavaScript, web frameworks, and have experience building responsive websites."

11. Smashing Highlights (From Archives)

  • The Good, The Bad And The Great Examples Of Web Typography
    Choosing typefaces is an integral part of every web design project. With thousands of typefaces available from hosting services such as Typekit, as well an ever-improving collection of free fonts available, there has never been a better time to be a typography-obsessed web designer.

  • Why AJAX Isn't Enough
    AJAX calls have moved user interaction on the Web a huge step forward: We no longer need to reload the page in response to each user input. Using AJAX, we can call specific procedures on the server and update the page based on the returned values, giving our applications fast interactivity.

  • Designing With Your Clients
    We have all known the pain of a client interfering in the design process. Phrases like "Make the logo bigger" and "Put that above the fold" have become a running joke in the web design community.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), (), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser