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.
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
- Accordion Menu Icons: Which To Choose?3
- Dealing With The Dark Matter Of Email4
- The Power Of Hyperlinks5
- Automating Responsive Images Markup Generation6
- Awesomplete: A Lightweight, Customizable Auto-Complete7
- Tools For Colors, Shades And Contrast8
- Mapping Words On The Maps9
- Redesigning Parking Signs10
- Automatic Responsive Mock-ups11
- 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?
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!
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.
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.
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
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
datalist!” Well, as it turns out, not only is it incredibly inconsistent across browsers, it’s also not hackable or customizable in any way.
Implementing Lea’s widget is easy. For basic usage, you simply include
awesomplete.js into your page and add an
input text field with a
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!
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.
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.
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.
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.
Upcoming Online Workshops: (March 2, 3)
Full-Day Workshops in Oxford, UK: (March 16, 19)
- Leveling Up With Flexbox39 with Zoe M. Gillenwater
- Idea Factories40 with Chris Murphy
- JS Graphics & Animation41 with Seb Lee-Delisle
- Responsive Design Patterns and UX42 with Vitaly Friedman
- …more workshops in Oxford43
Full-Day Workshops in Los Angeles, USA: (April 27, 30)
- Creating A Robust Workflow44 with Rachel Andrew
- CSS3 For Responsive Web Design45 with Andrew Clarke
- Mastering SVG46 with Sara Soueidan
- Creative Workshop Facilitation47 with Andy Budd
- RWD Tips And Techniques48 with Vitaly Friedman
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 email@example.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!
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://ununsplash.imgix.net/photo-1422479516648-9b1f0b6e8da8?q=75&fm=jpg&s=c5f2b3df2a4c71532b3b354b8766503c
- 3 #a1
- 4 #a2
- 5 #a3
- 6 #a4
- 7 #a5
- 8 #a6
- 9 #a7
- 10 #a8
- 11 #a9
- 12 #a10
- 13 https://www.youtube.com/watch?v=xAKnPtbfNfY
- 14 http://www.cxpartners.co.uk/cxblog/towards-an-easier-way-to-enter-email-addresses/
- 15 http://www.cxpartners.co.uk/cxblog/towards-an-easier-way-to-enter-email-addresses/
- 16 http://www.leemunroe.com/sending-email-designers-developers/
- 17 https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930
- 18 https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930
- 19 http://kizu.ru/en/fun/nested-links/
- 20 https://github.com/smaxtastic/grunt-responsive-images-extender
- 21 https://wordpress.org/plugins/ricg-responsive-images/
- 22 https://github.com/smaxtastic/grunt-responsive-images-extender
- 23 http://leaverou.github.io/awesomplete/
- 24 http://leaverou.github.io/awesomplete/
- 25 http://jxnblk.com/shade/
- 26 http://jxnblk.com/shade/
- 27 http://jxnblk.com/colorable/demos/text/
- 28 http://wordmap.co/
- 29 http://wordmap.co/
- 30 http://toparkornottopark.com/
- 31 http://toparkornottopark.com/
- 32 https://github.com/fabrik42/responsive_mockups
- 33 https://github.com/fabrik42/responsive_mockups
- 34 https://www.smashingmagazine.com/smashing-workshops/
- 35 https://www.smashingmagazine.com/smashing-workshops/
- 36 https://www.flickr.com/photos/marcthiele/15265528332/
- 37 https://shop.smashingmagazine.com/2h-workshop-friedman-ux-rwd.html
- 38 https://shop.smashingmagazine.com/2h-workshop-friedman-front-end-perf-rwd.html
- 39 http://smashingconf.com/oxford-2015/workshops/zoe-mickley-gillenwater
- 40 http://smashingconf.com/oxford-2015/workshops/chris-murphy
- 41 http://smashingconf.com/oxford-2015/workshops/seb-lee-delisle
- 42 http://smashingconf.com/oxford-2015/workshops/vitaly-friedman
- 43 http://smashingconf.com/oxford-2015/workshops/
- 44 http://smashingconf.com/workshops/
- 45 http://smashingconf.com/la-2015/workshops/andrew-clarke
- 46 http://smashingconf.com/la-2015/workshops/sara-soueidan
- 47 http://smashingconf.com/la-2015/workshops/andy-budd
- 48 http://smashingconf.com/la-2015/workshops/vitaly-friedman
- 49 https://www.smashingmagazine.com/smashing-workshops/
- 50 mailto:firstname.lastname@example.org