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:

      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.

      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.

      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.

      Summary

      The Internet itself is shockingly old – a military invention from the middle of the last century, but the web that we know today is just pushing 25. That web has come a long way since Tim Berners-Lee’s research in the 1980s and first website in 1990. On the back of this technological shift, entire industries have been born, and with it, the medium of the web has grown tools that let us create complicated, beautiful, and all-inclusive experiences.

      All of this history has led to a point at which thousands of different devices can get on the web. For many of these, we can create something unique and beautiful using HTML, CSS, and JavaScript. However, the layers of a web project need to be thought of in exactly that order:

      HTML as markup

      CSS for design

      JavaScript for rich interaction

      Interaction

---

Скачать книгу