Smashing Newsletter #160: Service Workers, Conversational UI, CSS Carousels
With service workers, fonts, form validation, and creative experiments. Issue #160 • Tuesday, June 21st 2016 • 189,226 readers •View in the browser
Dear Friends,
Service workers. You've probably already heard about all of their benefits, such as background processing, customized offline fallback experience, persistent caching and overall improved performance. However, there aren't that many sites that make use of the technology (despite rapidly growing browser support). Well, a few months ago, we decided to team up with the (fantastic!) Cloudfour team to figure out a solution of how to integrate service workers into our WordPress setup. Last week, we were finally able to roll out the update that now contains a hard-working service worker — among a number of other things.
A service worker can manage caching and network, delivering content faster. Just one of the many scenarios of how a service worker could be used. (Image credit)
If you now try to access Smashing Magazine offline, you should be able to read the latest article (of course, if you have accessed the site at least once before that). Now, what makes a good offline experience? Well, we're pre-caching offline avatar placeholders and images, caching the "offline" page which displays everything you can see when you are offline, and last but not least, caching the Books and Conferences pages. We're also using service workers to manage caching of JavaScript, CSS and SVG files as well as font files. In fact, since most assets are used repeatedly throughout the site, on subsequent loads pretty much everything is coming from a service worker — no HTTP requests needed at all. That's right: and there are many more ways how service workers can be immensely helpful.
The result? Smashing Magazine is now available offline. We admit, we do have some performance hiccups, and we're still figuring them out, e.g. start render is delayed in some browsers because the service worker loads other pages in the background (yep, not cool at all). Also, CDNs and subdirectories required a special handling, and integration into WordPress wasn't as straightforward as we hoped it would be.
Things do look bright though! At this moment, we're experimenting and measuring, so if you find any bugs, issues or just weird behavior on the site, please do let us know via Twitter. We're very excited to see the performance boost once the service worker has been properly set, and of course, we'll keep you updated.
“Infecting your screen for your enjoyment” is the motto of the creative agency Resn. Their site is a playground full of interactive experiments; stupefying, gooey, magical. As you enter it, you’ll be greeted by a faceted drop on a black background. Like a crystal, it reflects light and moves and turns as you hover over it. This itself is an impressive piece of work, but the drop is only your gate to where the real magic happens, so click and drag it, and it will catapult you to one of six interactive experiments.
We don’t want to spoil the surprise, and words couldn’t properly describe what’s going on in the experiments anyway, so check them out yourself (and don’t forget to turn your speakers on). It’s going to be a beautiful and bizarre experience, that’s for sure. If you easily get dizzy, be careful then. There’s one experiment in particular that is, well, psychedelic and may strain your eyes a bit too much. (cm)
2. Conversational Interfaces, The Easy Way
When building experiences focused on conversational UI, we tend to believe that our bots should be capable of understanding human language and responding intelligently to perfectly meet users' needs. However, in reality it seems to be very, very difficult to accomplish. We can build high-level applications on top of existing platforms such as IBM Watson and Facebook Messenger Platform already. Skype bots are coming, too, and Viv is supposed to be a new groundbreaking change in the ecosystem altogether.
What all of these tools have in common is that they allow us to design with intent rather than with natural language; as designers and developers, we can define an intent (e.g. "booking") first. The platform will render user's input, deduct intent and act according to our application's logic. For example, that's how KLM Messenger came to be.
But aren't we overcomplicating things? Wouldn't it be easier to design simplified chatbots capable of merely understanding commands and responding in a humble way? Take online banking, for example. On desktop, using commands such as /balance or /transactions to check up the bank account is still easier than logging into a website every single time. /send $20 to Patrick for Lunch might work well, too (if the chatbot's response doesn't sound too boring and machine-alike). Conversational eCommerce is coming — it's just up to us to figure out what a great experience for our customers will look like. (vf)
Advertisement
3. A Monospace Font To Do Good
A new typeface is always nice to have in your toolkit. And even better if you can do good when you purchase it. Swedish-based designer Daniel Feldt created the monospace typeface Alma Mono exactly for this purpose: you pay what you want for a personal license (professional licenses start at $50), and Daniel will donate all proceeds to charity. But it’s not only the social aspect that makes it worth to check out Alma Mono.
Alma Mono comes in five weights and looks great both as a heavy display type as well as in long format text. If you are fed up of looking at the same ol’ font in your text editor or terminal, Alma Mono will give it a fresher and younger look. The idea for the typeface originally started as a side project at work, and it’s actually the first font that Daniel designed with several weights. Kudos!
If you’re on a tight budget and need a free font for your project, good news for you, too: Google Fonts was updated and now makes it easier to find that one font. Its new preview allows you to tweak the font size, weight, and sample text to get a better idea of what a typeface could look like out in the wild. (cm)
4. Snapper Refines CSS Snap Points Carousels
Carousels. Well, not this kind of carousels. You might love them or hate them, but one thing is for sure: they can be useful, when designed well. On e-commerce websites, for example, when you want to show several product images on a product page without adding more noise. CSS Snap Points now extends the functionality of carousels, and enables CSS overflow scrolling regions to snap to points in their scrolling span. A handy feature that does, unfortunately, not work in all browsers yet. The team at Filament Group took this as an occasion to refine the concept and make snapping work more broadly. The result: Snapper.
The lightweight script uses CSS and JavaScript to create functional snap-points carousels, building on a simple overflow container and native CSS snap points. But Snapper is more than just a polyfill. It adds a smooth sidescroll navigation as well as optional previous and next buttons to your carousels and also supports thumbnail and dot navigation links. The ability to loop back to the start of the carousel when you reach its end has also been added. Want to give it a try? You’ll find the Snapper code on GitHub. And don't forget to add some context to your carousel thumbnails — text and small preview are always better than arrows and dots! (cm)
Advertisement
5. Better Linting With Pre-Commit Hooks
Code quality matters, and a common way to guarantee that the code is written according to code guidelines and best practices is by linting it. But what if you have a large distributed team, with everybody using their own development environment and continuous integration tools? You really can't be sure that the code is in a proper shape before the commit or a pull request is made.
A simple way to improve the workflow a little bit is by introducing a git pre-commit hook which allows you to run linting (or any other npm scripts) before the code is committed to a git repository. You don't have to reinvent the wheel though; there are toolsandlibraries like pre-commit npm package and commitizen npm package that you can use right away. An easy way to avoid bugs in your GitHub repo! (vf)
6. Product Design And Email Marketing In Numbers
What is the state of product design? That’s the question the Product Report 2016 attempts to answer. To approach it, Invision asked more than 11,650 designers from 65 countries actively working in design about their roles, careers, and feelings for the future. The report does not only explore their background and working environment but also uncovers tool preferences, design-related behaviors and income variables. What do design teams look like today? What kind of benefit packages do designers receive? And what factors contribute to professional happiness? The report offers an in-depth look at the industry and the people that keep it running.
An interesting report for everybody involved in email marketing comes from Litmus. Their 2016 State Of Email Report is based on data from over 13 billion email opens worldwide and looks at trends that defined email marketing in the past year to get you fit to send more effective campaigns today. It features info on email client market share just like summaries of all new email applications and how to optimize for them — think Apple Watch, rendering quirks in Outlook and Yahoo Mail now supporting media queries. Updates to delivery and spam are also included. You can download the report after providing your email address. (cm)
Advertisement
7. The Right Way To Ask For App Permissions
Asking users to grant your app permission to access their location, their contacts or to use their camera, is a tricky thing. When you don’t do it properly, you risk harming the user experience and, in the worst case, your users will abandon your app and never come back again. To help you avoid common pitfalls in your permission request logic, Nick Babich shares his strategy to take the pain out of asking for permissions.
The key takeaway: Don’t ask too early or for too many things at once. Nick suggests to request critical permissions up-front; when it comes to secondary permissions you’re better off asking for them in context. To gain your users’ trust, also make sure to always be crystal clear about why your app needs a certain permission and what they’ll get in return. Ask nicely and don’t leave room for false assumptions — that’s the best foundation for a positive answer. (cm)
8. Techniques For Better Form Validation
No one likes to fill out a form. That’s why, to make the task as painless as possible, it’s crucial for every developer to provide proper guidance and feedback. Form validation is the magic term here, and Ire Aderinokun wrote up how to get it right.
In her form validation techniques article, Ire explains how to use CSS to properly style valid and invalid inputs depending on whether they are required or optional fields. For more complex forms, she also provides tips to add multiple error messages to one tooltip with JavaScript and explains how to add error messages directly to the DOM so all error messages will be displayed for all inputs at once. A boilerplate for real-time validation is also available. One for the bookmarks. (cm)
9. Upcoming Smashing Workshops
With so many techniques, tools, style guides, 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 classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
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! (vf)
Frontend UI Developer at OptioPay (Berlin, DE) “OptioPay is a payment processor with a difference. Our software increases the value of any payment received by consumers from companies, by combining bank transfers with higher value gift cards. [...] We are looking for an experienced Frontend UI Developer to start as soon as possible. We offer the opportunity to gain experience and practical skills in an e-commerce startup, build a network of entrepreneurs and exercise real responsibility in a dynamic environment.”
Designer (Part Time) at Everyday Health (NYC, USA) “What to Expect, the world’s most recognized pregnancy and parenting brand is looking for a talented, eager and curious designer to join our Creative Services team. The designer works on a variety of digital and print projects for including mockups and product concepts for sales proposals, engaging digital advertising and other promotional projects as assigned.”
UX Designer at Marktplaats (Amsterdam, NL) “We’re on a journey to bring design thinking to every corner of Marktplaats. Because design isn’t just about crafting pixels or making products, it’s about creating possibilities. Do you want to join the UX team at Marktplaats and help us create a truly meaningful experience?”
11. Smashing Highlights (From Our Archives)
Creating Advanced Animations In Photoshop While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.
A User In Total Control Is A Designer’s Nightmare How do you balance the creative control you give to the users, the usability of the product they make with your tool and the flexibility of that tool?
My (Simple) Workflow To Design And Develop A Portfolio Website A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web. Yes, I’m talking about creating your own portfolio website.
No comments:
Post a Comment