Blog – Page 32 – Johan Ronsse

Progressive enhancement is not always possible

February 1, 2017 - Posted in web - 3 comments

In december I read the excellent “The Case Against Progressive Enhancement’s Flimsy Moral Foundation” (and its followup) which poses some interesting thoughts on some of the arguments that some of PE’s biggest proponents put forward to defend their position.

I started learned webdesign in ’06 and I was heavily influenced by the web standards movement. I was basically schooled by the likes of Zeldman, Jeremy Keith, Dan Cederholm and Andy Clarke.

In my last post I praised Jeremy’s Resilient Web Design but at the same time stated:

My only critique that – as a designer of highly interactive applications – the example of progressive enhancement is way too simplistic. But I guess that’s just where I’ve never agreed with Jeremy anyway.

If you want to read said example, I refer you to the part about software in Chapter 6 of Resilient Web Design, where they talk about Editorially (RIP).

I am happy that the concept of progressive enhancement exists and I am a big proponent. But at the same time I feel the need to talk about situations where PE is less than feasible; and where it’s just nonsensical.

Since PE is sometimes presented as a “moral” argument where PE’ers have the moral high ground (“If you don’t progressively enhance you don’t care about users!”) I want to talk a bit about the practicality of said enhancement. This is also partially covered in Chapter 7 of Resilient Web Design which talks about the challenges we face towards the future.

I get that in this React-world there needs to be some education about where we are coming from. If some people think it’s OK to build a simple content website that does nothing when the Javascript doesn’t work, they need to be schooled. Obviously content websites need to be built on a solid HTML base. There needs to be a separation of concerns between structure, presentation and behavior wherever feasible.

The gist of the progressive enhancement logic is that everything can have a fallback, thus creating a web that is less likely to break and more accessible. When the Javascript fails there should still be server-side navigation. When your CSS doesn’t load you should still be able to use the website. The idea is that you layer tech on top of each other and when one piece fails you have a fallback.

The problem is that this is not really true.

Not everything is a content website consisting of pieces that can have “fallbacks”. Vast pieces of software are being built with web tech. Apple’s Pages in the browser is an entirely different beast than your average news website. Enterprises are moving every bit of their software to a web stack.

In theory most of the things in these software packages can be progressively enhanced. A data table can be turned interactive. A tree component can be made accessible, as evidenced by the WAI-ARIA examples on Github.

This is all nice and dandy until you actually try to make it work across different browsers, platforms, screen readers etc.

I guess I have a problem with hardline PE’ers who have only ever created simple content websites, and then take a “moral high ground” stance.

The higher the level of interactivity the harder it gets to create a fallback.

For images you can write an alt text. For video you can create transcriptions. But things get progressively harder and time consuming – as anyone who has ever done subtitling for a two hour conference talk can attest.

Some visual representations of data — like calendars, or scatter plot charts — make no sense to a visually impaired person. You could try to describe the data, but depending on the chart that is nigh impossible.

One fallback solution for some things is to build an alternate way to access the same data. For example, for a calendar that means a list view.

But when you reach a certain level of interactivity there’s just no way to keep the PE argument up.

For example, a lot of tools to create content itself are impossible to be “progressively enhanced”. There is no fallback for your canvas in a drawing app. How exactly do you apply PE thinking to something like Figma?

Last year I worked on a tool that is basically something like Hype in the browser. An animation tool with a timeline. How does this get a fallback? Even if you were to find an appropriate fallback for individual pieces (e.g. a progressively enhanced color picker) you wouldn’t be able to use the application anyway if one thing breaks.

If you’d spent any time trying to progressively enhance something that is that highly interactive, it basically means that you’re spending dev time for a situation that just doesn’t exist. Sometimes dev time spent on PE is just nonsensical.

The argument that it’s not possible to progressively enhance something is sometimes used too soon – but in my experience building highly interactive web apps there are plenty of situations where I can argue that no, it’s not going to happen.

A lot of my job is about making sure software doesn’t break, that we use the right (web) tech, and that we build accessible interfaces. But there are plenty of situations where I just have to tell PE hardliners that the story is just a bit more complicated than they think.
Resilient Web Design

January 28, 2017 - Posted in web - 1 comment

“Resilient Web Design” by @adactio is an important book. Many of the references are among the best writing I’ve read during years of learning about web design. My only critique that – as a designer of highly interactive applications – the example of PE is way too simplistic. But I guess that’s just where I’ve never agreed with Jeremy anyway.
Act your size

January 22, 2017 - Posted in entrepreneurship

Jason Fried on why there’s no need to put up a front:

Bullshitting about scale is only part of the problem. There’s an awful lot of resumé enhancement going on as well. Think about what’s really happening when you see, say, Apple on someone’s client list. Do you think the person really worked for Apple? Or perhaps it was just a small job for the Apple reseller down the street? Or they were on a conference call with someone from Apple once. I’ve seen it all.

I love this. We are hiring at our company and in job interviews I always like to ask people exactly what they did when they have some big name client on their resume.

I don’t really care so much about who the client was – what I want to hear about is the work that was done, and also the interviewee’s reaction when they are questioned about something like this. Do they immediately admit that it wasn’t that big of a deal or do they go on and fabricate some story that it was really important?

I am guilty of bullshitting myself. As an example I was once hired by Microsoft as a designer to help out developers during a hackathon. It was a one day job, around the time Windows 8 was released. I sent them a bill and I got paid, so technically I worked for Microsoft… but really what I did was just a really small thing. They could have hired any UI designer for that job.

But at the time I really wanted to show off that I worked for them by putting Microsoft as a client on our website in our client roster. Mono was a new company and we didn’t really have a portfolio. But on our website we put this client roster full of company names that would definitely ring a bell with a Belgian audience like De Lijn, Bpost, Cisco etc.

While technically we had worked for all of the clients in our client roster in some capacity, most of it was through other agencies. We eventually removed that section from the website. Looking back it was a bit shameful to boast about something that wasn’t.

These days we just try to show off the real work in real cases. The client names might not sound that impressive but we can back up what is in there. You can call our clients and ask them about the work and I’m pretty certain they will a) know us and b) have something positive to say. I think that’s worth more than some vague reference to a company that you once did a very minor job for.

This weekend I listened to part of an ATP episode with Chris Lattner who worked on Clang, LLVM and eventually Swift. When you were the lead on something as significant as Swift I don’t think you will ever need to make your resume look good. You can just list that one thing really. This strengthens my belief that you should just try to always do great work and eventually you will be rewarded.
A CSS nerd question about render scaling and viewport meta tags

January 19, 2017 - Posted in Uncategorized - 18 comments

We can set a site to be responsive with the standard meta tag to do so:

<meta name="viewport" content="width=device-width">

This will adapt the content to the viewport width. We can also explicitly set a width – this is pretty uncommon, but it’s possible:

<meta name="viewport" content="width=1024">

This will render the content at 1024. If your device has a width of 768 pixels (e.g. in portrait mode) it will shows the content at a smaller scale.

The reverse is also true, if your device has a width of 1366 pixels (e.g. an iPad Pro) it will show the content at a bigger scale.

The question

What if you want the content to render at 1024 pixels, but if there are more pixels it should render the content at it’s native resolution? Basically it would behave like a liquid website with a minimum width.

The only solution I can think of is to only show the meta tag when you detected the width to be 1024 or less on the server side.

Who has any ideas?

Why?

The use case for this is to get the best user experience possible for a web app that has a minimum width of 1024 (because of the content of the pages e.g. tables, datagrids, calendars), but that is not specifically made responsive, on as many devices as possible.

People with good eyesight could theoretically use the app at on a tablet in portrait mode – typically supplying 600 to 800 pixels. But they should really turn their tablets around for their own comfort.

People could also theoretically use the app on a phone by doing a lot of pinching and zooming. Think about a situation where you just have to change a single setting and all you have is your phone.

The app should render at its “native scale” on viewports wider than 1024 pixels. This is the case for large tablets like the iPad. I am also pretty sure there are some larger Android tablets on the market.

I can already hear some people asking “why not just make it fully responsive?”. The answer is that phone usage for the app’s use case is uncommon enough to not make it worth it to build a fully responsive web app.

This is a “cheap” solution to realistically use a web app on as many devices as possible without breaking the bank.

(P.S. Looking at the issues in the spec my theory is that a non-hacky solution to this is basically unimplemented in browsers at this point)
VR bits (2): VR accessories

January 11, 2017 - Posted in vr

At CES 2017, HTC announced the HTC Vive tracker, which is kind of an accessory to create other VR accessories. The idea is that you attach it to real-life objects to then use these in VR. For example you could attach it to a (special) baseball bat, which would enable you to bat in VR. The demo also included a rifle, which would then make you feel like you are shooting a real gun, since you’re holding a rifle instead of just a pair of controllers.

As the Vive matures, there’s more and more accessories coming for it. There were controllers for your feet so you could kind of simulate “walking”. Even if you basically have to stay in the same room.

I even heard about some company making a jacket that emits heat, to kind of simulate firefighting. I’m not so sure about this but there’s definitely a lot of people trying a lot of different things.

I’m looking for a good opportunity to try out the Vive. I tried it on at Kikk, but only for a brief moment. It’s about €950 which is a bit steep to just go and buy it, even when I already have a gaming PC that could drive the graphics.
VR/AR bits

January 10, 2017 - Posted in vr
- TPCast is a wireless adapter for the HTC Vive that allows you to use the device untethered. According to Norman Chan of tested.com it works near flawlessly (Youtube video).
- Here’s a player in the VR Space I did not hear about yet: ODG. They raised a $58 million financing round recently. Their history seems to be in military and working for NASA. Check this YouTube video to see their impressive augmented reality glasses.
Why I bought a 2015 Macbook Pro

December 27, 2016 - Posted in computers - 1 comment

In my last post computer conundrum I posted about the difficult choice of which machine to get. Over the last few weeks I’ve been thinking about this problem, researching alternatives and considering every option.

I use my computer for interface design work. In my free time I do some video editing. I want a machine that can do both in a fast way.

I love macOS because it has the right software that I need to do my work. I’m talking about apps like Sketch, Transmit and Apple’s iWork suite. I’ve researched switching to Windows but from a software standpoint it’s just not an option. The overall software quality is just that much better on the Mac.

Mac Pro

Looking at Apple’s product lineup you would think the Mac Pro is the way to go for my situation. It’s marketed as a video editor’s machine of choice. But it’s been over a 1000 days since the trash can Mac Pro was released. It’s also not much faster than the iMac on a single thread. You’d have to get an external screen if you buy it making it an extremely expensive proposition. In terms of bang for the buck it’s probably the poorest choice you can make.

iMac 5k

The early 2015 iMac 5K is a pretty neat machine and possibly the best thing you could have bought nearly two years ago, but considering it today it’s clear that a laptop and external screen will net you a lot more bang for your buck.

It has to be said that this is the easiest way to get a reliable 5K screen if you have money to spare and don’t want to do a lot of research though. If you can get a good second hand deal and you work from one location it is an excellent computer.

The most powerful laptop you can get

But for me, even if I had a desktop Mac, it’d still need a laptop. A lot of my modern work life is mobile. If I can avoid the hassle of syncing 2 machines, even better. For my kind of usage the ultimate setup is the most powerful laptop I can get.

Apple announced the 2016 Macbook Pro lineup last month, and it’s not appealing to me at all. I want to buy a new computer, but it’s not going to be that 2016 model. I chose to buy a 2015 Macbook Pro instead.

So, why the 2015 model?

I did a ton of research on the new 2016 Macbook, listed all the pros and cons, and decided to not get it in favor of a 2015 Macbook Pro. I have a deal on a well-priced 2015 with the Radeon R9 graphics card now.

The flaws of the 2016 version are well documented by now but here’s a few: the touch bar is pretty much useless, battery life is poor, you have the dongle situation, the trackpad is too big, and it’s not much faster than the 2015 edition. Next to that you are paying a premium for a USB-C future that is not there yet.

Sounds enticing? Let’s dive into a few of the details.

Touch bar

The Touch Bar is Apple’s #1 feature on the new Macbooks. As an interaction designer I applaud trying to come up with new ways to control computers. However this idea is in opposition with the principle of direct manipulation – the main reason that iOS became such a success.

The touch bar sounds like a nice idea in theory, but the thing is that I never actually look at my keyboard. I’ve gotten so used to manipulating my laptop using my keyboard that I rarely have to look at my keyboard. Introducing looking at a keyboard – and then back at the screen to see the result of your input – introduces a weird way to work with your computer. Suddenly you have to repeatedly move your head from one location to another.

On top of that, the experience is inconsistent when you move to a “docked” situation. There you still have your normal keyboard with function keys. So if you get really really fast with the Touch Bar your skills don’t transfer over when you are using a big screen in a docked situation.

Touch ID/Apple Pay

Touch ID integration seems nice but typing your password is only a minor hassle. Apple Pay is nonexistent in Belgium so that “feature” doesn’t matter to me.

Battery life

Reports about inconsistent battery life on the 2016 Macbook Pro are abound. Apple even removed the remaining battery life indicator in a recent software update because they couldn’t get it to be accurate. I have a lot of battery problems with my current laptop and it’s exactly what I want to fix, so I am not buying a laptop that has lots of reports of poor battery life.

#donglelife

In some way I’m appreciative of Apple for pushing the envelope and going all-in on USB-C. This Medium post has some very cool ideas on what a future with only USB-C would look like. But the current situation is that I own zero USB-C devices.

When Apple eradicated FireWire I never even owned a FireWire device. When they removed CD drives from their laptops I hadn’t touched a CD for months. When they removed the Ethernet port I was on WiFi most of the time anyway.

This is different though: this is not removing something that I don’t use. This is adding the hassle of dongles for all kinds of ports that I do use every day. I have a ton of USB-A devices and it’s rare that I’m not importing photos or videos from an SD card. I don’t want to have to carry around dongles; and I don’t want to attach some kind of monster adapter to instantly destroy the aesthetics of your setup.

Not much faster

What is also important to note that the Macbooks have not really gotten much faster in the last few years.

Whether you have a 2012, 2014 or 2016 Macbook Pro doesn’t matter so much because they have about the same types of CPU and RAM. The differences are very minor.

For years the Apple community has been hoping that new Macbooks would have some major Intel processor upgrade but it’s just not happening. The 2016 Macbook Pro’s are using 2015’s Skylake architecture.

This is while Windows laptops with the new Kaby lake architecture are being released. How is is that Apple’s hardware supply lines are way behind other manufacturers?

The only theory I have is that they are moving away from Intel, somehow managed to run macOS on ARM, and will be releasing new hardware soon that uses their own chips exclusively.

On the graphics card side the new Macbook Pro is disappointing as well. When other manufacturers are releasing laptops that contain nVidia 1060 chipsets, it is barely possible to play the latest games on a brand nw €4000 Apple laptop. Really?

Conclusion

The 2016 Macbook Pro is not a good buy. I am going for the 2015 machine, because it is half the price and does not have all the disadvantages listed in this post.

I appreciate what Apple is trying to do to push the envelope, but I hope they realize have some more work to provide a complete package. Next to better choices on the laptop front, I am looking forward to revamped iMacs, a Mac Pro that is competitive and an external 4K screen that isn’t as limiting as the LG Ultrafine 4/5K – and that you can actually buy.

In the meantime I’ll do with a 2015 Macbook Pro.
Computer conundrum

November 6, 2016 - Posted in computers - 2 comments

I have a retina Macbook Pro from 2012, and it has served me well. However, it’s practically dying (especially the battery), and I need a new Macbook.

The recent Macbook announcement got me thinking: do I replace my Macbook and start carrying dongles around, or do I try to find an alternate solution?

Apple announced three new Macbooks, where the first one (without the touch bar) is basically like a pumped up Macbook Air, and the 2 other ones are lighter than my current laptop, not necessarily much faster, and miss all the ports I regularly use.

When I configure the Macbook the way I want it, it’s going to be around €4000; and it won’t actually be much faster than my current laptop. The only thing that would become better is graphics performance, but from what I can tell that just means the Macbook will finally be able to run games a bit better than it used to. The performance won’t come anywhere near what you can get from a Windows gaming laptop.

My current inclination is to either pick up a refurbished 2015 Macbook Pro from eBay; or to replace my laptop’s battery for the second time.

Now, another point. When working at home sometimes I want a bigger screen. I find that a big screen can be very helpful when coding. If you are used to working on a retina screen, going to a non-retina one (e.g. the Dell 27″ I am using at the moment) is pretty jarring.

However, just buying a 4K or 5K display and attaching it to an older Macbook is a no-go. Depending on the specific combination of screen and Macbook you either have the problem that the older Thunderbolt connections can’t handle the amount of pixels; and when they can, you are stuck at a max frame rate of 30 frames per seconds.

Furthermore you have to deal with the crappy interfaces that Dell/Acer/etc provide to set up your screen.

One solution is to get the 2015 iMac 3.3Ghz, which I could buy together with a refurbished Macbook for around the price of a new Macbook. The good thing here is that it actually contains a semi-decent graphics card, and that it’s basically a much faster Mac than the Macbook is. This might be helpful when editing large Sketch documents, which is basically my daily job.

However, this will put me in a situation with 2 computers again, which I’ve had in the past, and which I wasn’t happy about. Things might be better today though with macOS Sierra’s desktop sync.

An Apple-built external 5K Thunderbolt display has long been on my wishlist, but it just doesn’t exist. Apple’s recommendation is to buy an LG UltraFine 4K Display. This has a worse resolution than the iMac and I’m not very convinced by its design.

I’ve also contemplated hacking my gaming PC to be a Hackintosh. Basically my gaming PC blows everything out of the water spec-wise (it has a quad core 4Ghz processor and a Geforce GTX 1080). Successfully doing a multi-boot setup where I can use it as a Mac will give me a machine that is basically faster than a Mac Pro.

The counter-argument to this is that I don’t feel like spending my weekends trying to find the right drivers to get basic things to work. I don’t want to have some hacky setup where hardware and software are not matched together. There is a reason I use macOS and not Linux; the same reason I use iOS and not some custom Android ROM.

It’s quite bizarre that after 4 years the Macbook that Apple announced is not really appealing to me; the touch bar looks like an interesting innovation and I can’t wait to play with it, but I’m not ready to spend €4k and carry around 4 dongles with me. I like that I have an HDMI port, SD card slot and 2 USB-A ports available at all times. There’s actually not a single port on my current Macbook that I don’t use regularly.

I’m pretty sure a lot of people are doing similar research, so please, share your thoughts.
Untitled

October 7, 2016 - Posted in Uncategorized

I used to read and collect articles about new tech like a madman but these days I can’t be bothered to read most new things.

The most interesting reading is really not related to tech at all. I was just reading this article about an author whose book went out of print – and he only knew it a year later. It’s an interesting look into the publishing industry where as an author you are basically waiting for that royalty check to drop.

Another example of an article I liked: a few months ago I was really intrigued by this article about a mother who realised her daughter isn’t the clever kid that she expected her to be.
iPad Pro: conclusions

August 6, 2016 - Posted in Uncategorized

In June I got the iPad Pro, and I had this goal of writing about the iPad Pro every day. I wrote about 10 blog posts… and then I gave up.

The thing with the iPad Pro is that, if I’m really honest, is that it’s rather useless for my purposes. Which is why I’m selling it (see here if you are interested).

In a lot of ways it’s a great machine – just not for me. In a previous blog post I wrote about who it is for.

The promise of “Pro” is that it’s for professionals, helping you do to your job. For me, a guy who works in the intersection between code and graphics, trying to use it for my kind of productivity work is an exercise in pain.

Given the current way I work, I need a file system; I need versions of what I’m creating; I need exact assets where I know exactly the color profile, the size, SVG export settings and whatnot. I need code that is checked into a versioning system, that can work with modern Javascript task runner workflows. I need multiple windows to test the output of my code.

The iPad does parts of this, but these parts don’t work together well. Every app is an island and trying to transfer data from one app to another works terribly. Organising your data is tough, because the core idea is that you data is tied to a specific application.

If you create an asset it’s tied to a specific app. This makes it hard to combine things across apps. Whatever I am usually making involves a massive amount of text and image files that need to be organised in one location. How to fix this? O wait, a file system.

In April, MacStories posted a video with their iOS10 wishes. At 1:10 you can see the exact feature that would make it more realistic to do any sort of web design on the iPad:

I had high hopes that Apple would announce something like this at WWDC 2016, but they didn’t. We basically got very little.

iCloud Drive, probably the core mechanism for trying to get apps to work together, is in a very sorry state. If you try to work on an iPad I hope you like flat file hierarchies.

One of the goals of buying the iPad was to see how the iPad Pro could help as a productivity tool for me. The reality is that it’s not there yet, and I’m not sure if it will be without a change in direction.

The thing is that not even talented app development teams like Serif – who showed off this really cool Affinity Photo for iPad recently – can fix fundamental flaws that are really part of the OS. If you are eventually using this to edit your professional photos, you’ll need a file system to sort out the ones that are RAW files, the ones that are edits, the ones have JPG equivalents. And you’ll need a way to back up this data that doesn’t rely on a single cloud service. Anything else would be unprofessional.

Apple says the iPad Pro is the future of computing. At the moment, it’s not. I’m hopeful for the future, but for now, back to the Mac.