Mobile First?

One of the recent catch phrases in web development these days is “Mobile First”. The idea behind it is that since mobile now comprises the majority of web traffic, that’s what should get our most attention.

To many web designers, mobile first means “do a mobile layout first and then worry about the desktop experience later.” As a result, these designers give up the freedom that having a blank canvas affords. In other words, their designs look overly simplistic when viewed on a large device.

Should it take many screens of scrolling to find the information I need?

We fought for this

I started building websites professionally in 1996, when dial-up internet was the norm, and layouts were done using HTML tables. Once a page size exceeded 200KB, it was considered too large. We designed for 640 pixel wide screens at first, and if you happened to have 800 pixels on your CRT monitor you learned to live with condensed layouts.

Imagine my delight when CSS allowed designers to really work with the screen size instead of against it. Soon you could use fancy graphic backgrounds, custom graphic buttons, even rollover effects which didn’t require JavaScript programming.

Along the way bandwidth steadily increased. Nowadays a single homepage can easily exceed 10 MB and nobody complains. In the right hands, this can result in very beautiful experiences on the web.

The better way: User First

Websites are for people, not devices. If you remember that, a lot of the building blocks become easier to craft:

  • User interface isn’t just simple—it should be always organised to take advantage of the space available so the user can get more done, quicker.
  • Use less data if you can provide a comparable user experience. Compress your scripts. Lazy load your images. Choose the right image formats. Use an adaptive image compressor on your server to serve smaller images to mobile users.
  • Make it pretty and then simplify for mobile. People simply like to see graphics and the simple fact is that larger screens allow for more. Make sure it’s appropriate, but let your creative muscle get some exercise.

Web design is a craft, and it is communication. Embrace your end user and you will enjoy your job, and your users will enjoy what you produce.

Adobe: It’s not too late to learn from Coca-Cola

Edit: this article was written prior to Coca-Cola’s scandal in 2021 and is not an endorsement of everything the company does. Give credit where credit is due, I say.

Another year is gone now, as is “Adobe Flash Support”. People all over Twitter are reflecting on what they miss about Flash and I find it curious because the software still exists as Adobe Animate and it is still able to do everything Flash ever did, and more. Being the year end, I believe it’s time for another exercise in hindsight. I’ll spare you any year-related puns at this point.

As I reflect on all this I have come to an epiphany:

If Flash belonged to the Coca-Cola company it would be going strong today.

Remember New Coke? I would encourage you to review the story if you weren’t around in 1985. I see many parallels between that saga and the one of Adobe and Flash.

Like Coca-Cola experienced, Flash was in a big decline in its own world. Apple had disallowed the Flash plugin from their devices and there were a few “security issues” uncovered. Losing popularity, both companies felt it was time for a drastic change. Coca-Cola famously changed its formula. Adobe’s solution was to change the name of Flash IDE to Animate.

When “new Coke” came out, the brand was on everyone’s lips and they received a lot of negative publicity—just like Flash. What Coca-Cola remembered at that point is that Coke is not just a product. It is a brand which people loved. They wisely back-pedalled, and not only did they restore the old formula but they used it as a springboard for renewed marketing efforts and came roaring back more popular than ever.

Today, Flash is on everybody’s lips (in the web world at least) and Animate is just a verb that people can do with almost any software out there.

So will Adobe learn from its mistakes…

…or will they just let Animate continue as a discoloured droplet in the Creative Cloud?

It’s not too late to rebrand again. Flash was not just a product, it is a brand synonymous with creativity and fun on the web. Whether they call it “Flash Bang” or whatever, Adobe would do well to reconnect with that web nostalgia and bring back the Flash name. If all the old consoles can do it, they can too.

New Confidant Website

I’ve had a slow couple of months business-wise, but the benefit of that is I can work on my own projects. I am happy to report that I have just completed a new website for myself. My WordPress blog (you are here) has not changed, but you will notice that my top-level site has been updated to be completely mobile-compatible using modern day technologies. My previous site used Flash for its primary experience and did have a mobile-compatible fallback but this was never ideal, especially as today’s browsers are making it more difficult to use Flash.

So—the new site is built using the UFront framework. This is a very interesting and useful tool because it uses the same Haxe source code which compiles for both client (Javascript) and server (PHP). The framework is able to cache resources such as the site template, and it builds pages client-side whenever possible. It will remotely load only the data it needs to build each new page. The result is that the site is super fast. If you watch your network activity as you browse my portfolio, you will see that each new page requires only a few kilobytes, and browsing previously viewed pages will have nearly no network activity at all. If JavaScript is disabled, the site looks identical and pages will be built server-side instead.

For graphics, the site detects high-resolution (e.g. “Retina”) devices and serves high resolution images to them if they are available on the server. The top-level site navigation features a single SVG graphic for the menu. The graphic is embedded in the site template, where it serves as a graphic library allowing me to have the same display code used for both the menu and the headers. Animation effects are achieved using only CSS3 transforms, which saves the user from having to download any JavaScript libraries.

Something I wish was different is that Webkit-based browsers like Chrome and Safari for desktop don’t render fonts nicely when perspective transforms are applied to page elements. I was able to remedy this fairly easily for portfolio items, but pages at the second level of my hierarchy are a bit fuzzy. My hope is that these browsers make improvements which remedy this for me.

As a benefit to the Haxe community and a thank you to other people who provided coding help, I have released my full UFront source code on Github.

Thanks for reading!