Dear Friends,
When publishing long reads, you might end up with situations when an article features a number of sidenotes, footnotes or pull quotes. You could try to squeeze the sidenotes within the article, perhaps right after the paragraphs which they relate to, but if they are lengthy they might interrupt reader's flow. On the other hand, with footnotes displayed as <sup>-links, users will have to jump to the foot of the page, read the footnote and then jump back to the reference, which is fine but a bit noisy and creates extra work for the user.
An interesting way of dealing with these issues is by using inline footnotes as pop-overs. You could use BigFoot.js to automatically detect the footnote link and content, turn the link into a large enough button, and open a pop-over when the reader clicks on the footnote button.
Of course, the pop-over has to be positioned on the top or bottom of the button automatically (based on the amount of space available), should update its location as the viewport changes, and should never scroll offscreen. You could apply this technique to sidenotes, too: just turn them into inline footnotes at the end of every paragraph, with a different CSS styling to keep them distinguishable, and display them fully on click or tap.
A clever way to provide additional information while preventing your users from losing the thread. If you are looking for more smart techniques like this one, the chapter "Responsive Design Patterns" in our lovely new Smashing Book 5: "Real-Life Responsive Web Design" is your kind of read. You won't be disappointed, promised.
P.S.: Remember, remember: the 8th of September, 2PM CET — we have a new mystery riddle coming up on Smashing Magazine's front page. The first to person to solve the riddle will win a trip to Barcelona for SmashingConf Barcelona 2015. Mark your calendar, and don't be late!
— Vitaly (@smashingmag)
Table of Contents
1. Polishing Up Your Typography With Typeset.js
It's the small details that make a difference, that polish up your project and make it shine. Typography is one of these details, and to be honest, most of us still have some catching-up to do when it comes to hanging punctuation, soft hyphens, margin outdents and the like. But no worries, a little library now helps you brushing up your site's typography with ease: Typeset.js.
Built by David Merfield, Typeset.js is a HTML pre-processor for web typography that uses zero client-side JavaScript and gives you all the neat typographic details that we oversee so easily: real hanging punctuation, soft hyphen insertion, optical margin outdents, small-caps conversion, punctuation and space substitution. The library runs on the server using Node and even renders correctly in IE5 and without any CSS. A before and after demo illustrates beautifully how well-crafted typography significantly improves the reading experience — and, well, it just looks better, too. (cm)
2. 100 Days Of User Interface Experiments
There's something magical about an interface that does what it's supposed to do, but in a way that it doesn't feel like work at all. Sometimes it's transitions and animations used properly, or smart reminders presented intelligently, or just kind delightful surprises placed in an interface here and there.
100 Days UI is a little project that is dedicated to those lovely interactions. It features Paul Flavius Nechita's sketches — but they all are presented as Dribbble shots, and so sometimes rebounds are worth exploring, too. UI Movement features existing interface experiments and lets you submit yours or rate other submissions. And, obviously, Little Big Details is the ultimate resource for a daily dose of clever delightful surprises in UIs. For the bookmarks! (vf)
3. Under The Internet's Hood: How DNS Works
If you ever thought a cute comic – complete with suspenseful cliffhangers and crazy characters – about the domain name system was impossible, think again! DNSimple brings us How DNS Works.
The comic strip recounts the sometimes long trip (though made in milliseconds!) taken by the resolver to retrieve domains. From the OS to root server, from top-level domain server to name server and back again, it's a neat little ride that explains… well, how DNS works. (og)
Advertisement
4. Data Extraction Without The Code Headache
There's an awful lot of open data on the web – data you could use for a personal side project, data journalism or to create an amazing app. But getting at that data can be difficult. This is a problem that import.io tries to solve, by instantly turning a webpage into a set of structured data without writing any code.
Data can be downloaded as CSV, Excel, Google Sheets or JSON. The desktop app is available for free download, and enterprise-level solutions are also available. There are simple live examples on the site (here are the results for the SmashingMag homepage), and you can browse through a showcase of projects and stories that have used import.io to collate interesting data. A simple tool that could be particularly helpful for quick and painless prototyping with actual data. (og)
5. Work Better Together — For Less Headaches And Smarter Design
Designers and developers represent two halves of the same coin. However, they also speak two different languages. When working together on a project this does not only make communication cumbersome at times but it could also let your project fall victim to unnecessary compromises or, in the worst case, to nasty surprises. Luckily, UXPin has released a free eBook that helps you pave the way for a better collaboration: The Designer's Guide To Collaborate With Developers.
The 80-pages strong eBook is aimed at designers who want to overcome the headaches of working with developers. It provides valuable tips for including developers in the different stages of design — from planning, wireframing and prototyping to usability testing — and best practices for simpler handoffs. A must-read for anybody who feels that their team needs to move closer together to get the most out of a project. And for developers who want to make designer's life easier, Dear Developer. Love, Designer. provides a nice overview of quick tips and techniques in one comprehensive blog post. (cm)
6. Freebies: Icons And Device Templates
Having some freebies up your sleeve is always a good thing. So here are two resources to complement your toolkit. A versatile icon set comes from Buatoom. With its flat looks, and simple black and white aesthetic it fits any kind of project. The set includes e-commerce, business and weather-themed icons — a useful mix.
If you're looking for a free template to present your app or site in the proper light, check out Sebastien Gabriel's device photographs. To give back to the community for all the free templates that he had used himself, Sebastien shares a set of high-res photos of iPhone 6 Plus, iPad mini Retina, as well as Nexus 5 and 9. Just edit the pre-set smart object in the .psd files and you're good to go. (cm)
Advertisement
7. Don't Be A Bonsai Shed
It doesn't matter if you work next to your own kitchen, in a design agency or even run your own studio: design is a business. We know that business can be tough though. When times get rough and people nasty, there's no better foundation for a client-designer relationship than a bulletproof contract that guides you what to do if something happens. That's probably what creative minds behind Hello Bonsai had in mind, too. The tool doesn't just provide a set of sample contracts, but also niftly integrates them into one tool, so you can build a contract quickly, ask a client to e-sign it, and even request and hold client funds in escrow.
If you need more contract samples, check our Legal Guide to Contracts For Designers, or docracy, a growing collection of legal contracts, and Andrew Clarke's Contract Killer 3. Now you should be better protected against pretty much anything once things go south. (mse)
8. One Component A Day, Designed Well
Here's a challenge for you. Think about one interface component, write down a few strict requirements, observe a few people (neighbours!) using a component live, study the interaction extensively, consider user flows and everything that can go wrong (and right), and try to find a perfect, bulletproof design for this component.
For example, what about a bulletproof date picker? Or a perfect credit card payment form? Or infinite scrolling, or maybe a carousel? Difficult? Not necessarily. Time-consuming? Probably. But it's a great exercise to learn a thing or two about user interaction. Might be worth a try. (vf)
9. Making The Invisible Visible
Much of the time, we don't notice what's not right in front of us – out of sight, out of mind, as the saying goes. Brad Frost recognizes that this is also true in web development. In his recent post, "Surfacing Invisible Elements," Brad considers the recent rise in criticism of performance-hindering third-party scripts and wonders how developers can be more active in acknowledging and accounting for them as part of the projects they work on.
By including such scripts in an interface inventory, developers can bring to the surface assets that might get overlooked. In this way, they can sit alongside UI elements, such as buttons and accordions, as part of a website's pattern library. So the higher the hit to performance or bandwidth, the brighter the red of warning! It's a really simple but effective tip from Brad. Thank you! (og)
Advertisement
10. Watch Illustrators Live
Everybody loves observing how great work emerges, especially if it's something as personal and vivid as illustrations. If you've been hunting for videos of illustrators at work on Vimeo or YouTube, fasten your seatbelts. Sywork is a free "TV"-alike channel dedicated to live recordings of illustrators creating pretty much any kind of design: from 3D modelling to traditional drawing to illustration and animation.
The site has a flourishing community with more and more people joining in, commenting on the live sessions and scheduling their own sessions. You can see the schedule of the channel and suggest your own live session as well. Now, it would be interesting to see the same concept applied to front-end work, too. (vf)
11. 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 and RWD workshops that will help you become better front-end developers and designers, today.
Upcoming Online Workshops
Upcoming Smashing Workshops and Meet-Ups:
- ColdFrontConf in Copenhagen, Denmark, Talk + RWD Workshop, Sep 2.
- SmashingConf Freiburg, Germany, Sep 14–16.
- Creative Workshop Facilitation with Andy Budd (Sept. 16th, 2015)
- MakingWeb in Oslo, Norway, Talk + RWD Workshop, Sep 22–23.
- Reaktor Breakpoint in Helsinki, Finland, Talk, Sep 24–25.
- MobiConf in Krakow, Poland, Talk + RWD Workshop, Oct 2.
- UXYerevan in Yerevan, Armenia, Talk + RWD Workshop, Oct 11.
- SmashingConf Barcelona, Spain, Oct 20–21.
- Workshop in Tokyo, Japan, Oct 24.
- Web Directions in Sydney, Australia, Talk + RWD Workshop, Oct 28.
- SmashingConf San Francisco 2016, US, Apr 5–6.
But what about in-house training instead? We can improve your eCommerce checkout and conversion rates right on spot — or performance, accessibility or UX. 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 cost — we'll find a fair price for sure. Get in touch — it's that easy!
Workshop image credits: Marc Thiele (vf)
12. Smashing Highlights
-
Email Templates For Web Designers And Developers (PDF, ODT, TXT)
This article features email templates for communicating with clients, superiors, teammates and the like. You can easily customize them. They balance firmness and tact, professionalism and friendliness.
-
Designing Better JavaScript APIs
This article covers the most important things that you will need to consider before and while writing your own utilities and libraries. We'll focus on how to make your code accessible to other developers.
-
Thirteen Tenets Of User Experience
Robert Hoekman Jr. highlights beliefs on the value of user experience strategy, design, and designers, one for every year he'd been in the web industry.
13. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Visual Designer at Salesforce (Palo Alto, CA)
"We are lucky to work like a fast-paced startup with the benefits that come from working within a large company. This means you'll see your ideas come to life quickly and work across every part of RelateIQ. Each designer has a large impact on our design and culture and you'll have the opportunity to kingpin new UI projects."
-
Senior UX Developer at American Express (New York, NY)
"This is a fast growing team in an area of the business which has significant strategic focus and sponsorship. We are seeking a Senior Manager, User Experience to advance our vision globally by leading our experience & design strategy, UX development within a scaled agile framework, and rapid prototyping/testing process."
-
UI Art Director at 1&1 Mail & Media GmbH (Karlsruhe, Germany)
"You will create and monitor overarching user interface design concepts which maintain consistency in UI elements and the brand styles. In our usability lab, you will observe the immediate reactions of our users to your designs and prototypes and draw mutual conclusions to apply to the design thinking process."
14. Recent Articles On Smashing Magazine
