Smashing #194: Big Bang Relaunch, UX, And Fighting Scammers

After two (long) years of hard work on the big bang relaunch of our little website, today is the day when everything changes. [Smashing Membership]( Dear Friend, After two (long) years of hard work on the [big bang relaunch]( we relaunched our little website a few days ago. New design and new technical stack. New personality and new ambitious goals. But most importantly, a new focus on our wonderful web community. [Cat the cook]( We’ve been [cooking something new]( and we can’t wait to give you a taste of what we have in mind! In times when we fight all the craziness and narrow-mindedness around us, we need to remind ourselves how wonderful a vast majority of the web community actually is. There are thousands of active, hard-working folks who contribute to open-source projects, who share, blog, speak, teach and learn from each other. Unfortunately, these people usually remain unnoticed, sometimes making huge contributions in their little spare time, and as time passes by, too often so does their motivation. [Meet Smashing TV]( Meet [Smashing TV]( a new Hollywood blockbuster for designers and developers. With webinars, live sesions and conversations with smart cookies like you. With the [Smashing Membership]( we want to reward and highlight these people, and support their contributions. Meet a friendly community with books, webinars, discounts, print magazine, Smashing TV and 68 enchanting cats. That’s the place we call home. We’d love you to [join the Smashing family]( too. [What’s Membership? →]( As things usually are with a relaunch, please be patient: not everything on the new site might work as expected, and we still have issues to fix. If you find an error, please [report a bug]( or help us squash it, the smashing way. So long, and good luck finding all those 68 hidden cats! — Vitaly and the Smashing Family ([@smashingmag]( --------------------------------------------------------------- Table of Contents 1. [Explore The World Of 3D](#a1) 2. [Upscaling And Enhancing Images With Neural Networks](#a2) 3. [Keyboard Shortcuts For Designers](#a3) 4. [A Checklist To Make Your Website Inclusive](#a4) 5. [Inspiring Examples Of UX](#a5) 6. [Size-Changing Toggles With Flexbox](#a6) 7. [A Chatbot To Fight Email Scammers](#a7) 8. [We’ve Got A Password Problem](#a8) 9. [Upcoming Smashing Conferences](#a9) 10. [New On Smashing Job Board](#a10) 11. [Our Most Popular Articles This Month](#a11) 12. [Most Recent Articles On Smashing](#a12) #1. Explore The World Of 3D Virtual and augmented reality frees digital content from the flat screen and puts it into a three-dimensional world. But a world that can be explored from all angles also requires every object in it to be fully turnable, zoomable and explorable, too. That’s why Google recently released [Poly]( a cross-platform library that gives creators and developers a place to discover and download 3D objects and scenes. [Poly]( No matter if it’s a robot, a dinosaur or an ice cream cone, Poly features thousands of free 3D models that you can use in your AR or VR apps. But not only that, many of them can also be remixed and customized to your liking — just import a remixable object with Tilt Brush or Blocks, make your edits, and Poly will automatically credit and link to the original when you publish your remix. The 3D objects work in the browser, too, of course, and if you want, you can even export your favorites as GIFs. Happy exploring! (cm) --------------------------------------------------------------- #2. Upscaling And Enhancing Images With Neural Networks We can optimize images to reduce their weight without compromising quality. But how should we go about images that are of a rather low quality right from the beginning? Images that could need a little brush-up to make them shine even on high-resolution screens? Machine-learning is there to help, as a small but mighty tool called [Let’s Enhance]( proves. [Let’s Enhance]( Whether it’s an old family photo that’s missing a detail or an image you want to scale up, Let’s Enhance uses state-of-the-art neural networks to fix your images. It can boost resolution by four times while keeping edges and features sharp and crisp, and if details are missing, the neural network hallucinates them to make the image look natural. The tool is free to use. To access your results, you’ll need to create an account, though. (cm) --------------------------------------------------------------- Our sponsor: Take Your Professional Skills To The Next Level With Online Classes From Skillshare With over 3 million members and more than 17,000 available classes taught by industry experts, Skillshare is basically Netflix for online learning. For only $8.25 a month, you can learn everything from graphic design to photography, from typography to marketing, and more. [LogRocket]( Now, Skillshare is teaming up with Smashing Magazine to offer the first 200 readers unlimited access to [two free months of Skillshare Premium](. Whether you’re looking to gain professional skills, want to unlock your creative potential, or are just learning for learning’s sake, Skillshare’s got you covered. --------------------------------------------------------------- #3. Keyboard Shortcuts For Designers The right shortcut at the right time can make a designer’s workflow so much more efficient. To have your favorite timesavers always at hand — and maybe even learn a few new ones, too — be sure to check out the [shortcut collection]( which Michael van Heest put together especially for designers. [Shortcuts For Designers]( The keyboard shortcuts cover design tools like Sketch, Principle, InVision, Figma, and, of course, the Adobe suite. Sublime Text, WordPress and macOS are featured, too. Also, did you know that you can define your own shortcuts if they don’t already exist? Just head on over to System Preferences → Shortcuts → App Shortcuts, and simply add your shortcut. Nifty! (cm) --------------------------------------------------------------- #4. A Checklist To Make Your Website Inclusive A lot of aspects add up to an inclusive web experience. Considerations that might not come to one’s mind in the first place — like the use of inclusive language or providing alternatives or descriptions for complex visualizations. To get your site on the best track of becoming truly inclusive, Heydon Pickering put together an [Inclusive Design Checklist](. The biggest and most comprehensive one available. That’s at least what it’s aiming for. [Inclusive Design Checklist]( The checklist includes more than 70 items covering accessibility, performance, device support, interoperability, and language. From making sure heading sections describe a logical section structure and giving video content captions and transcripts, to using content-based media queries and providing tap-based alternatives for swipe gestures. Where necessary, the list provides links to useful tools and articles that dive deeper into a topic. A go-to place for all your inclusive design needs. (cm) --------------------------------------------------------------- #5. Inspiring Examples Of UX Often, it’s the small things that take a user experience from good to memorable. Be it a useful tooltip, a value-driven onboarding flow, maybe even a well thought-out upsell prompt. To stay inspired with examples of outstanding UX, the site [Really Good UX]( collects pleasant UX details from around the web and explains what makes them so good. [Really Good UX]( To find just the right inspiration you need, you can browse the showcase by collection — think product tours, user onboarding, tooltips, modal windows, upsell prompts, and feature releases, for example. And if you don’t want to miss any new additions, there’s a weekly newsletter that delivers a fresh breeze of UX goodness right to your inbox every week. (cm) --------------------------------------------------------------- Our sponsor: Fix Bugs And Issues Faster With LogRocket Understanding problems in your web app shouldn’t be hard. But reality looks different. When a user stumbles upon a bug or issue, there’s usually a lot of back-and-forth emailing involved. You ask for screenshots and logs, but tracking down the actual problem stays a tedious undertaking that can easily take up hours. [LogRocket]( now changes that. [LogRocket]( LogRocket records everything users do on your site so that you can reproduce bugs and issues faster. The tool provides you with a pixel-perfect replay of what the user saw, and lets you view network activity and inspect console logs and JavaScript errors to better understand the cause of every bug and customer issue. No matter which language or framework you use, LogRocket works with your existing stack and even integrates with your favorite tools. Sounds good? You can [try all features for free for 14 days](. No strings attached. (cm) --------------------------------------------------------------- #6. Size-Changing Toggles With Flexbox With its ability to build grids that are flexible and aware of dynamic content, Flexbox has made coding challenges that once were hard or impossible to solve straightforward. Its potential is huge, and with a bit of tinkering, you can bring forth innovative results, as a recent CodePen demo by user Shaw ([@shshaw]( shows. [Flexbox Toggles]( Shaw created a set of [size-changing toggles using simple Flexbox transitions]( — a concept that shines with its simple beauty. Four rectangles form a grid; when a rectangle is active, its size is increased, and the neighboring rectangle becomes smaller in exchange. No JavaScript needed, only pure CSS goodness. Worth taking a closer look at! (cm) --------------------------------------------------------------- #7. A Chatbot To Fight Email Scammers Scamming emails are annoying to say the least. And even though you probably smell one a mile away, the fake stories of Nigerian princes and Russian romances are a billion dollar industry with millions of victims. Time to fight back! That’s the idea behind [Re:Scam]( an initiative brought to life by New Zealand’s non-profit online safety organization Netsafe. Their weapon of choice: a chatbot that can take on multiple personalities to imitate victims and entangle scammers in an endless conversation — until the scammer gives up. [Re:Scam]( If you spot a shady email in your inbox, just forward it to me@rescam.com, and after ensuring that it actually is a spamming attempt, the bot does what it’s best at: faking interest, asking questions — well, put simply, wasting a scammer’s time. Of course, an annoying conversation won’t make a scammer give up their “business”, but by keeping them engaged for a while, they waste time they’d otherwise invest in other potential targets. Clever! By the way, Re:Scam uses a proxy email address to contact the spammer, so your personal information stays protected at all times. Now, well, dear spammers, you’ve got mail! (cm) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad]( Learn to drive effective digital communication. --------------------------------------------------------------- #8. We’ve Got A Password Problem When we shop online or want to use an online service, we’re often required to sign up. And with each account we create, we diligently (and a bit annoyed) add the new password to our secret list of credentials. Credentials which we can’t remember otherwise and which we might never use again anyways. In a nutshell: The web has a password problem — and that’s not only annoying from a user’s perspective, but can seriously harm a business, too. [Authentication]( As [Luke Wroblewski recently pointed out on Twitter]( authentication is one of the biggest reasons people don’t return to websites. 54% quit checkout if they are asked to sign up and 92% give up if they don’t remember a password or user name. But how can you as a designer or developer do better? Passphrases, passwordless sign-in, and biometric authentication like Touch ID or the new Face ID are promising solutions to make the process a lot more straightforward as juggling with cryptic letter combinations. However, before you decide on an authentication process to use on your site, be sure to [weigh its advantages and disadvantages]( to ensure it’s the best solution for your use case. (cm) --------------------------------------------------------------- #9. SmashingConf San Francisco (April 17-18, 2018) We love bringing people together, and creating a friendly atmosphere for everybody to share and learn. No fluff, no theory — just actionable insights applicable to your work right away. At SmashingConf San Francisco, we will cover the ultimate CSS layout techniques, performance optimization, UX, strategies and design workflows, tips on establishing and maintaining design systems, and techniques to produce resilient, fast responsive websites. [Get the last super early birds →]( [Smashing Conference San Francisco]( SmashingConf San Francisco (Apr 17-18) - [Super Early Bird Tickets →]( - [Intro to Vue.js]( — Sarah Drasner (Apr 16) - [Critical Design Thinking]( — Barry Munsterteiger (Apr 16) - [Behind the Scenes with DDC]( — Aaron Draplin (Apr 16) - [Smart Responsive UX Design Patterns]( — Vitaly Friedman (Apr 16) - [Advanced CSS Layouts With Flexbox and CSS Grid]( — Rachel Andrew (Apr 19) - [Designing Exceptional Mobile Experiences]( — Josh Clark (Apr 19) - [Designing Grid Systems]( — Mark Boulton (Apr 19) - [New Front-End Adventures in Responsive Design]( — Vitaly Friedman (Apr 19) 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! --------------------------------------------------------------- #10. New On Smashing Job Board Here are some of the most recent job openings at [Smashing Jobs]( - [Backend Java Developer]( at Casumo (Malta / Barcelona / Remote (from EU zone)) "We are looking for developers who are driven and won’t say no to a challenge but also they have to care for what they do as we expect taking responsibility for the code written." - [Instructional Faculty - New Media Design - Tenure Track]( at Rochester Institute of Technology (Rochester, NY) "We are seeking candidates who are well-rounded design professionals and educators with advanced visual design, interface design and user experience design skills for responsive and cross device solutions and digital products." - [Web Developer]( at Columbia Southern Education Group (Orange Beach, AL) "The Web Developer is responsible for development and maintenance of Columbia Southern Education Group websites and affiliate websites." --------------------------------------------------------------- #11. Our Most Popular Articles This Month - [Creating Secure Password Resets With JSON Web Tokens]( When a user of your application has forgotten their password, it can and should be reset securely. To accomplish a secure password reset, Jamie Munro will demonstrate how to use JSON Web Tokens (JWT) to generate a URL-safe token. - [All You Need To Know About Customer Journey Mapping]( Most organizations are reasonably good at gathering data on their users. But data often fails to communicate the frustrations and experiences of customers. A story can do that, and one of the best storytelling tools in business is the customer journey map. - [Maximizing The Design Sprint]( As a UX consultant and in-house design strategist, Claire Mason facilitated dozens upon dozens of design workshops. The sprint is by far the most effective process she has seen to drive customer-first decision making in a design thinky way. --------------------------------------------------------------- #12. Most Recent Articles On Smashing - [Using CSS Grid: Supporting Browsers Without Grid]( When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement. - [Mobile Interface Myths You Should Throw Out The Window]( With the impending switch to a mobile-first search engine world, myths about mobile interfaces are on the rapid rise. Let’s take some time to cover five mobile interface myths you’ve probably been sold on (and why that might be a bad thing). - [Designing For A Browserless Web]( Users couldn’t care less about whether a technology is native, an installed web app or a website. What makes users engage and makes shoppers convert is really the experience itself. The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), Christiane Rosenberger (research), Elja Friedman (tools). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](