I’ve blogged about this before but wanted to post again now that the 4-season series has wrapped. A consistent detail throughout Mr. Robot was that the title cards seemed to capture the essence of the episode instantly. The (freeze) framing of a powerful image + music + the splash of red type across the screen always got me excited for what was in store.
Potential spoilers below, but here’s a video with all four seasons worth of title card intro screens:
I adore the high-contrast type, aged color pallette, and sci-fi concept painting here in the artwork for The Strokes’ new song, “At the Door.”
I couldn’t help but track down the title font. I believe it’s Blackbarry NF by Nick Curtis. Then I saw the throwback-Hanna-Barbera-vibed video, which hits even harder. The titles here are set in Angelus Medieval (see also DXAngelus Mediaval).
~4 years ago, we had a sliver of free time at Paravel, and wanted to experiment with creating an immersive-website-book-thingy for Sherlock Holmes: A Scandal in Bohemia complete with a vibey page design, illustrations, animations, and even audio.
I’m not sure we ever called the experiment done, and we certainly could have spent many more months fretting over all sorts of details. It probably got to a point where the work it’d take to reach the standard we set in our minds far outweighed the joy experienced in the act of creating it. And then we just forgot about it until recently and decided to ship it as-is. Yay!
Yes, there are animations and sounds triggered by scroll (whether or not something is in view). We wanted to play a rain soundtrack when the story mentioned rain. The same goes for fireplace crackling sounds and paper notes sliding into view. Users can still scroll smoothly, and we tried to be extremely subtle about it (which I generally think is the only way to do it).
I knew Dave and Reagan were skeptical about including music and sounds. Still, after some experimentation, I think we found the right balance—ambient tones instead of sharp notes, pulling in looping sounds (like rain) to offset the potential abruptness of a door swinging open, etc.
I also regularly fantasize about being a foley artist and/or making music for TV, movies, or games, so this helped to scratch that itch.
I’ve been lecturing my kids about the importance of output as it relates to creativity. I’ll say stuff like, “I like hearing about all your ideas, but I love it when you turn those ideas into reality even more.” It’s inspiring to see them create tree house models out of boxes and tissue paper, write spell books, and invent comic heroes.
So I’ll be sharing more of my creative endeavors, whether they’re perfect, imperfect, practical, or frivolous. It feels good to get ideas out—to try things because you feel you need to. More to come!
We updated paravelinc.com! I actually have no idea what version it is (are we counting the flash one I did in 2000?), but rather than trying to overhaul the entire site, we opted to make some key changes and bring the rest along later. So what changed?
With an insane campfire scene illustration thanks to Matthew Woodson (Bless your Instagram feed while you’re at it), lettering via Reagan, and a subtle-yet-lovely fire glow effect from Dave, we’ve got a whole new vibe.
Kinda. We love Alternate Gothic dearly and use it in our logo and for headlines. When ATF expanded no. 1, no. 2, and no. 3 to 40 different styles (4 widths, 10 weights), I jumped at the chance to utilize a heavier option for headlines on some of the newer pages (coming soon to the rest of the site).
ATF Alternate Gothic Bold and ITC Franklin Gothic are being served via Webtype, who has a stellar support team, BTW.
We’d never had a services page before, but because many recent client relationships involve long-term partnerships instead of one-off projects, we sought to create two pages that explain a couple of our specialties: design systems and prototypes.
We spent a fair amount of time writing and editing these two pages. Long paragraphs became short paragraphs. Then those became sentences or phrases. Articulating what we do verbally (as well as on the web) isn’t easy, but I like where we landed here.
As words were finalized, I got to make graphics—sneaking triforces into Jordan 1s and creating fictitious brands like “Amigoaid.” I haven’t had this much fun making stuff up since I did that New Adventures newspaper.
Paravel is now on Netlify. It’s a Jekyll site on Github, and with minimal configuration, Netlify builds and deploys the site for us. I even used their forms feature to manage our contact form. S/O to Phil Hawksworth for encouraging me to try Netlify this spring at Smashing Conf SF. I love it!
I think that’s it. We’re in our twelfth year at Paravel. Thanks for reading—thanks for your support—just, thanks!
I was reading Harry Roberts’ post, Identifying, Auditing, and Discussing Third Parties, and realized I hadn’t paid proper attention to the Request Map Generator built by Simon Hearne. It’s fantastic.
First off, having a visual “map” of requests is compelling even before you begin any analysis. While my site is relatively basic, something like Amazon can be complex, producing a sizable map.
You can dig into the map for further analysis (Harry’s post covers this well), and you can also export as a CSV, which I love because it’s another easy way to itemize third-parties for comparison, sorting, etc.
I don’t think we’ll be doing any performance or third-party consulting at Paravel without utilizing the Request Map Generator, especially now that it’s also included in the webpagetest.org UI.
On May 25, 2018, the General Data Protection Regulation (GDPR) becomes enforceable across Europe. According to Wikipedia:
The General Data Protection Regulation is a regulation in EU law on data protection and privacy for all individuals within the European Union. It also addresses the export of personal data outside the EU. The GDPR aims primarily to give control to citizens and residents over their personal data and to simplify the regulatory environment for international business by unifying the regulation within the EU.
Because these changes include data collected outside the EU, its impact is global. For example, if you store user data in the U.S. for someone in the EU, you’re subject to these laws. I think this is a good thing for users, but what does that mean for us as web builders?
I recently came across this article written by Heather Burns for Smashing Magazine. It contains an excellent breakdown of GDPR requirements, what data is protected, and tips for how to go about adapting. Some of my favorite bits:
Europe’s data protection regime stands in stark contrast to that of the U.S., which has no single overarching, cross-sector, or cross-situational data protection law. […] This cultural difference often sees American developers struggling with the concept of privacy as a fundamental human right enshrined in law, a situation which has no U.S. equivalent.
GDPR requires the adoption of the Privacy by Design framework, a seven-point development methodology which requires optimal data protection to be provided as standard, by default, across all uses and applications.
You can read more about PbD here.
A Privacy Impact Assessment (PIA), which is required under GDPR for data-intensive projects, is a living document which must be made accessible to all involved with a project. It is the process by which you discuss, audit, inventory, and mitigate the privacy risks inherent in the data you collect and process.
These items seem less like extra work and more like work that should be done from the beginning as a default. Just as we formalize accessibility, performance, and browser/device support standards, we should be doing the same for privacy and data protection.
But what about third-parties? If I have Google Analytics on my site (I don’t), who is responsible for that data?
As I understand it, according to GDPR, The site/app owner is the ‘data controller,’ and the third-party service (like Google Analytics) is the ‘data processor.’ It is up to Google to be sure the data they process is GDPR compliant, but it would also be up to me as the data controller to be sure that my third-party vendors and services are in compliance. These roles further reinforce the need for organizations to regularly audit and itemize the third-party scripts and services they include with their web pages.
I just got back from attending & speaking at Smashing Conf 2018. I had a great time—the speakers were excellent, and the Smashing team is always so helpful and supportive. It was my first time speaking about third-parties. I think it went well, and I’m thankful for the questions and feedback. Next, I’ll be researching privacy and adding some thoughts to the deck for the next talks for An Event Apart in Boston and Orlando!
In another informative talk, Andy Davies looks at how you can measure the cost of a particular third-party script (just after the 4-minute mark).
This process can help illustrate performance and UX tradeoffs being made, but Andy also suggests feeding those results into a RUM (real user monitoring) dashboard to understand the business impact.
“What if I was a second faster? How many more conversions would I get? You can begin to translate that user-experience impact into pounds and pence.”
This step had never occurred to me, and after a teeny bit of research on RUM tools, I realized that quite a few past clients likely had this data available, I just didn’t know what to do or how to ask for it. A post on the Soasta blog (via Charles Vazac) further illustrates utilizing RUM for these purposes.
“What if my digital property had better performance? How would that affect the bottom line of my company?”
Next, I’m going to try and get some experience with RUM tools and work with a client to get these sorts of data points. If you’ve got any screenshots or stories using RUM tools to do this sort of thing that you can share, please give me a holler!
It’s common for sites to ask users to turn off ad blockers. I often happily oblige to support sites I value. I’d likely oblige more often if the differences in experience weren’t so extreme. Here’s one example (via Sam Kap):
Not an unreasonable request: “Turn off your ad blocker so we can continue to make content. We won’t hit you with pop-up ads.” But note my “before” experience:
After turning my ad blocker off, the experience changed dramatically:
Not only was the page heavier and slower to load, but there was also a lot of scroll-jank and processor lag. Because the differences are so huge, the request was starting to seem less reasonable. And to top things off, I got a pop-up anyways:
Sites with ads are one thing. Sites with such a high amount of ads, trackers, analytics, and A/B testing resources that load via a long list of third-parties are something else. I don’t think Food Network is unique here, but it is a good example of what happens when third-party inclusions get out of hand.
When implementing third-party scripts/services, I think organizations need to:
Maybe most organizations do this already, and perhaps it still makes business sense for them to include everything. I hope not.