The medium of the web behaves quite differently than, for example, paper or film. It works frameless, it adapts. In principle, it is available on any device and in any operating system. It is neutral, does not want anything, and does not pretend anything. The structure you need to give your website and code is only for the rendering software, the browser. The browser has become the most important and widely used software on all devices and systems. For this reason, it also offers its user a myriad of extension modules, all of which can adapt the presentation of your website to the needs of the user. The web is an extremely flexible medium. If you find the web, you will also find:
- Various output devices
- Different browsers with a different display of the same websites
- Different screen sizes and resolutions
- Hard-to-control font size
- Various add-ons and plugins
An output device for the web is any device that has an Internet connection. These are no longer just computers and notebooks, but also smartphones, tablets and even TVs, projectors and game consoles. The same website works for each of these devices. Since the share of mobile devices in the number of views for websites, in general, is steadily increasing, the focus today is on responsive design, a form of web design that adapts to the user’s device.
Different browsers and versions often display the same website slightly differently. Because these browsers are written by different teams of programmers. Most browsers today are open source and are developed by a large community. So-called bug bounties, the bounty hunt for bugs sponsored by well-known and large companies such as Google, make the browsers more secure for the end user. Not particularly popular is Internet Explorer, which even in its latest version deliberately ignores standards and is a thorn in the side of every web designer. While all popular browsers are available for every popular operating system, Internet Explorer is still only available for Windows. There aren’t many users who regret this, but for web designers, it means getting a Windows license or a PC running Windows to test a website.
---
Screen sizes, resolutions and fonts
Different devices offer different resolutions. The web designer usually does not know the screen sizes with which users will visit the site. Through so-called device tracking, he can find out which devices users have used to visit the site. Since screen sizes vary greatly, responsive design is popular today for websites that support a wide range of computers and smartphones at the same time. The measurement of a screen can be done with CSS Media Queries, or less often with JavaScript.
From this information about the resolution and the size of the available area, which is to be regarded as gross resolution, the space for the window frame of the browser, scroll bars, toolbars, and possibly displayed favourites bars must now be subtracted to get to the remaining space for the design. Modern browsers are increasingly reducing the space they require to have more space for websites. But on the other hand, there are extensions of the browsers, which can take up the created space again.
The same fonts are not available everywhere on different devices. The fonts depend on the one hand on the operating system (Windows, Apple, Linux), on the other hand on the installed programs. As a designer, you may have installed extra font packs. If so, then you have a computer that is quite atypical. Most other users only have standard fonts on their computers.
If you specify Proxima Nova as the font, and then view your page on a computer that does not have that font, the font that developers and users have defined as the default font for the browser will be used instead. On Windows, it is traditionally the serif font Times, on Linux and in exotic browsers, other fonts may be set by default. It therefore make sense not to require a specific font, but to specify a list of fonts: if the first font on the list is not installed, the second is used, then the third :
1 2 3 | Verdana, Tahoma, Arial, Helvetica, sans-serif; "Times New Roman", Georgia, Times, serif; "Courier New", Courier, monospace; |
However, there are methods to use custom fonts on web pages, even if the user has not installed them. To use a font in this way, you need a license, sometimes for a fee, because fonts are protected by copyright. This is no joke – even if it’s just the alphabet, it’s still designed in a specific, appealing way by a graphic designer. Font designers, or in the language of Internet font designers, spend many hours full of detailed work on the design of a font because errors in the design can be seen in the typeface. Prices for a font range from free to several thousand dollars. Free fonts can be found, for example, on Fontsquirrel.com or in Google Web Fonts, where you can try out the fonts and also learn how you can use them on your website.
Even though CSS allows you to determine the sizes and ratios of fonts and other elements, it is ultimately the user who decides how large the appearance of the website is. People with low vision can make the font larger or zoom in on the website to view the website. For this reason, it is better to leave the line break to the browser. Depending on the font size and available space in the browser window, the browser will wrap the paragraphs into lines appropriately.
Additional programs, foreign formats and plugins
Any browser can render HTML and “plain text.” If the browser can display images, then images in the formats GIF and JPEG, some also PNG. The HTML5 standard also allows the display of SVG, a vector graphics format. SVG is an example of a file format that originally required a plugin to be loaded to render it. Over time, all popular browsers got SVG support and the plugin became obsolete.
Other formats (Microsoft Word, OpenOffice, CAD, 3D graphics, audio and video files, Flash, PDF, …) can also be integrated into a website. The browser can start additional programs to display these formats or has already integrated support for these formats. This is technically possible, although there are many arguments against embedding files.
To display file formats that the browser itself does not support, you must have software installed on your computer that can handle the format. This software may need to have a plugin installed for the browser. A website usually does not deliver both. OpenOffice, for example, is over 200 MB in size, which is also a lot for broadband DSL and is disproportionate to the presentation of a document. Also, plugins are notorious for having vulnerabilities offered along with a compromised file by malicious operators. Meanwhile, plugins for the Internet are losing importance. Google removed the Netscape Plugin API interface, which is used to operate plugins in the Chrome browser, from the browser some time ago. A serious security vulnerability, which allows taking control of the user’s computer, Adobe has closed their plugin Adobe Flash only after a few weeks. For smartphones and mobile devices, the most popular of all plugins are no longer supported.
If you consider all this and then come to the conclusion that it makes sense in a specific case, e.g. to integrate an Excel document into your website, then it is technically very simple: You set a link to the Excel file. If Excel is installed, the user may be offered to open the file. Otherwise, what’s going to happen won’t be any different from a simple download.
A special case of add-ons for web browsers is plugins. These take over the representation of a rectangular area within a web page. The most popular example is Adobe Flash mentioned above.
To Summarize
The output medium for a website cannot be generalized, fixed, or controlled. A few possible scenarios:
- Private users in the First World, who have a lot of money and always afford the latest hardware for the fun of the computer, always have the best possible Internet connection, and always use the latest software.
- Trend-conscious city dwellers who are on the move and surfing with notebooks and smartphones.
- Home theatre owners with a smart TV operated with a remote control or finger.
- Enterprise users who have to make do with what IT leaves them after firewalls and security restrictions.
- Customers of Internet cafes somewhere on this earth that own neither software nor hardware. What they find is perhaps a seven-year-old computer with equally old software and a CRT screen.
- Blind people who surf the web with a text-to-speech program or a Braille output line.
- People with red-green visual impairment who see the text and the images, but cannot distinguish between certain colours.
- People with limited fine motor skills who find it difficult to handle a mouse or people who generally appreciate the advantages of the keyboard and shortcuts.
As a web designer, not every group can be taken into consideration. However, a web designer must familiarize himself with the technological basis of the target group.
