Building Responsive Data Visualization for the Web. Bill Hinderman
Чтение книги онлайн.
Читать онлайн книгу Building Responsive Data Visualization for the Web - Bill Hinderman страница 4
Название: Building Responsive Data Visualization for the Web
Автор: Bill Hinderman
Издательство: John Wiley & Sons Limited
Жанр: Программирование
isbn: 9781119067207
isbn:
Who cares if they’re in the bathroom?
Mobile device users now represent the majority of all users. Those of us who work with data visualization sometimes assume that a large portion of our content can still be tailored to larger, more capable screens, but we do so at our own peril.
The visualizations we create and the web applications in which they live are now consumed on devices from 320px of width to massive 5120px-wide retina screens. Therefore, we have to ensure that our content is consumable on as many devices as possible.
Because it isn’t possible to service all of them, it’s important to identify the ones that matter most to your own subject. I encourage you to do some tracking of your own website’s most frequent user agent and screen resolution ranges. Focus on optimizing for 80 % of your user base, or even 50 %. It may be smaller than you assume.
Mobile Web Design
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 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?
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
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 (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.
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.
СКАЧАТЬ