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


No comments:

Post a Comment