Friday, November 28, 2014

A Smashing Black Friday Special, Just For You...

One Year Smashing Library, for only $39. Happy Black Friday!

The Smashing Email Newsletter

A Smashing Black Friday Special, Just For You...

So you've watched the game, spent time with your family and eaten more pie than you care to admit... We wanted to give our lovely readers something else to be thankful for this holiday, and are doing our bit for Black Friday by offering you access to the Smashing Library for only $39. Once you've subscribed, you'll have over 80 eBooks and over 50 videos, and so much more!

Special Deal, Only Today

Get yourself one year unlimited access to the Smashing Library, for only $39. Just check out with 60% off the regular price, and lean back and enjoy. But be quick, the offer is only valid until 00:00 AM (midnight) PT today.

$39

Save 60% today...with even more goodies coming up in 2015!

What You'll Get

  • Immediate unlimited access to all 80+ Smashing eBooks (digital versions of all of our Smashing printed books are included as well, of course)
  • Immediate access to 50+ SmashingConf talks
  • Exclusive first access to new eBooks and conference videos (published on a monthly basis)
  • DRM-free access, i.e. you get to download, read and own the eBooks forever
  • All eBooks are available in PDF, EPUB & MOBI formats

It's easy-peasy and won't take more than 60 seconds.
It's easy-peasy and won't take more than 60 seconds.

Tell Me More →




Tuesday, November 25, 2014

Meet SmashingConf LA 2015: California, Here We Come!

Bingo! SmashingConf LA. April 27–29th 2015.
Tickets now availableView in the browser

California, Here We Come.

Meet SmashingConf LA 2015, our new US conference with as many practical takeaways as sunshine hours in Los Angeles.

SmashingConf LA, April 27-29th 2015

Get the ticketsIt's going to be quite a ride. Only 450 tickets.


About The Conference

When preparing a conference, we care deeply about how practical and valuable it will be. With our very first SmashingConf L.A. (oh my!) on April 27–29th 2015, we'll focus on hands-on techniques and strategies. Be it your workflow, front-end, design, UX or nerdy performance tricks. In fact, we've prepared quite a treat for you:

LA scenery
Santa Monica in L.A. — not a common location for web conferences. Until now. Image credit.

  • Two full days packed with practical design/front-end talks and workshops—you'll leave with a treasure of useful tips and tricks applicable to your work right away!
  • Intimate, personal event with only 450 attendees. No crowded multi-track experience. 1 track, 2 days, 16 thoroughly curated speakers and lots of networking.
  • A quite spectacular conference experience in Santa Monica, right at the coast of the Pacific ocean, with an onshore ocean breeze and sunshine in the back!

First Confirmed Speakers

The speakers line-up is filling up, but of course we aren't going to reveal everything just yet. To spice up your appetite a bit, here are the first confirmed speakers:

First speakers at SmashingConf LA: Steve Souders and Samantha Warren

We reserved 50 early-bird tickets for US$549, and if you book a workshop, too, you save US$100 off the conference + workshop price. Now, seriously, get your ticket already.

Get the ticketsGrab your sunglasses, too. Only 450 tickets.

Convince Your Boss (PDF)

We've prepared a neat Convince Your Boss (PDF) (0.15 Mb) that you can use to convince your colleagues, friends, neighbours and total strangers to join you or send you to the event. We know that you will not be disappointed.

Smashing Conference LA
"8 reasons why you should send your incredibly hard-working, deserving employee to the SmashingConf" (PDF). Quite self-explanatory, really.

Of course we'd love you to be on board as well. Perhaps you'd like to be part of the event? We're looking for some very special sponsors; if you're interested, check out the options available Sponsoring Opportunities (PDF, 0.9MB) — we'll make sure it's worth it!


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. How to improve user experience and design workflow,
  2. Strategies for building fast responsive websites,
  3. Front-end techniques for scalable designs,
  4. How to make use of pattern libraries and style guides,
  5. Guidelines for designing flexible design systems,
  6. How to deal with responsive images and RWD email,
  7. Common problems and solutions in eCommerce,
  8. Advanced front-end tooling, setup and workflow,
  9. Mistakes and lessons learned from large projects,
  10. …more practical, actionable takeaways.

Good enough? Alright then! Only 450 tickets are available, so get your ticket right away — it won't take more than 60 sec.

Still not convinced? →



Tuesday, November 18, 2014

Smashing Newsletter #124: SmashingConf LA, Performance Tools and SVG Tricks

With small hacks for faster growth and smart libraries for better web forms. Issue #124 Tuesday, November 18th 2014 181,865 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

We like challenges, and we like experiments. Wherever we go, we take our time to observe, to focus, to explore and to get things right. Our first stop in the US last year was the SmashingConf in New York (hint), and we have another event coming up in Whistler, Canada in just a few weeks. But, fasten your seatbelts, we also have something else in the works, and it's probably not at all what you're expecting.

SmashingConf Los Angeles 2015
Our new little endeavour: SmashingConf LA 2015, and it's going to be as smashing as always.

SmashingConf Los Angeles 2015. Our new conference, with two days full of practical talks and smart techniques and design patterns for you to apply in your projects. We never compromise on quality, and we always emphasize the value you get from the event. Los Angeles isn't going to be an exception. Taking place on April 28–29th 2015 in Santa Monica, right next to the beach paradise across the Pacific Ocean.

Speakers, you ask? Well, the line-up is going to be as strong as you should expect it to be! The first confirmed speakers are Steve Souders, Sara Soueidan, Andy Budd and Andrew Clarke. Need to convince your boss to buy that ticket? We've got your back: download the Convince Your Boss PDF right away!

The tickets go on sale on Nov 25th at 2 PM EST (right before Thanksgiving), with an early-bird ticket price of $549 per ticket. And as usual, we'll have a few workshop options available as well. We'll keep you updated via email and @smashingconf. So you better mark your calendars and make sure not to be late!

We're looking forward to see you in LA then! ;-)
– Vitaly (@smashingmag)


Table of Contents

1. Mobile Settings UX
2. Smart Libraries For Better Web Forms
3. Performance Matters
4. Small Hacks, Faster Growth
5. Modifying SVG Background Fills
6. Shorten Your Gulp And Grunt Build Processes
7. Learning Has Never Been Easier: New Workshops

1. Mobile Settings UX

We've all heard it before: when it comes to the current state of UX, iOS is often considered to have a much better experience, while Android is more powerful and customizable. But why? Where are the facts? Well, Luis Mena goes ahead and elaborates on The UX of Mobile Settlings, and compares the difference in experiences among Apple, Google and Microsoft device settings — probably not something that many of today's conversations are concerned about.

Mobile Settings UX

For example, iOS uses only (at most) 11% of screen space occupied by persistent menus, while Microsoft occupies 25% of the space. Android groups items in indented categories, while iOS 8 uses slight contrasts to group the items, and Microsoft has an unordered list of items. When it comes to ordering, iOS options start with network, device and personal settings first and so does Android, yet it's quite mixed in Microsoft's case. A few interesting insights worth considering. So how do you organize settings for your web and native apps? (il)


2. Smart Libraries For Better Web Forms

Filling in forms is still one of the most tedious, annoying, and slow activities on the web. Usually, input is very complex and difficult to navigate while correcting mistakes always turns into a competition between precision and stubbornness for users who just want to get things done. Well, there are a few little things that can improve web form UX significantly.

Smart Libraries For Better Web Forms

Let's say you want to provide a bulletproof international telephone input, then why not format the input as the user types in the data and show the flag of the country as well? For the country selector, we could just ask the user to type a few first characters of their country instead of going through a lengthy list of select-options. What about expanding textareas automatically so the user never has to scroll vertically? And perhaps storing data in localStorage, so the user never loses it?

Finally, if you do need a good selector, Select2 or Multiple Select jQuery plugins could be helpful, and a CSS-only solution for cross-browser styling could come in handy, too. Now, here's a way to improve the UX just a little bit step by step — and get rid of those annoying fragile web forms for good! (vf)


Advertisement
Ad


3. Performance Matters

Building fast responsive websites is no piece of cake, but once you have a working process in place, it doesn't have to cost you more time or money. However, to ensure that performance remains a priority during the entire design and build process, you need metrics and tools that track performance and report occurring issues.

Performance Matters

So, what if you set your performance budget (e.g. start render time under 1.1s on 3G in your city), and then use tools like PerfBar to keep collecting performance metrics? Once you've installed the script on your pages and defined what you are interested in, you can measure a number of built-in metrics that let you see performance results right away.

Alternatively, you could use WebPerf Monitor to track the PageSpeed score, Mark Zuman's SpeedCurve or grunt-perfbudget to validate your builds against a performance budget, and PerfMap Bookmarklet that visualizes performance metrics in a heatmap overlay of the page. Not enough? Perf.Rocks is a new website that collects useful articles, tools, talks and slides about web performance optimization which should have you covered for quite some time. So let's make the web faster, shall we? (vf)


4. Small Hacks, Faster Growth

Pushing your product forward doesn't necessarily require big, costly marketing strategies. In fact, sometimes it's the small details that can have a significant impact when it comes to fostering growth, acquiring new customers, and increasing revenue. Javier Sanz is one of the folks out there who constantly keeps his eyes open for such interesting little tweaks, i.e. the so-called "petithacks".

Small Hacks, Faster Growth

Did you know, for example, that in order to acquire new users, the CRM service Intercom lets existing users invite others to a free 90-days trial? Clever, especially since the regular trial length is only 30 days. Or take Mailchimp. They display their latest products and features in the log-out screen, taking advantage of that last moment of user interaction to get your attention. These are only two of the hacks that Javier had spotted and which he shares on his site. Who knows, perhaps one or two of those little hacks might be just what your product needs. (cm)


Advertisement
Ad


5. Modifying SVG Background Fills

For resolution-independent graphics, SVG is often a better option than icon fonts, yet while you can be quite flexible with SVG, there are a few gotchas that need a bit of thinking to get things right.

Modifying SVG Background Fills

So, what if you created an icon system with symbol and use and then wanted to modify colors of the paths in SVG? Well, you can use the mysterious fill: currentColor to reuse the color within your SVG. But if you want to specify SVG as background, you can't use color to modify the fill color. The workaround is to modify the fill attribute of the SVG itself within the data URI source with a LESS mixin. Need a SASS mixin instead? Here's how you can convert mixins from LESS to SASS. Another headache prevented! (vf)


6. Shorten Your Gulp And Grunt Build Processes

While automating build processes is becoming a common tool in development, some developers feel more comfortable with Grunt, while others prefer Gulp. Both tools are helpful and time saving for repetitive tasks, yet ironically enough, setting it all up and fiddling with the config files can be quite time consuming — and there are so many boilerplates out there to start with! Which one to choose?

Shorten Your Gulp And Grunt Build Processes

Gulp Fiction was built to help shorten the time it takes to set up a proper build process. It enables visual editing of your Gulp files and automatically generates Gulp config files. It also searches for recommended steps and build tasks with the npm repository, so you can select the most useful tasks, as verified by its creators. If you prefer Grunt, you can optimize the maintenance of your Grunt files with Supercharging your Gruntfile and More Maintainable Grunt. Making fast processes even faster, one build step at a time! (ml)


Advertisement
Ad


7. Learning Has Never Been Easier: 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 + RWD workshops that will help you become better front-end developers and designers, today.

Learning Has Never Been Easier: Join A Smashing Workshop

Upcoming Online Workshops:

Full-Day Workshop in New York City, USA:

Full-Day Workshops in Oxford, UK:

Full-Day Workshops in Whistler, Canada:

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!


New on Smashing Job Board

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

  • Freelance web designer at UpTrending (100% Remote)
    We're looking for a freelance designer who is tech-savvy and sees the Internet as a playground, with a passion for coding.

  • Web Designer at The Michael J Fox Foundation (NYC)
    We're looking for a talented, user-focused web designer to help guide a redesign of its website, MichaelJFox.org, and execute ongoing web design projects across the Foundation, including mobile and desktop-based websites and applications, microsites, landing pages and email templates.

  • Visual Designer at Pratice Fusion (SF, CA)
    We're looking for a senior visual designer who is both idealistic and pragmatic, and likes to push the envelope on how to communicate value through design.


Smashing Highlights (From Our Archive)

  • Festive Christmas Icon Pack (20 .EPS Icons)
    The year is slowly coming to an end and we're glad to present to you a festive icon set to inspire you in your designs. In this post we present a minimalist collection of 20 free festive vector (.EPS) icons created by the crew at offset media.

  • Smart Transitions In User Experience Design
    Some websites outperform others, whether in their content, usability, design, or features. We'll share some lessons drawn from various models and analyze why these simple patterns work so well.

  • Designing CSS Layouts With Flexbox Is As Easy As Pie
    Flexible box layout (or flexbox) is one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all.


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), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser


Tuesday, November 11, 2014

Smashing Newsletter #123: Free Fonts and CSS Experiments

With smart interface patterns, Photoshop tools and sound libraries. Issue #123 Tuesday, November 11th 2014 181,852 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

While media queries enable responsive designs, they are actually quite limited at what they do. They are just like if-then statements, and are very static and rigid. Nowadays, we may be talking a lot about building responsive layouts, but not so much about how to maintain them in the future.

Editorial

What if you thoroughly selected your breakpoints (device-agnostically, of course), but then find out a year later that a layout has to change — a lot? Or that some of the components have to move within the layout — a lot? Often you will end up fixing and adjusting each and every media query, and this can obviously be very time consuming. Media queries are not good enough to provide us with a level of flexibility and modularity that we need for scalable design systems.

Wouldn't it be better if we could just define the behavior of a component based on its own width and height (or the width and height of its parent element)? Then, once we have decided to drop that component in a specific area of the page, it would automatically adjust itself based on the behavior we defined for it?

Well, that's exactly the point behind element media queries in which quite a number of use cases are involved. In fact, if you can afford using a little JavaScript, you can then also use the element query polyfill, eq.js library or even element queries workarounds and tricks with a little JavaScript and some attribute selectors. Need something more advanced? Conditioner.js is a library for loading and unloading behavior based on environment conditions of the component.

Just a few little helpful tools to make a responsive site at least a bit more flexible, and avoid maintenance headaches along the way.

– Vitaly (@smashingmag)


Table of Contents

1. The Beauty Of CSS Experiments
2. Free Sound Libraries For Better UX
3. Smart User Interfaces, As Animated GIFs
4. Clever Photoshop Tools And Scripts
5. Free Fonts Round-Up: Nexa, Citizen Slab, League Spartan
6. There Has Always Been Art
7. Why Would A Banana Want To Be Blue?
8. Learning Has Never Been Easier: Join A Smashing Workshop

1. The Beauty Of CSS Experiments

CSS is very practical in its nature, yet we can bend it creatively to stretch the borders and see what we can achieve with it beyond our regular layout problems. That's where creative experiments come into play. You might not see a practical value in them just yet, but perhaps you might implement some of these techniques in your future projects.

The Beauty Of CSS Experiments

One of these experiments is Blackout. Blackout is a cinematic experience that "explores the phenomenon of the extinction of lights", as its creator Ee Venn Soh explains. What sounds quite abstract is in fact a magical interplay of light and shadow, movement, geometric shapes and 3D effects that will cast a spell on you in no time. Puristic and very fascinating.

Another beautiful experiment comes from Russian designer Yoksel. She opted for a quite unusual combination of techniques (CSS, GIF animation and blend modes) to create a stunning animation of a flying raven that comes to life behind (or on top of?) a black and white Harlekin pattern. A bit like an optical illusion that you just can't stop looking at. Also, have you already seen the animated lighthouse that was created with CSS? It's pretty impressive what you can bring forth with the techniques that we actually have right in front of us. It's just combining them creatively that produces unusual results! (cm)


2. Free Sound Libraries For Better UX

Your user interface might be smart and beautiful already, but maybe it's still a bit lifeless, i.e. always so calm and so silent? Visual feedback is important, but we can integrate audio feedback as well, just to make sure that when users click on those buttons in your interface, they get a nice delightful surprise out of the box.

Free Sound Libraries For Better UX

What about the sound of fire cracking or the ocean swinging, or perhaps just rain drops falling on leaves? There are a few libraries that we're sure you'll want to check out, such as Free Defonic Sound Library, that lets you combine sounds into a melody. Or what about SoundKit, a large commercial sound library for UI components? Then there's freeSFX that provides free sound effects and also freesound which is a collaborative community for people sharing sounds licensed under Creative Commons. Last but not least, you can use ion.sound, a jQuery-based plugin that plays sounds on events as well. All nice and good, but please don't misuse the sounds; when applied heavily, they can easily get quite annoying! (vf)


Advertisement
Ad


3. Smart User Interfaces, As Animated GIFs

Is there anything better than starting into a new week with some clever examples of UI? Well, you'll love the uiGIFs newsletter that Ramy Khuffash sends out every Monday. In this little library of his, Ramy collects interesting examples of user interfaces and showcases them, well, as animated GIFs, of course.

Smart User Interfaces, As Animated GIFs

The interfaces showcased in the newsletter and online are thoroughly selected and come from real apps. You won't find any fancy mockups or imaginary solutions to problems that don't exist yet, but instead only things that work in the wild — with real users. Definitely a nice place for that regular dose of user interface discovery every now and again! (cm)


4. Clever Photoshop Tools And Scripts

Perhaps you don't use Photoshop as your primary design tool, but you may still use it to figure out the visual direction of the design or the design of website components. In either case, you could use a few useful plugins that allow a slightly easier transition from an element collage in Photoshop to a working prototype in the browser.

Clever Photoshop Tools And Scripts

For example, the Size Marks Photoshop script converts rectangular marquee to labeled measurement marks, while the Swatchy Photoshop plugin creates folders for your swatches in Photoshop. Not good enough? You can also use a number of useful Photoshop plugins for easier rotation, parsing colors from images and group layer renaming. These little gems are bound to help you get smarter and faster, but only if you use Photoshop, that is. (vf)


Advertisement
Ad


5. Free Fonts Round-Up: Nexa, Citizen Slab, League Spartan

Free quality fonts are always hard to come by. You may sometimes think you've found a good catch, but then the quality just isn't good enough. Nevertheless, there are a few exceptions every now and then. Nexa Rust is a rough, multi-faceted font family that includes Sans, Slab, Script, Handmade and Extras sub-families with a good number of font weights.

Free Fonts Round-Up: Nexa, Citizen Slab, League Spartan

If you are looking for a bit more casual or less colloquial free fonts, you might find Fira Sans, Citizen Slab, Eau Sans, League Spartan, Quark, Atlético, Montserrat quite helpful (all available for private and commercial projects for free, or Klinik Slab which is free for personal use only. If you ever get the chance to spend some money on fonts to support the type designers, it would be sincerely appreciated. (ml)


6. There Has Always Been Art

Cave paintings, the Medici family, Expressionism, Futurism, Bauhaus... What are all these terms about? They are all parts of something which is really great, and that is the history of art. It's a history so enormous and comprehensive that it's hard to grasp. It's no surprise that only a few of us are familiar with this subject while most of us shy away from it. So, how much do you know about the history of art?

There Has Always Been Art

This topic may seem boring (pardon us, art historians), however, if you take a closer look you'll notice that it really isn't. The history of art is an exciting story of innovative and unusual movements as well as people. It's also a story of love, pain, wars and the search for identity. Want to sneak a peak? Well, here's an overview of the history of art in 100 words, a base station from where you can take off to wherever you want to go in art — from its very beginning all the way to modernism. Enjoy! (ea)


Advertisement
Ad


7. Why Would A Banana Want To Be Blue?

Maybe just to make bats happy. Yes, this may sound a bit odd at first, especially because we're all sure that bananas don't 'want' anything anyway, and if anything, they want to be yellow. But what's with the bats? Well, did you know that if you turn a UV light on a bright yellow banana, it starts glowing in a bright blue? And guess who gets happy? Fruit bats, for example! Fruit bats see ultraviolet light, and they also love bananas. Want to hear more weird stories about color?

Why Would A Banana Want To Be Blue?

If so, then check out This Is Color, a beautiful presentation of all kinds of weird facts about color in rainbow order, reported and written by Nicole Cohen and Beth Novey. Learn just why The Simpsons are yellow, how red became the color of the matador's cape and why all of the gentlemen among you should think twice before you wear a green hat in China... And what do you think, is San Francisco's Golden Gate bridge really red? Go figure! (ea)


8. Learning Has Never Been Easier: Join 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.

Learning Has Never Been Easier: Join A Smashing Workshop

Upcoming Online Workshops:

Upcoming Full-Day Workshop in NYC, USA:

Full-Day Workshops in Whistler, Canada:

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!


New on Smashing Job Board

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

  • Project Manager at UpTrending (100% Remote - must be US based)
    We're looking for a Project Manager who can manage a complex project, or multiple projects, ensuring that quality projects are delivered on time, within budget, on schedule and within project scope.

  • Sr. UX Designer at ZenPayroll (San Francisco, CA)
    We're looking for a Senior UX Designer who enjoys creating only the most beautiful, pixel-perfect designs.

  • Full Stack Engineer (PHP) at Advertising Age (New York, NY)
    We're looking for an engineer who really, truly, honestly loves writing code, but also really, truly, honestly loves writing it because it makes people happy.


Smashing Highlights (From Our Archive)

  • Are You Ready For A Web Design Challenge?
    I want to encourage you to complete a Web design challenge. I believe this will help to address a weakness that exists in many of our design processes. If you complete this challenge, it will make it easier for clients to sign off on your designs, and it will improve the quality of your work. So, what are we waiting for? Let's get started.

  • Form-Field Validation: The Errors-Only Approach
    Error pages for form-field validation are dreadful. You've just filled out 20 form fields, yet you get the same bloated page thrown back in your face because a single field failed to validate. At Baymard Institute, we reflected on this problem and got an idea that we call "error fields only" — which is exactly what this article is about.

  • Free Smashing Christmas Icon Set
    Christmas is coming and, of course, it's just the right time to provide you with some nice freebies to fresh up your designs. To celebrate the holidays, our friends from IconEden designed "Smashing Christmas", a free icon set, dedicated to the design community and released especially for Smashing Magazine's readers.


Recent Articles On Smashing Magazine


Workshop post image credits: Paul Pride.

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), Melanie Lang (ml), Esther Arends (ea), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser