Dear Friend,
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 setup, workflow, design shortcuts, debugging, naming conventions, and everything in between.
Meet SmashingConf Toronto 2018 (June 26–27), a conference without... slides! Expect live interactive sessions instead.
Expect everything from live CSS/JS coding to live accessibility audit, live designing, and live debugging, live sketching and live performance profiling — with Lea Verou, Sara Soueidan, Dan Mall, Seb Lee-Denisle, Tim Kadlec, Joe Leech, and many others.
The night before the conference we'll be hosting a FailNight, a warm-up party with a twist: every single session will highlight how we all failed on a small or big scale, and what we all can learn from it. Sounds like fun? Well, that's probably because it will be!
Taking place in wonderful Toronto, Ontario ๐จ๐ฆ with 15 funky speakers, a plenty of practical workshops, and a broad range of topics with all things related to our lovely web industry. Go get your tickets. We're looking forward to seeing you in Toronto… live! ;-)
Let's reinvent the conference experience,
— Vitaly (@smashingmag)
Table of Contents
1. Contextual Styling Made Easy
Imagine you want to have multiple themes on the same page, e.g. a light main area and a dark hero and footer section. Styling them contextually is usually quite a hassle, but custom properties can make the undertaking at least a bit easier, as Simurai explains.
How to do it? Well, first, you need to define a default theme with different variables. Then you can create components using the variables, and, finally, have them picked up with a simple attribute. Once you've done that, you can start to define more theme regions and add them to your markup. The components will stay context-unaware and, thus, you can use them in multiple themes — even on the same page. A promising solution for colors, sizes, fonts, or anything else you'd like to define as variables. (cm)
2. Freebie: A New Take On A Classic
Back in 1971, Andrzej Heidrich (creator of the Polish banknotes), designed the cursive style "Bona" typeface. Inspired by the Italian renaissance antiqua, it was a real beauty with its classical proportions and subtle contrast — one that only existed as a metal type set, though. More than 45 years later, the young designer Mateusz Machalski decided to awake it from its slumber and get the typeface ready for our digital times: It was the birth of Bona Nova.
Bona Nova is more than a digitized version of the classic. It expanded the original character set with small caps, alternates, and OpenType features. It also introduced two entirely new versions: regular and bold. Distributed under the Open Font License, you can download and use Bona Nova for free. (cm)
3. A Look Inside display: contents
When designing for the web, we usually think in rectangular boxes: the actual box, consisting of border, padding, and margin areas, plus the content area which hosts the content of the box. The new CSS display property now lets us control how this box and its children are drawn to the page — and whether an element in the markup will generate a box at all.
As Ire Aderinokun explains, the newly specced contents value will draw the contents of the box as normal when applied to display, but the surrounding box will be omitted entirely. The feature isn't widely supported yet (only in Chrome, Firefox 65+ and Safari 11.1+), and, thus, it should still be considered a progressive enhancement and only be used with an appropriate fallback. (cm)
Our sponsor:
Download Four Free Tools For Developers
Take the complexity out of developing and deploying native apps. 3 million developers worldwide already use Embarcadero's tools to code cross-platform applications that are fast to design, fast to deploy, and are highly performant.
- C++ Builder → Includes a streamlined IDE, code editor, integrated debugger, two-way visual designers, and hundreds of visual components.
- Delphi → A great way to start building Windows apps.
- C++ Compiler → The core of Embarcadero's award-winning C++Builder product line.
- REST Debugger → Explore, understand, and integrate RESTful web services with Delphi and C++Builder apps.
Get started today with their four free developer tools — no credit card required.
4. A Gold Mine Of CSS Snippets
Do you have a favorite CSS snippet you use again and again? Michael Scharnagl asked the same question on Twitter recently, and, well, with almost 800 replies and more than 2,300 likes, it hit a nerve.
To prevent all the useful little snippets that emerged in the conversation from living an existence only in a Twitter thread, Michael collected the ones that got mentioned most often in one place. An overview of useful snippets, covering everything from responsive media and box sizing, to Grid, aspect ratio, and even HTML for email. (cm)
5. Getting Color Management Right
Color management is essential, but are the settings you have in place really the best ones for your assets and the platforms you're designing for? After all, you need to be able to rely on what you see on your screen. Not only is it crucial when it comes to choosing colors, but also for assessing contrast and legibility.
To help you improve your color management, the team at bjango summarized everything you need to know about it. You'll learn to choose the best color space for your needs and when you should assign a color profile vs. when it's better to convert to one. As a bonus, the article also takes a look at popular design programs and how to get the most out of their color management options. (cm)
6. Optical Adjustments For A More Harmonious Design
A text block that doesn't look centered in its box, a shadow appearing darker than it actually is, a button looking slightly unaligned. No matter how hard you tried to make things look right, your eyes (or those of your site's visitors) often tell you a different story. As Anton Lovchikov explains, the reason why things might look "a bit off" often lies in our brains and how we perceive objects in real life. So what can you do against it? Easy! Fool the viewer's brain back.
Anton collected examples of where the technical settings and our visual perception drift apart. The content inside a modal can be perfectly centered, for example, but since we're living in a world in which gravity is king, the content might appear lower than it actually is because our brain applies its real-world expectation that an object will necessarily fall down to the design. So, to align it optically, you need to counter-compensate for these expectations and lift it up a bit. Be sure to check out Anton's article for more valuable insights like this one. (cm)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
7. Does Your Site Deserve Recognition?
Hoping to get an award? Recommended as a resource? Used as a case study? If you want your site to get recognition, certain things will be expected. Does My Site Deserve Recognition provides a baseline of what can be considered a good example so you can either polish up your own site or assess if other sites are worth being recognized or awarded something.
The guide is a ten-point checklist that addresses anything from accessibility and code validation to browser compatibility and page weight. Links to further reading material and helpful tools are included, too. One for the bookmarks. (cm)
8. Upcoming In Smashing Membership
We have a Smashing Membership that helps us keep the site alive and go ad-free. You can make a difference as well, and get valuable content from it, too. Coming up next:
- Conference videos ๐ฅ from SmashingConf San Francisco 2018 — Apr 24
- Smashing TV ๐บ "Checkout UX Findings" with Christian Holst — Apr 26
- Smashing Book 6 ๐ Chapter Sneak Peek on "Making Design Systems Work In The Real World" by Laura Elizabeth — Apr 30
- New coupons and discounts ๐ฐ — Apr 30
- Smashing TV ๐บ "Accessibility Audit Live" with Marcy Sutton — May 10
We really appreciate the kind support of our members! You should become one of us, too. ;-)
9. Upcoming Smashing Workshops With Vitaly Friedman
๐บ๐ธ San Francisco, SmashingConf SF, April 16–19
๐ต๐ฑ Gdansk, Infoshare, May 22–23
๐จ๐ฆ Toronto, SmashingConf, June 25–28
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
- Web Designer at usnews.com (Washington, DC)
"U.S. News & World Report has an immediate opening for a Web Designer. This position requires an excellent eye for design, coupled with a keen ability to understand user needs, behaviors, and motivations." - Full-Stack Developer at Mightybytes (Chicago, IL)
"In this role, you will collaborate with UX designers, developers, content strategists, and product managers to create digital solutions for real-world problems faced by our primarily mission-driven client base." - Wordpress Designer at West 54 Media (Scottsdale, AZ)
"We are seeking a talented, incredibly creative, highly proficient and energetic in-house Wordpress Website Designer to join our team. We are small, but mighty marketing and PR Agency located in Old Town Scottsdale."
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