Dear Friend,
Do you remember the good ol' days when the generic personal pronoun "we" was used to make little web shops appear bigger than they actually were? In fact, it may have been just one person freelancing from home in slippers and a bathrobe. Still, that profound "we" made the company sound more serious, and hence more trustworthy, didn't it? Truth be told, there were times when we've all pretended to be somebody else just to get projects we wouldn't be entrusted with otherwise, and I'll be the first to admit that I am as guilty of it as everybody else.
These days, when so many things around us are heavily exaggerated and deceptive, authenticity remains one of the few qualities that people can genuinely connect to. Too often, however, it's not exhibited through a website at all, regrettably creating a vague image of a yet another obscure entity covered with corporate stock photos and meaningless jargon. While every brand promises to disrupt or be different, nothing truly feels disruptive or any different, and thus causes alienation and skepticism.
So what if we try to infuse a bit of personality into our designs? What if we make people think for a blink of a second to create an opportunity for our customers to connect with us? What if we introduce imperfection to appear slightly more humane and approachable? What if we replace all stock photos with custom illustrations, and all trendy components such as Parallax with dynamic CSS Grid compositions? What about finding and using a distinct design signature? You don't have to go overboard but we could experiment and play and try something new.
Now, of course not everybody will like it, and some people will find it annoying, confusing, misleading, or just childish. Very much like we find it difficult to connect to some people, we might experience the same issue with an interface that attempts to show its humane side. But isn't it worth it? When everything is remarkably similar and doesn't really stand for anything, isn't it worth striving for our product to be genuinely loved by many people for the price of being genuinely disliked by a few?
The cover of Smashing Book 6, designed by Chiara Allotta. We'll pre-release the book on June 12, but Smashing Members can start reading it already.
Embedding personality into the design process will also be a topic of our upcoming Smashing Book 6, which we'll pre-release on June 12th. Smashing Members can start reading it already, way before official release! You could ๐ become one of us, too!
Let's think out of the box every once in a while,
— Vitaly (@smashingmag)
Table of Contents
1. Give Your Stylesheets A Performance Boost
Stylesheets should be performant and easy to maintain. Often, they are not. Maybe you weren't aware of the problem or maybe the solutions you considered to improve the status quo were too expensive — no worries, giving your stylesheets a performance boost now is as easy as never before. Thanks to CSS Blocks.
Brought to life by the dev team at LinkedIn, the open-source tool analyzes and rewrites your stylesheets and templates. Powerful performance techniques like code-splitting, critical inlining, and tree shaking allow the tool to optimize selectors and boil the file size down to a minimum. Additional productivity features such as deep IDE integration or build-time errors for common coding mistakes — think typos — are also on board. (cm)
SmashingConf Toronto (June 26-27)
What would be the best way to improve your skills and learn? How about by observing designers and developers working live? Well, starting from this year, we'll be exploring new conference formats, and one of them is a focus on talks without… slides! Our new SmashingConf Toronto 2018 (June 26–27) will be full of interactive live sessions, showing how web designers design and how web developers build — including a live Pattern Library setup, workflow, design shortcuts, debugging, naming conventions, and everything in between.
Meet SmashingConf Toronto 2018 (June 26–27), a conference with live interactive sessions.
2. Flexbox Fallbacks For CSS Grid
CSS Grid is fantastic. However, it doesn't work as expected in all browsers yet. That doesn't mean that you should refrain from using Grid altogether, though. You only need to have the right fallback in place.
A resource that'll help you progressively enhance without fear, comes from Una Kravets. Grid to Flex, as it's called, shows different examples of how you can fall Grid layouts back to Flexbox. The project is open source, so if there's a fallback you consider useful for fellow developers, don't hesitate to submit it.
Speaking of Grid: Dan Netherton's CSSGr.id makes it a breeze to generate the code for a grid. You simply tell the tool how many grid items and columns you want your grid to have, set the padding between the items, as well as some other specs, and — tadaaa! — you get the grid code all ready to be copied and pasted. (cm)
3. Feminism Has A New (Type)Face
A feminist typeface? Of course! The Feminist Letters advocates for gender equality by giving feminist topics like equal pay, reproductive rights, women's health, and assaults a voice.
Each letter calls attention to one particular issue. Represented by ovaries, "T" stands for "Taking control of your body", for example. The "E" is represented by a ballot and illustrates "election". A rose and its leaf make up the letter "F" for "family leave". An unusual typeface with a very important message. Download it for free and take a stand for womens' rights. (cm)
Our sponsor:
All-In One Analytics And Feedback
How are visitors really using your website? Where do they struggle, and — in the worst case — on which page and at which steps do they drop off? Hotjar provides a new and easy way to find out. All in one central interface.
A number of built-in features make it possible: Heatmaps show you clicks, taps, and scrolling behaviors, while recordings of real users interacting with your site help you identify usability issues. Together with conversion funnel and form analysis, feedback polls, and surveys, Hotjar caters for a handy all-in-one solution to learn more about your visitors and use that knowledge to improve the UX and conversion of your site. Try it for free.
4. Tips And Tricks For Working With VS Code
Visual Studio Code is known and loved for its powerful features. But are you really making full use of its capabilities? Burke Holland and Sarah Drasner claim you don't, so to change that, they share all the best things about VS Code that nobody ever bothered to tell you.
From automatically updating HTML img tags with the correct size of the image to using font ligatures for better readability when coding, or using log points to log information out from your application, this lovely resource shares 17 valuable tips that'll make your workflow even more efficient. (cm)
5. A Super-Lightweight Text Input Mask
How do you handle input masks? Do you code them from scratch or do you have a favorite library you keep using? An alternative that might be worth taking a closer look at now comes from Loz Jackson: the input mask library Text Mask.
Text Mask lets you create input masks for phone, date, email, zip code, and anything else you could possibly need. And the best part: With less than 4KB gzipped, it has a tiny fooprint. Support for pasting, browser auto-fill, and other operations a user would expect when interacting with a form are also built in. No third-party dependencies needed, and it works on mobile, too. (cm)
6. Self-Hosting Google Fonts — Without The Hassle
More than 800 web fonts are part of Google Web Fonts — among them some real gems as well as a little tool that now makes working with Google Fonts more efficient (and most importantly, hassle-free): meet Mario Ranftl's google-webfonts-helper.
While your User-Agent usually determines the best font format to use, Mario's helper gives you more control: It lets you download your desired font in all formats directly, and it helps get it ready for local hosting, too. Charset customization is also built-in, and you can copy and paste the CSS to use the font in your project right away. A nice detail: There's a "Best Support" CSS version if you need to support older browsers and a "Modern Browsers" CSS if supporting old browsers isn't relevant. Handy. (cm)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
7. On Weaponized Design
Facebook influencing the voting behavior of its users through psychology research enabled by interface and systems design. Twitter silencing notifications sent to trolling victims when they are added to malicious Twitter lists. Ad tech on an e-commerce website informing a father of his teen daughter's unannounced pregnancy. You've probably heard these stories before. All of them are examples of weaponized design.
Put simply, weaponized design is the contrary of ethical design. Design that has gone plain wrong, design that wasn't created for people with lived experiences but for user-storied design abstracts. The "Our Data Our Selves" blog published a thought-provoking article on the topic. It examines how the lived experiences of users are often at odds with how these systems are designed, when this might become a real danger, and how you can do better. An important read. (cm)
8. Upcoming In Smashing Membership
Smashing Membership helps our site keep the site alive and go ad-free. Every Member makes a difference, and get valuable content from it, too! Coming up next:
- Download the first chapters of ๐ Smashing Book 6
- Smashing TV ๐บ "Accessibility Audit Live" with Marcy Sutton — May 10, 2018
- Conference videos ๐ฅ from SmashingConf San Francisco 2018 — May 15, 2018
- Smashing TV ๐บ "The Pizza Show" with Sara Soueidan & Vitaly Friedman — June 26, 2018
We are really grateful for the kind support of our members! You can become one of us, as well. ;-)
9. Upcoming Workshops With Vitaly Friedman
๐ต๐ฑ Gdansk, Infoshare, May 22 – 23, 2018
๐จ๐ฆ Toronto, SmashingConf, June 25 – 28, 2018
๐ฉ๐ช Freiburg, SmashingConf, Sept. 10 – 11, 2018
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
- Front-End Developer at College of American Pathologists (Northfield, IL)
"Ideal candidates will be a creative thinker who thrives in a small-team environment and continuously looks to augment their skill set to remain up-to-date on technology trends and practices." - Digital Services Data & Infra Architect at Thermo Fisher Scientific (Eindhoven Netherlands)
"The Digital Services Data & Infra Architect is responsible for the data infrastructure to effectively and efficiently support the development and operation of digital services within the scope of the MSD division." - Sr. Full-Stack Developer at Sticker Mule (Anywhere)
"Some of our current projects include migrating to a service architecture, inter-service communication with GCloud PubSub and GRPC, API Gateway based GraphQL, event sourcing persistence and CQRS, and manufacturing and artwork processing automation."
11. Popular Articles This Month
The authors are: Cosima Mielke (cm), Iris Ljeลกnjanin (il), Vitaly Friedman (vf), 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
No comments:
Post a Comment