Interdisciplinary Website Maker

 Paul Ford has a great article at Wired about his own experience as an English major working in tech. While I myself am not an English major (more on that below) his desire to be interdisciplinary parallels my own.

I began to realize I was that most horrifying of things: interdisciplinary...the idea that an English major should learn to code was seen as wasteful, bordering on abusive—like teaching a monkey to smoke.

When I’ve interviewed and expressed my desire to work doing design and code, some folks look at me strange and stammer. “Hm...well, maybe we have a place for that…I’ll have to get back to you.” To some, the idea that a designer would write code or that an engineer would move pixels seems strange — like “teaching a money to smoke”.

The sentiment I often perceive is: “Why would we need a designer that codes? We have designers. We have coders. Why would we need someone who can do both?”[1]

In the early days of making websites, “a designer who codes” didn’t seem like a big deal. After all, the only place to procure people who made websites was Craigslist. It was such a new idea that “a designer who codes” seemed like the least odd thing. The strangest concoction of disciplines existed in the early era of making websites: an English major who leads product, an actor who writes API code, or a poet who moves pixels around.

But now-a-days, any cross-disciplinary interest is easily interpreted as a lack of specialization and dedication to craft. If you’re doing design and code, how can you be really great at either? You’re not maximizing.

There’s another angle to it though, which Paul discusses in his article when he says, “humans are primates and disciplines are our territories”.

this same battle of the disciplines, everlasting, ongoing, eternal, and exhausting, defines the internet. Is blogging journalism? Is fan fiction “real” writing? Can video games be art? (The answer is always: Of course, but not always. No one cares for that answer.)

The analogy of disciplines as borders is intriguing. In disciplines, when things get complicated we don’t open borders but instead create new ones.

Existing disciplines don’t say, “Sure, c’mon over here. If you don’t fit, we’ll find room for you.” And new disciplines don’t say, “Let’s fold ourselves under the old umbrella of discipline X.” Both parties prefer new lines be drawn. New borders. And so new disciplines arise like Computer Science. And new titles appear, like AI Engineer. In this world of borders and disciplinary citizenship, what do you do with the unpatriotic interdiciplinarian? Paul:

The interdisciplinarian is essentially an exile. Someone who respects no borders enjoys no citizenship.

The irony here is that no discipline works without the others. Paul pointed this out in a separate article when he said:

The most brutal fact of life is that the discipline you love and care for is utterly irrelevant without the other disciplines that you tend to despise.

He illustrates this perfectly at the end of his Wired article using trees:

All you have to do is look at a tree—any tree will do—to see how badly our disciplines serve us. Evolutionary theory, botany, geography, physics, hydrology, countless poems, paintings, essays, and stories—all trying to make sense of the tree. We need them all, the whole fragile, interdependent ecosystem. No one has got it right yet.

Websites are like trees. You need understanding from all the disciplines — engineering, design, psychology, writing, etc. — to make sense of how to best grow them.

Interdisciplinary Studies

My official four-year degree is: Bachelor of Science in Interdisciplinary Studies with an emphasis in Visual Technologies and Spanish.

I rarely tell anyone that because, well frankly it’s a mouthful. Most conversations about higher education happen in the context of a career story, so to move the spotlight off me I’ll say “Yeah, I got a degree in computers.” That sounds like I majored in Computer Science but really it was more Graphic Design than anything programming-related.

But I don’t feel like a great Graphic Designer. Nor a great Computer Scientist. Somewhere along the way I ended up making websites. A strange hybrid of computer science and graphic design — and a million other things.

To be honest, I chose a degree in Interdisciplinary Studies because it was the fastest way for me to graduate. I knew Spanish, so I could take a test that gave me almost a year’s worth of credits. A four-year degree in three? Yes, please.

But in hindsight, maybe there was more in my decision than just a faster route to the finish line. Perhaps there was more “Hey, don’t put me in a box” inside of me than I realized at the time.

Because now in a world of Designer and Product Designer and UI Designer and UX Designer and Interaction Designer and Front-End Engineer and Full Stack Engineer and Software Engineer and et al., I still don’t want a label.

Lately, “Design Engineer” has felt more and more like a good fit for me. Perhaps because it is deliberately cross-discipline. It satisfies my deep-seated feeling of “don’t put me in a box” while also satisfying my belief that one narrow discipline can’t produce everything necessary to create a great experience on the web.

It reminds me of Maggie’s decisions to just call herself “website maker” because none of the disciplines alone are enough to make sense of how to build websites.

I feel that. Even “Design Engineer” doesn’t feel adequate. It deliberately mixes two disciplines, which is great, but also leaves out all the others.

To Paul’s point, I find myself wanting to draw new borders. “The Web” as its own discipline (I guess that’s the primate in me, oo oo ah ah).

Or maybe “Interdisciplinary Website Maker” is the right title.

Rolls right off the tongue, doesn’t it?


Footnotes
  1. In an attempt to answer that question, I started my series of posts “The Case for Design Engineers”
Reply
Tags
Jim Nielsen's Blog

22 Apr 2024 at 20:00

Consistent Navigation Across My Inconsistent Websites

 Anything I ship to my personal domain jim-nielsen.com is made using IDD: impulse driven development.

I can convince myself that just about anything is a good idea at the time. But in retrospect my rationales are quite often specious.

At one point in the past, I decided that I wanted to have my personal homepage and my blog be different “websites”. By that I mean: rather than have one site that has unified navigation and a coherent experience across all content, I wanted to have independent sites that evolve and progress at their own pace.

For example, if I decided I wanted to redesign my homepage (which acts as a sort of resume), I wouldn’t have to think about the typography of my blog posts. I could go super whacky in one direction, if I wanted, without having to think about how it affects the whole.

That’s how I’ve ended up with the different sites I have today, like my homepage jim-nielsen.com, my blog blog.jim-nielsen.com, and my notes notes.jim-nielsen.com. Each has their own unique design and codebase that can be modified and changed without regard for the others.

That’s nice for me, but one of the drawbacks has been that it’s not immediately apparent to people who visit those sites that all three exist. There’s no top-level navigation across all three sites with links to “Home”, “Blog”, and “Notes”.

I sort of always knew this and thought “Well that’s intentional, they’re three different sites after all!” But the trouble it actually presents people was brought to my attention by Chris Coyier when I was on the ShopTalkShow (he called it an “intervention”):

Jim, I gotta tell ya, intervention here, you don’t make it easy. You go to jim-nielsen.com, there’s no link to the blog, you gotta just “know” it’s a subdomain. And then, Jim has this incredible blog, cause he has the “think blog” and then he has this “what I’m reading” with thoughts [and they’re] equally great blogs (you should subscribe I’m not blowing smoke) but you just can’t find [them]. Like you have to go to the “About” page to find the reading blog. You gotta just smash them together [Jim]. I mean, you do you, but they’re just too hard to find.

I’m nothing if not a very poor marketer for myself and the things I do.

This was a Good Idea from Chris.

Honestly, I have lots of ideas on how to remedy this. But in the spirit of avoiding curiously exploring all the possibilities and then shipping nothing, I decided to just start with something small as a stop-gap.

My thought was: what kind of widget can I build that represents a coherent interaction across an otherwise incoherent set of web properties?

My solution? A floating head. Of myself. Fixed on every page.

At least you’ll know who the site belongs to, right?

So that’s what I built. It’s a JavaScript web component. Basically I stick this markup on every page across all my domains:

<jim-navbar></jim-navbar>
<script
  type="module"
  src="https://www.jim-nielsen.com/jim-navbar.js">
</script>

And, for browsers that support it, you get a floating head of me that works as a navigational widget across my home page, blog, and notes. When you click it, you get a popup that lets you easily navigate between the three disparate sites.

Screenshot of a floating popup that provides navigation to and across blog.jim-nielsen.com, notes.jim-nielsen.com, and www.jim-nielsen.com

I’m Rusty on Animations, But They’re Fun

For my first implementation of the widget, I wanted to try and make a little animated menu. I settled on the idea of my head and, when clicked, it spins around and reveals a menu.

For the v1 iteration, I used CSS transform to scale and rotate the different elements.

Animated gif of a profile photo of Jim Nielsen that, when clicked, reveals a popup menu with an 'x' over where Jim’s face was.

It was pretty decent. I liked it, but I wanted to try doing something more sophisticated — something like what iOS does with the dynamic island.

To do this, I would need to make it look like the round avatar of my head was transforming its shape into the popup menu. In v1, the popup menu was just scaling down to zero and was distinct and separate from the shape of the avatar. So I tried doing this in v2.

Animated gif of a profile photo of Jim Nielsen that, when clicked, reveals a popup menu with an 'x' over where Jim’s face was. This one has more refined shape shifting in the animation.

The difference here is subtle. You almost have to slow down the animation to notice it: the popup transforms itself into the circle shape of the avatar.

Slow motion animated gif of a popup menu whose shape transforms back down to a circle avatar with a profile photo of Jim Nielsen.

In slow motion you’ll notice there are some other parts of this animation that aren’t quite right (like the timing of the opacity on the profile photo).

Feeling like I could do better, I tried a third iteration. This is the one that’s on the site today. It’s still not as refined as the dynamic island, but hey, baby steps.

Animated gif of a profile photo of Jim Nielsen that, when clicked, reveals a popup menu with an 'x' over where Jim’s face was.

Honestly, even v3 is still not very great. But I’m improving on it, including responding to bugs on social media (in that case, I was excited about shipping nested CSS without compilation, but maybe the world isn’t quite ready for that yet).

I’ve got even better ideas for this in the future, but who knows if I’ll ever get to them. This works for now.

Anyhow, that’s a very long way of saying: intervention succeeded.


Reply
Tags
Jim Nielsen's Blog

17 Apr 2024 at 20:00

Faster Connectivity !== Faster Websites

 This post from Dan Luu discussing how web bloat impacts users with slow devices caused me to reflect on the supposition that faster connectivity means faster websites.

I grew up in an era when slow internet was the primary limiting factor to a great experience on the web. I was always pining for faster speeds: faster queries, faster page navigations, faster file downloads, etc. Whatever I wanted to do with a computer, bandwidth seemed like the sole limiting factor to a great experience.

So that’s why I still often mistakenly equate a faster connection with a faster (and better) experience on the web. And I often need reminding that’s not necessarily true.

That’s what Dan does well in his post. He points out how slow devices are becoming as big of an impediment to a good experience on the web as slow connections.

CPU performance for web apps hasn't scaled nearly as quickly as bandwidth so, while more of the web is becoming accessible to people with low-end connections, more of the web is becoming inaccessible to people with low-end devices even if they have high-end connections.

Here’s that last line again:

more of the web is becoming inaccessible to people with low-end devices even if they have high-end connections

It’s kind of incredible how the world is being flooded with bandwidth (I mean, you can get internet beamed to you anywhere on earth from a string of satellites.)

The question is quickly shifting from how slow is your connection to how slow is your device?

Newer !== Better, and More Usable for the Minority is More Usable For the Majority

To borrow from Devine’s warning about equating newer with better: if the new website runs slower on old hardware, is the new website better than the old website?

Here’s Dan talking about how old websites beat out new ones in performance:

Another pattern we can see is how the older sites are, in general, faster than the newer ones, with sites that (visually) look like they haven't been updated in a decade or two tending to be among the fastest.

This reminds me of an accessibility ethos which asserts that things that are made usable for marginalized individuals are invariable the most usable for everyone — regardless of capability.

Similarly: websites that were made to be fast on older, slower connections (and devices) are invariably the fastest for everyone — regardless of device or connection speed.

When using slow devices or any device with low bandwidth and/or poor connectivity, the best experiences, by far, are generally the ones that load a lot of content at once into a static page.

This is undoubtedly true for high-end devices as well. When you use something in the way it was designed to be used, it’s going to perform at its peak — and the web was designed, from its inception, to load a lot of static content up front.

It’s fascinating to see from Dan’s research how the output of modern blogging platforms (such as Medium or Substack) are not really competitive in terms of pure speed and performance with the “old” blogging / bulletin board platforms.

Overriding Defaults is the Fastest Path to Jank

To paraphrase Johan, the fastest path to janky websites is overriding browser defaults. Dan illustrates this perfectly in his piece, which I quote at length:

Sites that use modern techniques like partially loading the page and then dynamically loading the rest of it, such as Discourse, Reddit, and Substack, tend to be less usable… Although, in principle, you could build such a site in a simple way that works well with cheap devices but, in practice sites that use dynamic loading tend to be complex enough that the sites are extremely janky on low-end devices. It's generally difficult or impossible to scroll a predictable distance, which means that users will sometimes accidentally trigger more loading by scrolling too far, causing the page to lock up. Many pages actually remove the parts of the page you scrolled past as you scroll; all such pages are essentially unusable. Other basic web features, like page search, also generally stop working. Pages with this kind of dynamic loading can't rely on the simple and fast ctrl/command+F search and have to build their own search.

The bar to overriding browser defaults should be way higher than it is.

A lot of the optimizations that modern websites do, such as partial loading that causes more loading when you scroll down the page, and the concomitant hijacking of search (because the browser's built in search is useless if the page isn't fully loaded) causes the interaction model that works to stop working and makes pages very painful to interact with.

The foundations of web browser design lay in static document exploration and navigation. The bar to overriding the interaction UI/X for these kinds of experiences should be way higher than it is.

I find it ironic how, in our search for ticking Google’s performance checkboxes like “first contentful paint” and therefore providing better user experiences, we completely break other fundamental aspects of the user experiences like basic scrolling and in-document search.

A Parting Thought on a Core Tenent of the Web: Universal Accessibility

I want to leave you with this quote from Dan’s article. It begs us all to question whether the new stuff we’re making now is as universally accessible as what we’ve had (and taken for granted) up to this point.

The impact of having the fastest growing forum software in the world [Discourse] created by an organization whose then-leader was willing to state that he doesn't really care about users who aren't "influential users who spend money", who don't have access to "infinite CPU speed", is that a lot of forums are now inaccessible to people who don't have enough wealth to buy a device with effectively infinite CPU.

Are we leaving the internet better than we found it?

If [this attitude] were an anomaly, this wouldn't be too much of a problem, but [it’s] verbalizing the implicit assumptions a lot of programmers have, which is why we see that so many modern websites are unusable if you buy the income-adjusted equivalent of a new, current generation, iPhone in a low-income country.

I need to ponder on my own part in this more. Great food for thought.


Reply
Jim Nielsen's Blog

15 Apr 2024 at 20:00



Refresh complete

ReloadX
Home
(214) All feeds

Last 24 hours
Download OPML
A Very Good Blog by Keenan
*
A Working Library
Alastair Johnston
*
Andy Sylvester's Web
Anna Havron
annie mueller
Annie Mueller
Apple Annie's Weblog
Artcasting test feed
*
Articles – Dan Q
*
Austin Kleon
Baty.net posts
bgfay
Bix Dot Blog
*
Brandon's Journal
*
Chris Coyier
Chris Lovie-Tyler
Chris McLeod's blog
*
Chuck Grimmett
CJ Chilvers
CJ Eller
*
Colin Devroe
*
Colin Walker – Daily Feed
*
Content on Kwon.nyc
*
Core Intuition
*
Dave's famous linkblog
daverupert.com
Dino's Journal 📖
dispatches
E L S U A ~ A blog by Luis Suarez
Excursions
*
Flashing Palely in the Margins
Floating Flinders
For You
Frank Meeuwsen
*
frittiert.es
Hello! on Alan Ralph
*
HeyDingus
Human Stuff from Lisa Olivera
inessential.com
*
Interconnected
Into the Book
*
jabel
Jake LaCaze
*
James Van Dyne
*
Jan-Lukas Else
*
Jim Nielsen's Blog
Jo's Blog
*
Kev Quirk
lili's musings
*
Live & Learn
Lucy Bellwood
Maggie Appleton
*
Manton Reece
*
Manu's Feed
maya.land
Meadow 🌱
Minutes to Midnight RSS feed
Nicky's Blog
*
Notes – Dan Q
*
On my Om
*
One Man & His Blog
Own Your Web
*
Pablo Morales
Pablo Morales
Paul's Dev Notes
*
QC RSS
rebeccatoh.co
*
reverie v. reality
*
Rhoneisms
*
ribbonfarm
Robin Rendle
Robin Rendle
Sara Joy
*
Scripting News
*
Scripting News for email
Sentiers – Blog
Simon Collison | Articles & Stream
*
strandlines
the dream machine
The Gorman Limit
*
The Homebound Symphony
*
The Marginalian
*
thejaymo
theunderground.blog
*
tomcritchlow.com
*
Tracy Durnell
*
Winnie Lim
wiwi blog
yours, tiramisu
Žan Černe's Blog

About Reader


Reader is a public/private RSS & Atom feed reader.


The page is publicly available but all admin and post actions are gated behind login checks. Anyone is welcome to come and have a look at what feeds are listed — the posts visible will be everything within the last week and be unaffected by my read/unread status.


Reader currently updates every six hours.


Close

Search




x
Colin Walker Colin Walker colin@colinwalker.blog