After taking eight of the previous twelve months off from the haphazard blogging I do here on Ditchwalk, I knew when I picked up the mouse again that I needed to redesign the site to reflect a broader but also more personal focus. Less platform and profession, more craft and art. Less business and commerce, more being and seeing.
What I did not fully comprehend until I took up that task in February was that a sea change had taken place in computing over the previous two years, and that I would need to factor that change into the redesign of Ditchwalk. (I had noticed aspects of the change, but because I can be fairly slow on the uptake I didn’t perceive those dissonant experiences as part of a fundamental metamorphosis in computing.)
In retrospect, the loudest and most prominent signal came from Microsoft with it’s release of Windows 8. Unlike previous versions, Windows 8 came with a default desktop environment that emulated the screen of a mobile device, including touch-sensitive tabs perfect for use on tablet displays — then an exploding technology. As someone who has never owned a smartphone or tablet I reacted with a practiced and oblivious roll of the eyes because Microsoft is always trying to drive computing in directions that favor its various monopolies, often with disastrous results. What I did not realize was that the decision to try to kill off the desktop PC was not a sign of active corporate idiocy, it was a sign of reactive corporate idiocy.
During the two years following the release of Windows 8 Microsoft first denied it had made a mistake, then belatedly began trying to undo the damage it had done to its own brand by once again attempting to force everyone that used its products to adopt another self-serving interface metaphor. Watching this ritual inanity play out further convinced me that Microsoft’s initial decision was just another blind lurch by a company that cannot perceive its own meaning in the marketplace, but that was a mistake on my part.
On Being an Idiot Myself
While I will always remain a desktop user, more and more computing time is being devoted to devices that have limited utility as productivity tools and maximal utility as portable entertainment centers. To the extent that Microsoft and others clearly saw this sea change coming and moved to follow the market, they’re to be given credit. On the other hand, having worked in the software industry myself, I can also say that any time a feature is missing from a piece of corporate software that omission is intentional. If Microsoft wanted to give people the choice of using a mobile or desktop interface it could have easily done so — witness the fact that it is has retrofitted that option in its latest Windows 8 update, and that it’s going to do so to a greater extent in the next full-blown release. Microsoft’s goal with Windows 8 was not simply to acknowledge change but to drive it, and once again that corporate greed proved counterproductive.
While I was busy looking down my nose at Microsoft and missing the bigger picture, and Microsoft was busy positioning itself as the post-PC company, the post-post-PC company, the PC company, and the mobile-but-also-productive-PC company, I did start noticing that some of the websites I regularly viewed were remaking themselves in ways that didn’t seem to work on my desktop machine. The light bulb finally went on — albeit dimly — when PC Magazine post-ironically refreshed its own site using an interface metaphor similar to the tab-driven design of Windows 8. On a desktop browser the site is now an incomprehensible mess: tiles piled up like blocks on the left, a menu of trending headlines stacked on the right, the whole bloated, fractured mess scrolling in its entirety when you try to explore the page. Other than the navbar at the top, gone is any semblance of the old website metaphor in which the mouse was the key orchestrator of functionality.
Only when I began finally changing Ditchwalk over did I realize how late I was to the party. My wake-up call came in the guise of a phrase I’d never heard before, which I ran across when I began looking at new WordPress themes from the company I’d used for the initial launch. Over and over again I kept reading that some of the themes were mobile responsive, which at first seemed completely superfluous to my own needs. Sometimes it really is amazing just how wrong a person can be.
There is nothing more important happening right now, today, than the large-scale translation almost every aspect of computing to a mobile metaphor. The vast majority of people who used to use desktop computers did so only because there was nothing else available. They didn’t need the computing power, the memory, the screen real estate, the productivity apps — none of it. All they needed was a way to check email and engage in whatever social networking they were playing around with at the time, which was only possible using a thirty-pound monitor, a PC case the size of a microwave, and a bunch of wires and cables perfectly positioned for breaking a neck. Today most people can do all the computing they need to do on a handheld device in various form factors, the functionality of which most closely represents a touch-screen TV. You push a virtual button and the pretty screen shows you pretty pictures. All of which means you never have to leave your online persona at home again, sobbing into its pillow.
Mobile-Responsive Design in Action
Because social networking has a vested interest in going where they eyeballs are, and each new social site tends to grow with each new successive generation, routine blather about the sincerest form of insincerity yet invented obscures the fact that mobile and social have nothing inherently in common. They are, literally, completely separate concerns, even as they clearly overlap a great deal. Why is that important? Because if you’re putting yourself on the web in any capacity you need to pay much more attention to the stampede to mobile than you’ve ever paid to social networking and integrating your content into social sites. The latter requires a few buttons, the former requires and entirely different approach to web design.
If you’re on a desktop machine you can see what I mean by doing the following:
1) If your browser window is maximized (full-screen on your display), adjust it so that it can be resized. In Windows this is usually accomplished by double-clicking the top of the window or by clicking the ‘restore down’ button at the top right. (Depending on when and how you last resized the window the change may be slight.)
2) With your mouse or other pointer, grab the far-right edge of your now-resizable browser window and slowly move it to the left, shrinking the width of the window.
3) As you do so, watch how the elements of the Ditchwalk web page change, moving from a full-width display useful on desktop machines to a vertical, in-line metaphor perfect for tablets and smartphones.
That’s mobile web design in a nutshell. Instead of forcing tablet and smartphone users to pan and scan and pivot their displays to find the link they’re looking for in an ocean-sized page layout, mobile web design now accommodates those users by shrinking content and making it linear. The downside for desktops users is that while such transitions work great from large sites to small, the reverse is not true. You can’t scale up a well-designed mobile site, which means what you’re going to be confronted with more and more are huge images page elements that seem almost absurd on a desktop display.
For example, right-click this link and open the site in a new resizable window. What at first seems like cartoonishly large content shouting at you in a full-width window suddenly becomes appropriate as you shrink the window size until you reach its minimum-allowable width — which is, not surprisingly, the size of a smartphone display. (Oddly, while PCMagazine.com changed their design metaphor to reflect the move to mobile, the site itself is not mobile-responsive. Shrink the home page width and the content doesn’t adjust to the new size.)
Accelerating the move to mobile is the fact that inline web design puts advertisers back in the driver’s seat where they want to be and always have been in linear mediums like TV and radio. On web pages designed for desktop displays there’s nothing to keep users from mentally ignoring ads that are displayed along with the content. Yes, you can use pop-ups, or take over the screen entirely for thirty seconds, but doing so causes users to hate you worse than they’ve ever hated anything in their lives. On smartphones and tablets, however, delivering content inline means you can also include interstitial ads that can’t be avoided. Yes, users will simply scroll past them, but they’ll still have to consciously notice the ad for a spit second, which is all advertisers want. (Advertisers are, by their nature, very needy.)
If you have content on the web, whether you’re a tiny little site or behemoth, you need to make that content mobile-responsive because that’s where the eyeballs are going. You don’t have to dumb down what you’re saying, but you do have to adjust how you say it because people are digesting content in new ways. It’s not hard to do if you have the right tools, and you can buy the right tools for pretty cheap, particularly considering how costly it would be to build them yourself. If you do convert a site or put up a new site that’s mobile-responsive there are also plenty of ways you can see what those users are seeing even if you don’t have a particular devices yourself.
In short and long the move to mobile is happening and will continue to alter the visual design of the internet for the foreseeable future, until the conversion is complete. If you want to meet the new display requirements of current and future users that means taking time to develop a mobile-responsive site, but it doesn’t necessarily mean anguish. I got the results I was looking for with a simple, off-the-rack WordPress template that I tweaked to my own needs. In doing so I had to think a little differently, but it wasn’t hard. To the extent that it was time consuming I consider that time well spent because I now have a simpler site that is useful to more users.
— Mark Barrett