Tuesday, November 10, 2015

Smashing Newsletter #147: Monsters, Performance and Flexboxes

When was the last time you felt completely lost? Issue #147 Tuesday, November 10th 2015 178,502 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

When was the last time you felt completely lost — forced to explore the unknown, without any fallback to the comfortable, the familiar? Over the last few weeks, I've travelled over 26,000 miles between Barcelona and Sydney, with a 5-days-stop in Tokyo. The exploration of Tokyo probably was one of the most enriching and dazzling experiences I had in years. With everything looking, tasting, functioning differently, plastic food displays, convoluted underground interfaces, overly colorful package design and no fallback to English language, you start paying close attention to signs and sounds, gestures and facial expressions, interfaces and directional signage.

Tokyo, Japan

Yet the best bit happens when you strip away technology and wander on your own, trying to understand the city and create a map in your own head. That's how you end up in lovely authentic places and get an insight into what life really is like over there. That evening I returned to the hotel dizzling with thoughts and ideas that had to be written down until late night. So when you are travelling to a distant place next time, just walk to a random (safe) place outside the tourist attraction and try to find your way without technology. You might be surprised how rewarding and unique the experience will be.

Happy travelling and getting lost!
Vitaly (@smashingmag)


Table of Contents

1. Brainstorming, The Right Way
2. Budgets Are Good: Performance, UX and Content Budgets
3. What Kind Of Design Work Should I Do? A Flow Chart For Designers
4. BigRig: A Big Small Performance Testing Tool
5. Getting Started With Service Workers
6. Everything Is Better With Flexbox
7. Writing Better Email Subject Lines
8. Bringing Kids' imaginations to life
9. Upcoming Smashing Workshops
10. New On Smashing Job Board
11. Smashing Highlights
12. Recent Articles On Smashing Magazine

1. Brainstorming, The Right Way

We've all been in these uncomfortable meetings: somebody proposes an idea during the meeting which eventually leads to group brainstorming and group negotiation. Ideas need time to grow, flourish and eventually be prioritized, yet more often than not they get watered-down or just killed. Well, meetings don't have to be like that.

Brainstorming, The Right Way

Obviously, one rule to stick to at a meeting is that all ideas should be written down without immediate feedback or discussion, and then prioritized. At Google Ventures, meetings follow the "Note and Vote" principle: paper and pens are distributed, everyone writes down as many ideas as they can — quietly, within 5–10 mins, then each person takes 2 mins to review their list and pick a few favorites, the ideas are presented in the team and voted silently on the whiteboard, with a marker. Finally, a well-respected decider, not the group, makes the final call. The best part: everybody works in parallel and has a quiet time to think, and that's the core of productivity. (vf)


2. Budgets Are Good: Performance, UX and Content Budgets

Constrains are good; mostly because they prompt us to come up with creative solutions within strict requirements. That's how truly great solutions are born, because "when designers don't have constraints, they feel like they're wondering in the desert, and they don't know what's next" (Aarron Walter speaking at #btconf). The constraints can be reflected in budgets and documented from the day one of the design process.

Budgets Are Good: Performance, UX and Content Budgets

Performance budgets have become an established paradigm for prioritizing performance early on: we define how fast a website should start render in given conditions and set it as a goal. UX budgets provide us with a framework to identify critical task and the amount of time required to complete this task, and if the user surpasses a threshold, having an interface responding to it — perhaps to motivate the user to finish the checkout after 45s in the web form jungle. Gov.uk has just introduced Sentence length budget, with 25 words being the upper limit for a given sentence. Purpose? To keep the content concise and make it easier for users to understand. Now, what about setting up a few budgets in your company? (vf)


Advertisement
Adcreator Advertising


3. What Kind Of Design Work Should I Do? A Flow Chart For Designers

"What projects should I take on? Where should I work? What should my career look like?" Questions like these bother all of us sometime during our career, but especially young designers who are new to the industry. Julie Zhuo, product design director at Facebook, gets asked these questions a lot, and she often wishes that she could better illustrate what she wants to convey when giving advice. So in an attempt to do so, she created a flow chart that tries to help designers who are still looking for their place in the industry to find their path.

What Kind Of Design Work Should I Do? A Flow-Chart For Designers

The central question is basically "what do you care about"? From there on, the flow chart provides different paths depending on what a designer wants to achieve with their work. Do impactful work, learn how to be a better designer, make a lot of money, or have fun — whatever it is that drives you, Julie's flow chart is bound to provide you with inspiration on where to find the challenge you are looking for. (cm)


4. BigRig: A Big Small Performance Testing Tool

So here is a problem: you need extended data about what's going on, while important parts of your website are being rendered. What if you could easily discover how much time the browser spends in JavaScript during page load, and of the time in JavaScript, what script in particular was the longest-running? Or, during a scroll, what is the fps and how much time does the browser spend in styles, layout, paint, and composite during each frame? That's exactly what Google's Paul Lewis decided to fix.

BigRig: A Big Small Performance Testing Tool

The result is Big Rig, an open-source tool that is available in two flavours: a web-based UI is handy if you have no performance workflow in place and just want to start tracking things without getting into much config. A CLI/Node.js module lets you integrate it into an existing workflow and have it pass data back to some other dashboard or endpoint. (vf)


Advertisement
Ad


5. Getting Started With Service Workers

What experience do you provide to your users on a shaky connection? What if you wanted to speed up your performance drastically? Well, all of it is possible with Service Workers, and if most of your users are browsing via Chrome, ServiceWorkers can be used to progressively enhance user experience in capable browsers and upcoming browser versions.

Getting Started With Service Workers

Nicolas Bevacqua has published a guide/tutorial on getting started with ServiceWorkers in which he explains step-by-step how you can use the technology and what happens under the hood. UpUp is a JavaScript wrapper around ServiceWorkers which makes it very simple to serve specific content to your users, even when they are offline. In fact, The Guardian published an article explaining how the team used ServiceWorkers to build a custom offline page for the site.

Browser support, you ask? Well, we're getting there, and there is a shared agreement across browser-makers that it's an important technology, so we shouldn't be waiting for it too long. (vf)


6. Everything Is Better With Flexbox

Some front-end challenging can be quite frustrating to solve with good old-fashioned CSS, yet they are peanuts if you are using Flexbox. Laura Kalbag has decided to build a flexible, responsive HTML5 video player with Flexbox just because using floats and positioning wouldn't provide a flexible enough solution.

Everything Is Better With Flexbox

Laura uses Modernizr to feature detect Flexbox, and progressively enhances the player if Flexbox is supported. The entire player container is a Flexbox, the time takes up all the space it needs (and no more), and the progress bar fills the remaining space. The play control buttons then sit on the left side, and the volume on the right, both roughly filling half the space.

Next the volume controls need to be stuck to the right side and to achieve play/pause buttons to be residing in the centre, we can turn a flex-item into a Flexbox and align items across the main axis (horizontally) and the cross axis (vertically). Old browsers get an "okay"ish, non-enhanced version of the player. Done. Ah, need to figure out how Flexbox calculates the width of flex items? Here you go: Flexbox Width Tester. (vf)


Advertisement
Ad


7. Writing Better Email Subject Lines

When you send out the email newsletter, the subject line often is an afterthought... actually, it's a "last-minute" thought, isn't it? And yet, a subject line is the very first impression your subscribers will get, no matter if it's on mobile or desktop. So if you are sending out mailings a lot, spending time to craft a meaningful and useful subject line is very well worth it.

Writing Better Email Subject Lines

How to get started? Well, Campaign Monitor has published a very useful Subject Line Superhero PDF Guide (2 Mb) which might help you to get better in your subject line copywriting skills. It comes up with three examples for each of the 17 subject line categories they have identified and helps you figuring out what the most appropriate style for your list could be. Litmus also provides an a few tips for writing subject lines and Mailchimp features what subject lines have better and worse open rates. Worth downloading and reading. (mse)


8. Bringing Kids' imaginations to life

Guess what happens if 100 kids draw monsters and 100 illustrators bring those kids' imaginations to life? Probably something hilarious and very refreshing. Katherine Johnson did just that: she simply invites Elementary students to draw monsters, and once their creations have taken shape, she works with illustrators to bring them to life in their own artistic styles. And then children can see what their idea sparked in others.

Bringing Kids' imaginations to life

The ultimate goal is to help children recognize the value of their ideas and make them feel excited about the creative potential of their own minds. The project is called The Monster Project. At the moment, the site features over 100 monsters created by over 100 artists from all over the world. Like the project? You can back up Katherine on Kickstarter too, you know. (mse)


9. Upcoming Smashing Workshops

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 and RWD workshops that will help you become better front-end developers and designers, today.

Upcoming Smashing Workshops

Full-Day Workshops at SmashingConf Oxford

Full-Day Workshops at SmashingConf San Francisco

But what about in-house training instead? We can improve your eCommerce checkout and conversion rates right on spot — or performance, accessibility or UX. 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! (vf)


10. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Design Director at Bonanza.com (Seattle, WA)
    "Bonanza is seeking a Design Director to join our award-winning marketplace team. This is a great opportunity for a design pro with a proven track record of leadership and excellence to make a big impact in our fast-growing company."
  • Senior UX Designer/ Architect at EclecticIQ (Amsterdam, NL)
    "We build complex data intensive software for a niche market within Cyber Security where customers have different levels of maturity. It's a web application for desktops used by highly specialised users. Creating a balanced experience where the user will find all the information and features they need without it feeling like the cockpit of a Boeing 747."
  • Full Stack Web Developer at The Dedham Group (New York, NY)
    "Our ideal candidate has experience with both front-end and back-end technologies (i.e., JavaScript, HTML, CSS, PHP, Python, Ruby, Java, but we are not tied to a particular technology stack) as well as indexing, building search functions, and form controls. Candidates should have a portfolio of previous work."

11. Smashing Highlights

  • Best Practices of Combining Typefaces
    Creating great typeface combinations is an art, not a science. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. We will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

  • Help The Community: Report Browser Bugs
    You might think that reporting the bug would be pointless, because it would take ages to fix, and would take even longer for users to upgrade to the fixed version. However, for all browsers except Internet Explorer (IE), this is not true anymore. Also, some bugs get fixed quite quickly, especially the ones that come with a decent report. Keep reading, and your own bug reports will likely fall in this latter category.

  • Showcase of Web Design in Russia (2009)
    The land mass that is one-sixth of the Earth is always surprising. This article presents the state of the art of web design in Russia — in fact, it won't dwell on the classic stereotypes but will rather look at the creativity flowing through.


12. Recent Articles On Smashing Magazine


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), Markus Seyfferth (mse), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser


No comments:

Post a Comment