Читать книгу Building Responsive Data Visualization for the Web - Bill Hinderman - Страница 5

For years, web teams have designed and built for the desktop. Mobile, if considered, was an afterthought, or a port of the desktop version. The truth is, this made perfect sense for a long time – users weren’t yet there, browsing the web on mobile phones was painful, and carriers controlled access to the web on their devices. What’s more, network speeds were so abysmal at first that it was nearly impossible to load anything more complicated than text.

Over the past few years, however, the web landscape has shifted so dramatically that an awareness of mobile as equal to, or even greater than, desktop means greater opportunities for growth, and a better user experience.

The Way To Build Today

The web has always been a mix of simultaneous (and often competing) priorities: performance, design, marketing, advertising, and SEO. With the mobile web overtaking desktop browsing, a new contender has appeared: device diversity. Table 1-1 displays the fragmentation of mobile device platforms (www.gartner.com/newsroom/id/2335616).

Table 1-1: The popularity of mobile device platforms by the end of 2012

While there is a clear front-runner here, no single group can be reasonably ignored. Keep in mind, though, that these are global figures. Regional market share can differ immensely. China, for example, is the largest smartphone market in the world, and Android holds a market share of over 90 % there.

The pie-in-the sky goal is obvious: How do we create an experience that works for everyone everywhere? The reality: How do we create an experience that works for the most people possible?

The Separate Mobile Web

Another frequently used solution for mobile is to create an entirely new mobile web experience. Instead of scaling down the desktop website, teams create what is known as an m.website.

For some time, this was the standard. It required extra work, but allowed for a uniquely mobile version of a website to become reachable by users. This methodology became so popular, in fact, that the Internet Corporation for Assigned Names and Numbers (ICANN) created the .mobi top-level domain in July of 2005. It was sponsored by some huge names in the web, including Google, Microsoft, and Samsung.

One person rather important to the web expressed the opposite opinion:

It is fundamentally useful to be able to quote the URI for some information and then look up that URI in an entirely different context. For example, I may want to look up a restaurant on my laptop, bookmark it, and then, when I only have my phone, check the bookmark to have a look at the evening menu. Or, my travel agent may send me a pointer to my itinerary for a business trip. I may view the itinerary from my office on a large screen and want to see the map, or I may view it at the airport from my phone when all I want is the gate number.

Dividing the web into information destined for different devices, or different classes of user, or different classes of information, breaks the web in a fundamental way.

I urge ICANN not to create the “.mobi” top-level domain.

Tim Berners-Lee

Download the App

Another way to handle the mobile web is to encourage (read: force) an app download when users reach your website on a mobile device.

Apps are a terrific way to utilize all of the rich functionality offered by feature-rich smartphones, and they enable you to leverage all of the hardware available.

However, every mobile operating system requires a separate development team, and 100 % overlap in development work for every new feature.

Eyes Closed, Ears Plugged

The simplest way to handle any problem is to not handle it. A desktop website with desktop conventions and desktop sizing will show up on mobile.

If you believe that your web application will never (or at least rarely) end up being used on mobile, this is the path you should take.

Also: thank you for accidentally buying this book.

Responsive Web Design

Responsive web design (RWD) is an approach to web creation that aims to optimize the user experience on any device without resizing, cropping, panning, or being shunted to an app. A responsive website adapts the layout to the device on which it is viewed using CSS media queries, fluid grids, and flexible multimedia.

Spoiler: The entire next chapter is about this approach.

A Taste of Progressive Enhancement

Figure 1-7 shows Tim Berners-Lee’s first website once again, but this time on a screen from 2014. As you can see, it looks totally fine – perhaps a bit small, but no content is missing, no styles are broken, and everything is there.

In this case, all we really have is content. CSS didn’t exist. JavaScript didn’t exist. It’s due to this lack of current technology that the website still works on a device so different from what it was designed for. However, we can glean an important lesson from this: The basic need of a user is to read and write to a website. Anything more than this is nice, but not necessary.

This concept is called progressive enhancement. It is based on this core idea that the fundamental purpose of a website is to convey its content; everything else builds upon that, enhancing this purpose of meeting a user’s “needs.”

Figure 1-7: The first website (1990), displayed on an iPhone (2014)

The absolute minimum experience is always text. There is no technical or design thought given to this level of a website. In addition, HTML is fault-tolerant in various browsers; and as such, the textual content of a website will always be available in this basic form.

The next level of the user experience comes from the page markup itself. HTML semantics provide additional meaning, or meta information, to provide context to the textual content. For example, even though paragraphs and quotes may be displayed in the exact same way, a <p> tag represents a paragraph of text to a browser, while a <quote> tag represents a quote.

The third level can simply be called design. This is where CSS styling, images, and multimedia come into play. As with HTML, browsers are fault-tolerant with respect to CSS, so they can simply ignore rules that are either malformed or that the browser does not support. This is where you can differentiate the style of headings from paragraphs from quotes from links, and so on, thereby turning an informational experience into a beautiful one.

At the next level we layer on interaction. This is where JavaScript comes into play, and we enhance the aforementioned behavior to clarify, speed up, or delight the end user. Distilled, the principles of progressive enhancement look like this (see Figure 1-8):

● Basic content must be accessible to any browser.

● Semantic markup contains all web content.

● Layout and design are provided by externally linked CSS.

● Behavior enhancement is provided by unobtrusive JavaScript.

Figure 1-8: Each layer is built upon the preceding one, with the core idea as the foundation.