Tuesday, February 24, 2015

Smashing Newsletter #132: Accordion Menus, Responsive Images and Email

With a few clever tools and better parking signs design. Issue #132 Tuesday, February 24th 2015 180,216 readers View in the browser

The Smashing Email Newsletter

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.

Editorial
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?
2. Dealing With The Dark Matter Of Email
3. The Power Of Hyperlinks
4. Automating Responsive Images Markup Generation
5. Awesomplete: A Lightweight, Customizable Auto-Complete
6. Tools For Colors, Shades And Contrast
7. Mapping Words On The Maps
8. Redesigning Parking Signs
9. Automatic Responsive Mock-ups
10. Keep Calm… And Attend A Smashing Workshop!

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

Dealing With The Dark Matter Of Email

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.

The Power Of Hyperlinks

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
Ad


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 Generation

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.

Awesomplete: A Lightweight, Customizable Auto-Complete

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 Contrast

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
Ad


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.

Mapping Words On The Maps

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 Signs

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.

Automatic Responsive Mock-ups

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
Ad


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


Workshop image credits: Marc Thiele.

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

unsubscribe update preferences view in your browser


Tuesday, February 10, 2015

Smashing Newsletter #131: Morning Routine, Smart CSS and Responsive Checkouts

With common IE8 pitfalls, clever design patterns and a few nifty code snippets. Issue #131 Tuesday, Feb. 10th 2014 180,102 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

How would you deal with a multi-lingual tabbed navigation in a responsive project? Perhaps you'd use a good ol' hamburger icon in the small view (or maybe not, since it's becoming more of a last resort, often ineffective and misunderstood). But how about a larger view where there is enough space to display the navigation options?

The Guardian is using the Priority+ Pattern for its primary navigation.
The Guardian uses the Priority+ Pattern for its navigation.

Or, to make it slightly more dramatic, what if your project had to be available in over 70 languages and you'd like to share only one code base among all of them? You can't just go ahead and keep adjusting the way the navigation looks for all of the languages, by adding specific breakpoints in every language-specific CSS file. That ain't good for maintenance.

Well, it can be done. Aaron J. Barker came up with a jQuery/JavaScript solution to check whether a given element (a set of list items, in our case) fits within the space of another element (the header component), and if in case it doesn't fit, adds on a class that you can use to trigger a layout change.

An alternative CSS-only solution would be to use the Priority+ pattern that exposes the most important navigation elements first and tucks away less important items behind a "more" link. The less important items are then revealed when the user clicks the "more" link. The unimportant items could be hidden with overflow: hidden; and displayed on click. Both The Guardian and Google Docs Spreadsheets use this pattern. And, in order to test how these solutions perform, you could use Wraith, BBC's visual regressing tool.

So how do you deal with multi-lingual navigation menus? And are there any other solutions you've found out there? Tweet us with the hashtag #smnav!

– Vitaly (@smashingmag)


Table of Contents

1. Smart CSS Techniques
2. Responsive Checkouts Worth Checking Out
3. Animating A Tennis Match, With WebGL
4. Shade Gradient Explorer
5. Common IE8 Pitfalls And Fixes
6. On Early-Birds And Sunrise Joggers
7. Optimizing Images For Faster Loading Times And Happier Users
8. Coffee, Plugs And Free Wi-Fi
9. The Stories Behind The Products
10. Keep Calm… And Attend A Smashing Workshop!

1. Smart CSS Techniques

How often do you find yourself in a situation when you have to search for a clever workaround to solve a tricky front-end issue? Thought so! Sometimes even simple problems can cause a lot of headache and waste so much of your precious time. However, chances are high that some smart developers out there also found themselves in exactly the same situation.

Smart CSS Techniques

Ever thought about creating an animated and stateful toggle using only CSS? Well, with a bit of :checked and CSS transitions you can! What about fading an image from black'n'white to color? Yep, you can do that with SVG, using filter and mask on a second image placed on top of a fully-colored version. What if you want to highlight both a row and a column in a table on hover or tap? Sure, you can use huge pseudo elements on the tds, hidden by the table overflow.

What about cross-browser CSS-only custom styled select menus? Guess what: you can do just that with the label wrapping the select menu. And, if you want to make a very special modal window (turn audio on!), that's not too difficult either. Smart CSS techniques to keep in mind — handy once you stumble upon similar problems in your own projects. (vf)


2. Responsive Checkouts Worth Checking Out

As designers, when we think about the process of checking out, we think about multi-step user journeys, shipping estimates and a lot of input fields. We are used to the "usual" checkout experience that is neither exciting nor quick. Well, as it turns out, there are many options to consider. Checking out can be pretty engaging and delightful, too, once you start thinking out of the box.

Responsive Checkouts Worth Checking Out

Codrops has collected a few nifty checkout ideas, with a few simple checkout enhancements — implemented with or without JavaScript. A checkout could also be designed as a off-canvas checkout, with "steps" sliding in from the right side, using the entire horizontal space available on large screens. Or just add a persistent layer that covers content partly and allows users to both check out and see the product that they are purchasing. A few little ideas which could make an otherwise tiresome checkout experience slightly better. (vf)


3. Animating A Tennis Match, With WebGL

Some projects are so unique that it takes a while until you grasp them entirely, and then when you finally have, they'll leave you in awe. One such thing is the US Open Sessions project, a venture between IBM and music maker James Murphy. The project took live tennis stats from the US Open tennis matches and created music and visuals with them — in real time.

Animating A Tennis Match, With WebGL

The real-time data that came right from the tennis court was used to generate a unique soundtrack for each match. But not only that. The happenings on the court were also visualized through a series of animations which were created dynamically based on the music. Shane Mielke is the creative mind behind these nine bold and powerful WebGL animations. A remarkable example of what can be done only with web-based techniques. (cm)


Advertisement
Ad


4. Shade Gradient Explorer

So you need a gradient in CSS. Perhaps for a background color of a button, or maybe for a special featured area. And actually, you already have the base color, but you'd like to experiment a little bit right here, in the browser, without jumping back and forth between the browser and Photoshop or Illustrator.

Shade Gradient Explorer

That's what Shade Gradient Explorer is for. A little online tool that generates a linear gradient out of a base color. You can provide the hue, saturation, lightness and gradient spread (hue shift, saturate, lighten) and preview the result visually in the browser. You might end up spending hours just playing with the tool, but if you need to quickly adjust a gradient, the tool will do the job for sure. (vf)


5. Common IE8 Pitfalls And Fixes

Internet Explorer 8. Exactly, goose bumps! Well, many of us still have to at least consider user experience in IE8, yet finding bugs and fixing them may be quite a nightmare. Well, perhaps not for seasoned designers and developers, but what about junior developers who might not have experience in bugfixing for IE8?

Common IE8 Pitfalls And Fixes

IE8 Linter is a little tool (available as a Node module) that lets you lint websites for IE8 compatibility, displaying warnings for possible pitfalls and suggested fixes. It reviews a given URL and provides a list of usual suspects that cause incompatibility with references to guides and articles on how to fix them. Hopefully, you won't need it that much, but if you do have to actively support IE8, this tool might save you a few hours on an urgent project. (vf)


6. On Early-Birds And Sunrise Joggers

Taking a shower, making coffee, checking emails. Do you have a certain routine to start your day? Well, to be honest, most morning routines tend to become quite boring after a while, and sometimes you might even feel as if you're reliving your personal Groundhog Day when the alarm goes off. So how about changing your habits a bit, and help set yourself up for a more productive and enjoyable day? If you need some ideas to mix into your mornings, My Morning Routine has got you covered.

On Early-Birds And Sunrise Joggers

The site features more than 100 inspiring interviews with creative people from all over the world. Early risers, frequent travelers, those who take the time for some meditation or exercise — they all provide an insight into their mornings. How does their routine influence the rest of their day? And how has it changed over the years? A beautiful idea that will inspire you to rethink your own routine, or at least to give it a bit more thought. (cm)


Advertisement
Ad


7. Optimizing Images For Faster Loading Times And Happier Users

According to the HTTP Archive, the average web page is 1860KB in size, with images making up a whopping 63%. To save our websites from unnecessary bloating, image optimization should really be a natural thing to consider — for everyone. But which method leads to the best results? Fellow developer Justin Avery tested to which extent the size of a 1MB-heavy headshot can be improved. By reducing image dimensions and quality, blurring less important parts and running the image through ImageOptim, he managed to save an impressive 858KB. Adding this procedure to your workflow would involve about 2-3 minutes per image at most, but will cater for much faster loading times, and thus a better user experience.

Optimizing Images For Faster Loading Times And Happier Users

Another way to improve loading times, or at least make them appear much shorter, could be progressive JPEGs. Contrary to conventional baseline images which render from top to bottom, progressive JPEGs serve a low-res version of the image quicker, refining it afterwards. (If you're unsure whether your JPEG is progressive or baseline, you can use ImageMagick to find out.) However, opinions whether progressive images help or hurt the user experience vary. That's why, to back up the debate with substantial data, the team behind Radware conducted a scientific study. The findings are in fact quite surprising (baseline images "performing" better) and an important read for anyone who has ever considered progressive images to be an option.

One way or another, make image optimization part of your automated build process — that's the most valuable way to improve performance in almost no time! (cm)


8. Coffee, Plugs And Free Wi-Fi

A "unicorn" combination of three things that are essential to the happiness of every web worker on the road: good coffee, good Wi-Fi and a good number of plugs. Coffee & Power features coffee places in big cities around the world that are ideal for an afternoon full of caffeine-loaded productivity. Know a good spot? Go ahead and add it to the list!

Coffee, Plugs And Free Wi-Fi

Sometimes, all you need is a Wi-Fi Spot and the right password without the need to purchase anything to just look up directions or send a very quick message. Wi-Fi Map is a handy app available for both iPhone and Android, that shows you networks and submitted passwords around the world. Everyone is invited to add their newly discovered place which makes the tool an even more extensive resource for web addicts on the road. It's not cool to use Wi-Fi for a longer period of time without ordering anything though — but it goes without saying! (ml)


9. The Stories Behind The Products

Whether it's a head-up display compatible with any car, a foldable kayak or a smart bicycle wheel; makers out there come up with the most ingenious ideas to make our lives simpler, more fun, or, well, just more beautiful. However, just as interesting as the products themselves are the people and the stories behind them. How did an idea evolve and how did it finally get to see the light of day? That's exactly what the blog Maker Stories is all about.

The Stories Behind The Products

The resource collects the stories behind extraordinary products and introduces us to the people who made them come to life. It's about clever inventions and devoted craftspeople. A very insightful blog, that is just the starting shot for an entire storytelling platform for professional makers to showcase their creations, tell their stories, and connect with consumers. Make sure to keep an eye out on this one. (cm)


Advertisement
Ad


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!
Image credits: Marc Thiele.

Upcoming Online Workshops: (Mar 2, 3)

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

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:

  • Marketing Designer at Schoola (San Francisco, CA)
    We're looking for a designer to help us create delightful, well-considered design for our community.

  • Senior UX Designer at Artist Growth (Nashville, TN)
    We're looking for a seasoned Senior UX Designer to join our creative team in Nashville, TN.

  • Front-End Web Developer at Red Ventures (Charlotte, NC)
    We're looking for folks with exceptional web development skills. We don't need people who just code PSDs.


Smashing Highlights (From Our Archive)

  • Showcase of Web Design in Russia
    Like everywhere in the world, web design came to Russia as a modern way to present any kind of information to an audience online. So, principles such as simplicity, accessibility and eye-catching design have been cultivated for several years.

  • Redesigning The Country Selector
    The country selector. It's there when you create an account for a new Web service, check out of an e-commerce store or sign up for a conference. The normal design? A drop-down list with all of the available countries.

  • Typographic Design Patterns And Current Practices (2013 Edition)
    Good typography has always been a defining aspect of effective Web design, and this holds true especially for websites in which the emphasis is on presenting a large amount of content — specifically, articles, news and stories.


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.

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