Thursday, January 29, 2015

Smashing Newsletter #130: Grids, SVG and Front-End Interview Questions

With opening titles and design documentaries. Issue #130 Thursday, January 29th 2015 179,735 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Whenever you hear someone saying, "But our users aren't going to...", interrupt them on the spot. Those statements are often pure guesswork, based on common assumptions and lacking evidence. The truth is that you never know, and quite frankly, we can't reliably know since usage patterns and behaviors can change over time. Our websites should be prepared for that "unknown", with enough time spent on research and planning.

The UX Reader
A little bit more UX, every day, can't hurt a project. A few good UX practices are collected in the free UX Reader eBook and UX Thought Of The Day.

In fact, I'd argue that planning is often one of the most underrated assets in the entire design process; and lack of planning is a cause for project delays, underbudgeting and stressed-out teams. So what if you tried to allocate just a few extra hours for a content gap analysis, for user interviews, for discovery and exploration, for content and interface inventories, for content priority lists, for performance budgets, for final refinements and even quality assurance tweaks? Look closely into out how the delivery of the project would be affected by this change, and iterate and revise. In fact, that's what we are doing at the moment, and it's showing significant improvements.

In times when complexity of projects (particularly responsive ones) require us to craft scalable, flexible, comprehensive design systems, proper planning can't be a luxury — it's a necessity. We have to keep different form factors and interactions modes in mind, design patterns and technical requirements, CMS shortcomings and legacy code base, design components and strategic decisions — and that's just scratching the surface! Starting to design without having a clear roadmap in front of you is a risky and dangerous undertaking.

Design decisions shouldn't be informed by guesswork. To eliminate misleading assumptions, we should have to validate our statements by good ol' UX work. A little bit more UX, every day.

– Vitaly (@smashingmag)

Table of Contents

1. Useful References For Quality Front-End Code
2. Outline Bitmap Images Into SVG
3. Grid Displayer For Bootstrap And Foundation
4. What Happens When...
5. Forget The Film, Watch The Titles
6. Reconsider Your Free Work
7. Inspiring Design And Art Documentaries
8. A Freelancer's Business Report
9. The Perpetual State Of Wanderlust
10. Keep Calm… And Attend A Smashing Workshop!

1. Useful References For Quality Front-End Code

On the web, technology is rapidly evolving, and with auto-updates being a well-established practice in modern browsers, the code that you've written a few months ago may now appear bloated and unnecessarily complex. To maintain the code quality, we need to keep revising and refactoring the code. Perhaps those vendor prefixes aren't required any more, or Flexbox syntax has changed, or WOFF2 has gained a significant push from browser implementors? Or perhaps new versions of those pesky Android browsers or Opera Mini recently came out?

Useful References For Quality Front-End Code

To stay on float of what's going on, we need good, reliable references. Luckily, there are plenty of good ones out there. The State of Web Type provides up-to-date data on support for typographic features on the web. Is ServiceWorker Ready? tracks the support of ServiceWorkers in browsers. CSS Triggers is a reference for the rendering work triggered by changing various CSS properties, and obviously Can I Use lets you get a detailed data on browser support for CSS, HTML, SVG and JavaScript and even compare specific (mobile/desktop/tablet) browsers — and so does HTML5 Please. Or perhaps you'd like to track browser support for broken/missing images? Now this would provide you with a good agenda for your next refactoring week and help keep your front-end code clean, shiny and up to date! (vf)

2. Outline Bitmap Images Into SVG

We all love resources that help us speed up our workflows. So what if you have a small bitmap image of a shape or a small illustration, but would love to quickly outline it into SVG? They all work right in the browser and create SVGs by tracing the original images. You might want to use illustrator's image tracking function, but you could also use a few online tools: PicSVG and Convertio. All you have to do is simply upload a picture to the respective site and the SVG is created instantly. PicSVG even lets you choose a color for the SVG as well as a filter.

Outline Bitmap Images Into SVG

The features which Vectormagic offers are a bit more sophisticated. Not only does it produce SVGs which are more rich in detail, but the tool also lets you review the results and adjust more settings, such as the level of detail and color. However, in order to download your SVG from Vectormagic, you'll have to sign up to the site first. Two conversions are free, afterwards you'll be charged a monthly fee. Happy SVGing! (cm)

3. Grid Displayer For Bootstrap And Foundation

Grids are powerful, but working with them might be quite annoying at times. What class should you pick? What are the right margins to choose, and how do you properly distribute columns across the grid? To help you make such decisions, you can use Grid Displayer, which is a bookmarklet displaying the grid of your front-end framework (obviously, the most popular ones). Simply install it by dragging it into your bookmarks bar. If you don't want to edit parameters every time the page or the displayer is reloaded, set them once and for all by adding data attributes to the body.

Grid Displayer For Bootstrap And Foundation

Grid Displayer was designed and built by Antoine Lefeuvre along with some help from contributors. The current 3.2 version is currently available only in Firefox and WebKit browsers, and compatible with Foundation 2–5, as well as Bootstrap 2 and 3. The bookmarklet is released under the MIT license. (ml)


4. What Happens When...

What happens when you type in '' in your browser's address bar and press 'Enter"? As a web professional, that's probably no question to make you sweat. However, have you ever tried to answer that question providing as much detail as possible, without skipping out on anything? Not even the browser checking the hostname for non-ASCII Unicode characters?

What Happens When...

Okay, it might sound a bit nerdy to go into so much detail, however, it also makes the idea for a quite interesting, collaborative project. The GitHub repository "What happens when..." attempts to answer this age old question — in as much detail as possible. It does already dig quite deep, however, there is still a lot missing. So, if you've got anything to add to it, don't hesitate, and send a pull request. If that's not enough for you to ponder about yet, the GitHub repository "Front-end Job Interview Questions" features a lot of interesting front-end-related questions that are sure to fuel many interesting discussions with fellow web developers. (cm)

5. Forget The Film, Watch The Titles

Once upon a time, introductory titles sequences of movies were so dull that the audience was grateful they didn't have to watch them. It was a time, when curtains didn't open before the opening credits were rolled. But when film producer Otto Preminger collaborated with graphic designer Saul Bass back in 1955, they changed the game. Bass created an opening title that was more than just a dull roll of credits and something that Preminger wanted his audience to see. When the projectionists got their hands on the film reels of The Man With The Golden Arm, a note on the film can said "Projectionists, please pull curtain before titles".

Forget The Film, Watch The Titles

Bass' title design was simple but yet different, and that was what sparked a flame within the film industry. If you also love the magic that happens when the lights are dimmed out and the opening sequence begins, then you'll be captivated by the very best in title design over at Art of the Title and Watch The Titles. Focusing on the creative process of title design, these two brilliant websites cover a broad range of styles, genres and techniques. And guess what, 2014 was an incredible year for title design, so make sure to check out the Top 10 Title Sequences of 2014. (ea)

6. Reconsider Your Free Work

Have you ever counted the estimate value of your free work? No? Well, you could be surprised at how much money you "could have" earned over the years. Just like you, Ran Segall believed in all of the benefits of getting his work out even by giving it away for free. He believed in arising opportunities and in being the good guy among family and friends. Today, he comes to a different conclusion, i.e. it's all worth nothing, because people don't appreciate things they get for free.

Reconsider Your Free Work

If you work for clients, you should only accept working for equity in addition to salary. Paying for design work will commit your client to the project and to treat your time and your output seriously. If you volunteer, you need to consider that you might end up wasting 90% of your time and working 10%. Since nobody's paying for your time, then nobody really cares if your time is properly used. In fact, you might not even get the creative freedom you imagined. So, if you want people to start caring about your work, start charging the well-deserved amount of money for it. (ml)


7. Inspiring Design And Art Documentaries

Planning to have a movie night this upcoming weekend? Instead of soaking up the latest Hollywood craze, why not indulge your mind with something intellectual instead? If you agree that a well-done documentary can take it up with any fictional blockbuster and if you also happen to love art and design, then check out Designers:Watch, a great list of must-see documentaries for designers, artists and anyone interested.

Inspiring Design And Art Documentaries

Share the life and vision of some of the world's most influential painters, cartoonists, architects and photographers. Explore fascinating methods in the creative process. Watch "Teaching to See" to learn why you can't come up with ideas if you don't look and visualize first. Dive into the world of architecture and let Clean Lines and Open Spaces show you how the post World War II building boom brought modern design into our homes. Or celebrate the digital revolution and how it has unleashed our creativity and talent in PressPausePlay. Now you've got your weekend plans covered! (ea)

8. A Freelancer's Business Report

Money isn't something that a lot of folks usually talk about. However, as a freelancer it is actually quite crucial to know what others take for their service, in order to stay competitive but also to prevent yourself from selling your work at less than a fair value. In 2013, designer and developer Ivo Mynttinen decided to publish his total earnings from freelancing on his site, and since the feedback was so positive, he did the same for 2014 — his most successful in three years of freelancing as it turned out.

A Freelancer's Business Report

As you would expect from a business report, it lists Ivo's monthly income and some other key metrics about his little business, such as spendings. However, the most interesting part for other designers and developers is probably the insight which Ivo gives into his pricing policy and how he adapts his rates depending on the clients. Kudos for so much transparency! (cm)

9. The Perpetual State Of Wanderlust

There are many beautiful places on Earth — so many of which most of us have never heard of. However, we often tend to only go well-known destinations, often even places we've been to already. Crossing your comfort zone by traveling to an unknown place is the best medicine against routine, depression, hopelessness, deadlock and many other "illnesses", and also the best way to find yourself, get inspired and explore the world a bit more.

The Perpetual State Of Wanderlust

Now stop looking at these photos and get up there between the clouds. It's time to act, and the beginning of the year gives you another chance. Even though most "top lists" are pretty useless and try to impose subjective templates and clichés on you, you can still skim through them creatively and allow them to motivate you. NY Times rolled up an annual travel list where the editors personally recommend 52 destinations to go in 2015 (one place per week sounds inspiring) with pretty good explanation comments and interesting travel tips from their readers. Doesn't matter if you choose one of them or maybe your own list of 52 places to visit — just make the step beyond. (vf)

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

Keep Calm… And Attend A Smashing Workshop!

Upcoming Online Workshops:

Full-Day Workshops in Oxford, UK:

Full-Day Workshops in Los Angeles, USA:

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 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!

New on Smashing Job Board

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

  • PHP Expert at Goodgame Studios (Hamburg,DE)
    We're looking for a PHP expert who will work in a team on our back-end systems such as our payment shop and our in-house core library.

  • Expert Googler at Knurture (Remote)
    We're looking for an expert Googler who can help us out on a regular basis, but this is not a full time opportunity.

  • UI/UX Designer at Azavea (Philadelphia, PA)
    We're looking for an ambitious in-house designer experienced in conceptualizing, designing, and building high-quality web and mobile applications.

Smashing Highlights (From Our Archive)

  • St. Valentine's Day Icon Set (16 PNG/EPS Icons)
    The icons presented are available in transparent and non-transparent PNGs, as well as in EPS format and are perfect for any projects you have coming up for St. Valentine's Day. Enjoy!

  • Bizarre Websites On Which You Can Kill Time With Style
    In this post, you'll find a collection of amusing websites that, by combining unconventional (and sometimes bizarre) ideas and clever JavaScript and Flash effects, will entice you to play on them for an embarrassing long time.

  • The Art And Science Of The Email Signature
    Email signatures are so easy to do well, that it's really a shame how often they're done poorly. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard.

Recent Articles On Smashing Magazine

Workshop image credits: Marc Thiele.

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

Follow us on Twitter Join us on Facebook

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

unsubscribe update preferences view in your browser

Tuesday, January 27, 2015

SmashingConf NYC 2015: When Great Just Isn't Good Enough

New York, we are back. June 16–17th 2015.
Tickets now on saleOnline version

"When Great Just Isn't Good Enough."

SmashingConf NYC 2015 will challenge you to rethink how you design and build websites today.
You might never be the same again.

SmashingConf New York, June 17-18th 2014

Get the tickets →Only 400 tickets. 50 early-birds.

About The Conference

Trends don't matter, but techniques do. We love exploring things that actually worked, or failed, in actual projects — and SmashingConf NYC won't be an exception. 1 track, 2 conference days, 5 workshops, 16 excellent speakers and just 400 available seats. With the main focus on networking and practical takeaways from real-life projects, you really don't want to miss this one.

Taking place on June 16–17th 2015 right next to the Times Square in New York City, this might be an event that will keep you on your toes for quite some time. Seriously.

Smashing Conference New York

Okay, ready for the line-up? Set! Go:

  • Stefan Sagmeister
    (Graphic designer, artist)
  • Susan Weinschenk
    (Psychology, UX)
  • Andrew Clarke
    (Responsive Design, Front-End)
  • Samantha Warren
    (Designer, Style Tiles)
  • Jon Burgerman
    (Artist, doodler)
  • Yesenia Perez-Cruz
    (Visual Designer)
  • Josh Clark
    (UX, Mobile)
  • Marcin Wichary
  • Daniel Burka
    (UX, Design, Google)
  • Tim Kadlec
  • Daniel Espeset
    (Front-End, Etsy)
  • Christian Heilmann
    (Front-End, Mozilla)
  • Mystery Speaker
    (Someone you definitely know, and respect.)

We reserved 50 early-bird tickets for $549, and if you book a workshop, too, you save $100 off the conference + workshop price. Now, if that isn't smashing, what is? Get your ticket.

Why This Conference Is For You

The conference is for you because you'll learn lots of valuable techniques and meet fantastic, like-minded people from the industry. You'll learn:

  1. Strategies for building fast responsive websites,
  2. Clever psychological techniques for smarter interfaces,
  3. Techniques and guidelines for better mobile UX,
  4. Guidelines for scalable front-end and CSS,
  5. Advanced front-end and UX tooling and setup,
  6. Guidelines for delightful, engaging UX,
  7. Mistakes and lessons learned from large projects,
  8. Responsive design patterns for future-ready websites,
  9. How to increase the productivity of your team for good,
  10. How to touch someone's heart with design.

Sounds good? Alright then! Only 400 tickets are available, so you can get your ticket right away — it won't take more than 60 seconds.

Still not convinced? →

Tuesday, January 13, 2015

Smashing Newsletter #129: SmashingConf NYC 2015, Flexbox and Free Fonts

With a bit of front-end tooling and design inspiration. Issue #129 Tuesday, January 13th 2014 179,822 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

New York, New York… Yes, you guessed it right: SmashingConf New York 2015 is coming back this year, and we know that it's probably not the most exciting thing in the world, but we like to think that we are pretty close. Great line-up, quality content for web designers and developers, lots of networking and affordable pricing — taking place right around the Times Square on June 15–18th 2015. Tickets go on sale on January 27th, 10AM EST. Have you set up your alarm clock already?

SmashingConf New York 2015 Is Coming!
SmashingConf New York 2015 is coming: great line-up, quality content, a lot of networking and affordable pricing.

First speakers? Hold tight: Stefan Sagmeister, Yesenia Perez-Cruz, Daniel Burka, Katie Kovalcin, Josh Clark, Susan Weinschenk, Jon Burgerman and Christian Heilmann. Of course, we also have workshops. And if your boss needs some convincing, you can use our Convince Your Boss PDF.

Now, ready for more exciting news? Watch out for a yet another sneaky mystery riddle on the SmashingMag's front page on January 27th at 10AM EST. If you are fast enough, you can win a trip to New York, with full accommodation and a conference + workshop ticket to the event. So set up your alarm clocks and don't be late!

Happy conferencing and good luck!
– Vitaly (@smashingmag)

1. Flexbox Adventures

We all know how powerful and flexible Flexbox is as a layout mechanism, but for some reason it's always surrounded by a little bit of obscurity and mystery — how exactly does it work, and what about common gotchas and problems that designers and developers stumble upon?

Flexbox Adventures

In his article on Flexbox Adventures, Chris Wright has nicely summarized the basics of Flexbox and explained how the algorithm calculates and distributes space, with many examples along the way. Philip Walton has discovered a number of Flexbox bugs and workarounds, too. And if you need a more visual explanation of Flexbox and how it works, Zoe M. Gillenwater's talk on "Putting Flexbox Into Practice" is one of the most relevant and useful talks on Flexbox out there. Now, this should keep you busy for a while! (vf)

2. Responsive Logos

When we talk about responsive design, our conversations tend to circle around layout decisions and breakpoints. However, we are still quite far away from crafting rich responsive experiences, especially when it comes to branding and identity. With his personal experiment on Responsive Logos (yes, oldie but goodie!), Joe Harrison hastaken the concept of responsive web design a step further, exploring how brands might adapt for multiple devices and screen resolutions.

Responsive Logos

To visualize his idea, Joe created scalable versions of well-known logos. The famous Disney logo with its distinctive Cinderella castle, for example, transforms into a simple "Walt Disney" stroke as you resize the browser, and from there on to "Disney" until it is entirely reduced to its essentials when only the signature "D" is left in the smallest screen resolution. The smaller the logo is, the more timeless it appears. How would you adapt the logo of your company in a similar way? (cm)

3. iOS Design Guidelines Put Straight

Human interface guidelines (which companies such as Apple provide) are quite extensive and thus probably not your favorite place to go in order to obtain some quick and precise information. However, even if building an app can be quite tricky at times, finding correct and up-to-date information really shouldn't be. That's why fellow designer Ivo Mynttinen created a neat detailed cheatsheet for iOS designers, with the most important information about Apple's devices and its visual design language.

iOS Design Guidelines Put Straight

The guide compiles screen resolutions and display specifications and provides a compact overview over the iconography, typography and UI elements which shape the look and feel of iOS apps. For everyone who needs to dig in deeper, there is also a list of further resources to get you going. A handy resource that belongs into the toolbox of any iOS designer. (cm)

4. Input Type Sandbox

A yet another common problem to solve: so you need a very specific input type, with a common validation pattern and a few helpful attributes, but more specifically, you'd just love to be able to test how it works across different devices, OS and browsers, and perhaps even on onscreen keyboards. Isn't it annoying to go through a library of available regular expressions and write the input manually?

Input Type Sandbox

Right, that's what tools are for. Input Type Sandbox, for example. This little tool allows you to set an input type (be it a particular text, telephone, URL, datetime, range, or anything else) as well as a validation pattern, such as numbers only, short or extended Zip code, bank account or alphanumeric input and test validation right away. A useful time-saver for the bookmarks, wouldn't you agree? (vf)

5. Brush Ink Font For Free Download

There are never enough good free fonts out there, and the really good ones are not that easy to find. Well, we've got one for you: Againts Typeface, by Indonesian designer Ramandhani Nugraha, is a beautiful free font that was inspired by ink and a tints hand-drawn brush. With just a little bit of help, you can make a beautiful creative mess using alternate glyphs and extra ligatures, e.g. for your headlines.

Brush Ink Font For Free Download

This font can be very useful when designing labels, clothing, movie screens and even film titles, posters as well as album covers. The free typeface is available for download in OpenType and TrueType formats. Brilliant work! (ml)

6. Pixels, Huh?

When was the last time that you encountered... pixel art? Well, you might think that pixel art is somewhat forgotten or even outdated, but it's actually very much alive, and some artists excel at creating illustrations and designs, even if it means balancing pixel by pixel.

Pixels, Huh?

Octavi Navarro's pixel art illustrations features very detailed and original pixel art scenes in which Octavi, a graphic designer and children's books illustrator from Barcelona, mixes his own painting techniques with some of the restrictions of classic pixel art. And if you're looking for a slightly more complex and involved sort of pixel art, look no further but at Yuriy Gusev's portfolio, with a pretty extreme type of... you know, pixel art. (vf)

7. 365 Days Of Design Inspiration

Have you been looking for some design inspiration to start fresh into the new year? Well, then 365 Awesome Designers is just what you need. Brought to life by Vienna-based agency WILD, the 365 day project dedicates each day to one exceptional designer and their artwork.

365 Days Of Design Inspiration

The project is, of course, still at its very beginning, however the featured designers do already include a nice mix of letterers, illustrators, but also app designers. Each one of them gets their little showcase in a horizontal bar which you can swipe through to see a selection of their works. Links to their Dribbble portfolios, websites and Twitter profiles are also included if you'd like to see more lovely artwork created by them. A brilliant idea, and who knows, perhaps it will inspire you to create something awesome, too? (cm)

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

Keep Calm... And Attend A Smashing Workshop!
Image credits: Marc Thiele.

Upcoming Online Workshops:

Full-Day Workshops in Los Angeles, USA:

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 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!

Smashing Highlights (From Our Archive)

  • How To Choose A Typeface
    Choosing a typeface can be tricky. The beauty and complexity of type, combined with an inexhaustible supply of options to evaluate, can make your head spin. But don't be baffled — and don't despair.

  • Towards A Retina Web
    With the announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards.

  • How To Benefit From CSS Generated Content And Counters
    Generated content was first introduced in the CSS2 specification. For several years, the feature was rarely used due to inconsistent browser support. With the release of IE 8, 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.

New on Smashing Job Board

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

  • Senior UI Engineer at DocuSign (San Francisco, CA)
    We're looking for an experienced UI Engineer to join our dynamic team in our San Francisco office. The person for this role will have a passion for transforming the complicated into clean, effortless UIs.

  • Junior Designer at Sojo (New York, NY)
    We're looking for a Junior Designer who will help bring products to life, and enjoys working in a talented, hard-working team.

  • UI/UX Designer at Foundry 119 (Tampa, FL)
    We're looking for a designer who is energetic, motivated and passionate about design. Expert knowledge of HTML5, CSS 3, Javascript (jQuery), and PHP is required.

Recent Articles On Smashing Magazine

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

Follow us on Twitter Join us on Facebook

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

unsubscribe update preferences view in your browser