Dear Friends,
What's the best gift you've ever received? The one you'll remember for years to come? Perhaps something lovingly crafted by somebody you care about, specifically for you? Maybe a very special origami with your name, or a vinyl of your favourite jazz composition, or a very special concert ticket, or a stone from the ocean where you celebrated a birthday together — a sign that somebody listened to you, paid attention and pulled out all the stops to find it, and give it to you.
We can't give you that special gift because we don't know you as well as your loved ones. But we can give you our truly smashing Smashing Book 5, "Real-Life Responsive Web Design", almost for free. Get the eBook today — 60% off, no strings attached. The print edition is pretty fancy too.
And if you're looking for something else, Quartz Gift Guide has featured some of the most memorable gifts shared by influential leaders in art, fashion and business. The best gifts are like those roman candles, giving light and wonder to our lives. Give something special to people you care about, even if it means that you have to pull all the stops to get there.
P.S. No, Smashing Book 5 doesn't make an appearance in Star Wars, but it's universally useful — well, for pros like you who care about the web, of course.
Happy holidays!
— Vitaly (@smashingmag)
Table of Contents
1. Are You Ready For HTTP/2?
The end of the year is just the right time for a clean slate. Just last week we deployed some rewritten bits of JavaScript, switched to PHP7 and moved our test environment to HTTPS — to get ready for the big switch to HTTP/2 in January. With an unlimited umber of parallel requests, HTTP/2 seems to bring 1.5× speed improvement (you can test your speed on HTTP/2 too). And that's kind of a big deal.
Yet from a strategic perspective, HTTP/2 also brings some challenges. You need an SSL certificate: you could set up a free SSL certificate via Let's Encrypt. HTTP/2 is well-supported and there are server modules available for Apache and Nginx, so you could literally move to HTTP/2 today. The protocol is backwards compatible, so browsers not supporting HTTP/2 will naturally fall back to HTTP/1.1. Good news, right?
As Rebecca Murphy suggests, with HTTP/2 the ways we build and deploy websites are quite different from the HTTP/1.1 world, so we might need to send different builds via different protocols. If we optimize for HTTP/2, we might slow down the HTTP/1.1 experience. This might complicate deployment and delay maintenance. In her article, Rebecca suggests a strategy for HTTP/2-friendly deployment with HTTP/1.1 support which might be your strategy, too. HTTP/2 isn't just a switch; it requires consideration and optimization, especially if many (or most) of your users are still running on HTTP/1.1. (vf)
2. Advanced Typographic Details, Small Efforts
To achieve fine typographic details, there's usually no getting around some convoluted CSS. Luckily, Kenneth Ormandy's Utility OpenType puts an end to this. The 1.75KB CSS file reduces clutter in your style sheet and makes applying ligatures, small caps, number variants and other finesses as simple as using bold and italics.
How is it done? Well, by providing declarative utility classes that you can apply to entire elements or, specifically, to inline spans to evoke the desired typographic appearance. Contrary to the common font settings properties, the features cascade predictably, which, in the end, spares you a lot of maintenance work. Utility OpenType supports Chrome, Firefox and Internet Explorer 10+, and falls back gracefully elsewhere. You can use it with Sass, PostCSS, and, of course, with your plain ol' CSS too. A powerful little helper. (vf)
3. Innovative Responsive Experiments
What was the most complex responsive interface you had to build over the last few years? It might have been a fully responsive online banking UI, a sophisticated dashboard, an admin interface, a responsive game, or perhaps a heavily art-directed magazine issue. Well, with enough creativity, responsive design can bring us to new territories we never thought would be possible.
For example, what about a smooth and simple CSS calendar (it can change the view and level of fidelity depending on the viewport) or responsive zoomable UIs — interfaces where you can basically zoom in and out of sections instead of using traditional navigation. Or maybe responsive cartoons where the interaction and the appearance change depending on the screen resolution (try it on desktop and phone). Or maybe responsive math equations? Even when building resilient responsive systems, there are interesting problems to solve, and it looks like pretty much everything can be solved with responsive design. Responsive design is worth experimenting with! (vf)
Advertisement
4. Getting Started With CSS Blend Modes
What if you need to dynamically reverse text color based on background color? In the past, we would either use
CSS attribute selectors to target a few different use cases (not dynamic enough!) or
JavaScript to toggle classes based on the detected background color. Well, with CSS blend modes you can resolve this issue way faster and way more simply.
CSS blend modes describe how different pieces of content should blend together — either with mix-blend-mode for an HTML element against the background or background-blend-mode for blending foreground and background images, as well as SVG elements. By applying one of the mix-blend-mode values (e.g. darken) on the foreground text, it will seamlessly blend in with the background. Simple. Robin Rendle and Dudley Storey have explained in detail how to reverse text color automatically in CSS.
To get started with CSS blend modes, check Blending Modes in CSS which provides a nice overview of practical applications of CSS blending modes with an interactive playground. Dudley Storey has a collection of practical blend mode examples and a comprehensive CSS blend modes reading list (or an introduction in German). Browser support? Pretty decent, actually. Now that's a nice add-on for funky and playful backgrounds! (vf)
5. Mine, Yours, Ours or Theirs?
When you write interface copy — for buttons, links or dashboard areas — how do you actually deal with personal pronouns? For example, when talking about the user's side of the interface, should it be "My profile" or "Your profile", or maybe just "Profile"? According to our Twitter poll, many readers prefer "My account", but is it convenient for the user?
In her article on the FutureLearn UI decisions, Alla Kholmatova argues that we should distinguish between when we're communicating to the user, and when the user is communicating to us. In the first case, since we are addressing users, we could use "you" (e.g. "Here's your profile", "Here are your settings"). In the second case, we could use "my" (e.g. "Email me when I have a new follower"). Every simple decision requires a bit of thought, and viewing the UI as two-way communication can help to guide design decisions and resolve copy inconsistencies. A little detail to keep in mind for the next project. (vf)
6. Positive Projections For Women In Tech
As a woman working in the events industry (more specifically in the tech events industry) for over five years, striving for well-balanced line ups, and friendly, inclusive atmospheres at my conferences has always been a no-brainer. It's distressing to hear about fellow females experiencing sexism within the community that I love (and yes, I've experienced it myself at times) so it was heartening to read Lea Verou's recent blog post "My Positive Experience As a Woman In Tech."
In it, Lea makes the very valid point that while discrimination undoubtedly occurs and should not be discounted in any way, "when no positive stories get out, the overall picture painted is bleak, which could scare even more women away." If you're interested in her thoughts regarding the internalized stereotypes that anyone is capable of unwittingly carrying around in their heads, or the well-meaning but ultimately counterproductive effect that attempts to self-censor around members of the opposite sex can have, it's a refreshing read. (cc)
Advertisement
7. Designing For Virtual Reality
What if your new project is supposed to contain interactive components working well with miraculous VR devices such as Oculus Rift, Cardboard or Samsung Gear VR? How would you design virtual reality experiences? How would you prototype them? And how would you build them within your existing working environment?
Well, instead of examining screen sizes and touch, you'd be looking into head tracking and acceleration, reticles, scale, gaze cues and spatial audio to guide your users through the interface you are crafting. Casey Hopkins has prepared a few UX considerations on designing for virtual reality while Jonas Treub shows how we can prototype VR experiences with Framer.js. Matt Sundstrom suggests that we think about immersive design that supports and enhances the user's sense of presence in the virtual environment, and even Google and Facebook have run some VR experiments recently. You can also use markup to create VR experiences with A-Frame. This should be enough to get started. Can VR design be responsive, too? We'll surely figure that out. (vf)
8. Upcoming Smashing Workshops
With so many techniques, tools, libraries, 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 front-end and RWD workshops are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Full-Day Workshops at SmashingConf Oxford
Full-Day Workshops at SmashingConf San Francisco
But what about in-house training instead? We can improve your front-end and performance right on spot — or checkout, accessibility or UX. 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 cost — we'll find a fair price for sure. Get in touch — it's that easy! (vf)
9. Upcoming Smashing Conferences
We love bringing people together, and creating a friendly atmosphere for everybody to share and to learn. Our community events are for professionals like yourself who want to improve skills and make a difference. No fluff, no theory — just actionable insights applicable to your work right away. In fact, we've listed our next stops in the overview of upcoming Smashing Conferences, with first confirmed speakers and tickets.
We'd love to meet you at SmashingConf Oxford, UK on March 15–16, or perhaps at SmashingConf San Francisco, on April 5–6, 2016 with a tremendous view, right opposite to Golden Gate Bridge and Alcatraz Island. Ah, and just in case you need to convince your manager to send you to the event, we've got a Convince Your Boss PDF ready for you, too. Just sayin'! (vf)
Image credit: wigz
New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Senior UX Designer at Zalando (Berlin, Germany)
"In collaboration with peers, POs and developers, you will increase customer retention at Zalando by enticing customers, enabling discovery, personalizing recommendations and individualizing the Zalando experience."
-
Front End Developer at Booking.com (Amsterdam, NL)
"Booking.com is looking for the world's best Front End Developers all around the globe! Join us at our beautiful headquarters in Amsterdam and work on planet Earth's #1 accommodation website with some of the industry's smartest people!"
-
Art Director at OpenRoad (Vancouver, BC)
"It's about gut-wrenchingly gorgeous work. It's about amazing, delighted people. It's about fantastic, rock-solid results. If those are the sorts of things that get you up and rocking everyday, then maybe you're the Art Director OpenRoad is looking for."
Smashing Highlights (From Our Archives)
- Free Christmas Icon Sets
Over the years, we've released a number of beautiful icon sets that you (still) can use for free both in commercial and private projects. - Avoiding The Pitfalls Of Free
Misaligned interests create tension in the design process that can lead to bad, and potentially unethical, design decisions, that result in inferior products. In this article Dmitry Fadeyev examines how the desire to build a large audience by giving away your products and services free of charge can cause conflicts of interest. - Making Advertising Work In A Responsive World
Advertising has always had an uneasy relationship with the media because of ethical considerations on both sides of the printing press. On the one hand, journalists are reluctant, quite rightly, to be seen as under the thumb of an advertiser, and on the other side, advertisers don't want to be seen to be enforcing their views on the free press.
Recent Articles On Smashing Magazine
