Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #132

This newsletter issue was sent out to 179,930 newsletter subscribers on Tuesday, February 24th 2015. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

You know the drill: when you start freelancing, you are trying very hard to make your clients happy. Urgent requests, difficult timings, flexible budgeting, quick responses and endless iterations: it all becomes a part of the process, and something that you compromise for, that you just accept. Back in the day, I would find myself in exactly that situation: spending a lot of time to get things done well, and in time. It didn’t matter how many extra requests came in — they all had to be taken care of. The quality of my work was what I proudly stood behind, and I was convinced that my process had to perfectly reflect it. As a result, clients were happy. I got great feedback. I got great recommendations, too, and so new projects were running in smoothly.

Editorial
Sometimes freelancing takes a lot of time and patience to figure out just the right way to do things. (Image credit2)

I was known for “just getting things done on time”. That was the phrase that always popped up in conversations with new clients, who automatically demanded the same attention, flexibility and quick response times. You can guess how it ended: I literally crashed two projects; I had to compromise the quality of my work and even ran into heavy fights with my clients.

That’s when things changed. I started being a bit more pessimistic about timings and budgeting, adding in a bit of buffer for pretty much everything, and counting in times to react to changes — because they always come in unexpectedly.

So, I built a system around just that: you promise to send a proposal within 3 days, but always do your best to send it within 24h at the latest. You overshoot your budget slightly, but end up billing slightly less and deliver things slightly faster than anticipated. You mention that a fancy print stylesheet could be a nice add-on, but deliver it in every project one way or the other. You set the ambitious goal to deliver the 1.2s start render time on 3G, but aim to stay under 1s. Just being a little bit better than you promise, continuously.

In the end, being more pessimistic helped me find better clients, charge more and keep myself tamed between my projects and my personal life. I was still getting work done well on time, but by setting pessimistic expectations, clients were extremely impressed and extremely willing to pass on a good word, bringing in good work with good expectations that I was overshooting for. Under-promise and over-deliver, all the time. That’s what will bring you more good work, and happier clients, with just the right expectations allowing you to work on interesting, exciting projects.

Vitaly (@smashingmag)

Table of Contents

  1. Accordion Menu Icons: Which To Choose?3
  2. Dealing With The Dark Matter Of Email4
  3. The Power Of Hyperlinks5
  4. Automating Responsive Images Markup Generation6
  5. Awesomplete: A Lightweight, Customizable Auto-Complete7
  6. Tools For Colors, Shades And Contrast8
  7. Mapping Words On The Maps9
  8. Redesigning Parking Signs10
  9. Automatic Responsive Mock-ups11
  10. Keep Calm… And Attend A Smashing Workshop!12

1. Accordion Menu Icons: Which To Choose?

We often design and build features according to our intuition. This can be a pretty good thing, especially when a design has a unique idea deeply embedded into pretty much every design decision. However, sometimes depending on your intuition may not be the right move. Zou simply have to do some testing. For example, a common solution for navigation is the accordion menu because it can accommodate large and complex navigation systems. But what icon would you include to indicate the purpose of it?

Accordion Menu Icons: Which To Choose?

Lance Gutin, visual experience designer at viget, decided to test accordion menu iconography for good. As it turned out, when the icons were placed on the right side of the menu, participants preferred to click the icon rather than the text label. Designs with icons on the right side resulted in slower task times. The conclusion? Well, consider using icons on the left side of the menu, but if really insist on presenting them on the right, make sure that the entire menu row (label, icon and surrounding space) is linked as one with an appropriate hover state. (ml)

2. Dealing With The Dark Matter Of Email

Filling out forms usually is a UX nightmare, especially on mobile devices where it quickly becomes extremely tedious. To simplify this task, Stuart Taylor decided to take a closer look at the form fields that were most frequently filled out. The answer: email. Inspired by Like Wroblewki’s presentation “How To Reduce Email Input Errors13“, he experimented with different techniques and published a post about the auto-suggest technique14 that suggests common email domains right after a user types the “@” into the field. A small tweak with a big impact!

Dealing With The Dark Matter Of Email15

A correctly entered email address, however, is only the beginning. The challenge that designers and developers face doesn’t stop here. What follows are the emails themselves — be it for marketing purposes, transactional or life-cycle emails. If you’re looking for best practices to guide you through the process of sending emails, you can’t go wrong with Lee Munroe’s comprehensive article “Things I’ve Learned About Sending Email16“, in which he shares his lessons learned along the way and offers valuable resources on everything from email templates to analytics, testing, legal requirements and email etiquette. Helpful little gems that help shed some light into what sometimes feels like dark matter. (cm)

3. The Power Of Hyperlinks

Links are an essential part of the web, however, they haven’t been improved for decades. (Should they? Well, that’s a different story!) But what could be done in order to make them even better? De Correspondent has come up with an interesting solution17 to make the reading experience a bit more coherent and avoid links becoming dead links over time, while not disturbing the reading flow. They’ve relinquished common links and offer their authors three alternatives instead: info cards, sidenotes and featured links. All of them provide additional information, but in a helpful, unobtrusive way, in the sidebar or by clicking a designated indicator behind a term.

The Power Of Hyperlinks18

Developer Roman Komarov on the other hand set his sight on tackling one of the technical restrictions of the a element: nested links. What if you had a paragraph that needed to be linked, but links needed to be included within the paragraph, too? Browsers don’t understand nested links, so Roman circumvents the issue by using object to nest links19 and tricking the parser. This trick doesn’t bring forth valid code (although there is a workaround!), of course, but it is a reasonable option and as Roman would argue: “It won’t break anything either.” (cm)

4. Automating Responsive Images Markup Generation

Responsive images are available today, and we can already start using the new markup in our websites. While browsers are picking up with native implementations, and Picturefill pretty much saves the day already, what if you have a huge CMS in the back that doesn’t allow you to automate the entire process of writing the markup for responsive images? Well, you don’t have to do everything manually. In fact, there are a few tools that can help you right away.

Automating Responsive Images Markup Generation20

If you use WordPress a lot, the RICG Responsive Images21 plugin will help you to utilize the srcset property for images. Also, Grunt Responsive Images Extender22 is a Grunt plugin that extends HTML image tags with srcset and sizes attributes. It basically scans your source files for HTML img tags and extends them with attributes to leverage native responsive images. Good? Good! So, why not start using responsive images already? (vf)

5. Awesomplete: A Lightweight, Customizable Auto-Complete

Are you looking for an autocomplete widget that is both lightweight and customizable? Lea Verou’s Awesomplete23 might be just what you need. Weighing only 2KB minified and gzipped, Awesomplete has no dependencies and it even gets by without JavaScript in basic usage. By default, a search-field based on Awesomplete requires at least two characters to be typed in to reveal the popup with auto-suggestions. However, Awesomplete offers a lot of room for customization, also in this matter. You may be thinking, “But wait a second, we’ve got datalist!” Well, as it turns out, not only is it incredibly inconsistent across browsers, it’s also not hackable or customizable in any way.

Awesomplete: A Lightweight, Customizable Auto-Complete24

Implementing Lea’s widget is easy. For basic usage, you simply include awesomplete.css and awesomplete.js into your page and add an input text field with a class="awesomplete" for it to be automatically processed. Linking an input to the list of suggestions can finally be done in many ways. More customization is, of course, possible with JavaScript. Handy indeed! (cm)

6. Tools For Colors, Shades And Contrast

Ever thought about the difference in luminance or color that makes an component distinguishable? Well, it’s actually contrast that is determined by the difference in the color and brightness of a component. Wouldn’t it be brilliant to have tools that would help you choose just the right color and contrast in a blink of an eye? Of course it would!

Tools For Colors, Shades And Contrast25

Well, Brent Jackson went ahead and created Shade26, a mathematically derived gradient explorer with which you can adjust base color and gradient speed. And as if that wasn’t enough, he also rolled up his sleeves to create Colorable27 (released under a MIT license) that takes a set color palette and shows contrast values for every possible combination. This tool is pretty useful for finding safe color combinations with predefined colors and even includes pass/fail scores for the WCAG accessibility guidelines. Nifty! (il)

7. Mapping Words On The Maps

Have you ever wondered how some words actually got spread around the world and how they were distributed across the different cultures of the earth? In case you’re still searching for an answer, check out Word Map28, a collaborative project combining the power of Google Translate with the collective knowledge of Wikipedia to put the relationship between language and geographical pace into context.

Mapping Words On The Maps29

Type in any word in any language and let this spectacular web experiment show you the appropriate term that is used in every language as well as its distribution across the world. The browser even reads the word out loud as it jumps from language to language. You can also click on the words to learn more about the language and its worldwide distribution. (ml)

8. Redesigning Parking Signs

Well, if there’s a road sign that confused the hell out of you, it probably confused a lot of other folks out there, too. The parking schedule in the US is a nice example of just how confusing signage can be when the regulations get changed and updated over a period of time. Instead of replacing the old signage, wouldn’t it be better if a new sign on top of the existing one was added? That way, we could avoid signs to become unnecessary complex and difficult to read.

Redesigning Parking Signs30

Probably until someone receives a yet another ticket, and in return utilizes a social guerilla tactic to launch an urban intervention project to improve the state of things — that’s when things change. Nikki Sylianteng created a design system31 with a few parking sign templates that everybody can download, print out and hang out there on top of the confusing road signs. Not quite legal, but quite effective. So, can you improve parking signs in your neighborhood, too? (vf)

9. Automatic Responsive Mock-ups

Demonstrating responsive design to potential clients and fiddling screenshots into device mock-ups can be an annoying repetitive task. Luckily, there’s a script to automate this process. Christian Bäuerlein shares responsive_mockups32, a script that takes screenshots of a webpage in different resolutions and automatically applies it to mockup templates. It’s a PhantomJS-based script that is really simple to use.

Automatic Responsive Mock-ups33

Once you’ve installed the pre-requirements, you can simply clone the GitHub repository, edit the example.js file to choose the template, target and call it. Templates are kindly provided by Pixeden.com, and you can even tweak them to fit your needs. (ml)

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

Keep Calm… And Attend A Smashing Workshop!35
Workshop image credits: Marc Thiele36.

Upcoming Online Workshops: (March 2, 3)

Full-Day Workshops in Oxford, UK: (March 16, 19)

Full-Day Workshops in Los Angeles, USA: (April 27, 30)

You can also check more workshops49 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 vitaly@smashingconf.com50 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!

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

Footnotes

  1. 1 https://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://ununsplash.imgix.net/photo-1422479516648-9b1f0b6e8da8?q=75&fm=jpg&s=c5f2b3df2a4c71532b3b354b8766503c
  3. 3 #a1
  4. 4 #a2
  5. 5 #a3
  6. 6 #a4
  7. 7 #a5
  8. 8 #a6
  9. 9 #a7
  10. 10 #a8
  11. 11 #a9
  12. 12 #a10
  13. 13 https://www.youtube.com/watch?v=xAKnPtbfNfY
  14. 14 http://www.cxpartners.co.uk/cxblog/towards-an-easier-way-to-enter-email-addresses/
  15. 15 http://www.cxpartners.co.uk/cxblog/towards-an-easier-way-to-enter-email-addresses/
  16. 16 http://www.leemunroe.com/sending-email-designers-developers/
  17. 17 https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930
  18. 18 https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930
  19. 19 http://kizu.ru/en/fun/nested-links/
  20. 20 https://github.com/smaxtastic/grunt-responsive-images-extender
  21. 21 https://wordpress.org/plugins/ricg-responsive-images/
  22. 22 https://github.com/smaxtastic/grunt-responsive-images-extender
  23. 23 http://leaverou.github.io/awesomplete/
  24. 24 http://leaverou.github.io/awesomplete/
  25. 25 http://jxnblk.com/shade/
  26. 26 http://jxnblk.com/shade/
  27. 27 http://jxnblk.com/colorable/demos/text/
  28. 28 http://wordmap.co/
  29. 29 http://wordmap.co/
  30. 30 http://toparkornottopark.com/
  31. 31 http://toparkornottopark.com/
  32. 32 https://github.com/fabrik42/responsive_mockups
  33. 33 https://github.com/fabrik42/responsive_mockups
  34. 34 https://www.smashingmagazine.com/smashing-workshops/
  35. 35 https://www.smashingmagazine.com/smashing-workshops/
  36. 36 https://www.flickr.com/photos/marcthiele/15265528332/
  37. 37 https://shop.smashingmagazine.com/2h-workshop-friedman-ux-rwd.html
  38. 38 https://shop.smashingmagazine.com/2h-workshop-friedman-front-end-perf-rwd.html
  39. 39 http://smashingconf.com/oxford-2015/workshops/zoe-mickley-gillenwater
  40. 40 http://smashingconf.com/oxford-2015/workshops/chris-murphy
  41. 41 http://smashingconf.com/oxford-2015/workshops/seb-lee-delisle
  42. 42 http://smashingconf.com/oxford-2015/workshops/vitaly-friedman
  43. 43 http://smashingconf.com/oxford-2015/workshops/
  44. 44 http://smashingconf.com/workshops/
  45. 45 http://smashingconf.com/la-2015/workshops/andrew-clarke
  46. 46 http://smashingconf.com/la-2015/workshops/sara-soueidan
  47. 47 http://smashingconf.com/la-2015/workshops/andy-budd
  48. 48 http://smashingconf.com/la-2015/workshops/vitaly-friedman
  49. 49 https://www.smashingmagazine.com/smashing-workshops/
  50. 50 mailto:vitaly@smashingconf.com

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top