Dear Friends,
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.
Sometimes freelancing takes a lot of time and patience to figure out just the right way to do things. (Image credit)
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?
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 Errors", he experimented with different techniques and published a post about the auto-suggest technique 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 Email", 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 solution 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 links 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)
Advertisement
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 Images plugin will help you to utilize the srcset property for images. Also, Grunt Responsive Images Extender 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 Awesomplete 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.
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!
Well, Brent Jackson went ahead and created Shade, 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 Colorable (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)
Advertisement
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 Map, 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 system 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_mockups, 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)
Advertisement
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.
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 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:
-
Website Designer at New York Theatre Review (New York)
We're currently looking for a website designer to build "The Indie Theater Guide", a listings site for indie theater in New York.
-
UI/UX Designer at Artist Growth (Nashville, TN)
We're looking for a UI/UX Designer who will collaborate with artists, game designers and engineers to conceptualize and realize game flow.
-
Front-End Developer at Red Ventures (Charlotte, NC)
We're looking for a developer who'll work side by side with designers, back end developers, product owners, copywriters and user researchers to conceive, analyze, hand code and test your ideas.
Smashing Highlights (From Our Archive)
-
Stop Redesigning And Start Tuning Your Site Instead
In my nearly two decades as an information architect, I've seen my clients flush away millions upon millions of dollars on worthless, pointless, "fix it once and for all" website redesigns. All types of organizations are guilty: large government agencies, Fortune 500s, not-for-profits and (especially) institutions of higher education.
-
Shalom! Showcase Of Web Design In Israel
Israel is a young country with an old heart. It has been quickly built up over the last 60 years as an independent democratic Jewish state and is shockingly cutting edge for a country so new.
-
The Lost Art Of Design Etiquette
Endless layers in Photoshop. Overstuffed image folders. That jQuery plug-in that has 12 files associated with it. Hundreds or thousands of individual pieces go into making a website. No wonder we go off the deep end when we can't find a closing div — er, section tag.
Recent Articles On Smashing Magazine
No comments:
Post a Comment