A brief history of web design — part 2.5: mobile

31.10.14

During the nineties and up to the mid zeros, mobile was a whole different beast than desktop web.

PDA's had HTML browsers very early, starting with the Apple Newton in 1994, Windows CE devices and Nokia Communicators. These devices mostly followed the desktop evolution in browsers and display size/color depth apart, I don't count them as "mobile", because their usage required one to be stationary and concentrated, more like today's tablets.

Phones on the other hand, even with their tiny green screens were always available while mobile: standing, walking, even talking to somebody else. Very few phones understood HTML and even less could display a website similar to what you could see on your desktop, at least until the arrival of the iPhone in 2007.

WAP was the only viable alternative if you wanted to reach any kind of sizeable audience, and the most forward-thinking of businesses started offering a WML website.

The first mobile web attempts were riddled with proprietary standards such as i-mode. Microsoft released Mobile Explorer in 1999 which could render HTML but due to low adoption the project was abandoned 3 years later.

Opera was the pioneering browser that era and it first appeared on a phone in 2003 (Nokia 7650), and Microsoft had it's Pocket IE for phones.

It's very hard to find screenshots of mobile websites of that era, and I'm not sure these are not earlier, or later. I just infer the era from the platform they come from.

Mobile optimized websites didn't look all that different either from how their desktop counterparts did ten years earlier, nor from the contemporary wap sites (which due to wider audience are more popular), and that is due to a multitude of reasons: Smartphones are still rare, processing power is virtually non-existent, wi-fi is not available on phones, GSM/GPRS data is slow and prices per kb are ridiculously high.

Flat colors, if any, blue links and tiny images made to fit in the double-digit resolutions of the day. The homepage usually had only a bunch of links that directed to other pages.

I managed to light up my Symbian S60v1 from 2003 and connect it to the internet. I tried to load up pages that I know haven't been updated in years, as well as some wap sites that are still available.

Desktop websites on mobile load slowly and many things like Flash, which is still ubiquitous back then, don't work at all. A rich web experience on phones is still a few years away.

Nokia was the first to adapt WebKit to mobile and included it with their S60 phones in 2005. Opera continued to release it's mobile browser on both Windows Mobile and Symbian. Opera rendered websites almost exactly like a desktop computer, and had clever text reflowing techniques and a relayout engine to make reading easier. None of those options were exposed to the web developer however, so these advances made almost no impact on the world of web design. It wasn't until the iPhone and 2007 where a developer could specifically target a handheld platform. Media queries, touch events and the viewport tag started then and kicked off the era of the mobile website.

Meanwhile, the wap protocol started to die, and WML sites moved on to simple HTML websites. The nomenclature and protocol was artificially kept alive for a few more years by carrier-run proxies (google also has a similar service) that translated the web to wap for older phones. These stripped down, mobile only websites, still (wrongly) called WAP sites, slowly gained effects, glows and shadows, to resemble their desktop counterparts.

The m-era

The special API that Mobile Safari (the iPhone browser) exposed allowed developers to create tailored mobile experiences for the iPhone and the m-era began.

Links are still blue and underlined, but buttons try to look like buttons, and the overall layout tries to use the whole screen effectively, instead of just flowing down, or wasting horizontal space.

As the years passed and as HTML slowly became a viable cross platform application framework, mobile websites are starting to look more and more like native apps.

Three reasons for that:

  1. That's the norm on the desktop too, even website developers rebrand their job description as web application developers
  2. Mobile Safari helps. The first iPhone doesn't have apps yet, so adding a website to the homescreen is the only way to extend your phone. It isn't too bad though, because features like locally cached splash screen, touch events, and the ability to hide the address bar makes for an acceptable experience. This leads to the creation of multiple iOS-looking html widget sets, which are subsequently overused in web sites, even on other platforms.
  3. Most mobile sites are really "iPhone sites" targeting only the mobile Safari anyway, so why not make it look at home there? Other mobile phones are usually redirected to the "wap" site.

We are now in 2010 and the mobile website lives on without anybody realising its days are numbered. While media queries were supported by the first Mobile Safari browser on the original iPhone 3 years earlier, building a webpage that adapts to the screen size isn't common yet.

Then, one Tuesday in May 2010, Ethan Marcotte publishes this article and puts the first nail in their coffin.

Since shortly afterwards mobile and web design converged, you will read what happened in the third and last part of the brief history of web design.

Technical PS

Loading the Jargon File I realized one thing. The website, created in plain old HTML, without abusing tables or floats to create any kind of layout works very nicely in small screens, because plain HTML is responsive by design. Layouts aren't, and Apple engineers decided to break the few old document styled websites (or rather make them difficult to read) in order to preserve the viewability of the thousands of layout based websites. It's the right decision if you see it like that but I think it's a false dichotomy.

I'm sure it's possible to detect layouts and their minimum acceptable width instead of just hardcoding 960px. Especially if the whole <body> is less than 960px, setting the viewport to the width of the body, instead of showing the whole webpage as a tiny thumbnail on the top left is trivial

Here is how the Jargon File looks on a real 360px wide screen next what it looks on an actual phone.