We’re all trying to figure things out. Over the last years, I’m happy to have had a look behind the scenes of how mid-size and large-sized companies deal with their front-end and UX problems. It’s surprising that since problems are very similar, solutions are often very similar as well.
While design agencies often work in an agile environment, larger companies experience difficulties on building smaller tactical agile teams that work in a corporate environment. Frankly, most of the time you’ll find a lot of “wateragile”, with just too many cooks and too many stakeholders working on the moving parts of the system.
Modular approach seems to be working well; it’s a good strategy to break down the complexity with reusable components.
“Vertical” architecture with multi-disciplinary teams, assigned by features, rather than skills or technology, seems to work better than “horizontal” architecture with separated teams of screen designers, developers and UX professionals. Frankly, collaboration is a cheesy word these days, but bringing teams closer together to work on the components of the UI does work well indeed.
Everybody is trying to solve design inconsistencies with a pattern library or a style guide or a design system, yet too often I see resources being plummeted into building a consistent design language just to push it aside for “real” projects a few months later. Pattern libraries can work, too3, but they alone don’t solve the problem; we need to apply a design process related to the way our teams are organized, too.
Too often, user experience still has to be sold, and both performance4 and accessibility5 are seen as the edge case, unless you argue with hard data and actual recordings of user interviews proving otherwise.
To help us get there, we’ve published a new book10, in which Heydon Pickering explains how we can craft accessible interfaces without extra effort — and what front-end design patterns we can use to create inclusive experiences. Everything you need to know about accessibility gathered in one practical, smashing book, fully dedicated to building and designing accessible interfaces.
We all share these problems, but the good thing is that we all work hard on solving them. If you have a story to share of how your company changes, please drop me an email at editor[@]smashingmagazine.com — we’d love to work with you on an article or two. Let’s figure it out together!
— Vitaly (@smashingmag)
Table of Contents
- One World, One Typeface12
- Sensor-Enabled Experiences Made Easy14
- Freebie: Printable Wireframing Templates15
- A Guide To Progressively Enhancing A Comment Form16
- SVG And Media Queries17
- Goodies! CitySets And Free Brush Script Font18
- Upcoming Smashing Workshops19
- New On Smashing Job Board20
- Smashing Highlights (From Our Archives)21
- Recent Articles On Smashing Magazine22
2. One World, One Typeface
Five years ago, Google and Monotype embarked on a one-of-a-kind project that involved the cooperation of hundreds of researchers, designers, linguists, cultural experts, and project managers. Now it’s finally ready: The open-source typeface family Noto25. What’s so special about it? Well, it supports every written language in the world — living and dead. That makes 800 languages and 100 written scripts in total, from Latin, Cyrillic, and Hebrew to Egyptian Hieroglyphs and Cherokee. It’s one of the largest typographic projects ever undertaken.
The aim of Noto is to enable communication across borders and to digitally preserve little-spoken languages that have been said to disappear from human memory sooner or later. But it also means to put an end to those little, annoying boxes that are usually displayed on a computer when a font isn’t supported. Hence, also the name: “Noto” stands for “No Tofu”, as the boxes are often referred to as “tofu” because of their shape. The sans-serif family of Noto is already available27, a serif counterpart is still in the making. A harmonious, timeless typeface with a deeper meaning. (cm)
The components in the showcase range from image sliders, view switchers and modals, to tabs and accordions, but also form validation and a scroll indicator are part of it. All of the methods can be made accessible, although the demos themselves might not be. So take a moment to test before you use them in production.
4. Sensor-Enabled Experiences Made Easy
Motion is a powerful interaction tool, especially in combination with the motion sensors on mobile devices. A user could shake their device to navigate through an image gallery, for example, while on a more advanced level motion can be used to power augmented and virtual reality environments. But catering for effects like these also means having to access and work with sensor data. That’s where MotionStack31 comes in.
The JS-based motion processing library lets you integrate motion and spatial computing into your web and native applications without having to get your hands on any of the low-level processing or mathematical transformations that are needed to leverage the sensors in a mobile device. What MotionStack essentially does is quantify the motions: You send callback functions to the MotionStack APIs, and the motions from the user will act as inputs to these functions. A clever way to simplify the act of creating motion-interactive experiences. (cm)
5. Freebie: Printable Wireframing Templates
Digital tools are good, but sometimes you don’t want the tech to stand between you and your ideas. Sometimes all you want is to quickly jot down thoughts or scribble mockups. What could be better for this purpose than a piece of paper and a good ol’ pen, right? A great little addition to your analog toolkit are the printable sketching templates from Sneakpeekit33. Just download the PDF of your favorite template, and, well, print it.
The printables include tablet, smartphone as well as browser templates and come in versions with a dotted grid and without. There’s also a multipurpose precision grid template available with column marks that are ideal for icon, font, and logo design. Perfect to speed up your creative process. (cm)
6. A Guide To Progressively Enhancing A Comment Form
How do you usually build a form? After having created a lot of forms before, Michael Scharnagl recently decided to tackle the task differently. He started his next comment form with a very simple base and enhanced it step by step35 — progressive enhancement par excellence.
The basic version is an HTML form that will work in every browser. On top of that, Michael adds
placeholder attributes, defines custom error messages, ajaxifies the form, and adds a nifty auto-expand feature for the textarea that makes sure the height of the comment field adapts to the length of its content. To enhance the experience further, an indicator is added that shows if the comment was posted successfully or not. Finally, for browsers that support ServiceWorker, Michael uses BackgroundSync to improve the experience for poor and unusable connections and, in case a user is offline, show a message that the comment will automatically be published as soon as the connection is back on again. A clever solution that doesn’t leave any browser behind. Some users might get a better experience, but in essence, all of them will be able to use the form and post a comment. And that’s what it should be all about. (cm)
7. SVG And Media Queries
Have you ever used media queries within SVG? If yes, you might have encountered some weird issues. Imagine, you declare a media query for an SVG with
min-width: 100px. Which viewport will be the reference point for these 100px? The CSS size of the host document? The width, height, and viewBox attributes on the
<svg>? The width and height of the
<image>? Or the CSS layout size of the
<img>? To get to the bottom of this, Jake Archibald examined how different browsers behave37.
Surprising is especially Firefox’s behavior: If the SVG lives inside an
<img> tag, the viewport is the rendered size in device pixels and will change depending on display density. In other browsers, the viewport of the SVG is the CSS dimensions of the
<img>. This can already be quite confusing, but things get more complicated when you draw your SVG to a
<canvas>. The spec is unclear how this should be handled, and the actual behavior of browsers goes into entirely different directions, with Chrome showing the wonkiest and Edge an ideal behavior — it allows you to activate media queries for widths independent of the drawn width. To dive deeper into the issue, check out Jake Archibald’s findings39. (cm)
8. Goodies! CitySets And Free Brush Script Font
Why would you release icons and typefaces for free if you could bring them into a marketplace and sell, or just set up a landing page with Stripe integration on your own? Well, if you want your project to grow, or collaborate with other designers, or just establish your profile in the community, open sourcing your work is the best way to achieve just that.
Bryn Taylor has released Citysets41, a growing collection of free city-based icon sets, including London, New York, Paris and Sydney, with all icons designed in a similar way. Also, Raul Taciu and Vlad Cristea have released Hensa Free Font42, a free brush script typeface with quite a personality. On top of the regular set, the fonts contain ligatures and swashes, and could be used for logos, quotes, packaging designs, posters, greeting cards or anything else! The font can be used in private and commercial projects. An attribution isn’t required but always welcome, and well deserved!
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.
Workshops at SmashingConf Barcelona
- Mastering SVG45 with Sara Soueidan (Oct. 24th)
- RWD Workflow46 with Stephen Hay (Oct. 24th) (Sold out)
- UX Patterns47 with Vitaly Friedman (Oct. 24th) (Sold out)
- Checkout Optimization48 with Christian Holst (Oct. 27th)
- Modular CSS49 with Jonathan Snook (Oct. 27th)
- RWD Techniques50 with Vitaly Friedman (Oct. 27th)
Our Public Workshops
- Oslo, Norway —New Adventures in Responsive Web Design51
Mobile Era, Oslo, Norway, Nov. 3rd
- Warsaw, Poland —Smart Responsive Design Patterns52
Design Encounters, Warsaw, Poland, Nov. 18th
- Vilnius, Lithuania —Responsive Design: Tricks And Techniques53
Build Stuff, Vilnius, Lithuania, Nov. 20th
- London, UK —New Responsive Adventures: UX and Front-End54
White October Events, London, UK, Nov. 24-25th
- Munich, Germany —Smart Responsive UX Design Patterns55
Smashing Workshop, Munich, Germany, Nov. 28th
- Tel-Aviv, Israel —Smart Responsive Design Patterns56
UX Salon, Tel-Aviv, Israel, Dec. 5th
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at firstname.lastname@example.org 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
- Digital Design Teacher59 at Skillshare (Anywhere)
“Skillshare, a leading online learning platform for the creative community, is looking for design professionals like you to share your skills with our community of over 2 million engaged students. As a Skillshare teacher, you’ll upload project-based video lessons and connect with students around the globe”
- Web/Graphic Designer60 at Accreditation Council for Graduate Medical Education (Chicago)
“A Web/Graphic Designer is needed to create graphics and layout/navigation for a range of multimedia materials, including the web, PowerPoint, reports, and e-mail templates. The ideal candidate should have an eye for clean and professional design, possess superior information architecture skills, and be able to translate high-level requirements into interaction flows and artifacts and transform them into professional, intuitive, and functional user designs and interfaces.”
- Part-Time Senior Front-End Editorial Developer61 at ESPN (Bristol, CT or Remote)
“Working at ESPN is unlike anything else. That’s because we’re always finding new ways to interact with fans – however and wherever they connect with sports. When you have the latest technology, game-changing ideas and world-class talent on your team, every day is extraordinary.”
11. Smashing Highlights (From Our Archives)
- Powerful Workflow Tips, Tools And Tricks For Web Designers62
Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.
- Be A Better Designer By Eating An Elephant63
There’s probably no industry in which so much change happens so quickly. If you stop paying attention for a week, it can feel like you’ve not been listening for a year. There’s so much to learn.
- Space Yourself64
There’s more to spaces than the key you instinctively hit between words with one of your thumbs. Let’s find out what other space characters there are, what their heritage is, and how they can be useful today.
6512. Recent Articles On Smashing Magazine
- How To Build Honest UIs And Help Users Make Better Decisions66
- Designing Card-Based User Interfaces67
- Taking Pattern Libraries To The Next Level68
- In-App Gestures And Mobile App User Experience69
- Meet “Inclusive Front-End Design Patterns”, A New Smashing Book70
- How To Develop A Chat Bot With Node.js71
- What’s The Deal With The Samsung Internet Browser?72
- Next Generation Server Compression With Brotli73
- Creating Universal Windows Apps With React Native74
Inspiration, Freebies, Misc.
- Best Of Halloween: All Things Spooky75
- Breaking Out Of The Box: Design Inspiration (October 2016)76
- Web Development Reading List #154: Yarn, Deep-Fried Data, And A Guide To Stateful Components78
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
- 3 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
- 4 https://wpostats.com/
- 5 https://www.smashingmagazine.com/inclusive-design-patterns
- 6 https://www.smashingmagazine.com/inclusive-design-patterns/
- 7 https://www.smashingmagazine.com/inclusive-design-patterns/
- 8 https://shop.smashingmagazine.com/products/inclusive-design-patterns?utm_source=smashing-newsletter&utm_campaign=inclusive-design-patterns&utm_medium=html-ad-sn
- 9 https://twitter.com/_mariov_/status/788862698100514816
- 10 https://www.smashingmagazine.com/inclusive-design-patterns/
- 11 #a1
- 12 #a2
- 13 #a3
- 14 #a4
- 15 #a5
- 16 #a6
- 17 #a7
- 18 #a8
- 19 #a9
- 20 #a10
- 21 #a11
- 22 #a12
- 23 http://stateofjs.com/
- 24 http://stateofjs.com/
- 25 http://www.itsnicethat.com/news/google-monotype-noto-type-family-061016
- 26 http://www.itsnicethat.com/news/google-monotype-noto-type-family-061016
- 27 https://www.google.com/get/noto/
- 28 http://youmightnotneedjs.com/
- 29 http://youmightnotneedjs.com/
- 31 https://motionstack.adtile.me/
- 32 https://motionstack.adtile.me/
- 33 http://sneakpeekit.com/
- 34 http://sneakpeekit.com/
- 35 https://justmarkup.com/log/2016/10/enhancing-a-comment-form/
- 36 https://justmarkup.com/log/2016/10/enhancing-a-comment-form/
- 37 https://jakearchibald.com/2016/svg-media-queries/
- 38 https://jakearchibald.com/2016/svg-media-queries/
- 39 https://jakearchibald.com/2016/svg-media-queries/
- 40 http://graphicburger.com/hensa-free-brush-script-font/
- 41 http://citysets.co.uk/
- 42 http://graphicburger.com/hensa-free-brush-script-font/
- 43 http://cssicon.space/#/
- 44 http://barcelona.smashingconf.com
- 45 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-barcelona-2016
- 46 https://shop.smashingmagazine.com/products/workshop-stephen-hay-barcelona-2016
- 47 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-barcelona-2016
- 48 https://shop.smashingmagazine.com/products/workshop-christian-holst-barcelona-2016
- 49 https://shop.smashingmagazine.com/products/workshop-jonathan-snook-barcelona-2016
- 50 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-RWD-barcelona-2016
- 51 http://mobileera.rocks/workshops/
- 52 http://www.designencountersconf.com/
- 53 https://buildstuff2016workshops.sched.org/event/8Xo2/vitaly-friedman-responsive-design-clever-tricks-and-techniques
- 54 http://whiteoctoberevents.co.uk/training
- 55 https://shop.smashingmagazine.com/products/smashing-workshop-ux-design-vitaly-munich-nov-2016
- 56 http://www.uxsalon.com/responsive-design-workshop/
- 57 mailto:email@example.com
- 58 http://jobs.smashingmagazine.com/
- 59 http://jobs.smashingmagazine.com/j/Digital-Design-Teacher/2435009
- 60 http://jobs.smashingmagazine.com/j/Web-Graphic-Designer/2434400
- 61 http://jobs.smashingmagazine.com/j/Part-Time-Senior-Front-End-Editorial-Developer/2434358
- 62 https://www.smashingmagazine.com/2013/10/powerful-workflow-tips-tools-and-tricks-for-web-designers/
- 63 https://www.smashingmagazine.com/2014/10/be-a-better-designer-by-eating-an-elephant/
- 64 https://www.smashingmagazine.com/2015/10/space-yourself/
- 65 #
- 66 https://www.smashingmagazine.com/2016/10/how-to-build-honest-uis-and-help-users-make-better-decisions/
- 67 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
- 68 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
- 69 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
- 70 https://www.smashingmagazine.com/inclusive-design-patterns/
- 71 https://www.smashingmagazine.com/2016/10/how-to-develop-a-chat-bot-with-node-js/
- 72 https://www.smashingmagazine.com/2016/10/whats-the-deal-with-the-samsung-internet-browser/
- 73 https://www.smashingmagazine.com/2016/10/next-generation-server-compression-with-brotli/
- 74 https://www.smashingmagazine.com/2016/10/creating-universal-windows-apps-with-react-native/
- 75 https://www.smashingmagazine.com/2016/10/best-of-halloween-all-things-spooky/
- 76 https://www.smashingmagazine.com/2016/10/breaking-out-of-the-box-design-inspiration-october-2016/
- 77 https://www.smashingmagazine.com/2016/10/web-development-reading-list-153/
- 78 https://www.smashingmagazine.com/2016/10/web-development-reading-list-154/